/* ============================================================
   MAJLIS, unified navigation metrics
   One font size, one bar height, one layout for every page's
   primary navigation. Colour / background stay per-page; this
   governs size, height, spacing and the 3-part grid only.
   Targets: index .nav, .site-nav, .c-nav, .m-nav,
            .story-nav, .jr-nav.  (Studio app toolbar excluded.)
   Canonical = the compact main-page spec.
   ============================================================ */

/* ---- Desktop: full unification ---- */
@media (min-width:901px){
  .nav:not([id]),
  .site-nav,
  .c-nav,
  .m-nav,
  .story-nav,
  .jr-nav{
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:1fr auto 1fr !important;
    align-items:center !important;
    gap:16px !important;
    min-height:46px !important;
    padding:6px clamp(18px,3vw,26px) !important;
  }

  /* Brand wordmark */
  .nav:not([id]) .mark,
  .site-nav .mark,
  .c-nav .mark,
  .m-nav .mark,
  .jr-nav .mark,
  .story-nav .story-mark{
    font-family:"Brandon Grotesque","Brandon Text","Avenir Next",Avenir,Archivo,system-ui,sans-serif !important;
    font-weight:800 !important;
    font-size:12px !important;
    line-height:1 !important;
    letter-spacing:.012em !important;
    text-transform:uppercase !important;
    min-height:33px !important;
    display:inline-flex !important;
    align-items:center !important;
    white-space:nowrap !important;
  }

  /* Centre link cluster */
  .nav:not([id]) .links,
  .site-nav .site-nav-links,
  .c-nav .links,
  .m-nav .links,
  .jr-nav .jr-nav-links,
  .story-nav .story-links{
    display:flex !important;
    justify-self:center !important;
    align-items:center !important;
    gap:13.5px !important;
    font-size:10.5px !important;
    font-weight:800 !important;
    letter-spacing:.16em !important;
    text-transform:uppercase !important;
  }

  /* Right-hand actions cluster */
  .nav:not([id]) .tools,
  .site-nav .site-nav-actions,
  .c-nav .tools,
  .m-nav .tools{
    display:flex !important;
    justify-self:end !important;
    align-items:center !important;
    gap:6px !important;
    font-size:10.5px !important;
    font-weight:800 !important;
    letter-spacing:.135em !important;
    text-transform:uppercase !important;
  }

  /* Link items, uniform hit height */
  .nav:not([id]) .links a,
  .site-nav .site-nav-links a,
  .c-nav .links a,
  .m-nav .links a,
  .jr-nav .jr-nav-links a,
  .story-nav .story-links a{
    min-height:33px !important;
    display:inline-flex !important;
    align-items:center !important;
    padding:0 1px !important;
  }
  .nav:not([id]) .tools a,
  .site-nav .site-nav-actions a,
  .c-nav .tools a,
  .m-nav .tools a{
    min-height:33px !important;
    display:inline-flex !important;
    align-items:center !important;
    padding:0 11px !important;
  }
}

/* ---- Mobile: one bar on every page ----
   Previously this block only unified the wordmark, so any page whose own CSS
   didn't style its nav fell back to raw block flow: the actions cluster wrapped
   under the wordmark at inherited 16px and collided. Mobile now gets the same
   full layout treatment as desktop - two columns, wordmark left, actions right. */
@media (max-width:900px){
  .nav:not([id]),
  .site-nav,
  .c-nav,
  .m-nav,
  .story-nav,
  .jr-nav{
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:1fr auto !important;
    align-items:center !important;
    gap:12px !important;
    min-height:46px !important;
    padding:6px 16px !important;
  }

  .nav:not([id]) .mark,
  .site-nav .mark,
  .c-nav .mark,
  .m-nav .mark,
  .jr-nav .mark,
  .story-nav .story-mark{
    font-family:"Brandon Grotesque","Brandon Text","Avenir Next",Avenir,Archivo,system-ui,sans-serif !important;
    font-weight:800 !important;
    font-size:12px !important;
    letter-spacing:.012em !important;
    line-height:1 !important;
    text-transform:uppercase !important;
    justify-self:start !important;
    display:inline-flex !important;
    align-items:center !important;
    white-space:nowrap !important;
  }

  /* Right-hand cluster: sits on one line, never wraps, same type as desktop. */
  .nav:not([id]) .tools,
  .site-nav .site-nav-actions,
  .c-nav .tools,
  .m-nav .tools{
    display:flex !important;
    justify-self:end !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
    font-size:10.5px !important;
    font-weight:800 !important;
    letter-spacing:.135em !important;
    text-transform:uppercase !important;
  }
  .nav:not([id]) .tools a,
  .site-nav .site-nav-actions a,
  .c-nav .tools a,
  .m-nav .tools a{
    font-size:10.5px !important;
    letter-spacing:.135em !important;
    min-height:32px !important;
    display:inline-flex !important;
    align-items:center !important;
    padding:0 !important;
    white-space:nowrap !important;
  }
}

