/* Fixino visual language layer for Yonkers (2026-11-13)
   Reference: Fixino electrician demo (themeht) — deep navy #03014C / #0F1E4C,
   orange accent #FF6B00 (on navy, 6.61:1), primary #E42002 (white text 4.66:1 AA),
   light tint #F1F7F3, Mona Sans, soft rounded cards, pill CTAs.
   Content, URLs, schema untouched — this file only restyles. */

:root {
  --primary: #E42002;
  --primary-foreground: #ffffff;
  --secondary: #03014C;
  --secondary-foreground: #ffffff;
  --background: #F7FAF7;
  --foreground: #0A0E29;
  --muted: #EFF4F0;
  --muted-foreground: #45506B;
  --accent: #FFF1E8;
  --accent-foreground: #A63400;
  --border: #DCE5DE;
  --input: #DCE5DE;
  --ring: #E42002;
  --radius: 1rem;
}

/* Dark sections become Fixino navy; scoped primary inside dark = orange accent */
.bg-secondary, .bg-black, .bg-zinc-900, .bg-zinc-800 { --primary: #FF6B00; }
.bg-secondary { background-color: #03014C !important; }
.bg-black { background-color: #020138 !important; }
.bg-zinc-900 { background-color: #0F1E4C !important; }
.bg-zinc-800 { background-color: #182861 !important; }
.border-zinc-700, .border-zinc-800 { border-color: rgba(255,255,255,.16) !important; }

/* Typography: Mona Sans, Fixino sentence-case headings */
body { font-family: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; }
h1, h2 { text-transform: none !important; letter-spacing: -0.015em !important; }
header nav a, header nav button { text-transform: none; letter-spacing: .01em; }

/* Floating header bar -> navy gradient pill */
header > div.bg-secondary {
  background: linear-gradient(90deg, #03014C 0%, #0F1E4C 100%) !important;
  border-radius: 18px !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 18px 44px rgba(3,1,76,.35) !important;
}
aside#mobile-sidebar { background-color: #03014C !important; }

/* Hero (first section of every page gets .fx-hero from the build script) */
.fx-hero {
  background: linear-gradient(130deg, #03014C 0%, #0F1E4C 62%, #1B3168 100%) !important;
}
.fx-hero .absolute.inset-0 {
  background-image: radial-gradient(rgba(255,107,0,.5) 1px, transparent 1.5px) !important;
}
/* Eyebrow badge on dark hero */
.fx-hero .bg-primary\/20 {
  background-color: rgba(255,107,0,.18) !important;
  border-color: rgba(255,107,0,.55) !important;
  color: #FFB37E !important;
  border-radius: 999px !important;
}

/* CTA buttons: Fixino pill shape, AA red-orange, soft shadow.
   (Full-width CTA bands are sections, not anchors, and keep the flat fill.) */
a.bg-primary, button.bg-primary {
  background-color: #E42002 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 26px rgba(228,32,2,.32);
}
a.bg-primary:hover, button.bg-primary:hover { background-color: #C81D02 !important; }
/* Mobile sticky call bar */
.fixed.bg-primary { background-color: #E42002 !important; border-radius: 16px 16px 0 0; }

/* Cards: soft Fixino radius + shadow + lift */
.bg-card {
  border-radius: 20px !important;
  border-color: #E0E9E2 !important;
  box-shadow: 0 10px 30px rgba(3,1,76,.07) !important;
}
a.bg-card { transition: transform .25s ease, box-shadow .25s ease; }
a.bg-card:hover { transform: translateY(-4px); box-shadow: 0 20px 42px rgba(3,1,76,.15) !important; }

/* Warm tint band (was red-50) -> Fixino warm orange tint */
.bg-red-50 { background-color: #FFF4EC !important; }
.border-red-200 { border-color: #FFD9C2 !important; }

/* Footer: navy gradient, orange top border */
footer.bg-black {
  background: linear-gradient(180deg, #0F1E4C 0%, #020138 100%) !important;
  border-top-color: #FF6B00 !important;
}

/* ---- Fixino info bar (injected after hero) ---- */
.fx-infobar { max-width: 80rem; margin: -2.75rem auto 0; padding: 0 1rem; position: relative; z-index: 30; }
.fx-infobar-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .fx-infobar-grid { grid-template-columns: repeat(3, 1fr); } }
.fx-info-card {
  background: #ffffff; border: 1px solid #E0E9E2; border-radius: 20px;
  box-shadow: 0 16px 38px rgba(3,1,76,.12);
  padding: 1.1rem 1.25rem; display: flex; gap: .9rem; align-items: center;
}
.fx-info-ico {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px;
  background: #FFF1E8; display: flex; align-items: center; justify-content: center;
}
.fx-info-ico svg { width: 24px; height: 24px; }
.fx-info-k { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #E42002; margin: 0 0 .15rem; }
.fx-info-v { font-weight: 700; color: #0A0E29; line-height: 1.35; margin: 0; }
.fx-info-v a { color: #E42002; text-decoration: none; }
.fx-info-v a:hover { text-decoration: underline; }
.fx-info-s { font-size: .85rem; color: #45506B; margin: .1rem 0 0; }

/* ---- Fixino marquee (homepage) ---- */
.fx-marquee { background: #03014C; overflow: hidden; padding: .9rem 0; margin-top: 3.5rem; }
.fx-marquee-track { display: flex; width: max-content; animation: fx-scroll 30s linear infinite; }
.fx-marquee span {
  color: #ffffff; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  font-size: .85rem; white-space: nowrap; padding-right: .5rem;
}
.fx-marquee b { color: #FF6B00; font-weight: 800; padding: 0 .9rem; }
@keyframes fx-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fx-marquee-track { animation: none; } }

/* Rounded media like the demo's soft image cards */
section img { border-radius: 18px; }
header img, footer img, .fx-infobar img { border-radius: 0; }

/* v2 fixes from live render check (Nov 13):
   - H3s also carry the old theme's uppercase class; Fixino headings are sentence-case.
   - Giant stat words ("Dispatch") overflowed their narrow cards and wrapped mid-word. */
h3 { text-transform: none !important; letter-spacing: -0.01em; }
.bg-card { min-width: 0; }
div.bg-card > span.text-5xl, div.bg-card > span.text-6xl {
  font-size: clamp(1.85rem, 3.2vw, 2.7rem) !important;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

/* v3 (Nov 13 render check #2): stat-card grids stretched to the full height of
   the neighbouring text column, leaving tall empty cards. Size rows to content
   and centre the compact cards in the column instead. */
.grid.grid-cols-2.gap-4 { align-content: center; }