/* Café 111: skip link, accessibility menu, cookie notice and the consent-gated map. Shared by every public page. */

/* ---------- skip link ---------- */
.skip{
  position:fixed;top:10px;inset-inline-start:10px;z-index:100;padding:12px 20px;border-radius:999px;
  background:var(--ink);color:var(--paper);font-weight:600;font-size:15px;
  transform:translateY(-160%);transition:transform 200ms var(--ease-out);
}
.skip:focus{transform:none}

/* ---------- accessibility button ---------- */
.a11y-btn{
  width:42px;height:42px;border-radius:50%;display:inline-grid;place-items:center;flex:none;
  border:1px solid var(--line-strong);color:var(--ink);
  transition:transform 160ms var(--ease-out),background-color 200ms ease,border-color 200ms ease,color 200ms ease;
}
.a11y-btn:active{transform:scale(.94)}
.a11y-btn svg,.a11y-panel svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.a11y-btn svg{width:22px;height:22px}
.a11y-btn[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media (hover:hover) and (pointer:fine){.a11y-btn:hover{border-color:var(--ink)}}

/* ---------- accessibility panel (anchored under the button, scales from it) ---------- */
.a11y-panel{
  position:fixed;top:calc(var(--header-h) + 6px);inset-inline-end:max(12px,calc((100vw - var(--wrap)) / 2 + var(--gutter) - 4px));z-index:60;
  width:min(348px,calc(100vw - 24px));max-height:calc(100dvh - var(--header-h) - 18px);overflow-y:auto;overscroll-behavior:contain;
  padding:18px;border-radius:24px;background:var(--paper);border:1px solid var(--line);
  box-shadow:0 30px 60px -24px rgba(38,36,34,.42);
  transform-origin:top left;opacity:0;transform:scale(.96) translateY(-6px);visibility:hidden;
  transition:opacity 140ms ease,transform 140ms var(--ease-out),visibility 0s linear 140ms;
}
.a11y-panel.open{opacity:1;transform:none;visibility:visible;transition:opacity 180ms ease,transform 220ms var(--ease-out),visibility 0s}
.a11y-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.a11y-head h2{margin:0;font-family:var(--serif);font-size:23px;font-weight:500;line-height:1.2}
.a11y-x{width:40px;height:40px;margin-inline-end:-8px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);transition:background-color 200ms ease}
.a11y-x svg{width:20px;height:20px}
.a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a11y-opt{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;
  min-height:94px;padding:14px;border-radius:16px;border:1px solid var(--line-strong);background:var(--cream);
  font-size:14.5px;font-weight:600;line-height:1.3;text-align:start;
  transition:transform 160ms var(--ease-out),background-color 200ms ease,border-color 200ms ease,color 200ms ease;
}
.a11y-opt:active{transform:scale(.97)}
.a11y-opt svg{width:24px;height:24px}
.a11y-opt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.a11y-opt .steps{position:absolute;top:18px;inset-inline-end:14px;display:flex;gap:4px}
.a11y-opt .steps i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.25;transition:opacity 200ms ease}
.a11y-opt .steps i.on{opacity:1}
.a11y-opt.reset{background:transparent;border-style:dashed}
.a11y-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.a11y-foot a{text-decoration:underline;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .a11y-opt:not([aria-pressed="true"]):hover{border-color:var(--ink)}
  .a11y-x:hover{background:var(--cream)}
}

/* ---------- what the options do ---------- */
html.a11y-text-1 main,html.a11y-text-1 .footer{zoom:1.15}
html.a11y-text-2 main,html.a11y-text-2 .footer{zoom:1.3}
html.a11y-text-1 .menu-tools{top:calc(var(--header-h) / 1.15)}
html.a11y-text-2 .menu-tools{top:calc(var(--header-h) / 1.3)}

