/* MeerLock — the one site navigation (piece P31).
 *
 * Linked by all fourteen pages. The markup it draws is rendered by
 * backend/scripts/lib/site-nav.mjs and stamped by `make site-nav`; this file is the other half of
 * "one definition" — before P31 the bar was typed into fourteen pages AND styled in fourteen inline
 * <style> blocks, which is how six different navigations came about.
 *
 * It styles only what P31 added: the way home, the "you are here" marks, the two-row bar a phone
 * needs, and the in-page jump row that moved out of the navigation and into the page body. Colours,
 * fonts, the header itself and the .btn rules stay in each page, where they already are.
 *
 * The pages link this file BEFORE their own <style>, so a page can still override anything here.
 */

/* ---------------------------------------------------------------- the bar, on a wide screen ----*/

/* The three links are wrapped in .nav-links so a phone can move them to a row of their own. On a
   wide screen the wrapper must not exist as far as layout is concerned: `display:contents` leaves
   the links as direct flex children of <nav>, exactly as they were before this piece. */
.site-nav .nav-links{display:contents}

/* "The Burrow" is the site's name, not a word that means home, so the item reads `Home · The
   Burrow`: the plain word first, at full strength, the name beside it. */
.site-nav .nav-sub{opacity:.75;font-weight:400} /* P43: .75, not .55 - 6.7:1 instead of 4.1:1 at 14.4px */

/* A Thai page linking to a page that has no Thai twin says so, rather than switching language
   silently (the convention P27 set in the Thai footers). */
.site-nav .nav-en{opacity:.55;font-size:.85em}

/* The owner's words were "clear on how to go back", so the way home carries an arrow — drawn in CSS
   so the markup of all fourteen pages stays identical, and dropped on the homepage itself, where
   pointing back at the page you are on would be nonsense. */
.site-nav .nav-home::before{content:"\2190";margin-right:7px;opacity:.75;line-height:1}
.site-nav .nav-home[aria-current="page"]::before{content:none}

/* ------------------------------------------------------------------------------ you are here ----*/

/* Two marks, and the difference between them is a promise to a screen reader:
   `aria-current="page"` is only ever on an item whose destination IS this page, and
   `data-nav-section="current"` is the same visible state with no such claim — it is what a guide,
   the legal pages and the customer pages wear on the packs button, because that is the part of the
   site they belong to. */
