/* ===== Site navigation =====

   One file owns the nav. Before 2026-09-27 these rules were copy-pasted into 13
   places (12 inline <style> blocks plus answers.css), three of which had already
   drifted, so the mobile nav could only be fixed 13 times and would drift again.

   Desktop is a hover/focus dropdown, unchanged. Below 768px it used to become a
   centre-aligned wrapped row of all 13 links with the group labels and dividers
   hidden, which read as ragged rows of 1, 3, 3, 2, 1, 3, 1. That threw away the
   structure the desktop nav already has, in the one place it mattered most, and
   left tap targets under the 44px floor. Below 768px it is now a disclosure: a
   Menu button, and a grouped vertical list with the labels kept. */

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

/* aria-current came along for the ride. Seven of the thirteen copies styled
   .nav-link[aria-current="page"] and answers.css styled none, so /answers was
   the only page whose own nav link was not marked. One rule, every page. */
.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--primary);
  background: var(--bg-elevated);
}

/* CSS-only dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { color: var(--text-muted); text-decoration: none; font-size: 0.875rem; font-weight: 500; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); transition: color var(--transition-fast), background-color var(--transition-fast); display: flex; align-items: center; gap: 6px; cursor: default; background: none; border: none; font-family: inherit; }
.nav-dropdown-toggle i { font-size: 0.625rem; transition: transform var(--transition-fast); }
.nav-dropdown:hover .nav-dropdown-toggle, .nav-dropdown:focus-within .nav-dropdown-toggle { color: var(--primary); background: var(--bg-elevated); }
.nav-dropdown:hover .nav-dropdown-toggle i, .nav-dropdown:focus-within .nav-dropdown-toggle i { transform: rotate(180deg); }
.nav-dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-2); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast); z-index: 200; }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-menu a { display: block; padding: var(--space-2) var(--space-3); color: var(--text-muted); text-decoration: none; font-size: 0.875rem; font-weight: 500; border-radius: var(--radius-md); transition: color var(--transition-fast), background-color var(--transition-fast); }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus, .nav-dropdown-menu a[aria-current="page"] { color: var(--primary); background: var(--bg-elevated); }
.nav-dropdown-divider { height: 1px; background: var(--border); margin: var(--space-2) 0; }
.nav-dropdown-menu .nav-dropdown-label { display: block; padding: var(--space-2) var(--space-3); font-size: 0.6875rem; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; }

/* "Services" is spelled by the toggle button on desktop, which is hidden on
   mobile, so the first four links would sit under no heading at all. This span
   carries that heading on mobile only.

   It also carries .nav-dropdown-label, whose base rule is written as
   .nav-dropdown-menu .nav-dropdown-label. A bare .nav-group-heading loses to
   that on specificity and the heading shows on desktop too, which is what
   happened the first time. Match the weight, and sit after it. */
.nav-dropdown-menu .nav-group-heading { display: none; }

/* The Menu button does not exist on desktop. */
.nav-toggle { display: none; }

@media (max-width: 768px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
  }

  /* nav.js writes data-nav-open on init. Until it has, the button would be a
     control that does nothing, so it is not shown. */
  .header-inner:not([data-nav-open]) .nav-toggle { display: none; }

  .nav-toggle:hover,
  .nav-toggle[aria-expanded="true"] {
    color: var(--primary);
    background: var(--bg-elevated);
  }

  .nav-toggle i { font-size: 0.875rem; }

  /* Full width, so the wrap drops it onto its own row, and last, so the top
     row is the same three items whether the panel is open or shut.

     order:1 is the only override, and it is load-bearing. With none at all the
     CTA gets pushed below the open panel, which drags the Menu button 223px
     across the header the moment you tap it: the control moves out from under
     the finger that just pressed it, and a second tap to close lands on
     nothing. Keeping the CTA on the top row pins the button.

     What that costs is that focus runs button, panel, CTA while the paint runs
     button, CTA, panel. That is the ordinary disclosure shape, a control
     followed by the region it controls, and it also fixes the real ordering
     bug this replaced, where the CTA was painted BEFORE the Menu button and
     focused after it. */
  .nav {
    order: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: var(--space-3);
    margin-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
  }

  /* Collapsed only once the script says so. Hiding by default instead would
     mean a blocked or failed nav.js leaves a phone with no navigation at all,
     which is worse than the wrapped row this replaced. display:none, not
     opacity, so a shut panel is out of the tab order and the a11y tree. */
  .header-inner[data-nav-open="false"] .nav { display: none; }

  /* 44px is the tap-target floor, and full-width rows mean the target is the
     row rather than the word. */
  .nav-link,
  .nav-dropdown-menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    font-size: 0.9375rem;
  }

  /* The dropdown is a plain section of the one list here. There is no hover on
     a touch screen, and nesting a second disclosure inside the first would put
     the four service pages two taps deep. */
  .nav-dropdown { position: static; }
  .nav-dropdown-toggle { display: none; }

  .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: flex;
    flex-direction: column;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    min-width: 0;
  }

  /* The dropdown's last group heading is COMMUNITY, and the links that follow
     the dropdown are not in it. Nothing in the markup says where that group
     stops, so this closes it. */
  .nav-dropdown + .nav-link {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
  }

  /* Kept, not hidden. These are what make 13 links scannable. */
  .nav-dropdown-menu .nav-group-heading,
  .nav-dropdown-menu .nav-dropdown-label {
    display: block;
    /* --space-1 was not in the token scale when this was written. An
       undefined custom property inside a shorthand invalidates the whole
       declaration, so it silently produced padding: 0 and the headings sat
       flush left with no gap above them. chrome.css defines it now. */
    padding: var(--space-4) var(--space-3) var(--space-2);
  }

  .nav-dropdown-divider { display: block; }
}

/* A phone at 360px cannot hold the wordmark, the CTA and the Menu button. The
   logo mark and its aria-label carry the brand; the words come back at 521px. */
@media (max-width: 520px) {
  .header-inner > .logo .logo-text { display: none; }
  .nav-toggle { padding: var(--space-2) var(--space-3); }
}