/* ============================================================
   ShineLab — Accessibility + Legal overrides (loaded site-wide)
   Loaded AFTER each page's inline <style>, so equal-specificity
   rules here win. Adds: skip link, visible focus, reduced-motion,
   contrast fixes, required markers, cookie-consent banner.
   ============================================================ */

/* ---------- Skip to content (keyboard / screen-reader) ---------- */
.skip-link {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 100;
  background: #ffffff;
  color: #0a0a0a;
  padding: 0.7rem 1.1rem;
  border-radius: 6px;
  font-family: var(--body, system-ui, sans-serif);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 8px;
  outline: 3px solid #1a1a1a;
  outline-offset: 2px;
}

/* ---------- Visible keyboard focus (WCAG 2.4.7) ----------
   Pages set `outline:none` on form fields; restore a strong,
   context-aware focus ring for keyboard users only. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent-1, #c9a86b);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Form fields specifically override their own `:focus{outline:none}` */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--accent-1, #c9a86b);
  outline-offset: 1px;
}
/* On light sections a gold/chrome ring is too low-contrast — use ink */
.section-light a:focus-visible,
.section-light button:focus-visible,
.section-light summary:focus-visible,
.section-light .field input:focus-visible,
.section-light .field select:focus-visible,
.section-light .field textarea:focus-visible {
  outline-color: #1a1a1a;
}

/* ---------- Respect reduced-motion (WCAG 2.3.3) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Contrast fixes (WCAG 1.4.3) ----------
   Muted grey on light backgrounds failed 4.5:1; darken it.
   Faint white footnotes on near-black were just under; lift them. */
.section-light .eyebrow,
.section-light .field label,
.section-light .pkg-price .from { color: #6a6a6a; }

.footer-meta { color: rgba(250,250,250,0.62); }
.form-fine { color: rgba(250,250,250,0.62); }
.section-light .review-author { color: rgba(26,26,26,0.72); }

/* ---------- Required-field marker (WCAG 3.3.2) ----------
   The asterisk is added by JS to each [required] label. */
.req { color: #e0b15e; font-weight: 700; }
.section-light .req { color: #8a5a00; }

/* ---------- Screen-reader-only utility ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Footer legal links ---------- */
.footer-legal a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Cookie-consent banner ---------- */
.sl-consent {
  position: fixed;
  z-index: 90;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  max-width: 560px;
  margin-inline: auto;
  background: #0f0f0f;
  color: #fafafa;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.9);
  font-family: var(--body, system-ui, sans-serif);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.sl-consent p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(250,250,250,0.88);
}
.sl-consent a { color: #e0b15e; text-decoration: underline; text-underline-offset: 3px; }
.sl-consent-actions { display: flex; gap: 0.6rem; justify-content: flex-end; flex-wrap: wrap; }
.sl-btn {
  font-family: var(--body, system-ui, sans-serif);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
}
.sl-accept { background: #fafafa; color: #0a0a0a; }
.sl-necessary { background: transparent; color: #fafafa; border-color: rgba(255,255,255,0.45); }
@media (max-width: 699px) { .sl-consent { bottom: 80px; } } /* clear sticky call bar */