/* The inline Meet / Log in links are hidden across the whole mobile range in
   majlis-mobile-menu.css, so the bar shows a single Menu button and the panel
   carries every destination. */

/* Footer service/explore links use the available width, never wrap to two lines */
.footer-col a{ white-space:nowrap !important; max-width:none !important; }

/* ============================================================
   Nav text contrast
   Nav text used to be white with mix-blend-mode:difference, which
   inverts whatever is behind it. That reads on light or dark but
   collapses to invisible over mid-greys (255-128 = 127 ≈ 128), and
   it made legibility depend on page content that varies per page.
   Instead the bar paints its own ivory surface. It stays translucent
   (you can see blurred content move behind it) but at 72% the ivory
   always dominates the blend, so the surface under the text is light no
   matter what scrolls beneath: pure black behind still resolves to about
   rgb(176,172,165), where wine measures ~6.9:1, and over ivory it is
   ~13.7:1. That is what makes a single wine ink safe everywhere - at 30%
   the surface could go dark, which forced an ink switch that sometimes
   guessed wrong and put ivory text on an ivory backdrop. These selectors
   carry real specificity, so they beat the zero-specificity :where()
   rules in the per-page font layer.
   ============================================================ */
nav.site-nav,
nav.nav:not([id]),
nav.c-nav,
nav.m-nav,
nav.story-nav,
nav.jr-nav{
  /* The bar stays pinned to the top of the viewport on every page. */
  position:sticky !important;
  top:0 !important;
  z-index:1000 !important;
  isolation:isolate;
  background:rgba(251,246,236,.72) !important;
  border-bottom:1px solid rgba(83,12,0,.14) !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.16);
  backdrop-filter:blur(10px) saturate(1.16);
}
/* A sticky element only sticks while its parent is in view, so a nav wrapped in
   a short container would scroll away. Keep the scroll container full-height. */
html:has(> body > nav.site-nav){scroll-padding-top:46px}
nav.site-nav > *,
nav.nav:not([id]) > *,
nav.c-nav > *,
nav.m-nav > *,
nav.story-nav > *,
nav.jr-nav > *{ position:relative; z-index:1; }

/* majlis-mirror-nav.js puts mix-blend-mode:difference on the bar itself and
   kills the backdrop. That is the same mid-grey failure at container level,
   so undo it here (0,2,1 beats the script's 0,1,1). */
nav.site-nav.mj-mirror-nav,
nav.nav.mj-mirror-nav,
nav.c-nav.mj-mirror-nav,
nav.m-nav.mj-mirror-nav,
nav.story-nav.mj-mirror-nav,
nav.jr-nav.mj-mirror-nav,
nav.site-nav.nav-on-dark,
nav.site-nav.nav-on-light,
nav.nav.nav-on-dark,
nav.nav.nav-on-light{
  mix-blend-mode:normal !important;
  background:rgba(251,246,236,.72) !important;
  border-bottom-color:rgba(83,12,0,.14) !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.16) !important;
  backdrop-filter:blur(10px) saturate(1.16) !important;
}
/* The reflected strip under the bar assumed a transparent nav; with an opaque
   bar it can only show through as a smudge, so retire it. */
#mj-live-mirror-root,.mj-live-mirror{ display:none !important; }

/* At 30% the bar no longer supplies its own contrast - whatever scrolls beneath
   shows through, and wine on a dark backdrop measures about 2:1. Several scripts
   toggle nav-on-dark / nav-on-light and disagree with each other, so the ink is
   driven by a single custom property that majlis-mirror-nav.js sets from a live
   sample of the backdrop. Falls back to wine if that script never runs. */
nav.site-nav :is(a,button,.mark,.story-mark),
nav.nav:not([id]) :is(a,button,.mark,.story-mark),
nav.c-nav :is(a,button,.mark,.story-mark),
nav.m-nav :is(a,button,.mark,.story-mark),
nav.story-nav :is(a,button,.mark,.story-mark),
nav.jr-nav :is(a,button,.mark,.story-mark){
  mix-blend-mode:normal !important;
  opacity:1 !important;
  color:var(--mj-nav-ink,#530c00) !important;
  /* No glow, no shadow: at 10-12px the type has to stay crisp. Legibility comes
     from the sampled ink switching colour, not from softening the letterforms. */
  text-shadow:none !important;
  -webkit-font-smoothing:antialiased;
}
/* The Menu button's outline is currentColor, so it tracks the same switch. */
nav.site-nav .mobile-menu-toggle,
nav.nav:not([id]) .mobile-menu-toggle{ border-color:currentColor !important; }
/* The mobile panel paints its own solid wine background, so its links
   must stay ivory regardless of what the bar behind it resolved to. */
.mobile-menu a{ mix-blend-mode:normal !important; color:#fbf6ec !important; }