/* Header v2: centred logo, links split either side, one hairline under it.
   Owner 2026-09-24 ("itd have to be done on all pages"), taken from the careers build's header
   (C:\Users\a3moo\Desktop\Test\akila-careers-quiet, .nav rules in assets/quiet.css).
   Linked LAST in <head> on every page so it wins over the page's own nav rules and akila-chrome.css.
   Desktop and tablet-landscape only (>= 901px, the site's existing collapse point). Under 901px the
   existing header (logo + burger) and the owner-approved mobile menu are untouched.
   The Book button keeps its element, href, data-cta/data-service and the ruling 9 behaviour
   (quiet outline at the very top, solid yellow once #nav.scrolled is set). */

/* privacy, terms, accessibility and 404 use .sr-only ("opens in a new tab") without defining it, so the
   text showed inside their Book buttons. The standard visually-hidden rule; identical on pages that have it. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (min-width: 901px) {
  :root { --nav-h: 85px; }  /* 84px bar + 1px hairline, the same total as the careers header */

  #nav,
  #nav.scrolled {
    height: var(--nav-h);
    background: var(--paper, #faf6ee);
    border-bottom: 1px solid var(--grey-border, #e5ddcd);
    box-shadow: none;
  }

  #nav .nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 24px;
    width: 100%;
    max-width: calc(1240px + 2 * clamp(20px, 5vw, 64px));
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 64px);  /* gutter, max width and link gaps match the careers header */
  }

  /* Left: Services, Pricing, Results. Right: About, Contact, Careers, then the Book button. */
  #nav .nav-links {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.4vw, 36px);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #nav .nav-links--left { grid-column: 1; justify-self: start; }
  #nav .nav-right {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.4vw, 36px);
  }

  #nav .nav-logo {
    grid-column: 2;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0;
  }
  #nav .logo-img {
    width: 116px;
    height: auto;
    transform: none;
    filter: none;
  }
  #nav .nav-logo:hover .logo-img { opacity: .8; transform: none; }

  /* Quiet links: 14px, open tracking, 1px underline that draws in on hover and marks the current page. */
  #nav .nav-links > li > a,
  #nav .nav-dropdown-trigger {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .04em;
    color: var(--text);
    min-height: 44px;
    padding: 0;
  }
  #nav .nav-links > li > a:hover,
  #nav .nav-dropdown-trigger:hover { color: var(--dark); }
  #nav .nav-links > li > a::after,
  #nav .nav-dropdown-trigger::after {
    height: 1px;
    bottom: 11px;
    background: currentColor;
  }
  #nav .nav-links > li > a[aria-current="page"],
  #nav .nav-item-dropdown:has([aria-current="page"]) .nav-dropdown-trigger { color: var(--dark); }
  #nav .nav-links > li > a[aria-current="page"]::after,
  #nav .nav-item-dropdown:has([aria-current="page"]) .nav-dropdown-trigger::after { transform: scaleX(1); }
  #nav .nav-dropdown-panel a[aria-current="page"] { color: var(--dark); background: var(--grey-light, #f3eee4); }

  /* Services panel hangs just under the hairline. */
  #nav .nav-dropdown-panel { padding-top: 19px; }
  #nav .nav-dropdown-panel-inner { border-radius: var(--radius-lg); }

  /* Book button: same element and tracking, sized to the quieter bar. */
  #nav .nav-cta.btn {
    min-height: 44px;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .01em;
    border-radius: var(--radius-md);
    white-space: nowrap;
  }
}

/* Home only: the owner-approved woven rail (56px, drawn above the header at 1241-1600px) needs 24px of
   clear space before "Services". Symmetric, so the logo stays centred. */
@media (min-width: 1241px) and (max-width: 1600px) {
  body:has(.hero-persian-rail) #nav .nav-inner { padding: 0 80px; }
}
/* Home only, 1601px+: the brick vignette is drawn above the header too, and its visible wall is about
   20.8% of its height (100dvh - 56px). Keep 24px clear of it; wide screens keep the careers alignment. */
@media (min-width: 1601px) {
  body:has(.hero-persian-vignette) #nav .nav-inner {
    max-width: none;
    padding: 0 max(calc((100% - 1240px) / 2), calc(0.208 * (100dvh - 56px) + 24px));
  }
}

/* Tighter spacing where the bar is narrowest, so the logo stays centred. */
@media (min-width: 901px) and (max-width: 1099px) {
  #nav .nav-inner { column-gap: 16px; padding: 0 clamp(20px, 3.2vw, 64px); }
  #nav .nav-links, #nav .nav-right { gap: 18px; }
  #nav .nav-cta.btn { padding: 0 16px; }
}

/* Under 901px the split lists and the Book button stay hidden, exactly as before. */
@media (max-width: 900px) {
  #nav .nav-right { display: none; }
}