/* ==========================================================================
   Layout — site header, primary nav, mobile nav drawer, footer
   ========================================================================== */

/* Each top-level section gets its own stacking context so any sticky
   element inside it (sticky images, sticky cards) is painted and clipped
   within that section's bounds only — without this, a stuck sticky element
   paints above the *previous* section's static content as you scroll past
   the boundary between them, since positioned elements always paint after
   non-positioned flow content within a shared stacking context. */
main > section {
  isolation: isolate;
}

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-navy-800);
  transition: transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.site-header.is-scrolled {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

/* Slides the header off the top of the viewport on scroll-down; JS only
   toggles this once scrolled past the header's own height, so the navbar
   never hides while the top of the page is still in view. */
.site-header.is-hidden {
  transform: translateY(-100%);
}

/* The gaps through this header (here, .site-header__brand-group,
   .primary-nav__list and .primary-nav__link's padding) are a step tighter
   than the rest of the site's rhythm. Six nav items, the logo and the two
   action buttons come to more than the 1280px container holds at the
   1300px breakpoint where the nav appears; at the wider spacing the last
   item ("Contact us") was pushed underneath the buttons. Tightening these
   four values buys the ~125px needed, so the nav still appears on every
   width it did before rather than retreating behind the hamburger. */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: var(--header-height);
  padding-inline: var(--container-pad);
  max-width: calc(var(--container-max) + (var(--container-pad) * 2));
  margin-inline: auto;
}

.site-header__brand-group {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-width: 0;
}

.logo {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 1.55rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}

.logo__mark {
  color: var(--color-white-off);
}

.logo__suffix {
  color: var(--color-gold-400);
}

.logo--footer {
  font-size: 1.7rem;
}

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  /* Flex row is nowrap by default, so this stops the row itself from
     wrapping to a second line — but a squeezed flex item can still wrap
     its own text internally. flex-shrink: 0 below is what actually
     guarantees that never happens. */
  flex-wrap: nowrap;
}

.primary-nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-pill);
  font-size: var(--fs-body);
  color: var(--color-white-off);
  /* A multi-word label ("Visa categories") is what would actually wrap:
     as a flex item it can shrink below its own text's natural width, and
     the text wraps inside it before the item itself gets that narrow.
     nowrap keeps the label on one line regardless of how tight the row
     around it gets, and flex-shrink: 0 stops it from shrinking into that
     state to begin with. */
  white-space: nowrap;
  flex-shrink: 0;
}

/* The color lives on this inner span rather than the link directly so the
   markup didn't need to change again when the underline that used to sit
   on this same span (a ::after sized to the text) was removed — hovering
   is color-only now. */
.primary-nav__link-text {
  color: inherit;
  transition: color var(--duration-base) var(--ease-standard);
}

.primary-nav__link:hover .primary-nav__link-text {
  color: var(--color-gold-300);
}

/* Current page. The markup already carried .is-active and aria-current on
   every page; nothing rendered them, so there was no way to tell where you
   were. Gold matches the hover colour, with an underline rule beneath so the
   state does not rely on colour alone. */
.primary-nav__link.is-active .primary-nav__link-text {
  color: var(--color-gold-300);
  font-weight: var(--fw-medium);
}

.primary-nav__link.is-active {
  position: relative;
}

.primary-nav__link.is-active::after {
  content: '';
  position: absolute;
  left: var(--space-xs);
  right: var(--space-xs);
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-gold-300);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* ---- Mobile nav toggle ---- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-white-off);
  border-radius: 2px;
  transition: transform var(--duration-base) var(--ease-standard), opacity var(--duration-base);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
  /* Fixed rather than the in-flow block it was: that let the drawer's
     height fall out of step with the viewport (short by however much its
     five links and two buttons came up under one screen, leaving page
     content visible beneath it) and let the page behind it keep scrolling.
     Pinned to the viewport and sized off it directly, the panel always
     reaches exactly to the bottom edge and the page underneath cannot
     show or move, at any scroll position. Starts below the header bar
     rather than at the very top, so the logo and close toggle stay where
     they already are. */
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  z-index: 100;
  background: var(--color-navy-800);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  padding: var(--space-md) var(--container-pad);
}

.mobile-nav__list a {
  display: block;
  padding: var(--space-md) 0;
  color: var(--color-white-off);
  font-size: var(--fs-body-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Current page in the drawer. */
.mobile-nav__list a[aria-current="page"] {
  color: var(--color-gold-300);
  font-weight: var(--fw-medium);
}

@media (max-width: 639px) {
  .mobile-nav__list a {
    font-size: var(--fs-body);
  }
}

.mobile-nav__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) var(--container-pad) var(--space-xl);
}

/* ---- Footer ---- */
.site-footer {
  background: var(--color-navy-800);
  color: var(--color-white-off);
  padding-block: var(--space-4xl) var(--space-xl);
}

/* The 64px desktop top padding otherwise reads as an oversized gap before
   the logo on a short screen. */
