/* ============================================================
   CARRERA: Bulldog Red (UGA PMS 200, #BA0C2F), picked 2026-09-25
   Arch Black + red keywords + a red warranty block. Loads after
   theme.css and styles.css and works in both modes:
     :root[data-theme]          both modes (theme.js always sets it)
     :root[data-theme="light"]  paper page, true-black blocks
     :root[data-theme="dark"]   true-black page, white forms
   Bulldog Red reads 6:1 on paper, and white on it reads 6.6:1. On
   the black page it is 2.9:1 against the cards' tone, under 3:1
   even for headline type, so red TEXT there uses a lifted red.
   Buttons and red blocks always use the exact PMS 200.
   ============================================================ */
:root {
  --bd: #BA0C2F;        /* Bulldog Red, PMS 200 */
  --bd-deep: #970A26;   /* hover / pressed */
  --bd-lift: #D4153A;   /* red text and stars on the black page (3.6:1+) */
  --bd-tint: #FF8597;   /* error text on black (9:1) */
}

/* ---------- both modes ---------- */
:root[data-theme] .progress i,
:root[data-theme] .card::before { background: var(--bd); }
:root[data-theme] .stars,
:root[data-theme] .rating b,
:root[data-theme] .score b,
:root[data-theme] .rw { color: var(--bd); }

