/* EGRA shared page chrome: skip link, phone menu, appeal banner and dark mode.
   Linked on every content page by tools/site_chrome.py (after the page's own styles). */
/* ---- Skip link (keyboard / screen-reader users) ---- */
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:#fff;color:#0F2C1F;padding:10px 16px;border-radius:8px;font:700 14px var(--font);text-decoration:none;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.skip:focus{top:12px}

/* ---- Christmas appeal banner (home + events) ---- */
.appeal{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;justify-content:space-between;background:#FBF1E2;border:1px solid #EAD6B4;border-left:5px solid #C98A3C;border-radius:14px;padding:18px 20px;color:var(--ink);text-decoration:none}
.appeal .k{font:700 11px var(--font);letter-spacing:.14em;text-transform:uppercase;color:#9A6A24}

/* ---- Phone menu: the links fold behind a "Menu" button (needs /assets/nav.js;
   without JavaScript every link simply stays visible) ---- */
.menu-btn{display:none}
@media (max-width:640px){
  html.js .menu-btn{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;border-radius:3px;border:1.5px solid rgba(255,255,255,.4);background:transparent;color:#fff;font:700 13px var(--display);cursor:pointer}
  html.js .menu-btn svg{width:16px;height:16px}
  nav.nav .menu-btn,.topbar .menu-btn{order:1}
  nav.nav a.join,.topbar .signin{order:2}
  html.js nav.nav a.lnk{display:none}
  html.js nav.nav.open a.lnk{display:flex;flex-basis:100%;order:3;padding:10px 0;border-top:1px solid rgba(255,255,255,.14)}
  html.js .topbar .topnav{display:none}
  html.js .topbar.open .topnav{display:flex;flex-direction:column;order:3;flex-basis:100%;gap:0}
  html.js .topbar.open .topnav a{padding:10px 0;border-top:1px solid rgba(255,255,255,.14)}
  .topbar{flex-wrap:wrap}
}
@media (max-width:420px){
  html.js .menu-btn{padding:0 11px}
  nav.nav,.topbar{column-gap:10px}
  html.js .menu-btn .mt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ---- Dark mode: follows the phone/computer setting. Headers and footers are
   already dark; this re-tones the page body. :root:not(...) out-ranks the
   per-page :root tokens. Pages with fixed-colour widgets (the neighbourhood
   map) opt out with <html class="light-only">. ---- */
@media (prefers-color-scheme: dark){
  :root:not(.light-only){
    color-scheme:dark;
    --paper:#0F1512; --surface:#18211C; --ink:#E6ECE8; --ink-soft:#BCC6C0; --ink-faint:#A0AAA4;
    --line:#2D3832; --accent-soft:#16301F; --soft:#16301F; --accent-deep:#7ED6A6;
  }
  html:not(.light-only) .btn:hover,html:not(.light-only) .submit:hover{background:#0E5C38}
  html:not(.light-only) .btn.light{color:#0E5C38}
  html:not(.light-only) .appeal{background:#2B2318;border-color:#4C3C24;border-left-color:#C98A3C}
  html:not(.light-only) .appeal .k{color:#E6B872}
  html:not(.light-only) :is(input,select,textarea){color:var(--ink)}
}