/* ==========================================================================
   DCTHA — light "workshop" theme
   Loaded AFTER style.css and overrides it. Palette sampled from the
   LIQUI MOLY catalogue: #005098 blue, #E00018 red, white paper.

   Deliberately NOT a 1:1 copy of LIQUI MOLY's layout — same industrial
   colour language, DCTHA's own proportions and type, so the site reads as
   our shop rather than implying we are an authorised LIQUI MOLY dealer.
   ========================================================================== */

:root {
  /* paper-based surfaces instead of obsidian */
  --ink:       #FFFFFF;
  --ink-2:     #EEF3F8;
  --surface:   #FFFFFF;
  --surface-2: #E4EBF2;

  --line:      rgba(0, 48, 92, .14);
  --line-2:    rgba(0, 48, 92, .30);

  --fg:        #111A24;
  --fg-dim:    #4A5A6B;
  /* #78889A only reached 3.6:1 on white — below WCAG AA for body text.
     This drives part numbers, spec lines and the language toggle. */
  --fg-faint:  #5F7384;

  /* "gold" is the structural accent throughout style.css — remap to LM blue */
  --gold:      #005098;
  --gold-soft: #0066C0;
  --gold-dim:  rgba(0, 80, 152, .09);

  --red:       #E00018;

  /* White-on-#E00018 measures 4.46:1 — a hair under AA, and this is the
     emergency call button a stranded driver reads in daylight. Two shades
     darker clears it at 5.7:1 and is visually indistinguishable. */
  --red-btn:   #CE0016;

  --brand-blue: #005098;
  --brand-navy: #003463;
}

body { background: var(--ink); color: var(--fg); font-weight: 400; }

