/* ══════════════════════════════════════
   Kulttur.ro — Accessibility Widget CSS
   Conform EAA (European Accessibility Act) 2025
   ══════════════════════════════════════ */

/* ── High Contrast Mode ── */
html.a11y-contrast {
  --bg: #000000;
  --text: #FFFFFF;
  --accent: #f7a707;
  --accent-hover: #e69900;
  --border: #f7a707;
}
html.a11y-contrast body { background: #000 !important; color: #FFF !important; }
html.a11y-contrast .navbar-default,
html.a11y-contrast .navbar,
html.a11y-contrast header,
html.a11y-contrast nav { background: #000 !important; border-bottom: 2px solid #f7a707 !important; }
html.a11y-contrast a { color: #f7a707 !important; text-decoration: underline !important; }
html.a11y-contrast a:hover { color: #FFF !important; }
html.a11y-contrast .btn,
html.a11y-contrast .btn-primary,
html.a11y-contrast .btn-default,
html.a11y-contrast button[type="submit"] {
  background: #f7a707 !important; color: #000 !important;
  border: 2px solid #f7a707 !important; font-weight: 700 !important;
}
html.a11y-contrast .card,
html.a11y-contrast .panel,
html.a11y-contrast .well,
html.a11y-contrast .form-control,
html.a11y-contrast input,
html.a11y-contrast select,
html.a11y-contrast textarea {
  background: #111 !important; border: 2px solid #f7a707 !important; color: #FFF !important;
}
html.a11y-contrast footer { background: #000 !important; }
html.a11y-contrast img { filter: contrast(1.2); }
html.a11y-contrast * { text-shadow: none !important; }

/* ── Large Text Mode ── */
html.a11y-large-text { font-size: 20px !important; }
html.a11y-large-text h1 { font-size: 2.8rem !important; }
html.a11y-large-text h2 { font-size: 2.2rem !important; }
html.a11y-large-text h3 { font-size: 1.6rem !important; }
html.a11y-large-text p,
html.a11y-large-text li,
html.a11y-large-text span,
html.a11y-large-text label,
html.a11y-large-text .form-control,
html.a11y-large-text select {
  font-size: 1.15rem !important;
}

/* ── Dyslexia Font ── */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
html.a11y-dyslexia * {
  font-family: 'OpenDyslexic', Arial, sans-serif !important;
  letter-spacing: 0.05em !important;
  word-spacing: 0.15em !important;
}

/* ── Extra Spacing ── */
html.a11y-spacing p,
html.a11y-spacing li,
html.a11y-spacing span,
html.a11y-spacing label,
html.a11y-spacing .form-control {
  line-height: 2 !important;
  letter-spacing: 0.08em !important;
  word-spacing: 0.16em !important;
}
html.a11y-spacing p { margin-bottom: 1.5em !important; }

/* ── Highlight Links ── */
html.a11y-links a {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  outline: 2px dashed #f7a707 !important;
  outline-offset: 2px;
}

/* ── Stop Animations ── */
html.a11y-no-anim *,
html.a11y-no-anim *::before,
html.a11y-no-anim *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* ── Large Cursor ── */
html.a11y-cursor,
html.a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%23f7a707' stroke='%23000' stroke-width='3'/%3E%3Ccircle cx='24' cy='24' r='5' fill='%23000'/%3E%3C/svg%3E") 24 24, auto !important;
}

/* ── Reading Guide ── */
.a11y-reading-guide {
  position: fixed; top: 0; left: 0; right: 0;
  height: 12px; background: rgba(247,167,7,0.4);
  pointer-events: none; z-index: 99999;
  transition: top 0.05s linear;
  display: none;
}
html.a11y-guide .a11y-reading-guide { display: block; }

/* ── FAB Button ── */
.a11y-fab {
  position: fixed; bottom: 20px; left: 20px; z-index: 10000;
  width: 48px; height: 48px; border-radius: 50%;
  background: #0055B3; color: #FFF; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  transition: transform 0.2s, background 0.2s;
}
.a11y-fab:hover { transform: scale(1.1); background: #003d80; }
.a11y-fab:focus-visible { outline: 3px solid #f7a707; outline-offset: 3px; }
.a11y-fab svg { width: 26px; height: 26px; }

/* ── Panel ── */
.a11y-panel {
  position: fixed; bottom: 80px; left: 20px; z-index: 10001;
  width: 320px; max-height: calc(100vh - 120px);
  background: #FFFFFF; color: #1A1A1A;
  border: 1px solid #E0DDD8;
  border-radius: 16px; padding: 0;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.a11y-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }

.a11y-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #E0DDD8;
}
.a11y-panel-header h3 { margin: 0; font-size: 16px; font-weight: 600; }
.a11y-panel-close {
  background: none; border: none; font-size: 22px; cursor: pointer;
  color: #1A1A1A; opacity: 0.5; padding: 4px 8px; border-radius: 6px;
  line-height: 1;
}
.a11y-panel-close:hover { opacity: 1; background: rgba(0,0,0,0.05); }

.a11y-panel-body { padding: 12px 20px 20px; overflow-y: auto; max-height: calc(100vh - 200px); }

.a11y-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid rgba(128,128,128,0.1);
}
.a11y-option:last-child { border-bottom: none; }
.a11y-option-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500;
}
.a11y-option-label .a11y-icon { font-size: 20px; width: 28px; text-align: center; }

.a11y-toggle {
  position: relative; width: 44px; height: 24px;
  background: #CCC; border-radius: 12px; border: none;
  cursor: pointer; transition: background 0.2s; flex-shrink: 0;
}
.a11y-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #FFF; transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.a11y-toggle.active { background: #0055B3; }
.a11y-toggle.active::after { transform: translateX(20px); }

.a11y-reset {
  display: block; width: 100%; margin-top: 12px; padding: 10px;
  background: none; border: 1px solid #ccc;
  border-radius: 8px; cursor: pointer; font-size: 13px;
  color: #1A1A1A; font-weight: 500; transition: background 0.2s;
}
.a11y-reset:hover { background: rgba(0,0,0,0.05); }

/* ── High Contrast overrides for panel ── */
html.a11y-contrast .a11y-panel { background: #000 !important; border: 2px solid #f7a707 !important; color: #FFF !important; }
html.a11y-contrast .a11y-panel-header { border-color: #f7a707 !important; }
html.a11y-contrast .a11y-panel-close { color: #FFF !important; }
html.a11y-contrast .a11y-panel-close:hover { background: rgba(255,255,255,0.1) !important; }
html.a11y-contrast .a11y-option { border-color: rgba(247,167,7,0.3) !important; }
html.a11y-contrast .a11y-option-label { color: #FFF !important; }
html.a11y-contrast .a11y-toggle { background: #333 !important; }
html.a11y-contrast .a11y-toggle.active { background: #f7a707 !important; }
html.a11y-contrast .a11y-reset { border-color: #f7a707 !important; color: #FFF !important; }
html.a11y-contrast .a11y-reset:hover { background: rgba(247,167,7,0.15) !important; }
html.a11y-contrast .a11y-fab { background: #f7a707 !important; color: #000 !important; }

/* ── Responsive ── */
@media (max-width: 480px) {
  .a11y-panel { left: 10px; right: 10px; width: auto; bottom: 76px; }
  .a11y-fab { bottom: 16px; left: 16px; width: 44px; height: 44px; }
}