/* Site header and menu bar (home, guide, area, stall and 404 pages). Loaded last.
   >=1100px: one row (logo, links, language, motion, Ko-fi).
   768-1099px: logo, language, motion, Ko-fi cup and a menu button; the links open in a panel.
   <768px: logo, Ko-fi cup and a menu button; links, language and motion open in the panel. */
:root #top .site-header{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;min-height:76px;padding-block:10px}
:root #top .site-header>.town-brand{flex:none;margin-right:auto;min-width:0}
:root #top .site-menu{display:flex;align-items:center;gap:10px}
:root #top .site-header .header-tools{margin-left:0;display:flex;align-items:center;gap:8px}
:root #top .site-header>.support-header{flex:none}

/* Links */
:root #top .site-header .site-nav{margin:0}
:root #top .site-nav ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
:root #top .site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border:2px solid transparent;border-radius:999px;color:var(--cake-ink);font:750 15px/1.15 var(--font);letter-spacing:.005em;text-decoration:none;white-space:nowrap;transition:background-color var(--cake-t-fast,120ms) ease,transform var(--cake-t-base,180ms) var(--cake-ease,ease)}
:root #top .site-nav a[aria-current]{background-color:var(--cake-icing-peach);background-image:var(--cake-sheen);border-color:#fff;box-shadow:inset 0 2px 0 #fff,0 3px 0 var(--cake-rim-peach)}
@media(hover:hover){:root #top .site-nav a:not([aria-current]):hover{background:rgba(255,255,255,.78);border-color:#fff;transform:translateY(-1px)}}
:root #top .site-nav a:focus-visible,:root #top .nav-toggle:focus-visible,:root #top .site-header>.town-brand:focus-visible{outline:3px solid var(--cake-focus);outline-offset:3px}

/* Menu button (hidden on wide screens, and when JavaScript is off) */
:root #top .nav-toggle{display:none;flex:none;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:2px solid #fff;border-radius:var(--cake-r-s);color:var(--cake-ink);cursor:pointer;
 background-color:var(--cake-icing-mint);background-image:var(--cake-sheen);box-shadow:inset 0 2px 0 #fff,0 4px 0 var(--cake-rim-mint),0 8px 14px rgba(110,48,96,.16);transition:transform var(--cake-t-base,180ms) var(--cake-ease,ease)}
:root #top .nav-toggle:active{transform:translateY(3px);box-shadow:inset 0 2px 0 #fff,0 1px 0 var(--cake-rim-mint)}
:root #top .nav-toggle .nav-close,:root #top .nav-toggle[aria-expanded=true] .nav-bars{display:none}
:root #top .nav-toggle[aria-expanded=true] .nav-close{display:inline}

@media(max-width:1099.98px){
 :root #top .site-header.nav-ready .nav-toggle{display:inline-flex}
 /* The Ko-fi button shows its cup only; the label stays for screen readers. */
 :root #top .site-header .support-header{width:44px;height:44px;padding:0;gap:0}
 :root #top .site-header .support-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
 :root #top .site-header.nav-ready .site-menu{display:contents}
 :root #top .site-header.nav-ready .site-nav{display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:60;width:min(340px,100%);padding:10px;border:3px solid #fff;border-radius:var(--cake-r-l);
  background-color:#fff6f9;background-image:var(--cake-sheen);box-shadow:inset 0 2px 0 #fff,0 6px 0 var(--cake-rim-peach),0 18px 30px rgba(110,48,96,.24)}
 :root #top .site-header.nav-open .site-nav{display:block}
 :root #top .site-header .site-nav ul{flex-direction:column;align-items:stretch;gap:4px}
 :root #top .site-header .site-nav a{display:flex;min-height:48px;padding:0 16px;border-radius:var(--cake-r-m);font-size:17px;white-space:normal}
}

@media(max-width:767.98px){
 :root #top .site-header{gap:8px;min-height:72px}
 :root #top .site-header.nav-ready .site-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;flex-direction:column;align-items:stretch;gap:10px;padding:10px;border:3px solid #fff;border-radius:var(--cake-r-l);
  background-color:#fff6f9;background-image:var(--cake-sheen);box-shadow:inset 0 2px 0 #fff,0 6px 0 var(--cake-rim-peach),0 18px 30px rgba(110,48,96,.24)}
 :root #top .site-header.nav-open .site-menu{display:flex}
 :root #top .site-header.nav-ready .site-nav{display:block;position:static;width:auto;padding:0;border:0;background:none;box-shadow:none}
 :root #top .site-header.nav-ready .header-tools{justify-content:flex-start;gap:12px;padding:10px 6px 2px;border-top:2px dashed rgba(155,47,107,.22)}
 /* Inside the panel the language lists open in place instead of floating. */
 :root #top .site-header.nav-ready :is(.flag-options,.lang-menu ul){position:static;margin-top:8px;box-shadow:inset 0 2px 0 #fff,0 3px 0 var(--cake-rim)}
 :root #top .site-header.nav-ready .header-tools:has(.flag-options:not([hidden]),.lang-menu[open]){flex-wrap:wrap}
 :root #top .site-header.nav-ready .header-tools :is(.flag-picker,.lang-menu):has(.flag-options:not([hidden]),ul){flex:1 1 100%}
 :root #top .site-header.nav-ready .header-tools .lang-menu:not([open]){flex:none}
}

/* Without JavaScript the links wrap under the logo instead of hiding. */
@media(max-width:1099.98px){
 :root #top .site-header:not(.nav-ready){flex-wrap:wrap}
 :root #top .site-header:not(.nav-ready) .site-menu{order:5;flex:1 1 100%;flex-wrap:wrap}
 :root #top .site-header:not(.nav-ready) .site-nav ul{flex-wrap:wrap}
}

/* Guide links on the home pages: one line and a button each. */
:root #top .guide-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:34px}
:root #top .guide-cards.single{grid-template-columns:minmax(0,1fr)}
:root #top .guide-card{display:flex;align-items:center;gap:16px;padding:18px 20px;border:3px solid #fff;border-radius:var(--cake-r-l);color:var(--cake-ink);
 background-color:#fff6f9;background-image:var(--cake-sheen);box-shadow:inset 0 2px 0 #fff,0 6px 0 var(--cake-rim-c,var(--cake-rim-peach)),0 14px 24px rgba(110,48,96,.14)}
:root #top .guide-card-before{--cake-rim-c:var(--cake-rim-mint);background-color:#effbf6}
:root #top .guide-card-phrases{--cake-rim-c:var(--cake-rim-lilac);background-color:#f5f0ff}
:root #top .guide-card>img{flex:none;width:72px;height:72px;filter:drop-shadow(0 4px 4px rgba(110,48,96,.18))}
:root #top .guide-card-copy{flex:1 1 auto;min-width:0}
:root #top .guide-card h2{margin:0 0 4px;font:650 22px/1.2 var(--display);color:var(--cake-berry)}
:root #top .guide-card p{margin:0;font-size:15px;line-height:1.45;color:var(--cake-ink-muted)}
:root #top .guide-card .guide-button{flex:none}
@media(max-width:1099.98px){:root #top .guide-cards{grid-template-columns:minmax(0,1fr)}}
@media(max-width:767.98px){
 :root #top .guide-cards{gap:14px;margin-top:22px}
 :root #top .guide-card{flex-wrap:wrap;padding:16px}
 :root #top .guide-card>img{width:56px;height:56px}
 :root #top .guide-card-copy{flex-basis:calc(100% - 72px)}
 :root #top .guide-card .guide-button{flex:1 1 100%}
}

@media(prefers-reduced-motion:reduce){:root #top :is(.site-nav a,.nav-toggle){transition:none}}
@media(forced-colors:active){:root #top .site-nav a[aria-current]{border-color:Highlight}}
@media print{:root #top :is(.nav-toggle,.site-nav){display:none!important}}