::selection { background: var(--brand-blue); color: #fff; }

/* --- header --------------------------------------------------------------- */
.hdr { background: rgba(255, 255, 255, .92); border-bottom: 1px solid var(--line); }

.hdr.is-stuck {
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 2px 18px rgba(0, 38, 77, .09);
  border-bottom-color: var(--line);
}

.logo__mark {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}

.logo__name { color: var(--brand-navy); }
.logo__sub  { color: var(--fg-faint); }

.nav a { color: var(--fg-dim); }
.nav a:hover { color: var(--brand-blue); }
.nav a[aria-current="page"] { color: var(--brand-blue); }

.lang { border-color: var(--line-2); }
.lang button[aria-pressed="true"] { background: var(--brand-blue); color: #fff; }

/* --- buttons -------------------------------------------------------------- */
.btn--gold { background: var(--brand-blue); color: #fff; }
.btn--gold:hover { background: #0066C0; }

.btn--ghost { border-color: var(--line-2); color: var(--brand-navy); }
.btn--ghost:hover { border-color: var(--brand-blue); color: var(--brand-blue); background: var(--gold-dim); }

.btn--red { background: var(--red-btn); color: #fff; }
.btn--red:hover { background: #E8001C; }

.fab--call { background: var(--red-btn); box-shadow: 0 10px 34px rgba(206, 0, 22, .34); }
.fab--call:hover { box-shadow: 0 14px 40px rgba(206, 0, 22, .46); }

/* style.css tints this for a dark header; on white it dropped to 2.7:1. */
.nav .nav__sos { color: var(--red-btn); }
.nav .nav__sos:hover { color: #A00011; }
.nav .nav__sos[aria-current="page"] { color: var(--red-btn); }
.nav .nav__sos[aria-current="page"]::after { background: var(--red-btn); }

/* --- hero ----------------------------------------------------------------- */
/* Photo stays dark for drama, but tinted navy so it belongs to the palette. */
.hero__bg img { opacity: .9; }

.hero__bg::after {
  background:
    linear-gradient(180deg, rgba(0, 32, 62, .82) 0%, rgba(0, 32, 62, .58) 42%, rgba(0, 32, 62, .88) 100%),
    radial-gradient(110% 90% at 15% 80%, rgba(0, 24, 48, .72), transparent 64%);
}

.hero .h-display, .hero .lede { color: #fff; }
.hero .lede strong { color: #fff; }
.hero .eyebrow { color: #7FC0FF; }
.hero .eyebrow::before { background: #7FC0FF; }

.stats { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .28); }
.stats > div { background: rgba(0, 28, 56, .58); backdrop-filter: blur(3px); }
.stats dt { color: #fff; }
.stats dd { color: rgba(255, 255, 255, .86); }

/* --- brand marquee -------------------------------------------------------- */
.brands { background: var(--brand-navy); border-bottom: 0; }
.brands__track span { color: rgba(255, 255, 255, .62); }
.brands__track span:hover { color: #fff; }

/* --- section rhythm ------------------------------------------------------- */
.section--alt { background: var(--ink-2); }

.eyebrow { color: var(--brand-blue); }
.eyebrow::before { background: var(--brand-blue); }

.h-section, .h-display { color: var(--brand-navy); }
.lede { color: var(--fg-dim); }

/* --- cards ---------------------------------------------------------------- */
.cat { background: var(--surface); border-color: var(--line); box-shadow: 0 2px 14px rgba(0, 38, 77, .06); }
.cat:hover { border-color: var(--brand-blue); box-shadow: 0 10px 30px rgba(0, 38, 77, .14); }
.cat__img img { opacity: 1; }
.cat::after { background: linear-gradient(180deg, rgba(0, 28, 56, .12) 0%, rgba(0, 26, 52, .78) 52%, rgba(0, 24, 48, .94) 100%); }
.cat h3 { color: #fff; }
.cat p { color: rgba(255, 255, 255, .88); }
.cat__tag { color: #fff; background: var(--red); padding: 3px 9px; border-radius: 3px; }
.cat__more { color: #7FC0FF; }

.card { background: var(--surface); border-color: var(--line); box-shadow: 0 2px 12px rgba(0, 38, 77, .06); }
.card:hover { border-color: var(--brand-blue); box-shadow: 0 10px 26px rgba(0, 38, 77, .13); }
.card__brand { color: var(--red); }
.card h3 { color: var(--brand-navy); }
.card__ask { color: var(--brand-blue); }
.card__img { background: var(--surface-2); }

.badge { background: rgba(255, 255, 255, .94); color: var(--brand-navy); border-color: var(--line-2); }
.badge--gold { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }
.badge--oem  { background: var(--red); color: #fff; }

.card__img--soon { background: repeating-linear-gradient(135deg, rgba(0,80,152,.05) 0 12px, transparent 12px 24px), var(--surface-2); }
.card__img--soon b { color: var(--brand-blue); opacity: .75; }
/* --fg-faint clears AA on white but only reached 4.09:1 on this grey tile. */
.card__img--soon span { color: var(--fg-dim); }

/* --- services / values ---------------------------------------------------- */
.service { background: var(--surface); box-shadow: 0 2px 12px rgba(0, 38, 77, .06); }
.service:hover { border-color: var(--brand-blue); }
.service::before { background: linear-gradient(90deg, var(--red), transparent 78%); }
.service__ico { background: var(--gold-dim); color: var(--brand-blue); }
.service h3 { color: var(--brand-navy); }
.service__tag { color: var(--brand-blue); border-color: rgba(0, 80, 152, .34); }

.val { background: var(--surface); }
.val__n { color: var(--red); }
.val h3 { color: var(--brand-navy); }

.vals { background: var(--line); border-color: var(--line); }

/* --- brand wall ----------------------------------------------------------- */
.brandtile { --bc: var(--red); background: var(--surface); }
.brandtile:hover { background: var(--ink-2); }
.brandtile__name { color: var(--brand-navy); }
.brandtile__origin { color: var(--bc); }

/* --- rescue band ---------------------------------------------------------- */
.rescue {
  background: linear-gradient(130deg, var(--brand-navy) 0%, var(--brand-blue) 100%);
  border-block-color: rgba(0, 0, 0, .12);
}
.rescue::before { background: radial-gradient(60% 150% at 12% 50%, rgba(224, 0, 24, .34), transparent 66%); }
.rescue__ico { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .42); color: #fff; }
.rescue__body h2 { color: #fff; }
.rescue__body p  { color: rgba(255, 255, 255, .9); }
.rescue__body strong { color: #fff; }
.rescue__note { color: rgba(255, 255, 255, .78); }
.rescue .btn--line { background: #06C755; color: #04260F; }

/* --- emergency hero (battery page) ---------------------------------------- */
.ehero {
  background: linear-gradient(140deg, var(--brand-navy) 0%, var(--brand-blue) 62%, #0A66B8 100%);
  border-bottom-color: rgba(0, 0, 0, .14);
}
.ehero::before { background: radial-gradient(68% 118% at 14% 26%, rgba(224, 0, 24, .4), transparent 62%); }
.ehero .h-display { color: #fff; }
.ehero .lede, .ehero .lede strong { color: rgba(255, 255, 255, .94); }
.ehero .eyebrow { color: #FFB4BC; }
.ehero .eyebrow::before { background: #FFB4BC; }
.ehero__quick li { color: rgba(255, 255, 255, .9); }
.ehero__quick li strong { color: #fff; }
.ehero__quick li::before { border-color: #FFB4BC; }
.ehero__call { background: var(--red-btn); box-shadow: 0 12px 34px rgba(0, 0, 0, .3); }
.ehero__call:hover { background: #E8001C; }

/* --- page header ---------------------------------------------------------- */
.phead {
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 100%);
  border-bottom: 0;
}
.phead .h-display { color: #fff; }
.phead .lede { color: rgba(255, 255, 255, .92); }
.phead .eyebrow { color: #7FC0FF; }
.phead .eyebrow::before { background: #7FC0FF; }

/* --- notices / symptoms / FAQ --------------------------------------------- */
.notice { background: rgba(0, 80, 152, .06); border-color: rgba(0, 80, 152, .28); }
.notice svg { color: var(--brand-blue); }
.notice strong { color: var(--brand-navy); }

.symptom { background: var(--surface); border-left-color: var(--red); box-shadow: 0 2px 10px rgba(0, 38, 77, .05); }
.symptom b { color: var(--brand-navy); }
.symptom__n { color: var(--red); }

.faq summary { color: var(--brand-navy); }
.faq summary:hover { color: var(--brand-blue); }
.faq summary::after { border-color: var(--brand-blue); }
.faq__a strong { color: var(--brand-navy); }

.ticks li::before { border-color: var(--red); }
.ticks strong { color: var(--brand-navy); }

.zones span { background: #fff; }
.zones span:hover { border-color: var(--brand-blue); color: var(--brand-blue); }

.empty { color: var(--fg-dim); border-color: var(--line-2); }

.filters { border-bottom-color: var(--line); }
.filters button { border-color: var(--line-2); color: var(--fg-dim); }
.filters button[aria-pressed="true"] { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }

/* --- contact -------------------------------------------------------------- */
.ccard { background: var(--surface); box-shadow: 0 2px 10px rgba(0, 38, 77, .05); }
a.ccard:hover { border-color: var(--brand-blue); }
.ccard__ico { background: var(--gold-dim); color: var(--brand-blue); }
.ccard__v { color: var(--brand-navy); }
.map { background: var(--surface); }
.map iframe { filter: none; }
.hours td { color: var(--brand-navy); }

/* --- CTA band ------------------------------------------------------------- */
.cta-band { background: var(--ink-2); border-block-color: var(--line); }
.cta-band::before { background: radial-gradient(70% 140% at 50% 0%, rgba(0, 80, 152, .10), transparent 72%); }

/* --- split media ---------------------------------------------------------- */
.split__media { border-color: var(--line); box-shadow: 0 4px 20px rgba(0, 38, 77, .08); }

/* --- footer --------------------------------------------------------------- */
.ftr { background: var(--brand-navy); color: rgba(255, 255, 255, .8); }
.ftr .logo__mark { background: #fff; color: var(--brand-navy); border-color: #fff; }
.ftr .logo__name { color: #fff; }
.ftr .logo__sub { color: rgba(255, 255, 255, .6); }
.ftr__blurb { color: rgba(255, 255, 255, .76); }
.ftr h4 { color: rgba(255, 255, 255, .58); }
.ftr li a, .ftr li span { color: rgba(255, 255, 255, .82); }
.ftr li a:hover { color: #fff; }
.ftr__top { border-bottom-color: rgba(255, 255, 255, .18); }
.ftr__bottom { color: rgba(255, 255, 255, .78); }
/* .52 measured 4.44:1 on the navy footer — just under AA. */
.ftr__disclaimer { color: rgba(255, 255, 255, .62); }

/* --- mobile nav panel ----------------------------------------------------- */
@media (max-width: 900px) {
  .nav { background: rgba(255, 255, 255, .98); border-bottom-color: var(--line); }
  .nav a { border-bottom-color: var(--line); }
}