/* ============================================================================
   COR SITE NAV — styles

   Everything the shared nav bar, its dropdowns, the site search and the mobile
   drawer need. Pairs with:
     · Website/build/nav-template.html  (the markup — edit the nav there)
     · assets/cor-nav.js                (hamburger + search behaviour)

   REQUIRES assets/cor.css to be linked FIRST — this file uses its tokens
   (--ink, --paper, --surface, --rule, --space-*, --step-*, --radius-*,
   --shadow-2, --dur, --ease) and its .wrap / .btn primitives.

   Load order in <head>:
     <link rel="stylesheet" href="/assets/cor.css">
     <link rel="stylesheet" href="/assets/cor-nav.css">
     ...then the page's own <style>

   A page's own CSS comes last so it can still override the nav if it must —
   but if you find yourself doing that, the fix probably belongs in here.
============================================================================ */


/* ─────────────────────────────────────────
   NAV BAR
   Structure is load-bearing: the site search reads its index straight out of
   these dropdowns, so the .nav-item / .nav-trigger / .dropdown-item hierarchy
   has to stay exactly as it is. See cor-nav.js.
───────────────────────────────────────── */
/* Scoped to the site bar. A bare `nav` selector also caught the footer link
   columns once they became labelled <nav> landmarks, giving them a stray
   hairline and, worse, position:sticky. Several pages still carry their own
   bare `nav {}` rules — those must be deleted as each page is migrated, or
   they will fight this. */
nav[aria-label="Main"] {
  position: sticky; top: 0; z-index: 200;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
nav[aria-label="Main"] .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: 68px; }
.nav-logo { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; color: var(--ink); }
.nav-logo img { height: 38px; width: auto; display: block; }
.nav-logo:hover { color: var(--ink); }
/* The brand set in type, so the header carries the name at a readable size
   rather than relying on a 44px mark with an unreadable tagline in it. */
.nav-wordmark {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-1); letter-spacing: -0.025em;
  line-height: 1; white-space: nowrap;
}
.nav-cta { flex-shrink: 0; }

.nav-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-trigger {
  display: flex; align-items: center; gap: 5px;
  padding: 0.5rem 0.7rem;
  font-family: var(--font-body); font-size: calc(var(--step-0) * 0.94); font-weight: 600;
  line-height: 1;
  color: var(--ink-2); background: transparent; border: none;
  border-radius: var(--radius-sm); white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-trigger:hover { color: var(--ink); background: var(--surface); }
.nav-trigger svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.nav-item:hover .nav-trigger svg { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute; top: calc(100% + 8px); left: 50%;
  background: var(--paper); border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  min-width: 264px; padding: var(--space-2);
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  pointer-events: none;
}
/* Transparent bridge so hover survives the gap between trigger and menu. */
.nav-dropdown::after { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: all;
}
.dropdown-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase; color: var(--ink-3); padding: var(--space-2) var(--space-3) var(--space-1); }
.dropdown-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); transition: background var(--dur) var(--ease); }
.dropdown-item:hover { background: var(--surface); }
.dropdown-item-icon {
  width: 28px; height: 28px; border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 700; flex-shrink: 0;
  /* One tint for all of them. The old build gave every item a different
     decorative colour, which taught the eye nothing. */
  background: var(--blue-wash); color: var(--blue);
}
.dropdown-item-name { font-size: var(--step--1); font-weight: 600; color: var(--ink); line-height: 1.3; }
.dropdown-item-desc { font-size: 0.72rem; color: var(--ink-3); line-height: 1.35; }

.nav-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }


/* ─────────────────────────────────────────
   SEARCH
   Also used, at a larger size, inside the homepage clinical content section.
───────────────────────────────────────── */
.nav-search-wrap { position: relative; }
.nav-search-input {
  width: 200px; padding: 0.45rem 0.8rem 0.45rem 2rem;
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
  font-size: var(--step--1); background: var(--surface); color: var(--ink);
  outline: none;
  transition: width var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.nav-search-input::placeholder { color: var(--ink-3); }
.nav-search-input:hover { border-color: var(--ink-3); }
.nav-search-input:focus { width: 250px; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }
.nav-search-icon { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; stroke: var(--ink-3); fill: none; stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.search-results {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--paper); border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  width: min(420px, calc(100vw - 2 * var(--gutter)));
  max-height: 420px; overflow-y: auto; display: none; z-index: 300;
}
.search-results.visible { display: block; }
.search-group-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase; color: var(--ink-3); padding: var(--space-3) var(--space-4) var(--space-1); }
.search-result-item { display: block; padding: var(--space-2) var(--space-4); transition: background var(--dur) var(--ease); }
.search-result-item:hover { background: var(--surface); }
.search-result-name { font-size: var(--step--1); font-weight: 600; color: var(--ink); }
.search-result-meta { font-size: 0.72rem; color: var(--ink-3); }
.search-no-results { padding: var(--space-5) var(--space-4); text-align: center; font-size: var(--step--1); color: var(--ink-3); }


/* ─────────────────────────────────────────
   HAMBURGER + MOBILE DRAWER
───────────────────────────────────────── */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 0 10px;
  background: transparent; border: 1px solid var(--rule); border-radius: var(--radius-sm);
}
.nav-hamburger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.nav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; }
.nav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-drawer {
  display: none; position: fixed; top: 68px; left: 0; right: 0; bottom: 0;
  background: var(--paper); z-index: 199; overflow-y: auto;
  padding: var(--space-5) var(--gutter);
  border-top: 1px solid var(--rule);
}
.mobile-drawer.open { display: block; }
.mobile-section-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase; color: var(--ink-3); padding: var(--space-5) 0 var(--space-2); }
.mobile-section-label:first-child { padding-top: 0; }
.mobile-nav-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-1); border-bottom: 1px solid var(--rule); font-size: var(--step-0); font-weight: 600; color: var(--ink); }
.mobile-nav-item .dropdown-item-icon { width: 26px; height: 26px; font-size: 0.62rem; }
.mobile-drawer-actions { padding-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }


/* ─────────────────────────────────────────
   GHOST BUTTON
   Lives here rather than in cor.css because the nav, the drawer and
   auth/auth-ui.js are the only things that use it — and auth-ui.js runs on
   every page, so it has to travel with the nav.
───────────────────────────────────────── */
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  padding: 0.45rem 1rem;
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-ghost:hover { background: var(--surface); border-color: var(--ink-3); }
.btn-ghost-lg { padding: 0.7rem 1.3rem; font-size: var(--step-0); }


/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
/* The bar carries a primary button as well as the menu, search and log in, so
   it runs out of room earlier than it used to. Collapsing at 1000px left 180px
   of horizontal overflow at 1024. */
@media (max-width: 1150px) {
  .nav-menu, .nav-search-wrap { display: none; }
  .nav-hamburger { display: flex; }
}

/* The wordmark goes before the CTA does — the brand name sits beside its own
   mark, so it is the most redundant thing in the bar. */
@media (max-width: 1000px) {
  .nav-wordmark { display: none; }
}

@media (max-width: 620px) {
  /* Log in is still in the drawer. On a phone the bar keeps the one action
     that matters to someone who has not been here before. */
  .nav-actions .btn-ghost { display: none; }
  .nav-cta { padding: 0.45em 0.8em; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-trigger, .nav-trigger svg, .nav-dropdown, .dropdown-item,
  .nav-search-input, .search-result-item, .nav-hamburger span, .btn-ghost {
    transition: none;
  }
}
