/* a11y-aaa.css — WCAG 2.2 AAA skärpning för restaurang-vertikaler
 *
 * LÄSES BARA om VV_FEAT_A11Y_AAA=true (default). För att backa:
 *   sätt VV_FEAT_A11Y_AAA=false i param store → restart → denna fil laddas inte.
 *
 * Konservativ overlay — rör bara uppenbara kontrast-/target-problem.
 * Ändrar INTE layout eller färgteman i sig. */

/* ── 1. Brödtext minst 17px (html-basstorlek redan satt i a11y-panel) ───── */
/* Tillgänglighetspanelen styr html { font-size: 17px * scale }. Vi säkerställer
   att p, li, label, input följer rem istället för hårdkodat 14-15px. */
body p, body li, body td, body label, body .body-text,
body input, body textarea, body select {
  font-size: max(1rem, 16px);
}

/* ── 2. Touch-targets 48×48 px — WCAG 2.5.5 Level AAA ──────────────────── */
button, a.btn, .btn, a.btn-guld, .btn-guld,
.nav-btn, .nav-link, .lang-btn,
input[type="submit"], input[type="button"], input[type="reset"],
.boka-body button, .osa-header button {
  min-height: 48px;
  min-width: 48px;
  padding-inline: max(14px, .75em);
}

/* Små ikoner/länkar i footer får luft istället för min-width */
footer a, footer li a, .footer-grid a {
  padding-block: 6px;
  display: inline-block;
  min-height: 44px;
}

/* ── 3. Muted-text och "sub"-färger — skärp till AAA (7:1) ─────────────── */
/* V&V använder beige/guld på vit och grå på mörk. Vi överstyrer de värsta. */
body .muted, body .tagline, body .sub, body .hint, body .small-text,
body .boka-tagline,
body .footer-note, body .footer-credit,
body .sub-title, body .sub-heading,
body p.sub, body small.muted, body .text-muted {
  color: #2c1810 !important;  /* nästan-svart — 14:1 mot vit */
}
body.a11y-dark .muted, body.a11y-dark .tagline {
  color: #fffaf3 !important;  /* ljus mot mörk bakgrund */
}

/* V&V guld-på-vit (#c9a96e) blev för blekt — mörkare guld för AAA */
body .guld-text, body .text-guld, body .accent-text {
  color: #6b4800 !important;   /* 7.2:1 mot vit */
}

/* Navbar — ljusare guld på den mörka navbar så kontrast räcker */
.navbar .nav-btn,
.navbar a {
  color: #f5e7c8 !important;   /* 11:1 mot #2c1810 */
}
.navbar .nav-btn:hover,
.navbar .nav-btn.active {
  color: #ffffff !important;
  background: rgba(255,255,255,.15) !important;
}

/* ── 4. Länkar — alltid understrykning utom inom knappar/nav ───────────── */
body p a, body li a, body span a, body td a {
  text-decoration: underline;
  text-decoration-thickness: max(1px, .08em);
  text-underline-offset: .18em;
}
body a.btn, body .btn, body .nav-btn, body .nav-btn a,
body a.btn-guld, body .boka-knapp, nav a, header a {
  text-decoration: none;
}

/* ── 5. Formulär — tydliga etiketter + större inputs ───────────────────── */
body input[type="text"], body input[type="email"], body input[type="tel"],
body input[type="number"], body input[type="date"], body input[type="time"],
body select, body textarea {
  min-height: 52px;
  font-size: max(1rem, 16px);
  padding: 12px 14px;
  border: 2px solid #2c1810;
  border-radius: 6px;
  background: #fff;
  color: #2c1810;
}
body label {
  font-weight: 600;
  color: #2c1810;
  display: inline-block;
  margin-bottom: 6px;
}
body input:focus-visible, body select:focus-visible, body textarea:focus-visible {
  outline: 3px solid #6b4800;
  outline-offset: 2px;
  border-color: #6b4800;
}

/* ── 6. Fel-meddelanden har både färg OCH ikon (inte enbart färg) ──────── */
body .error, body .fel, body .form-error, body [role="alert"] {
  color: #7a1c1c !important;
  border-left: 4px solid #7a1c1c;
  padding-left: 12px;
}
body .error::before, body .fel::before {
  content: "⚠ ";
  font-weight: 700;
}

/* ── 7. Tabeller — tydliga rader + zebra för läsbarhet ────────────────── */
body table th {
  background: #2c1810;
  color: #fff;
  padding: 12px;
  text-align: left;
  font-weight: 700;
}
body table td {
  padding: 12px;
  border-bottom: 1px solid #d5c8b8;
}
body table tr:nth-child(even) td {
  background: #faf5eb;
}

/* ── 8. Skip-link — synlig och stor när fokuserad ──────────────────────── */
.a11y-skip-link {
  font-size: 18px !important;
  padding: 16px 24px !important;
}

/* ── 9. Respektera prefers-contrast: high ──────────────────────────────── */
@media (prefers-contrast: more) {
  body { color: #000; }
  body a { color: #003366; }
  body button, body .btn { border: 2px solid currentColor; }
}