@media (max-width: 639px) {
  .site-footer {
    padding-top: var(--space-lg); /* 24px */
  }
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

@media (max-width: 639px) {
  .site-footer__top {
    padding-bottom: var(--space-lg); /* 24px, was 48px */
  }
}

.site-footer__brand {
  max-width: 400px;
}

.site-footer__tagline {
  margin-top: var(--space-lg);
  font-size: var(--fs-body-sm);
  color: var(--color-text-on-dark);
}

.site-footer__email {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  color: var(--color-gold-accent);
  font-size: var(--fs-body-sm);
}

.site-footer__email:hover .site-footer__email-label {
  text-decoration: underline;
}

.site-footer__columns {
  display: flex;
  gap: var(--space-4xl);
  flex-wrap: wrap;
}

/* Inter, not the display face the h1-h6 rule now sets: these are column
   labels for a link list rather than headings, and the comp sets them in
   the body face. */
.footer-nav h3 {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-white-off);
  margin-bottom: var(--space-md);
}

.footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-nav a {
  font-size: var(--fs-body-sm);
  color: var(--color-text-on-dark);
  transition: color var(--duration-fast);
}

.footer-nav a:hover {
  color: var(--color-white-off);
}

.footer-nav__external {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.icon-inline {
  flex-shrink: 0;
}

.site-footer__disclaimer {
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: #fafaf7d9;
  max-width: 800px;
  padding-block: var(--space-lg);
}

/* Tablet: narrower measure than the 800px desktop cap so lines stay a
   comfortable length as the column shrinks, wrapping naturally rather
   than stretching edge to edge. */
@media (max-width: 1023px) {
  .site-footer__disclaimer {
    max-width: 480px;
  }
}

/* Mobile: no cap needed — .container already drops to the sitewide 16px
   edge padding below 640px, so the text simply fills that column and
   wraps on its own. */
@media (max-width: 639px) {
  .site-footer__disclaimer {
    max-width: none;
  }
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--fs-body-sm);
  color: rgba(250, 250, 247, 0.72);
}

.site-footer__legal-links {
  display: flex;
  gap: var(--space-lg);
}

/* Same resting/hover direction as .footer-nav a above: muted by default,
   brightening on hover. These used to start at full white-off and dim to
   0.75 opacity, so they out-shouted the nav columns and then appeared to
   switch off when pointed at. */
.site-footer__legal-links a {
  color: var(--color-text-on-dark);
  transition: color var(--duration-fast);
}

.site-footer__legal-links a:hover,
.site-footer__legal-links a:focus-visible {
  color: var(--color-white-off);
}

/* Touch target sizing (WCAG 2.2 SC 2.5.8, 24x24 minimum).
   These footer links are 14-16px text, so their hit area came out around
   21px tall and they sit close together. Padding rather than a larger
   font keeps the footer looking the same while giving each link a target
   a fingertip can actually hit. Applied only on pointer-coarse screens so
   the desktop footer spacing is untouched. */
@media (pointer: coarse) {
  .footer-nav a,
  .site-footer__legal-links a,
  .site-footer__email {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding-block: var(--space-2xs);
  }

  .footer-nav li + li {
    margin-top: var(--space-2xs);
  }
}

/* ---- Responsive ---- */
@media (max-width: 1299px) {
  .primary-nav {
    display: none;
  }

  .site-header__actions {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }
}

/* Tablet band: the full nav and the "Attorney partnership" link stay
   hidden (same as the rest of the sub-1300px range above), but "Start free
   evaluation" reappears next to the hamburger. margin-right: auto on the
   brand group (rather than changing .site-header__inner's justify-content,
   which every breakpoint shares) absorbs the row's free space itself, so
   the button and toggle pack together on the right instead of the button
   drifting to the middle under the 3-item space-between above. */
@media (min-width: 768px) and (max-width: 1299px) {
  .site-header__brand-group {
    margin-right: auto;
  }

  .site-header__actions {
    display: flex;
  }

  .site-header__actions .btn--outline-light {
    display: none;
  }
}

/* Above the breakpoint the primary nav is back and the toggle that opens the
   drawer is gone, so a drawer left open while the window widened would sit
   stranded under the header. Hiding it here rather than in JS means the rule
   is the exact complement of the query above — no second breakpoint value to
   keep in step, and nothing to re-run on resize. */
@media not all and (max-width: 1299px) {
  .mobile-nav {
    display: none;
  }
}

@media (max-width: 640px) {
  .site-footer__top {
    flex-direction: column;
  }

  .site-footer__columns {
    /* Wrap alone only breaks a line once columns run out of room — with
       three columns that put the first two side by side and dropped only
       the third ("Company") to its own row, rather than stacking all
       three. Column direction puts every nav on its own row instead. */
    flex-direction: column;
    gap: var(--space-2xl);
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Legal links first, copyright last. Order rather than moving the
     markup, so reading order for assistive tech is unchanged — the
     copyright line is still announced where it sits in the document. */
  .site-footer__bottom > p {
    order: 1;
  }

  .site-footer__legal-links {
    flex-direction: column;
    gap: var(--space-sm);
  }
}