/* a11y.css — the accessibility toolbar (see assets/js/a11y-widget.js, markup injected there).
   Ported from the shared widget and re-themed to this site: ink #1A1A1A, accent #C19A4E,
   on-dark #E9E3D6, warm hover #F4EFE6.

   Two deliberate departures from the original:

   * The dyslexia mode uses locally installed faces instead of fetching Lexend from Google
     Fonts. This site makes zero third-party requests by design (the footer map is behind a
     consent gate), and Lexend has no Greek glyphs anyway, so on a Greek page it would fall
     back to Arial after paying for the download. Verdana and Tahoma cover Greek, ship with
     every desktop OS, and the spacing and line-height boosts do most of the work regardless.
   * Large text scales with `zoom` rather than a root font-size, because every size on this
     site is in px (1079 of them, none in rem or em) — see the note further down. */

#a11y-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
}

#a11y-trigger {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #1A1A1A;
  border: 3px solid #C19A4E;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 14px rgba(0,0,0,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  padding: 0;
}

#a11y-trigger:hover,
#a11y-trigger:focus-visible {
  transform: scale(1.1);
  box-shadow: 0 5px 20px rgba(0,0,0,0.5);
  outline: 3px solid #C19A4E;
  outline-offset: 3px;
}

#a11y-trigger svg {
  width: 28px;
  height: 28px;
  fill: #E9E3D6;
  pointer-events: none;
}

/* --- Panel --- */
#a11y-panel {
  position: fixed;
  bottom: 86px;
  right: 16px;
  width: 308px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 44px rgba(0,0,0,0.22);
  overflow: hidden;
  z-index: 99999;
  transform-origin: bottom right;
  animation: a11y-open 0.18s ease;
}

#a11y-panel[hidden] { display: none; }

@keyframes a11y-open {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

#a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: #1A1A1A;
}

#a11y-panel-title {
  color: #E9E3D6;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

#a11y-panel-reset {
  background: transparent;
  border: 1px solid rgba(233,227,214,0.35);
  color: #E9E3D6;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}
#a11y-panel-reset:hover { background: rgba(233,227,214,0.15); }

#a11y-close {
  background: none;
  border: none;
  color: #E9E3D6;
  font-size: 22px;
  cursor: pointer;
  padding: 0 0 0 10px;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.15s;
  font-family: inherit;
}
#a11y-close:hover { opacity: 1; }

/* --- Grid --- */
#a11y-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #E4DED4;
}

.a11y-btn {
  background: #fff;
  border: none;
  padding: 16px 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #4A443C;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
  text-align: center;
  min-height: 90px;
}
.a11y-btn:hover { background: #F4EFE6; }
.a11y-btn:focus-visible { outline: 2px solid #C19A4E; outline-offset: -2px; z-index: 1; }
.a11y-btn.active { background: #1A1A1A; color: #C19A4E; }
.a11y-btn.active svg { fill: #C19A4E; stroke: #C19A4E; }

.a11y-btn svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  transition: fill 0.15s, stroke 0.15s;
}

.a11y-btn-label { line-height: 1.3; }

/* Sub-label (current level name) */
.a11y-sub {
  font-size: 10px;
  opacity: 0.75;
  min-height: 13px;
  line-height: 1;
}

/* Level dots */
.a11y-dots {
  display: flex;
  gap: 4px;
  margin-top: 1px;
}
.a11y-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0,0,0,0.18);
  transition: background 0.15s;
  flex-shrink: 0;
}
.a11y-btn.active .a11y-dot { background: rgba(193,154,78,0.35); }
.a11y-btn.active .a11y-dot.on { background: #C19A4E; }

/* --- Word-break guard (applies at all sizes, critical on mobile) ---
   Prevents long words and tight spacing from overflowing horizontally */
html[class*="a11y-text-"] *,
html[class*="a11y-lh-"] *,
html[class*="a11y-spacing-"] * {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  min-width: 0;
}

/* --- Mobile caps -------------------------------------------------- */
@media (max-width: 768px) {
  /* Panel fits narrow screens and doesn't exceed viewport height */
  #a11y-panel {
    width: min(308px, calc(100vw - 32px));
    max-height: calc(100svh - 110px);
    overflow-y: auto;
  }

  /* Large text: levels 3 & 4 are too big on small screens — pull them back */
  html.a11y-text-3 body { zoom: 1.30 !important; }
  html.a11y-text-4 body { zoom: 1.45 !important; }

  /* Line height: level 4 is extreme on narrow columns — reduce slightly */
  html.a11y-lh-4 * { line-height: 2.2 !important; }

  /* Text spacing: max level causes horizontal overflow — match level 2 values */
  html.a11y-spacing-3 * {
    letter-spacing: 0.12em !important;
    word-spacing: 0.18em !important;
  }
}

/* Reading guide */
#a11y-reading-guide {
  position: fixed;
  left: 0;
  right: 0;
  height: 36px;
  background: rgba(193,154,78,0.25);
  border-top: 2px solid rgba(193,154,78,0.5);
  border-bottom: 2px solid rgba(193,154,78,0.5);
  pointer-events: none;
  z-index: 99998;
  display: none;
  transform: translateY(-50%);
}

