/* ============================================================
   WaterHeater.app brand — this standalone site's palette

   Loaded after styles.css on index.html only. Repoints the shared
   teal/dark design tokens to the actual WaterHeater.app palette —
   Deep Navy #03162F for headings/dark surfaces, Flame Orange
   #C54C0F for primary actions — instead of editing styles.css
   directly, since that file's tokens are still a dependency of
   this standalone site's own build, not a shared multi-page system.
   ============================================================ */
:root {
  --color-teal: #C54C0F;
  --color-teal-dark: #A63F0B;
  --color-teal-darker: #7E3208;
  --color-teal-soft: #FBEAE0;
  --color-black: #03162F;
  --color-dark: #03162F;
}

.site-header { background: rgba(3, 22, 47, 0.94); }
.site-header.is-scrolled { border-bottom-color: rgba(255, 255, 255, .12); }

.brand--light:hover, .brand--light:hover .brand__name { color: #fff; }

/* This site has no nav links/hamburger menu, just the brand mark
   and the primary CTA — keep the CTA pinned right and visible at
   every width instead of the multi-page header's mobile behavior. */
.nav__actions { margin-left: auto; }
@media (max-width: 640px) {
  .nav__actions .btn--primary { display: inline-flex !important; }
}
@media (max-width: 420px) {
  .nav { gap: var(--sp-xs); }
  .brand__name { font-size: 16px; }
  .nav__actions .btn--primary { padding: 9px 12px; font-size: var(--fs-small); min-height: 38px; white-space: normal; text-align: center; }
}

/* Expired-warranty state stays inside the navy/orange palette
   rather than introducing an off-brand red. */
.wc-result__badge--expired { background: rgba(3, 22, 47, .08); color: #03162F; }