/* --- accessibility (shared chrome) --- */
.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--rust);color:var(--on-accent);padding:.7rem 1.1rem;border-radius:0 0 8px 0;font-weight:700;text-decoration:none}
.skip-link:focus{left:0}

/* ---- nav ---- */
/* Header: brand left, utilities + hamburger menu right (links collapse into a menu via JS) */
/* The bar spans the full viewport width; the side padding keeps the brand and the
   menu button lined up with the 980px content column (same 1.5rem minimum gutter as .wrap). */
nav{--nav-gutter:max(1.5rem, calc((100% - 980px) / 2));
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.85rem var(--nav-gutter);width:100%;margin-inline:0;
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);}
nav .brand{display:flex;align-items:center;gap:.6rem;font-family:"Newsreader";font-weight:600;color:var(--forest);text-decoration:none}
.brand-by{font-weight:400;font-size:var(--fs-body);color:var(--muted)}
nav .brand svg{width:34px;height:34px}
nav .btn{padding:.6rem 1.2rem}

/* ════ additions for the current content + theme switcher ════ */
nav .nav-right{display:flex;align-items:center;gap:.7rem}
.theme-picker{position:relative;display:inline-flex;align-items:center;border-radius:999px;z-index:0}
.theme-picker::before{content:'';position:absolute;inset:-1.5px;border-radius:999px;background:var(--rainbow);z-index:-1;opacity:.6;transition:opacity .2s}
.theme-picker:hover::before,.theme-picker:focus-within::before{opacity:1}
.theme-select{appearance:none;-webkit-appearance:none;cursor:pointer;font-family:"Atkinson Hyperlegible Next";font-weight:700;font-size:var(--fs-small);color:var(--muted);background:var(--card);border:none;border-radius:999px;padding:.5rem 1.9rem .5rem 1rem;margin:0}
.theme-picker::after{content:'▾';position:absolute;right:.7rem;top:50%;transform:translateY(-50%);font-size:.7rem;color:var(--muted);pointer-events:none}
.theme-select option{color:#111;background:#fff}
/* one-click toggle (injected by mymadrich.js; hides the dropdown and its caret) */
.theme-picker.is-toggle .theme-select{display:none}
.theme-picker.is-toggle::after{display:none}
.theme-toggle{appearance:none;-webkit-appearance:none;cursor:pointer;font-family:"Atkinson Hyperlegible Next";font-weight:700;font-size:var(--fs-small);color:var(--muted);background:var(--card);border:none;border-radius:999px;padding:.5rem 1rem;margin:0;min-height:36px;white-space:nowrap}
.theme-toggle:hover{color:var(--forest)}

/* disclaimer + footer */
.emergency{padding:2.6rem 0 1.4rem;text-align:center}
.emergency h2{font-size:var(--fs-head);font-weight:600;margin-bottom:.25rem}
.emerg-sub{color:var(--muted);margin:0 auto 1.8rem}
.emerg-list{list-style:none;padding:0;margin:0 auto;max-width:900px;display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1rem}
.emerg-card{display:flex;flex-direction:column;gap:.85rem;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.25rem 1.1rem;box-shadow:var(--shadow)}
.emerg-name{font-weight:700;color:var(--ink);line-height:1.3}
.emerg-actions{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:auto}
.emerg-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.5rem 1.05rem;border-radius:999px;background:var(--rust);color:var(--on-accent);font-weight:700;text-decoration:none;white-space:nowrap;transition:filter .15s,background .15s,color .15s}
.emerg-btn.ghost{background:transparent;color:var(--rust);border:1.5px solid var(--rust)}
.emerg-btn:hover,.emerg-btn:focus-visible{filter:brightness(1.06);text-decoration:none}
.emerg-btn.ghost:hover,.emerg-btn.ghost:focus-visible{background:var(--rust);color:var(--on-accent)}
.disclaim{text-align:center;color:var(--muted);padding:1.2rem;border-top:1px solid var(--line)}
.disclaim strong{color:var(--ink)}

@media(max-width:760px){
  nav .brand span{display:none}
  /* FIX: nav touch target */
  nav .btn{padding:.85rem 1.4rem;min-height:44px;display:inline-flex;align-items:center}
}
/* FIX: small phone breakpoint (iPhone SE 375px, Galaxy A 360px) */
@media(max-width:400px){
  nav .btn{display:none}
}

/* Page links: inline by default (no-JS fallback). mymadrich.js adds .has-menu,
   which collapses them into a hamburger dropdown at every width. */
nav .nav-links{display:flex;align-items:center;gap:1.3rem;list-style:none;margin:0;padding:0;font-family:"Atkinson Hyperlegible Next";font-weight:700;font-size:var(--fs-label)}
nav .nav-links a{color:var(--muted);text-decoration:none;padding:.2rem 0;border-bottom:2px solid transparent;transition:color .2s ease,border-color .2s ease}
nav .nav-links a:hover{color:var(--forest)}
nav .nav-links a[aria-current="page"]{color:var(--forest);border-bottom-color:var(--rust)}

/* Hamburger toggle (injected by JS) */
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--forest);cursor:pointer;transition:border-color .2s ease,color .2s ease}
.nav-toggle:hover,nav.menu-open .nav-toggle{border-color:var(--rust);color:var(--rust)}
.nav-toggle svg{width:22px;height:22px;display:block}

/* Collapsed dropdown mode (JS active) */
nav.has-menu .nav-links{position:absolute;top:calc(100% - .15rem);right:var(--nav-gutter);flex-direction:column;align-items:stretch;gap:.1rem;min-width:212px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:.5rem;display:none;z-index:60}
nav.has-menu.menu-open .nav-links{display:flex}
nav.has-menu .nav-links a{padding:.6rem .85rem;border-radius:9px;border-bottom:none}
nav.has-menu .nav-links a:hover{background:var(--bg-deep);color:var(--forest)}
nav.has-menu .nav-links a[aria-current="page"]{color:var(--rust);background:color-mix(in srgb, var(--rust) 9%, transparent)}
