/*
 * CLS Accessibility Fixes
 * Safe production override layer for macbook-repaircenter.de
 * Load AFTER tailwind.css.
 */

:root {
  --cls-a11y-brand: #006f84;
  --cls-a11y-orange: #b84b08;
  --cls-a11y-white: #ffffff;
}

/* Primary navigation */
nav[data-primary-nav].bg-\[\#0086a0\],
nav[data-primary-nav][data-sticky-menu].bg-\[\#0086a0\] {
  background-color: var(--cls-a11y-brand) !important;
}

/* Repair category card headings */
.cls-pcs-title {
  color: var(--cls-a11y-brand) !important;
}

/* Known homepage section labels/accent text */
section[aria-labelledby="cls-benefits-title"] .text-\[\#0086a0\],
section[aria-labelledby="cls-videos-title"] .text-\[\#0086a0\],
section[aria-labelledby="cls-action-cards-title"] .text-\[\#0086a0\],
section[aria-labelledby="cls-anfahrt-title"] .text-\[\#0086a0\],
section[aria-labelledby="cls-benefits-title"] .text-\[\#008aa4\],
section[aria-labelledby="cls-videos-title"] .text-\[\#008aa4\],
section[aria-labelledby="cls-action-cards-title"] .text-\[\#008aa4\],
section[aria-labelledby="cls-anfahrt-title"] .text-\[\#008aa4\] {
  color: var(--cls-a11y-brand) !important;
}

/* Route / CTA buttons */
section[aria-labelledby="cls-anfahrt-title"] a.bg-\[\#0086a0\],
section[aria-labelledby="cls-action-cards-title"] a.bg-\[\#0086a0\],
section[aria-labelledby="cls-action-cards-title"] button.bg-\[\#0086a0\] {
  background-color: var(--cls-a11y-brand) !important;
  color: var(--cls-a11y-white) !important;
}

/* Footer low-opacity white text */
footer[role="contentinfo"] .text-white\/70,
footer[role="contentinfo"] .text-white\/75,
footer[role="contentinfo"] .text-white\/80,
footer[role="contentinfo"] .text-white\/85,
footer[role="contentinfo"] .text-white\/90,
footer[role="contentinfo"] a.text-white\/90 {
  color: var(--cls-a11y-white) !important;
}

/* Newsletter submit button */
footer[role="contentinfo"] button.bg-\[\#d95b0d\] {
  background-color: var(--cls-a11y-orange) !important;
  color: var(--cls-a11y-white) !important;
}

/* Keyboard focus */
nav[data-primary-nav] a:focus-visible,
footer[role="contentinfo"] a:focus-visible,
footer[role="contentinfo"] button:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

.cls-pcs-card:focus-visible,
section[aria-labelledby="cls-action-cards-title"] a:focus-visible,
section[aria-labelledby="cls-anfahrt-title"] a:focus-visible {
  outline: 3px solid var(--cls-a11y-brand);
  outline-offset: 3px;
}

/* =========================================================
   V2 fixes based on the latest Lighthouse contrast report
   ========================================================= */

/*
 * "REPARATURSERVICE SEIT 1993" badge:
 * the light cyan badge background needs a darker cyan text.
 */
p.m-0.mb-3.inline-flex.bg-cyan-50,
.bg-cyan-50[class*="text-[#0086a0]"],
.bg-cyan-50[class*="text-[#008aa4]"] {
  color: var(--cls-a11y-brand) !important;
}

/*
 * Footer:
 * #087f97 is only just dark enough against pure white, but
 * footer cards use bg-white/5, which lightens the effective
 * background and can make white/white-90 text fail contrast.
 * Darken only the footer base to #076e84.
 */
footer[role="contentinfo"] {
  background-color: #076e84 !important;
}

/*
 * Ensure all reported footer address/contact/newsletter text
 * remains fully opaque white inside translucent footer cards.
 */
footer[role="contentinfo"] .bg-white\/5,
footer[role="contentinfo"] .bg-white\/5 .text-white,
footer[role="contentinfo"] .bg-white\/5 .text-white\/70,
footer[role="contentinfo"] .bg-white\/5 .text-white\/75,
footer[role="contentinfo"] .bg-white\/5 .text-white\/80,
footer[role="contentinfo"] .bg-white\/5 .text-white\/85,
footer[role="contentinfo"] .bg-white\/5 .text-white\/90,
footer[role="contentinfo"] .bg-white\/5 a.text-white\/90 {
  color: #ffffff !important;
}

/* =========================================================
   V3 — Lighthouse touch-target fixes
   Targets the compact phone/email links reported by Lighthouse.
   48px minimum height is a safe touch target size.
   ========================================================= */

a.font-bold.text-slate-700[href^="tel:"],
a.font-bold.text-slate-700[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  min-width: 48px;
  padding: 10px 4px;
  line-height: 1.25;
}

/* Keep focus indication clear for keyboard users too. */
a.font-bold.text-slate-700[href^="tel:"]:focus-visible,
a.font-bold.text-slate-700[href^="mailto:"]:focus-visible {
  outline: 3px solid var(--cls-a11y-brand);
  outline-offset: 2px;
}

/* =========================================================
   V4 — Category repair wizard contrast fixes
   Applies across category-wise repair pages that reuse the
   CLS Repair Wizard. Keeps the fix scoped to wizard controls.
   ========================================================= */

/* "SCHRITT 1 VON 5" and equivalent step kickers */
.cls-rw-step-kicker {
  color: var(--cls-a11y-brand) !important;
}

/* Device/model names inside selectable repair-wizard cards */
button[data-term-card] .text-\[\#0086a0\],
[data-term-card] .text-\[\#0086a0\] {
  color: var(--cls-a11y-brand) !important;
}

/* Keep the same accessible color during hover/focus states */
button[data-term-card]:hover .text-\[\#0086a0\],
button[data-term-card]:focus-visible .text-\[\#0086a0\] {
  color: var(--cls-a11y-brand) !important;
}