/* ============================================================
   MSR — shared nav fixes.  Load LAST in <head>, after the
   page's own <style> block.  Uses the site's existing tokens
   (--paper, --ink, --line, --bronze) so nothing changes visually
   on desktop.  Nothing here is a redesign — it only makes the
   mobile menu work and makes every page behave the same.
   ============================================================ */


/* ---- 0. THE HEADER MUST BE A POSITIONING CONTEXT ------------
   The mobile panel is position:absolute; top:100%, which only
   resolves against a positioned ancestor. Six pages declared
   `header{background;border-bottom}` with no position at all —
   practitioner-application, brand-educator-application, privacy,
   terms, code-of-ethics and editorial-cynthia-johnson. On those,
   top:100% resolved against the page instead of the bar, so the
   panel rendered a full screen down and off-view: the ☰ flipped
   to × and nothing appeared. Sticky here matches what the other
   pages already do and keeps the nav reachable. */
header {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* ---- 1. AUTH FLASH -----------------------------------------
   Every page ships Log in, Become a Pro member, My Vault and
   Log out at once; Memberstack hides the wrong ones after it
   loads.  Until it answers, hide them all.  Once .ms-ready is
   set (see the JS) this rule stops applying entirely and
   Memberstack's own show/hide takes over — no !important war. */
html:not(.ms-ready) [data-ms-content] { display: none !important; }

/* ---- 2. ONE MOBILE BREAKPOINT ------------------------------
   Was: 680 / 760 / 860 / 920 / 1120 depending on the page, and
   on five pages the rule was `display:none` with no menu at all. */
@media (max-width: 1120px) {

  .nav .navlinks,
  .nav .links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper, #F7F1E8);
    border-bottom: 1px solid var(--line, #DBCDBA);
    padding: 6px 0 20px;
    box-shadow: 0 16px 30px rgba(36,23,18,.14);

    /* THE STUCK MENU FIX.
       The panel had no height limit and no scrolling, so on a phone
       the last items sat below the fold with no way to reach them.
       dvh (not vh) because iOS Safari's vh excludes the URL bar. */
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .nav .navlinks.open,
  .nav .links.open { display: flex; }

  /* Undo the old `a:not(.btn){display:none}` rules that removed
     navigation entirely on editorial, partnerships and vault. */
  .nav .navlinks a,
  .nav .links a {
    display: block !important;
    padding: 14px 28px;
    font-size: 16px;
    align-self: stretch;
    margin: 0;
    border-bottom: 1px solid rgba(36,23,18,.06);
  }
  .nav .navlinks a:last-child,
  .nav .links a:last-child { border-bottom: 0; }

  .nav .navlinks .btn,
  .nav .links .btn {
    margin: 12px 28px 0;
    text-align: center;
    font-size: 15px; padding: 14px 18px;
    border-bottom: 0;
  }

  .menu-toggle {
    display: block !important;
    flex: none; margin-left: 12px;
    background: none; border: 0; cursor: pointer;
    font-size: 26px; line-height: 1;
    color: var(--ink, #241712);
    width: 44px; height: 44px;      /* real tap target */
    padding: 0;
  }
}

@media (min-width: 1121px) {
  .menu-toggle { display: none !important; }
}




@media (min-width: 1121px) {
/* ---- 2b. DESKTOP NAV BASE ----------------------------------
   MUST stay inside a min-width query: `header .nav .navlinks` beats
   the mobile `.nav .navlinks{display:none}` on specificity, so
   unscoped it forces the panel open on phones and the toggle stops
   working entirely.
   Some pages never had a nav, so they have no `.navlinks` rules
   at all — the links rendered as default underlined browser text
   (practitioner-application, brand-educator-application, the
   standalone editorials). These are BASE styles: any page that
   already defines its own .navlinks/.links wins on specificity
   or source order, so nothing that looked right changes.
   Fallback values are given because the editorial pages use a
   different palette (--ink #2A1A12 / #4A3D33, --paper #FBF8F1). */
header .nav .navlinks,
header .nav .links {
  display: flex;
  align-items: center;
  gap: 22px;
}
header .nav .navlinks > a,
header .nav .links > a {
  font-family: Karla, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  text-decoration: none;
  color: var(--ink-soft, var(--ink, #3a2a21));
  transition: color .15s;
}
header .nav .navlinks > a:hover,
header .nav .links > a:hover { color: var(--bronze-deep, var(--bronze, #8C5F30)); }

/* The two account buttons, on pages with no .btn rule of their own. */
header .nav .navlinks > a.btn,
header .nav .links > a.btn {
  background: var(--bronze, #B5824A);
  color: var(--ink, #241712);
  border: 1px solid var(--bronze, #B5824A);
  border-radius: 2px;
  font-weight: 600;
  text-decoration: none;
}
}

/* ---- 3. DESKTOP BAR CONSISTENCY ----------------------------
   Every page declares its own .btn — 13px/10px-15px on index,
   15px/14px-28px on for-professionals, 15px/16px-32px on the
   application pages, and so on. Only index.html ever scoped it
   down for the header, so "Become a Pro member" rendered much
   larger on every other page and pushed the bar out of shape.
   Pin the header's own buttons to one size everywhere.
   !important because the markup carries an inline padding. */
.nav .links .btn,
.nav .navlinks .btn {
  font-size: 13px !important;
  padding: 10px 16px !important;
  line-height: 1.25;
  border-radius: 2px;
}

/* Two-word items — Safety Check, For Pros, Become a Pro member —
   were wrapping onto a second line when the bar ran out of room. */
.nav .links > a,
.nav .navlinks > a { white-space: nowrap; }

/* Between the breakpoint and a roomy desktop, tighten spacing
   rather than letting the items squeeze and wrap. */
@media (min-width: 1121px) and (max-width: 1400px) {
  .nav .links, .nav .navlinks { gap: 16px; }
  .nav .links > a, .nav .navlinks > a { font-size: 13.5px; }
}


/* ---- 4. HEADER BAR GEOMETRY --------------------------------
   The bar is a different width and the wordmark a different size
   on almost every page, which is why the nav "spreads" differently
   as you move around:

     index, safety-check   --maxw 1180px
     editorial, for-pros,
     partnerships, shop,
     vault, privacy        --maxw 1140px
     our-mission           .wrap max-width 820px
     brand font-size       21px on index & privacy, 19px elsewhere,
                           17px on our-mission
     logo height           46px, except 42px on safety-check
     bar height            74px / 72px / 70px

   Scoped to `header` so page content keeps its own measure — only
   the bar is normalised. */
header .wrap,
header .nav {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
header .nav { height: 74px; }

/* The wordmark was allowed to shrink and wrap onto two lines, which
   is what pushes the links around. It should never do either. */
header .brand {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 19px;
}
header .brand img { height: 44px !important; }

@media (max-width: 620px) {
  header .brand { font-size: 15px; }
  header .brand img { height: 34px !important; }
}

/* Anchor targets sit under the 74px sticky header without this, so
   #directory / #join / #tiers would land with the heading hidden. */
html { scroll-padding-top: 84px; }

/* No scroll lock. The rule that used to live here (overflow:hidden, and
   before that position:fixed on <body>) is what froze the page. The panel
   fills the viewport and has overscroll-behavior:contain, which is enough.
   The class name is kept only so the JS watchdog can strip any stale copy. */

/* ---- 5. THE MAGAZINE BACK LINK -----------------------------
   Editorial features read as magazine pieces, not site pages.
   They keep their own cover art and carry exactly one control:
   a way back to the registry. Colour is inherited so it works
   on any of the editorial palettes, and unlike the old
   .cover-nav it is NOT hidden on small screens — on a phone it
   is the only way off the page. */
.msr-back {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-left: auto;
  font-family: Karla, system-ui, -apple-system, sans-serif;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  opacity: .7;
  white-space: nowrap;
  padding: 12px 0;          /* tap target */
  transition: opacity .15s;
}
.msr-back:hover,
.msr-back:focus-visible { opacity: 1; }

@media (max-width: 760px) {
  .msr-back { font-size: 11px; letter-spacing: .08em; }
  .msr-back .msr-back__long { display: none; }   /* shortens to "← Registry" */
}