html.a11y-contrast{
  --cream:#FFFFFF;--paper:#FFFFFF;--stone:#EDEDED;--ink:#000000;--ink-2:#111111;--muted:#333333;
  --line:rgba(0,0,0,.45);--line-strong:rgba(0,0,0,.8);--sun-soft:#FFE08A;--leaf:#285018;
}
html.a11y-contrast .header.scrolled,html.a11y-contrast .menu-tools{background:rgba(255,255,255,.97)}
html.a11y-contrast .footer{color:#fff}

html.a11y-links a{text-decoration:underline !important;text-decoration-thickness:2px !important;text-underline-offset:4px}

html.a11y-font{--serif:var(--sans)}
html.a11y-font body{word-spacing:.12em;letter-spacing:.01em}
html.a11y-font p,html.a11y-font li{line-height:1.85}

html.a11y-still *,html.a11y-still *::before,html.a11y-still *::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
html.a11y-still .reveal{opacity:1 !important;transform:none !important}

/* ---------- cookie notice: small, one button, closes itself ---------- */
.cookie{
  position:fixed;bottom:calc(16px + env(safe-area-inset-bottom));inset-inline-start:16px;z-index:55;
  display:flex;align-items:center;gap:14px;width:min(380px,calc(100vw - 32px));padding:12px 12px 12px 16px;border-radius:18px;
  background:var(--ink);color:rgba(248,245,239,.82);font-size:13px;line-height:1.5;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.5);
  opacity:0;transform:translateY(12px);
  transition:opacity 200ms var(--ease-out),transform 340ms var(--ease-drawer);
}
.cookie.show{opacity:1;transform:none}
html.ab-on .cookie.show{transform:translateY(-80px)}
.cookie p{margin:0;flex:1}
.cookie a{color:#F8F5EF;text-decoration:underline;text-underline-offset:3px}
.cookie .ok{
  flex:none;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px 0 12px;border-radius:999px;
  background:var(--sun);color:#262422;font-size:14px;font-weight:600;
  transition:transform 160ms var(--ease-out),background-color 200ms ease;
}
.cookie .ok:active{transform:scale(.97)}
.cookie .ring{width:16px;height:16px;transform:rotate(-90deg)}
.cookie .ring circle{fill:none;stroke:currentColor;stroke-width:2.6;opacity:.22}
.cookie .ring .fill{opacity:1;stroke-linecap:round;stroke-dasharray:50.3;stroke-dashoffset:50.3}
.cookie.show .ring .fill{animation:cookie-ring var(--auto,3000ms) linear forwards}
.cookie.paused .ring .fill{animation-play-state:paused}
@keyframes cookie-ring{to{stroke-dashoffset:0}}
.cookie :focus-visible{outline-color:#F8F5EF}
@media (hover:hover) and (pointer:fine){.cookie .ok:hover{background:#FFC72E}}
@media (max-width:600px){
  .cookie{inset-inline:12px;width:auto;bottom:calc(12px + env(safe-area-inset-bottom))}
}

/* ---------- map: loads Google only after consent ---------- */
.map-consent{
  position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:14px;padding:28px;text-align:center;
  background:radial-gradient(120% 80% at 50% 0%,rgba(246,184,25,.16),transparent 60%),var(--stone);
}
.map-consent[hidden],.map iframe[hidden]{display:none}
.map-consent .pin{width:58px;height:58px;border-radius:50%;background:var(--sun);color:#262422;display:grid;place-items:center}
.map-consent .pin svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.map-consent strong{display:block;font-family:var(--serif);font-size:23px;font-weight:500;color:var(--ink);line-height:1.3}
.map-consent p{margin:0;max-width:32ch;color:var(--ink-2);font-size:15px;line-height:1.55}
.map-consent .row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* dark surfaces need a light focus ring */
.footer :focus-visible,.actionbar :focus-visible{outline-color:#F8F5EF}

@media (prefers-reduced-motion:reduce){
  .a11y-panel,.a11y-panel.open,.cookie,.cookie.show{transition:opacity 150ms ease}
  .a11y-panel{transform:none}
  .cookie{transform:none}
}