/* ==========================================================================
   ACCESSIBILITY WIDGET AND THE PREFERENCES IT SETS

   One file for every public page and for the Journal, post and event pages,
   so a fix lands everywhere at once. It used to be copied into each page by
   hand, which is how the Journal ended up without it.

   Load order matters: this comes after each page's own <style> and after
   option1.css, so its rules win ties.

   The preference classes go on <html> (a11y-text-lg, a11y-text-xl,
   a11y-contrast, a11y-links, a11y-motion). A small script in each page's
   <head> adds them before anything is drawn; /a11y.js keeps them in step
   with the panel.
   ========================================================================== */

/* ---- the round button ---- */
.a11y-btn {
  position:fixed; right:18px; bottom:92px; z-index:9998;  /* lifted to clear the live chat bubble, which sits bottom right */
  width:52px; height:52px; border-radius:50%;
  background:#1a5fb4; color:#fff; border:2px solid #fff;
  box-shadow:0 4px 18px rgba(0,0,0,0.45);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform 0.2s ease;
  padding:0;
}
.a11y-btn:hover { transform:scale(1.07) }
/* Two rings, so one shows on any background (1.4.11): dark on the cream and
   sage bands, pale yellow on the forest footer and on photographs. */
.a11y-btn:focus-visible { outline:3px solid #08291B; outline-offset:3px; box-shadow:0 0 0 3px #FFE08A, 0 4px 18px rgba(0,0,0,0.45) }
.a11y-btn svg { width:28px; height:28px; fill:#fff }
/* The open phone menu fills the screen, so the button would only sit on top of
   its links (it covered Book a Session). It comes back when the menu closes. */
body.menu-open .a11y-btn, body.menu-open .a11y-panel { display:none }

/* ---- room for the corner buttons ----
   2.4.11 Focus Not Obscured. This button and the Chat button are fixed in
   the lower right corner of every page. A control that takes keyboard focus
   is scrolled clear of them (scroll-padding, WCAG technique C43). The
   footer's last row, the Privacy Policy and Terms of Use links, is already
   at the very end of the page, where nothing can scroll it any higher, so
   its right end is kept free of them wherever the row is laid out across
   the page. At 768px and below every page stacks that row on the left. */
html { scroll-padding-bottom:min(156px, 40vh) }
@media (min-width:641px) { .footer-bottom { padding-right:140px } }

/* ---- the panel ----
   2.4.11 Focus Not Obscured: it opens ABOVE the button (92px + 52px + 12px
   gap), never over it. It used to sit at bottom:80px, which put "Reset all"
   exactly where the button had been, so a second tap meant to close the
   panel wiped every saved setting instead. */
.a11y-panel {
  position:fixed; right:18px; bottom:156px; z-index:9999;
  width:290px; max-width:calc(100vw - 36px);
  max-height:calc(100vh - 176px); overflow-y:auto; overscroll-behavior:contain;
  background:#0E2818; border:1px solid rgba(212,168,86,0.4); border-radius:14px;
  padding:20px; box-shadow:0 18px 50px rgba(0,0,0,0.55);
  display:none;
}
.a11y-panel[data-open="true"] { display:block }
.a11y-panel h2 { font-family:var(--serif,Georgia,serif); font-size:1.15rem; font-weight:500; color:#F2E8CF; margin:0 0 4px; line-height:1.3 }
.a11y-panel .a11y-sub { font-size:0.76rem; color:#AEB6A8; margin:0 0 16px; line-height:1.5 }
.a11y-opt { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid rgba(212,168,86,0.14) }
.a11y-opt:first-of-type { border-top:none }
.a11y-opt span { font-size:0.86rem; color:#E5DBC2 }
.a11y-toggle { width:46px; height:26px; border-radius:100px; border:1px solid rgba(212,168,86,0.6); background:rgba(10,31,20,0.8); cursor:pointer; position:relative; flex-shrink:0; padding:0 }
.a11y-toggle::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#8E9686; transition:transform 0.2s ease, background 0.2s ease }
.a11y-toggle[aria-pressed="true"] { background:rgba(212,168,86,0.28); border-color:#D4A856 }
.a11y-toggle[aria-pressed="true"]::after { transform:translateX(20px); background:#D4A856 }
.a11y-toggle:focus-visible, .a11y-reset:focus-visible { outline:2px solid #FFE08A; outline-offset:3px }
.a11y-reset { margin-top:14px; width:100%; min-height:44px; background:transparent; border:1px solid rgba(212,168,86,0.5); color:#E8C988; border-radius:8px; padding:10px; font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; font-family:inherit }

/* ==========================================================================
   LARGER TEXT
   1.4.4 Resize Text. The site sizes its text in rem, which follows <html>,
   so the scale goes on <html>. It used to go on <body>, which almost nothing
   inherits from, so the toggles changed one or two lines on a page.
   ========================================================================== */
html.a11y-text-lg { font-size:112.5% }
html.a11y-text-xl { font-size:125% }

/* With the text scaled, the nine link desktop nav no longer fits on one row
   at any width (it needs about 1,200px at normal size and the header stops
   growing at 1,440px), so the menu button takes over, exactly as it does on a
   narrow screen. Each page's updateNav() makes the same choice, so the button
   and the hidden nav cannot disagree. */
html.a11y-text-lg header nav, html.a11y-text-xl header nav,
html.a11y-text-lg .admin-link, html.a11y-text-xl .admin-link,
html.a11y-text-lg header .btn-join, html.a11y-text-xl header .btn-join { display:none !important }
html.a11y-text-lg .hamburger, html.a11y-text-xl .hamburger { display:flex }

/* ==========================================================================
   UNDERLINE LINKS
   ========================================================================== */
html.a11y-links a:not(.btn):not(.skip-link) { text-decoration:underline !important; text-underline-offset:3px }

/* ==========================================================================
   HIGH CONTRAST
   1.4.3 / 1.4.11. The old rule turned the text white but left the cream and
   sage surfaces light, so most of the site read white on cream at about 1.1:1.
   This repaints the surfaces as well as the text: every box goes black, every
   letter white, every link and button yellow.

   :not(#a11y-hc) matches every <html>, so it changes nothing about WHAT is
   selected. It only lifts the rules above the page rules written with
   !important (option1.css paints its cards sage that way). :where() keeps the
   exclusion lists from adding weight, so the later rules here (links, buttons)
   win over the general one by order alone.

   Left alone on purpose: photographs and video (img, video, picture, the
   elements that carry a photo as a background, and the dark scrims laid over
   them), SVG icons, which take their colour from their parent, and maps.
   ========================================================================== */
html.a11y-contrast body { background:#000 !important; color:#fff !important }
html.a11y-contrast:not(#a11y-hc) body :where(*:not(img, video, picture, source, svg, svg *, iframe, canvas)) {
  color:#fff !important;
  border-color:#fff !important;
  text-shadow:none !important;
}
/* Surfaces. Scrims over photographs keep their own dark gradient. */
html.a11y-contrast:not(#a11y-hc) body :where(*:not(img, video, picture, source, svg, svg *, iframe, canvas, [class*="overlay"], [class*="scrim"])) {
  background-color:#000 !important;
}
/* Background images: gradients and washes go, photographs stay. */
html.a11y-contrast:not(#a11y-hc) body :where(*:not(img, video, picture, source, svg, svg *, iframe, canvas,
    [class*="overlay"], [class*="scrim"], [class*="-img"], [class*="image"], [class*="photo"], [class*="visual"],
    [class*="thumb"], [class*="avatar"], [class*="hero-bg"], .bg, [style*="url("])) {
  background-image:none !important;
}
/* Links: yellow, and underlined inside running text so they do not depend on
   colour alone (1.4.1). */
html.a11y-contrast:not(#a11y-hc) body :where(a, a *) { color:#FFE08A !important }
html.a11y-contrast:not(#a11y-hc) body :where(p a, li a, td a, dd a, label a) { text-decoration:underline !important; text-underline-offset:3px }
/* Buttons keep a visible edge now that their fill is black like everything else. */
html.a11y-contrast:not(#a11y-hc) body :where(a, button):where([class*="btn"], [class*="cta"], [type="submit"]) {
  border:2px solid currentColor !important;
}
html.a11y-contrast:not(#a11y-hc) body :where(button, button *, input, select, textarea, summary) { color:#fff !important }
html.a11y-contrast:not(#a11y-hc) body :where(input, select, textarea) { border:2px solid #fff !important }
html.a11y-contrast:not(#a11y-hc) ::placeholder { color:#D6D6D6 !important; opacity:1 !important }
/* Drawn with a background colour rather than text, so the black surface rule
   above would hide them: the three bars of the menu button. */
html.a11y-contrast:not(#a11y-hc) body .hamburger-lines span { background-color:#fff !important }
html.a11y-contrast .botanical-frame, html.a11y-contrast .leaf { display:none !important }

/* ==========================================================================
   REDUCE MOTION
   2.2.2 Pause, Stop, Hide and 2.3.3 Animation from Interactions. The same
   rules the pages apply for a device that asks for reduced motion, now also
   for the panel's toggle. <html> itself is included because that is where
   scroll-behavior:smooth is set; "html.a11y-motion *" never matched it.

   Video is handled by /a11y.js and the guard in each page's <head>: a <video>
   is not a CSS animation, so no rule here can stop it. Here the decorative
   background videos are hidden, as they are for the device setting, and the
   still photograph beneath each one shows instead.
   ========================================================================== */
html.a11y-motion, html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after {
  animation-duration:0.001ms !important; animation-iteration-count:1 !important;
  transition-duration:0.001ms !important; scroll-behavior:auto !important;
}
html.a11y-motion .leaf { animation:none !important; transform:none !important }
html.a11y-motion .hero-video, html.a11y-motion .about-video, html.a11y-motion .page-hero-video { display:none }
/* ...unless the visitor presses Play on it themselves. */
video.a11y-user-play { display:block !important }

/* ==========================================================================
   PAUSE / PLAY FOR AUTOPLAYING VIDEO
   2.2.2: anything that moves by itself for more than five seconds needs a way
   to stop it that does not depend on the panel. One round button in the
   lower left corner of each video, 44px, with an accessible name that says
   what it will do ("Pause background video" / "Play background video").
   Lower left, because the lower right of the screen belongs to the
   accessibility and chat buttons.
   ========================================================================== */
.vctl {
  position:absolute; left:16px; bottom:16px; z-index:6;
  width:44px; height:44px; padding:0; margin:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(6,24,15,0.7); color:#F5F0E5;
  border:1.5px solid rgba(245,240,229,0.7); cursor:pointer;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transition:background 0.2s ease;
}
.vctl:hover { background:rgba(6,24,15,0.9) }
.vctl:focus-visible { outline:3px solid #F5F0E5; outline-offset:2px }
.vctl svg { display:block; width:16px; height:16px; fill:currentColor; pointer-events:none }
.vctl .vctl-play, .vctl[data-state="paused"] .vctl-pause { display:none }
.vctl[data-state="paused"] .vctl-play { display:block }
@media (max-width:768px) { .vctl { left:12px; bottom:12px } }
@media print { .vctl, .a11y-btn, .a11y-panel { display:none !important } }