/* G. Mend-Ooyo — Version A "Sun-bleached steppe". Header, footer, the
   vertical-script margin rail, and the page-end seal. Ported from
   design-system/ui_kits/website/Chrome.jsx, which sets
   these parts with inline React styles. This file gives the same rules
   as CSS classes, so the Nunjucks partials in src/_includes/steppe/ can
   use plain class names. styles.css (the token entry file) is loaded
   first; this file reads its custom properties only. */

/* Skip link */
.mo-skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--flame-1);color:#FFFFFF;padding:10px 16px;border-radius:0 0 var(--radius-sm) 0}
.mo-skip:focus{left:0}

/* Page wrapper: gives the margin rail a positioning context */
.mo-page{position:relative;min-height:100vh;background-color:var(--surface-page)}

/* Vertical-script margin rail, left of the whole page */
.mo-margin{position:absolute;left:0;top:0;bottom:0;width:var(--gutter-page);pointer-events:none;z-index:40}
.mo-margin__col{position:sticky;top:0;height:100vh;display:grid;grid-template-rows:1fr auto 1fr;justify-items:center}
.mo-margin__center{grid-row:2;display:flex;flex-direction:column;align-items:center;gap:18px}
.mo-margin__mark{width:22px;height:auto;opacity:.9;transform:translateX(-3px)}
.mo-margin__seal{grid-row:3;align-self:end;margin-bottom:28px;width:30px;height:auto;opacity:.9}

/* Header */
/* Owner instruction 2026-09-16: the header stays visible on scroll, as
   flame's .mf-nav does. Sticky, with the page background so content
   does not show through. Owner feedback 2026-09-22: the header was too
   tall, so the padding is smaller; the text sizes do not change. */
/* The sticky header is 91px high above 1000px wide. Sticky columns start below it. */
:root{--mo-sticky-top:calc(91px + 32px)}
.mo-nav{position:sticky;top:0;z-index:50;background-color:var(--surface-page);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:var(--space-8);row-gap:var(--space-5);padding:12px var(--gutter-page) 10px;border-bottom:1px solid var(--border-hairline)}
/* Owner feedback 2026-09-22: the 40px offset that cleared the rail's
   flame logo is gone with the logo, so the brand aligns with the page
   gutter as the footer does. A title line (site.hero.title_*) sits
   under the brand word. Owner feedback 2026-09-22: the brand word is
   larger (was 1.5rem) and uses the height the smaller padding gave back. */
.mo-nav__brand{display:flex;align-items:center;gap:14px;background-image:none;border-bottom:0}
.mo-nav__mark{height:36px;width:auto}
.mo-nav__text{display:flex;flex-direction:column;gap:2px}
.mo-nav__word{font-family:var(--font-display);font-size:2.5rem;line-height:1.1;color:var(--text-strong);letter-spacing:var(--tracking-display);white-space:nowrap}
.mo-nav__title{font-family:var(--font-ui);font-size:var(--text-caption);color:#A06417;white-space:nowrap}
.mo-nav__burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:none;color:var(--text-strong);cursor:pointer}
.mo-nav__burger span{display:block;width:18px;height:1px;background-color:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
.mo-nav__links{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap}
.mo-nav__link{font-family:var(--font-ui);font-size:var(--text-ui-md);color:var(--text-muted);white-space:nowrap;padding-bottom:4px;border-bottom:2px solid transparent;background-image:none;transition:var(--transition-color)}
.mo-nav__link:hover{color:var(--text-strong)}
.mo-nav__link.is-active{color:var(--text-strong);border-bottom-color:var(--flame-1)}

/* Language switch: a slash-separated pair, as in components/navigation/LanguageSwitch.jsx */
.mo-lang{display:inline-flex;align-items:center;gap:var(--space-3)}
.mo-lang__sep{color:var(--border-strong)}
.mo-lang__item{font-family:var(--font-ui);font-size:var(--text-label);letter-spacing:var(--tracking-label);color:var(--text-faint);background-image:none;border-bottom:1px solid transparent}
.mo-lang__item:hover{color:var(--text-strong)}
.mo-lang__item.is-active{color:var(--text-strong);border-bottom-color:var(--flame-1)}

@media (max-width:1000px){
  /* Owner feedback 2026-09-22: at 1000px and below the links collapse
     behind a burger, as flame's .mf-nav does. The threshold was 900px;
     the larger brand word pushed the language switch to a second row
     near 900px, and the Mongolian row needs approximately 960px. The open panel drops below the
     sticky header as one row (owner feedback 2026-09-22: not a stack, with less padding). The one-row shrinking rule from 2026-09-16 is gone. */
  .mo-nav{flex-wrap:nowrap;column-gap:var(--space-5)}
  .mo-nav__brand{margin-right:auto;min-width:0}
  .mo-nav__title{white-space:normal}
  .mo-nav__word{font-size:1.875rem}
  .mo-nav__burger{order:4}
  .mo-nav__burger{display:inline-flex}
  .mo-nav__links{display:none}
  .mo-nav__link{font-size:clamp(0.6875rem,3.05vw,var(--text-ui-md));flex-shrink:0}
  .mo-nav.is-open .mo-nav__links{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:clamp(8px,2.6vw,var(--space-5));position:absolute;left:0;right:0;top:100%;padding:var(--space-3) var(--gutter-page) var(--space-4);background-color:var(--surface-page);border-bottom:1px solid var(--border-hairline);box-shadow:0 12px 24px rgba(0,0,0,.08)}
}
/* Owner feedback 2026-09-22: the rail hides at the same 1000px width
   where the burger and the full-width layout start (was 700px). */
@media (max-width:1000px){
  .mo-margin{display:none}
}

/* Page-end seal, ported from Chrome.jsx PageEnd(); shown once, just
   above the footer, on every page */
.mo-page-end{display:flex;justify-content:center;padding:var(--space-9) 0 var(--space-7)}
.mo-page-end__seal{height:72px;width:auto}

/* Footer */
.mo-foot{border-top:1px solid var(--border-hairline);padding:var(--space-7) var(--gutter-page) var(--space-6)}
.mo-foot__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}
.mo-foot__grid > div{display:flex;flex-direction:column;gap:var(--space-4)}
.mo-foot__grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.mo-foot__grid a{font-family:var(--font-text);font-size:var(--text-body-md);color:var(--text-body);background-image:none;border-bottom:0}
.mo-foot__grid a:hover{color:var(--text-link-hover)}
.mo-foot__base{display:flex;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--border-hairline);font-family:var(--font-ui);font-size:var(--text-caption);color:var(--text-faint)}

@media (max-width:700px){
  .mo-foot__grid{grid-template-columns:1fr}
}