/* the trust band: one solid red strip, the stamp drawn white */
:root[data-theme] .band { background: var(--bd); color: #FFFFFF; }
:root[data-theme] .band__row img { filter: invert(1); }

/* every Get My Free Estimate button */
:root[data-theme] .btn--light,
:root[data-theme] .btn--dark { background: var(--bd); color: #FFFFFF; }
:root[data-theme] .btn--light:hover,
:root[data-theme] .btn--dark:hover { background: var(--bd-deep); }
:root[data-theme] .sec--light .btn--dark:focus-visible { outline-color: #FFFFFF; }

/* the warranty block: Bulldog Red, white type, an Arch Black button */
:root[data-theme] .sec--light { background: var(--bd); color: #FFFFFF; }
:root[data-theme] .sec--light .sec__h,
:root[data-theme] .sec--light .rw,
:root[data-theme] .assure h3,
:root[data-theme] .assure svg { color: #FFFFFF; }
:root[data-theme] .assure p { color: rgba(255,255,255,.9); }
:root[data-theme] .sec--light .btn--dark { background: #000000; color: #FFFFFF; }
:root[data-theme] .sec--light .btn--dark:hover { background: #1C1C1C; }
:root[data-theme] .war__media { box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }

/* red buttons breathe a red ring; the black one on the red block breathes white */
@keyframes pulseRed {
  0%   { box-shadow: 0 12px 24px -14px rgba(0,0,0,.45), 0 0 0 0 rgba(186,12,47,.45); }
  70%  { box-shadow: 0 12px 24px -14px rgba(0,0,0,.45), 0 0 0 14px rgba(186,12,47,0); }
  100% { box-shadow: 0 12px 24px -14px rgba(0,0,0,.45), 0 0 0 0 rgba(186,12,47,0); }
}
@keyframes pulseWhite {
  0%   { box-shadow: 0 12px 24px -14px rgba(0,0,0,.5), 0 0 0 0 rgba(255,255,255,.55); }
  70%  { box-shadow: 0 12px 24px -14px rgba(0,0,0,.5), 0 0 0 12px rgba(255,255,255,0); }
  100% { box-shadow: 0 12px 24px -14px rgba(0,0,0,.5), 0 0 0 0 rgba(255,255,255,0); }
}
:root[data-theme].fx .cta .btn, :root[data-theme].fx .nav__cta, :root[data-theme].fx .sticky .btn,
:root[data-theme].fx .card button[type="submit"], :root[data-theme].fx .qf__next,
:root[data-theme].fx .promo__form button[type="submit"] { animation-name: pulseRed; }
:root[data-theme].fx .sec--light .cta .btn { animation-name: pulseWhite; }

/* 1: on phones the sticky pill is the only CTA, and it crosses the red warranty
   block; a white rim keeps it visible there (6.6:1) and on black */
:root[data-theme] .sticky .btn { border: 2px solid #FFFFFF; }

/* 3: focus rings that show on the form cards (white cards in dark, black in light) */
:root[data-theme="dark"] :is(.card, .promo__card) :focus-visible { outline-color: #000000; }
:root[data-theme="light"] :is(.card, .promo__card) :focus-visible { outline-color: #FFFFFF; }

/* 2: on phones the hero and contact copy sit over the photo, and the veil lets
   it through; measured under the glyphs, the red words need more contrast there */
@media (width < 60rem) {
  :root[data-theme="light"] .hero .rw { color: var(--bd-deep); }
  :root[data-theme="dark"] .hero .rw,
  :root[data-theme="dark"] .quote .rw,
  :root[data-theme="dark"] .quote .rating b,
  :root[data-theme="dark"] .quote .stars { color: #FF4557; }
}

/* ---------- light: the ink blocks become one flat Arch Black ---------- */
:root[data-theme="light"] .card,
:root[data-theme="light"] .promo__card {
  background: #000000;
  box-shadow: 0 34px 70px -34px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
}
/* errors on the black forms: a light red, not the old orange */
:root[data-theme="light"] .field__lab em,
:root[data-theme="light"] .form-status.is-err { color: var(--bd-tint); }
:root[data-theme="light"] .field__in.is-bad { border-color: var(--bd-tint); box-shadow: 0 0 0 3px rgba(255,133,151,.35); }

/* ---------- dark: red text on the black page uses the lifted red ---------- */
:root[data-theme="dark"] .rw,
:root[data-theme="dark"] .stars,
:root[data-theme="dark"] .rating b,
:root[data-theme="dark"] .score b { color: var(--bd-lift); }
:root[data-theme="dark"] .sec--light .rw { color: #FFFFFF; }

/* ---------- the light / dark switch in the top bar ---------- */
.nav__end { display: flex; align-items: center; gap: 12px; }
.mode {
  width: 44px; height: 44px; display: grid; place-items: center; flex: none;
  border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: var(--txt);
  cursor: pointer; transition: background-color .2s, border-color .2s;
}
.mode:hover { border-color: currentColor; }
.mode svg { width: 20px; height: 20px; }
/* it shows where a tap takes you: a moon on the light page, a sun on the dark one */
.mode .mode__sun { display: none; }
:root[data-theme="dark"] .mode .mode__moon { display: none; }
:root[data-theme="dark"] .mode .mode__sun { display: block; }
:root[data-theme="light"] .mode { border-color: rgba(20,19,18,.22); color: #141312; }
:root[data-theme="light"] .mode:hover { border-color: #141312; }

/* ---------- how every job runs ---------- */
:root[data-theme] .cmp__n { color: var(--bd); }
:root[data-theme="dark"] .cmp__n { color: var(--bd-lift); }

/* ---------- Google review cards: the four-colour rule, as a background layer per theme ---------- */
:root[data-theme="light"] .rev {
  background:
    linear-gradient(90deg, #4285f4 0 25%, #ea4335 25% 50%, #fbbc05 50% 75%, #34a853 75% 100%) top / 100% 4px no-repeat padding-box,
    radial-gradient(420px circle at var(--mx, 50%) var(--my, -40%), rgba(20,19,18,.05), transparent 60%) padding-box,
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    linear-gradient(145deg, rgba(20,19,18,.22), rgba(20,19,18,.06) 40%, rgba(20,19,18,.14)) border-box;
}
:root[data-theme="dark"] .rev {
  background: linear-gradient(90deg, #4285f4 0 25%, #ea4335 25% 50%, #fbbc05 50% 75%, #34a853 75% 100%) top / 100% 4px no-repeat padding-box, var(--coal);
}
:root[data-theme="dark"] .rev::after, :root[data-theme="dark"] .rev__av { --bd: var(--bd-lift); }