/* Custom Property Lightbox styles */
#property-lightbox {
  z-index: 10000 !important;
}

/* ===== Navbar =====
   Lives here, with the rest of the navbar chrome, because every page renders a
   navbars/_navbar_* partial. It used to sit in home.css, which meant the hover
   colour only worked on pages that happened to load the home stylesheet. */
.navbar-link:hover {
  color: #ff4f00 !important;
}

/* The page you are on. Weight plus a short brand underline — reads on both
   the transparent-over-hero state and the solid scrolled state. */
.navbar-link[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #ff4f00;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ===== Navbar logo =====
   navbars/_navbar_home stacks both lockups in one slot. The blue-font image is
   the in-flow one and sizes the slot; the white-font image lies on top of it
   and only shows where the page passed on_dark: true AND the bar is still
   transparent. Once navbar_controller adds .navbar-scrolled the bar is white,
   so the blue lockup fades back in. The other navbars render a single image
   and never match these selectors. */
.navbar-logo {
  position: relative;
  display: inline-block;
}

.navbar-logo-blue,
.navbar-logo-white {
  transition: opacity 300ms ease;
}

.navbar-logo-white {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.navbar-logo--on-dark .navbar-logo-blue {
  opacity: 0;
}

.navbar-logo--on-dark .navbar-logo-white {
  opacity: 1;
}

#navbar.navbar-scrolled .navbar-logo--on-dark .navbar-logo-blue {
  opacity: 1;
}

#navbar.navbar-scrolled .navbar-logo--on-dark .navbar-logo-white {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .navbar-logo-blue,
  .navbar-logo-white {
    transition: none;
  }
}

/* ===== Awards trust band =====
   Lives here rather than in a per-page stylesheet because shared/_awards_scroll
   renders on every marketing page, and those pages no longer share one CSS file. */
.stat-asterisk {
  margin-left: 1px;
  font-size: 0.5em;
  vertical-align: super;
  line-height: 0;
}

.awards-stats-note {
  margin: 0 0 20px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: #475569; /* AA at 12px; #94a3b8 was 2.5:1 */
}

/* ===== Animated Hamburger Menu ===== */
.hamburger {
  width: 22px;
  height: 16px;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

/* Open state - X animation */
.hamburger-open .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger-open .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger-open .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu animation */
#mobile-menu {
  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 0;
  transform: translateY(-10px);
}

#mobile-menu.menu-open {
  opacity: 1;
  transform: translateY(0);
}

#mobile-menu.hidden {
  display: none;
}