/* ===========================================================================
   theme.css — Mz Bee's Bail Bonds
   LIGHT re-theme of the local-site-builder dark design system.
   Loaded LAST (after styles.css + pages.css) so it wins every cascade tie.
   Palette pulled from the client's live site (Flatsome --primary #114a7c) +
   the hot-pink/black logo, which becomes the urgent-CTA accent.
   - Body  = light (white / soft blue-gray), navy headings, dark text
   - Heroes = navy-tinted photo banners with white text + pink accents
   =========================================================================== */
:root{
  --bg:#ffffff; --bg2:#f4f7fb; --bg3:#eef3f8; --card:#ffffff; --line:#d8e1ea;
  --ink:#0f1b29; --muted:#51606f; --muted2:#8493a3;
  /* primary (was green) -> brand navy; accent (was orange) -> logo hot-pink */
  --green:#114a7c; --green-d:#0d3860; --green-soft:rgba(17,74,124,.10);
  --orange:#ec1c84; --orange-d:#c41570;
  --shadow:0 22px 50px -24px rgba(17,74,124,.30);
}
body{background:var(--bg);color:var(--ink)}

/* ---------- BUTTONS ---------- */
.btn-green{background:var(--green);color:#fff;box-shadow:0 12px 30px -12px rgba(17,74,124,.5)}
.btn-green:hover{background:var(--green-d);color:#fff;box-shadow:0 16px 38px -12px rgba(17,74,124,.6)}
.btn-orange{background:var(--orange);color:#fff;box-shadow:0 12px 30px -12px rgba(236,28,132,.5)}
.btn-orange:hover{background:var(--orange-d);color:#fff}
/* ghost button: light by default (on white body)… */
.btn-ghost{background:rgba(17,74,124,.05);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:rgba(17,74,124,.10);border-color:var(--green)}
/* …but stays light-on-dark when it sits over a hero photo */
.hero .btn-ghost,.subhero .btn-ghost{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.55)}
.hero .btn-ghost:hover,.subhero .btn-ghost:hover{background:rgba(255,255,255,.20);border-color:#fff}

/* ---------- NAV (always solid white so the pink/black logo stays legible) -- */
.nav{background:#fff;border-bottom:1px solid var(--line)}
.nav.scrolled{background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom-color:var(--line);box-shadow:0 6px 24px -16px rgba(17,74,124,.45)}
.nav-links a{color:var(--muted)}
.nav-links a:hover{color:var(--green)}
.nav-phone{color:var(--ink)}
.nav-phone svg{fill:var(--orange)}
.hamb span{background:var(--ink)}
.nav-links.mobile{background:rgba(255,255,255,.98);border-bottom:1px solid var(--line)}
/* real logo image in the nav + footer wordmark slot */
.brand-logo{height:46px;width:auto;display:block}
@media(max-width:760px){.brand-logo{height:38px}}

/* ---------- HERO / SUBHERO: navy-tinted photo banner, white text ---------- */
.hero-bg::after{background:linear-gradient(180deg,rgba(13,40,70,.82) 0%,rgba(17,74,124,.66) 42%,rgba(11,28,46,.92) 100%)}
.subhero .hero-bg::after{background:linear-gradient(180deg,rgba(13,40,70,.84),rgba(17,74,124,.68) 45%,rgba(11,28,46,.93))}
.hero h1,.subhero h1{color:#fff}
.hero h1 em{color:var(--orange);-webkit-text-stroke:0}
.hero p.sub,.subhero p.sub{color:#e7ecf1}
.subhero{border-bottom-color:rgba(255,255,255,.10)}
.hero-trust span{color:#cfd8e1}
.hero-trust b{color:#fff}
.hero-trust .sep{background:rgba(255,255,255,.3)}
.scrollcue{color:rgba(255,255,255,.7)}
.scrollcue i{border-color:rgba(255,255,255,.4)}
.scrollcue i::after{background:var(--orange)}
/* unified ribbon pill (home + inner-page heroes — inner ribbon was unstyled) */
.hero .ribbon,.subhero .ribbon{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.30);color:#fff;font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-weight:600;font-size:13.5px;padding:8px 15px;border-radius:30px;margin-bottom:20px;backdrop-filter:blur(4px)}
.hero .ribbon .dot,.subhero .ribbon .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange);flex:0 0 8px}

/* ---------- STAT BAR ---------- */
.stats{background:linear-gradient(180deg,var(--bg),var(--bg2))}
.stat .n .u{color:var(--orange)}

/* ---------- SPLIT / MEDIA BADGE ---------- */
.split .media .badge{background:rgba(15,27,41,.82);color:#fff;border-color:rgba(255,255,255,.16)}
.split .media .badge b{color:var(--orange)}

/* ---------- PROGRAM CARDS ---------- */
.prog:hover{border-color:var(--green)}
.prog .ph::after{background:linear-gradient(180deg,transparent 48%,rgba(15,27,41,.5))}
.prog .tag{background:var(--green);color:#fff}
.prog .tag.kid{background:var(--orange);color:#fff}
.prog .age{color:var(--orange)}
.prog .pl .arw{color:var(--orange)}

/* ---------- PILLARS ---------- */
.pillar:hover{border-color:var(--green)}
.pillar .pn{color:rgba(17,74,124,.16)}

/* ---------- PROOF ---------- */
.proof-main .ov h3{color:#fff}
.proof-main .ov p{color:#dfe6ec}
.proof-card .lab{color:#fff;background:rgba(15,27,41,.72);border-color:rgba(255,255,255,.14)}

/* ---------- COACHES / FEATURE ICONS / TICKS ---------- */
.feat .ic{border-color:rgba(17,74,124,.25)}
.tick{border-color:rgba(17,74,124,.32)}

/* ---------- TESTIMONIALS ---------- */
.tst-card p{color:var(--muted)}
.tst-card .av{color:#fff}

/* ---------- OFFER / PRICING ---------- */
.offer-banner{background:linear-gradient(135deg,rgba(17,74,124,.10),rgba(17,74,124,.02));border-color:rgba(17,74,124,.22)}
.offer-banner .free{color:var(--green)}
.offer-banner p{color:var(--muted)}
.plan.pop{border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 20px 50px -22px rgba(17,74,124,.4)}
.plan .pp{background:var(--green);color:#fff}

/* ---------- SCHEDULE / LOCATIONS ---------- */
.sblock .st{color:var(--green)}
.loc.primary{border-color:rgba(17,74,124,.4)}
.loc.primary .pin{background:var(--green-soft);color:var(--green);border-color:rgba(17,74,124,.35)}
.loc.second .pin{background:rgba(236,28,132,.10);color:var(--orange);border-color:rgba(236,28,132,.35)}
.loc .map{background:#e9eef3}

/* ---------- LEAD FORM ---------- */
.intro::before{background:radial-gradient(60% 80% at 80% 20%,rgba(17,74,124,.06),transparent)}
.field input,.field select{background:#fff;border-color:var(--line);color:var(--ink)}
.field input::placeholder{color:var(--muted2)}
.field input:focus,.field select:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}

/* ---------- FINAL CTA ---------- */
.final-card .bg::after{background:linear-gradient(180deg,rgba(15,27,41,.82),rgba(13,40,70,.92))}
.final-card h2{color:#fff}
.final-card p{color:#e7ecf1}

/* ---------- FOOTER ---------- */
.foot-col h5{color:var(--green)}
.socials a:hover{border-color:var(--green);background:var(--green-soft)}
.socials a:hover svg{fill:var(--green)}

/* ---------- INNER-PAGE CHROME (pages.css) ---------- */
.crumbs a:hover{color:var(--green);border-bottom-color:var(--green)}
.crumbs span{color:var(--green)}
.prose ul li::before{color:var(--orange)}
.factbar .f .k{color:var(--green)}
.areas a:hover{border-color:var(--green);color:var(--green)}
.linkcard:hover{border-color:var(--green)}
.linkcard .lk{color:var(--green)}
.linkcard .go span{color:var(--orange)}
.ctaband{background:linear-gradient(135deg,rgba(17,74,124,.09),rgba(17,74,124,.02));border-color:rgba(17,74,124,.2)}
.ctaband p{color:var(--muted)}

/* ---------- GUIDE / LISTICLE PAGES (if used) ---------- */
.answer{background:linear-gradient(135deg,var(--green-soft),transparent);border-color:rgba(17,74,124,.18)}
.answer p{color:var(--ink)}
.gitem .grank{background:var(--green-soft);border-color:rgba(17,74,124,.2);color:var(--green)}
.gitem .gdetail{color:var(--ink)}
.gitem .gtag{color:var(--green);border-color:rgba(17,74,124,.25)}
.gitem .gnote b{color:var(--green)}
.gtable th{color:var(--green)}

/* ---------- INSTAGRAM grid (follow @mzbee.tv) ---------- */
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.ig-grid a{position:relative;aspect-ratio:1;overflow:hidden;border-radius:12px;display:block;border:1px solid var(--line)}
.ig-grid img{width:100%;height:100%;object-fit:cover;transition:.35s}
.ig-grid a:hover img{transform:scale(1.07)}
.ig-grid a::after{content:"";position:absolute;inset:0;opacity:0;transition:.3s;background:linear-gradient(45deg,rgba(131,58,180,.35),rgba(236,28,132,.4) 55%,rgba(252,176,69,.3))}
.ig-grid a:hover::after{opacity:1}
@media(max-width:760px){.ig-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- Google reviews band (real reviews, site-wide) ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1060px;margin:0 auto}
.rev-grid .tst-card{height:100%;text-align:left;align-items:flex-start}
.rev-stars{color:#f5a623;letter-spacing:2px;font-size:17px;line-height:1}
.rev-text{margin:10px 0 14px;color:var(--ink);font-size:15px;line-height:1.55}
.rev-badge{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:600}
.rev-badge b{color:var(--primary,#114a7c);font-size:18px}
.rev-badge:hover{text-decoration:underline}
@media(max-width:820px){.rev-grid{grid-template-columns:1fr;max-width:520px}}