.site-nav a.link{position:relative}
.site-nav a.link[aria-current="page"],
.site-nav a.link[data-nav-section="current"]{color:#fff}
.site-nav a.link[aria-current="page"]::after,
.site-nav a.link[data-nav-section="current"]::after{content:"";position:absolute;left:0;right:auto;bottom:-6px;width:100%;height:2px;border-radius:2px;background:var(--gold,#E3B448)}
.site-nav a.link[data-nav-section="current"]::after{opacity:.55}

.site-nav .nav-cta{position:relative}
.site-nav .nav-cta[aria-current="page"]{background:rgba(227,180,72,.14);color:var(--gold-soft,#F1CE7E);border:1px solid rgba(227,180,72,.5);box-shadow:none}
.site-nav .nav-cta[aria-current="page"]:hover{filter:none;transform:none;background:rgba(227,180,72,.2)}
.site-nav .nav-cta[data-nav-section="current"]::after{content:"";position:absolute;left:16px;right:16px;bottom:-7px;height:2px;border-radius:2px;background:var(--gold,#E3B448);opacity:.7}

/* -------------------------------------------------------------------------------- on a phone ----*/

/* Before P31 eleven pages carried `nav a.link{display:none}` below 640-700px: on a phone the site
   navigation did not exist at all and the logo was the only way off the page — which is exactly
   where the owner got lost. Those declarations are gone, and the bar becomes two rows instead:
   row 1 the logo, the language-and-currency control and the CTA, row 2 the links, centred.
   `display:contents` on <nav> lets its children join the bar's own flex row, so the links can take
   a full-width row without the bar overflowing.
   burrow.html, index.html and th/burrow.html are skipped: their whole nav is an off-canvas drawer
   at that width and they are marked `nav-drawer` for exactly this reason. */
@media(max-width:960px){
  /* `column-gap` is set, not only `row-gap`: measured at 390px, logo 79 + control 88 + CTA 148 came
     to 363px against a 359px container on the 24px gap four pages carry, so the CTA fell onto a row
     of its own and the header stood 154px tall. At 14px everything but the links is one row again. */
  .nav-wrap:not(.nav-drawer){flex-wrap:wrap;row-gap:9px;column-gap:14px}
  .nav-wrap:not(.nav-drawer) nav.site-nav{display:contents}
  .nav-wrap:not(.nav-drawer) .nav-links{display:flex;order:3;width:100%;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 20px}
  .nav-wrap:not(.nav-drawer) .nav-links a.link{font-size:.85rem}
  /* P43 touch targets: row 2's links measured 57-122 x 16px. 10px of padding makes each a 36px-tall
     target and the equal negative margin keeps every link, the row and the header exactly where they
     were; the "you are here" underline moves down by the same 10px so it stays under the word. */
  .nav-wrap:not(.nav-drawer) .nav-links a.link{padding:10px 4px;margin:-10px -4px}
  .nav-wrap:not(.nav-drawer) .nav-links a.link::after{bottom:4px}
  .nav-wrap:not(.nav-drawer) .nav-sub{display:none}
  /* The header is two rows tall here, so an in-page jump must stop that much further down.
     `:root` rather than `html` so it outranks the pages' own `html{scroll-padding-top:90px}`. */
  :root{scroll-padding-top:124px}
}

/* A PHONE, where the row has to hold three things in 294 to 345px of container. The logo and the CTA
   give up the few pixels that keep that row whole down to a 320px screen (an iPhone SE): 61 + 80 +
   120 + 28 of gap = 289. Both are scoped away from the drawer pages, whose header P29 measured and
   this piece does not touch. Without this the CTA takes a third row and the header grows to 154px —
   taller than the 120px account.html and downloads.html leave above their first section. */
@media(max-width:560px){
  .nav-wrap:not(.nav-drawer) .brand img{height:34px}
  .nav-wrap:not(.nav-drawer) .nav-cta{padding:10px 15px;font-size:.82rem}
  .nav-wrap:not(.nav-drawer) .nav-links{gap:6px 16px}
  .nav-wrap:not(.nav-drawer) .nav-links a.link{font-size:.82rem}
}

/* ------------------------------------------------------------- the page's own jumps, in body ----*/

/* `#bundles`, `#catalog` and `#toolkit` are useful on a long page and are NOT site navigation: they
   used to fill the packs page's bar, which is why that page had no way out. They live here now. */
.page-jumps{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;width:min(1160px,92%);margin:0 auto;padding:4px 0 10px}
.page-jumps a{font-size:.84rem;color:var(--gray,#8B99AF);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:7px 15px;transition:.25s}
.page-jumps a:hover,.page-jumps a:focus-visible{color:#fff;border-color:rgba(227,180,72,.55);background:rgba(227,180,72,.1)}

/* ------------------------------------------- the chooser sits left of the CTA, on EVERY page ----*/

/* P35. The owner: "why on homepage the currency and language menu is after the big button while on
   other pages it's before?" — and they were right. On the twelve ordinary pages this module stamps
   the chooser INSIDE <nav>, between the links and the CTA. On the three drawer pages it cannot live
   there: below 1000px that whole <nav> becomes an off-canvas panel, and P29 exists because a
   currency control you have to open a menu to find is no control at all. So it sat after </nav> —
   and since the CTA is the last thing inside <nav>, "after the nav" means "right of the button".

   The chooser now sits BEFORE <nav> in the markup instead, so it precedes the button everywhere and
   the reading order matches the visual order. `margin-left:auto` moves from <nav> to the chooser so
   the whole right-hand group still hugs the right edge; below 1000px <nav> is out of flow entirely
   and the same declaration keeps the chooser beside the hamburger, exactly where P29 put it.

   Not done, and measured rather than assumed: pulling the CTA out of the drawer would have matched
   the other pages exactly, links-chooser-CTA. At 390px that bar needs 360px inside a 359px
   container, and at 320px it is 36px over even at the tightest gap this stylesheet uses. The button
   stays in the drawer on those three pages, so the chooser sits left of the links there and right
   of them elsewhere. Unifying that means giving the homepage the two-row bar the other twelve have,
   which is a design change for the owner to want, not one to slip in behind a spacing fix. */
.nav-wrap.nav-drawer nav.site-nav{margin-left:0}
.nav-wrap.nav-drawer .ml-chooser{margin-left:auto}

/* ------------------------------------------------------------ site-wide, every page (P43) ----*/

/* Thai has no capitals, and letter-spacing pulls its vowel and tone marks away from their
   consonants: every page's uppercase, tracked eyebrow label is set plain in Thai. Two classes'
   worth of specificity, so it holds against each page's own `.eyebrow` rule, linked after this. */
:lang(th) .eyebrow{letter-spacing:0;text-transform:none}

/* Thai type (owner decision Q10): Prompt for headings and Noto Sans Thai for body text, requested by every
   Thai page in its Google Fonts link. Each Latin family stays FIRST in its stack, so Latin text keeps
   Poppins / Inter exactly as in English and only the Thai glyphs, which those two do not have, fall through
   to the Thai face. Written ONCE here, for every Thai page: `:root:lang(th)` outranks each page's own
   `:root` tokens, which are linked after this file. --hand is the homepage's handwritten accent (Caveat has
   no Thai either). */
:root:lang(th){--head:'Poppins','Prompt',sans-serif;--body:'Inter','Noto Sans Thai',sans-serif;--hand:'Caveat','Prompt',cursive}

/* Reduced motion also means no smooth scrolling: every page sets `html{scroll-behavior:smooth}`
   and none turned it off. `:root` outranks those `html` rules, as scroll-padding-top does above. */
@media (prefers-reduced-motion:reduce){:root{scroll-behavior:auto}}

/* Touch targets in the footers (measured 25-52 x 16px): on a touch screen each footer link gets
   8px more hit area above and below. An inline link's vertical padding moves no line, and the
   horizontal 2px is taken back by the margin, so no footer changes its layout. */
@media (pointer:coarse){footer a{padding:8px 2px;margin:0 -2px}}