/**
 * AM2027 — sticky header, brand lockup, primary navigation.
 */

.topbar{
  position:sticky;top:0;z-index:60;background:#fff;
  border-bottom:1px solid var(--line-soft);
}
.topbar-in{
  width:100%;padding:0 26px;height:var(--hdr);
  display:flex;align-items:center;gap:20px;
}

/* ---------- brand ---------- */
.brand{display:flex;align-items:center;gap:14px;flex:none}
.brand .logo{height:44px;width:auto;flex:none}
.brand .rule{width:1px;height:34px;background:var(--line)}
.brand .org{
  font-size:9.5px;line-height:1.35;letter-spacing:.07em;font-weight:600;
  color:var(--navy);max-width:150px;text-transform:uppercase;
}

/* ---------- primary nav ---------- */
/* Gap and the bar's side padding are the header's slack. They were tightened
   when the body type went up a point (§24) so the eight-item nav still fits a
   1366px laptop before nav.js collapses it to the drawer -- including the
   ~15px a classic Windows scrollbar takes off the client width. Collapse now
   happens just above 1300px. Widen any of these and that headroom goes. */
.nav{display:flex;align-items:center;gap:18px;margin-left:auto}
.nav a{
  font-size:16px;font-weight:500;color:var(--navy);
  padding:6px 0;position:relative;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;
  height:2px;background:var(--orange);transition:right .25s;
}
.nav a:hover::after,
.nav a:focus-visible::after,
.nav a.is-active::after{right:0}

.icon-btn{
  background:none;border:0;color:var(--navy);cursor:pointer;
  padding:6px;display:grid;place-items:center;
}
.icon-btn svg{width:18px;height:18px}
.burger{display:none}

/* ---------- collapsed nav ---------- */
/*
 * Keyed on `.topbar.is-collapsed`, which nav.js sets by measuring whether the
 * bar actually fits — not on a fixed breakpoint.
 *
 * A breakpoint cannot work here. The menu grew to eight items with long
 * labels; measured, the nav alone needs ~1080px and the whole bar ~1720px,
 * while the burger was set to appear below 1080px. Everything between those
 * two numbers overflowed, which is every laptop. Measuring also handles the
 * admin toolbar — which steals ~340px of page width that a viewport media
 * query cannot see — and any future change to the menu.
 */
/* Off-canvas drawer below the sticky bar. */
.topbar.is-collapsed .nav{
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  position:fixed;top:var(--hdr);left:0;right:0;
  max-height:calc(100dvh - var(--hdr));overflow-y:auto;
  background:#fff;border-bottom:1px solid var(--line-soft);
  box-shadow:0 18px 34px rgba(12,46,78,.13);
  padding:6px 0 12px;
  transform:translateY(-12px);opacity:0;visibility:hidden;
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.topbar.is-collapsed .nav.open{transform:translateY(0);opacity:1;visibility:visible}
.topbar.is-collapsed .nav a{
  font-size:16px;padding:14px 24px;
  border-bottom:1px solid var(--line-soft);white-space:normal;
}
.topbar.is-collapsed .nav a:last-child{border-bottom:0}
/* In the drawer the underline moves off the <a> and onto the label span.
   The <a> is a full-width block here, so its own ::after sat across the whole
   row -- and it was pinned to `top:50%` with a -9px shift, which put it above
   the words rather than under them. On the span it starts at nothing and
   grows to the width of the text. */
.topbar.is-collapsed .nav a::after{content:none}
.topbar.is-collapsed .nav-label{position:relative;display:inline-block}
.topbar.is-collapsed .nav-label::after{
  content:"";position:absolute;left:0;right:100%;bottom:-5px;
  height:2px;background:var(--orange);transition:right .25s;
}
.topbar.is-collapsed .nav a:hover .nav-label::after,
.topbar.is-collapsed .nav a:focus-visible .nav-label::after,
.topbar.is-collapsed .nav a.is-active .nav-label::after{right:0}
.topbar.is-collapsed .burger{display:grid;margin-left:auto}

/* nav.js flips `is-collapsed` off and on to measure the bar. That is a style
   change, so the drawer's transition fires and the closed panel visibly fades
   in and out on every resize. Transitions are suppressed for the duration of
   the read.

   This must sit *after* the drawer rules: it has the same specificity as
   `.topbar.is-collapsed .nav`, so source order is what decides. Placed before
   them, the drawer's transition wins and the flash persists. */
.topbar.is-measuring .nav{transition:none}

/* Without JavaScript nothing can measure the bar, and the burger could not
   open the drawer anyway. Let the bar wrap instead, so every link stays
   reachable rather than collapsing into a control that does nothing. */
html:not(.js) .topbar-in{height:auto;min-height:var(--hdr);flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
html:not(.js) .nav{flex-wrap:wrap;justify-content:flex-end;row-gap:6px}
html:not(.js) .burger{display:none}

@media(prefers-reduced-motion:reduce){
  .nav{transition:none}
}

@media(max-width:560px){
  .brand .org,.brand .rule{display:none}
  .topbar-in{gap:10px;padding:0 16px}
  .brand .logo{height:34px}
  .btn-sm{padding:10px 13px;font-size:12px;white-space:nowrap}
}

/* ---------- gradient bar ----------
   Sits between the header and the hero on the front page. A fixed 50px at
   every width, as specified; it carries no content, so nothing inside it has
   to fit. */
.brand-bar{
  height:3px;
  background:linear-gradient(90deg,#FF6A14 0%,#FFD700 100%);
}