/* ============================================================================
   FREE 2B ME - canonical site header and mobile menu
   ----------------------------------------------------------------------------
   One header system for every normal global page, homepage included. Deliberately
   NOT applied to the Book 1 landing page or the preserved Sovereignty audit tool,
   both of which carry their own navigation on purpose.

   Mobile: brand on the left, MENU on the right, and a full warm-white panel.
   Chosen over a visible wrapped nav because nine routes at 44px targets consumed
   roughly 39% of a 390x844 screen before the page title.

   Depends only on tokens defined identically in hub.css and the homepage's inline
   block: --ground --cream --teal --line --line2 --faint --muted --serif --sans
   --magenta --purple.
   ========================================================================== */

/* ---- brand lockup ------------------------------------------------------- */
/* Composition is phoenix mark + "Tanya Hicks". The mark is a recognisable brandmark
   beside the name, not the full arced lockup squeezed into a header.

   SURFACE-CONTEXT ASSETS. Two explicit slots, switched by surface rather than trying
   to make one file work everywhere.

   Light  -> free-to-be-me-phoenix-light.png  (charcoal body, full-colour strokes)
   Dark   -> free-to-be-me-phoenix-dark.png   (cream body, full-colour strokes)

   Both are the phoenix brandmark only, cropped from the approved artwork with no
   recolouring - the composition here is phoenix + "Tanya Hicks", not the full arced
   lockup squeezed into a header. The complete lockups remain available as
   free-to-be-me-logo-light.png and free-to-be-me-logo.png. */
:root{
  --brand-mark-light:url('/assets/free-to-be-me-phoenix-light.png');
  --brand-mark-dark:url('/assets/free-to-be-me-phoenix-dark.png');
  --brand-mark:var(--brand-mark-light);
}
.dark{ --brand-mark:var(--brand-mark-dark) }

.brand{display:inline-flex;align-items:center;gap:12px}
.brand::before{
  content:"";flex:0 0 auto;display:block;
  width:46px;height:39px;                 /* 1010x859 source, ratio preserved */
  background:var(--brand-mark) center/contain no-repeat;
}
@media (max-width:860px){ .brand::before{width:41px;height:35px} }

/* ---- MENU trigger ------------------------------------------------------- */
.menu-open{
  display:none;align-items:center;gap:10px;
  background:none;border:0;cursor:pointer;padding:10px 2px;min-height:44px;
  font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.menu-open .bars{display:block;position:relative;width:22px;height:12px;flex:0 0 auto}
.menu-open .bars::before,.menu-open .bars::after,.menu-open .bars i{
  content:"";position:absolute;left:0;width:22px;height:1.5px;
  background:var(--teal);border-radius:2px;
}
.menu-open .bars::before{top:0}
.menu-open .bars i{top:5px;display:block}
.menu-open .bars::after{top:10px}
.menu-open:hover,.menu-open:focus-visible{color:var(--cream)}
.menu-open:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

@media (max-width:860px){
  .menu-open{display:inline-flex}
  /* Scoped to the header. The footer uses .navlinks too, and an unscoped rule took
     the footer navigation off every interior page on mobile. */
  header .navlinks{display:none !important}
}

/* ---- the panel ---------------------------------------------------------- */
.menu-panel{
  position:fixed;inset:0;z-index:200;background:var(--ground);
  display:flex;flex-direction:column;padding:20px 22px 34px;
  opacity:0;visibility:hidden;transition:opacity .26s ease;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.menu-panel[data-open="true"]{opacity:1;visibility:visible}
.menu-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.menu-panel-wordmark{
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}
.menu-close{
  background:none;border:0;cursor:pointer;min-height:44px;padding:10px 2px;
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.menu-close:hover,.menu-close:focus-visible{color:var(--cream)}
.menu-close:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

.menu-list{display:flex;flex-direction:column}
/* One active-state system: teal, heavier, and a marker rule. No item becomes an
   oversized button inside the menu - that was the inconsistency being fixed. */
.menu-list a{
  font-family:var(--serif);font-size:clamp(25px,7.2vw,31px);line-height:1.14;
  color:var(--cream);text-decoration:none;font-weight:400;
  min-height:44px;padding:14px 0;border-bottom:1px solid var(--line2);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.menu-list a:hover{color:var(--teal)}
.menu-list a:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:4px}
.menu-list a[aria-current="page"]{color:var(--teal);font-weight:600}
.menu-list a[aria-current="page"]::after{
  content:"";flex:0 0 28px;height:2px;background:var(--teal);border-radius:2px;
}
/* the restrained phoenix line */
.menu-accent{
  height:2px;margin-top:26px;border-radius:2px;flex:0 0 auto;
  background:linear-gradient(90deg,var(--magenta) 0%,var(--teal) 55%,var(--purple) 100%);
  opacity:.55;
}
@media (min-width:861px){ .menu-panel{display:none} }
@media (prefers-reduced-motion:reduce){ .menu-panel{transition:none} }