/* =========================================
   Accessibility Modifications
   ========================================= */

/* --- Contrast: level 1 via JS filter, levels 2-4 via class --- */

/* Level 2 — Dark navy blue (#002244 bg / #e8f4ff text) ~15:1 contrast ratio */
html.a11y-contrast-blue *:not(#a11y-widget *):not(#a11y-reading-guide) {
  background-color: #002244 !important;
  color: #e8f4ff !important;
  border-color: rgba(150,200,255,0.2) !important;
}
html.a11y-contrast-blue a,
html.a11y-contrast-blue a:visited { color: #80c8ff !important; }
html.a11y-contrast-blue img { filter: brightness(0.85); }

/* Level 3 — Dark green on white (#003300 text / #ffffff bg) ~14:1 contrast ratio */
html.a11y-contrast-green *:not(#a11y-widget *):not(#a11y-reading-guide) {
  background-color: #ffffff !important;
  color: #003300 !important;
  border-color: rgba(0,80,0,0.15) !important;
}
html.a11y-contrast-green a,
html.a11y-contrast-green a:visited { color: #005500 !important; }

/* Level 4 — Yellow on black */
html.a11y-contrast-hc *:not(#a11y-widget *):not(#a11y-reading-guide) {
  background-color: #000 !important;
  color: #ffff00 !important;
  border-color: #444 !important;
}
html.a11y-contrast-hc a,
html.a11y-contrast-hc a:visited { color: #00ffff !important; }
html.a11y-contrast-hc img { filter: brightness(0.75) contrast(1.2); }

/* --- Highlight Links --- */
html.a11y-links a,
html.a11y-links a:visited {
  outline: 3px solid #0055cc !important;
  outline-offset: 2px !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

/* --- Large Text (4 levels) ---
   Every font-size in this build is px — the site-builder wrote them inline — so
   bumping html font-size has no effect. Scale via `zoom` on body instead — works
   regardless of unit. Widget scales with it, which is acceptable. */
html.a11y-text-1 body { zoom: 1.10; }
html.a11y-text-2 body { zoom: 1.25; }
html.a11y-text-3 body { zoom: 1.45; }
html.a11y-text-4 body { zoom: 1.70; }

/* The widget lives inside <body>, so body-zoom enlarges it too and pushes
   it off-screen. Counter-zoom it back to ~1x (reciprocal of each level)
   so the toolbar stays its normal size and bottom-right position. */
html.a11y-text-1 #a11y-widget { zoom: 0.909; }
html.a11y-text-2 #a11y-widget { zoom: 0.800; }
html.a11y-text-3 #a11y-widget { zoom: 0.690; }
html.a11y-text-4 #a11y-widget { zoom: 0.588; }

/* --- Text Spacing (3 levels) --- */
html.a11y-spacing-1 * { letter-spacing: 0.06em !important; word-spacing: 0.10em !important; }
html.a11y-spacing-2 * { letter-spacing: 0.12em !important; word-spacing: 0.18em !important; }
html.a11y-spacing-3 * { letter-spacing: 0.20em !important; word-spacing: 0.30em !important; }

/* --- Stop Animations --- */
html.a11y-stop-anim *,
html.a11y-stop-anim *::before,
html.a11y-stop-anim *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* --- Hide Images (CSS covers <img>; JS handles CSS backgrounds) --- */
html.a11y-hide-images img,
html.a11y-hide-images picture,
html.a11y-hide-images video {
  visibility: hidden !important;
}

/* --- Dyslexia (2 levels) — local faces only, no download. Verdana and Tahoma are the
   widest, most openly spaced faces that ship with Greek coverage on every OS. --- */
html.a11y-dyslexia-1,
html.a11y-dyslexia-1 * {
  font-family: Verdana, Tahoma, 'DejaVu Sans', Arial, sans-serif !important;
}
html.a11y-dyslexia-2,
html.a11y-dyslexia-2 * {
  font-family: Verdana, Tahoma, 'DejaVu Sans', Arial, sans-serif !important;
  letter-spacing: 0.06em !important;
  word-spacing: 0.10em !important;
  line-height: 1.75 !important;
}

/* --- Cursor (2 levels) --- */
html.a11y-cursor-1,
html.a11y-cursor-1 * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M8 4 L8 32 L14 26 L19 36 L23 34 L18 24 L26 24 Z' fill='%231A1A1A' stroke='%23ffffff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important;
}
html.a11y-cursor-2,
html.a11y-cursor-2 * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M11 5 L11 45 L20 36 L27 51 L32 48 L25 33 L36 33 Z' fill='%231A1A1A' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 11 5, auto !important;
}

/* --- Line Height (4 levels) --- */
html.a11y-lh-1 * { line-height: 1.6 !important; }
html.a11y-lh-2 * { line-height: 1.9 !important; }
html.a11y-lh-3 * { line-height: 2.2 !important; }
html.a11y-lh-4 * { line-height: 2.6 !important; }

/* --- Text Alignment (3 levels) --- */
html.a11y-align-1 * { text-align: left !important; }
html.a11y-align-2 * { text-align: center !important; }
html.a11y-align-3 * { text-align: right !important; }

/* --- Saturation: levels 1-3 via JS filter (saturate/grayscale) --- */

/* --- Baseline WCAG improvements ----------------------------------------- */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100000;
  padding: 12px 18px;
  border-radius: 8px;
  background: #1A1A1A;
  color: #FFFFFF;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 15px;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.15s ease;
}
.skip-link:focus { transform: translateY(0); outline: 3px solid #FFFFFF; outline-offset: 2px; }

/* The original accent is decorative on dark surfaces, but is too light for small text on
   the cream page. This darker companion keeps the same hue and passes AA on light surfaces. */
main [style*="color:#C19A4E"],
main [style*="color: #C19A4E"] { color: #7A5D1F !important; }
main [style*="background:#1A1A1A"] [style*="color:#C19A4E"],
main [style*="background:#1A1A1A"] [style*="color: #C19A4E"],
main [style*="background: #1A1A1A"] [style*="color:#C19A4E"],
main [style*="background: #1A1A1A"] [style*="color: #C19A4E"],
footer [style*="color:#C19A4E"],
footer [style*="color: #C19A4E"] { color: #D3B26A !important; }

/* Dark text on the brand gold has a 6.7:1 contrast ratio; white only reached 2.6:1. */
[style*="background:#C49B43"][style*="color:#FFFFFF"],
[style*="background: #C49B43"][style*="color: #FFFFFF"],
[style*="background:#C19A4E"][style*="color:#FFFFFF"],
[style*="background: #C19A4E"][style*="color: #FFFFFF"] { color: #1A1A1A !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}