/* ============================================================================
   theme.css — The $50 Eye Guy light theme.
   Loaded AFTER styles.css + pages.css to convert the dark engine to a clean,
   white local-optometry look that matches optometristpensacola.com:
   white background, deep-navy text, brand BLUE accent + brand RED secondary
   (the red glasses / cyan "FREE EYE EXAM" of the original logo).
   ========================================================================== */
:root{
  --bg:#ffffff; --bg2:#f3f8fc; --bg3:#eef5fb; --card:#ffffff; --line:#e2eaf1;
  --ink:#0f243a; --muted:#4d5e70; --muted2:#7c8b9a;
  --green:#0c83c6; --green-d:#0a6aa1; --green-soft:rgba(12,131,198,.10);
  --orange:#e23b3b; --orange-d:#c52d2d;
  --shadow:0 22px 50px -26px rgba(15,36,58,.30);
}
body{background:var(--bg);color:var(--ink)}

/* nav */
.nav.scrolled{background:rgba(255,255,255,.92);border-bottom-color:var(--line);box-shadow:0 8px 30px -22px rgba(15,36,58,.5)}
.brand .mark{background:linear-gradient(135deg,#e8f4fc,#cfe8f8)!important;color:var(--green);border-color:var(--green);box-shadow:0 0 16px -6px var(--green)}
/* scrolled (white bar): dark links */
.nav-links a{color:var(--muted)}.nav-links a:hover{color:var(--ink)}
.nav-phone{color:var(--ink)}
.hamb span{background:var(--ink)}
/* at top, over the dark hero photo: light links so they're readable */
.nav:not(.scrolled) .nav-links a{color:rgba(255,255,255,.94);text-shadow:0 1px 8px rgba(0,0,0,.45)}
.nav:not(.scrolled) .nav-links a:hover{color:#fff}
.nav:not(.scrolled) .nav-phone{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.nav:not(.scrolled) .nav-phone svg{fill:#fff}
.nav:not(.scrolled) .hamb span{background:#fff}

/* buttons — white text on the blue accent */
.btn-green{color:#fff;box-shadow:0 12px 28px -12px rgba(12,131,198,.6)}
.btn-green:hover{background:#1295db;box-shadow:0 16px 36px -12px rgba(12,131,198,.7)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--bg2);border-color:#c9d6e2}
.prog .tag,.plan .pp{color:#fff}

/* home hero — light, with a soft brand-blue wash (no photo) */
.hero{background:linear-gradient(180deg,#eef6fc 0%,#f7fbfe 46%,#ffffff 100%);min-height:auto;padding:140px 0 84px}
.hero .ribbon{background:var(--green-soft);border-color:rgba(12,131,198,.30);color:var(--green-d)}
.hero h1{color:var(--ink)}
.hero h1 em{color:var(--green)}
.hero p.sub{color:var(--muted)}
.hero-trust span{color:var(--muted)}.hero-trust b{color:var(--ink)}
.hero-trust>span:first-child{color:var(--orange);letter-spacing:.05em;font-size:16px}

/* photo hero variant — real storefront photo behind, dark scrim, white text */
.hero.haspic{background:#0a0f16;min-height:auto;padding:150px 0 92px}
.hero.haspic .hero-bg{position:absolute;inset:0;z-index:0}
.hero.haspic .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero.haspic .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,15,24,.62),rgba(8,15,24,.72) 55%,rgba(8,15,24,.9))}
.hero.haspic .hero-in{position:relative;z-index:2}
.hero.haspic .ribbon{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28);color:#fff}
.hero.haspic h1{color:#fff}
.hero.haspic h1 em{color:#5cc6ff}
.hero.haspic p.sub{color:#eaf2f9}
.hero.haspic .hero-trust span{color:#dbe6f0}.hero.haspic .hero-trust b{color:#fff}
.hero.haspic .hero-trust>span:first-child{color:#ffc031}
.hero.haspic .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.32)}
.hero.haspic .btn-ghost:hover{background:rgba(255,255,255,.2)}
.hero.haspic .scrollcue{color:#dceaf6}

/* stat bar accent stars */
.stat .n{color:var(--ink)}

/* intro media — show the full marketing graphic (award + logo) instead of cropping it */
.split .media.contain{aspect-ratio:auto;background:linear-gradient(135deg,#eef6fc,#ffffff);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;padding:14px}
.split .media.contain img{position:static;width:100%;height:auto;object-fit:contain;border-radius:10px}
.split .media.contain:hover img{transform:none}
.split .media .badge{background:rgba(15,36,58,.86);border-color:rgba(255,255,255,.18);color:#fff}
.split .media .badge b{color:#7ec8f0}

/* feature/system icons + text */
.feat p,.split ul.ticks li{color:var(--muted)}
.system{background:var(--bg)}
/* wide landscape media (storefront) — don't crop into a portrait */
.split .media.wide{aspect-ratio:16/10}
.split .media.wide img{object-position:center}

/* pillars (home uses a custom .pil-icon block; engine .pillar also lightened) */
.pillar .pn{color:#c2d3e2}
.pil-icon h4{color:var(--ink)!important}

/* offer / pricing */
.offer-banner{background:linear-gradient(135deg,rgba(12,131,198,.12),rgba(12,131,198,.03));border-color:rgba(12,131,198,.28)}
.offer-banner .free{color:var(--green)}
.offer-banner p{color:var(--muted)}
.plan.pop{box-shadow:0 0 0 1px var(--green),0 22px 50px -24px rgba(12,131,198,.4)}

/* testimonials (if used) */
.tst-card p{color:var(--ink)}

/* final CTA sits over a photo → force white heading on a stronger dark scrim */
.final-card .bg::after{background:linear-gradient(180deg,rgba(8,15,24,.86),rgba(8,15,24,.93))}
.final .eyebrow{color:#7ec8f0}
.final-card h2{color:#fff}
.final-card p{color:#eaf2f9}

/* footer */
footer{background:var(--bg2);border-top-color:var(--line)}

/* internal-linking helpers (drive equity to the homepage) */
.prose .homerel{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.prose .homerel a,.homerel a{color:var(--green);font-weight:600}
.prose .homerel a:hover,.homerel a:hover{color:var(--green-d)}
.foot-home{margin-top:12px;font-size:13.5px;color:var(--muted2)}
.foot-home a{color:var(--green);font-weight:600}

/* brand logo image (nav + footer) — sits on a clean white plate so it reads on dark or light */
.brand-logo{height:42px;width:auto;display:block;background:#fff;border-radius:9px;padding:5px 10px;box-shadow:0 2px 14px rgba(15,36,58,.16)}
.foot-brand .brand{margin-bottom:16px}

/* footer map embed */
.foot-map{margin:6px 0 30px}
.foot-map iframe{width:100%;height:240px;border:0;border-radius:14px;filter:grayscale(.18) contrast(1.03);display:block}
.foot-map-cta{display:inline-block;margin-top:10px;font-family:var(--cond);text-transform:uppercase;letter-spacing:.05em;font-weight:700;font-size:13.5px;color:var(--green)}
.foot-map-cta:hover{color:var(--green-d)}
@media(max-width:760px){.brand-logo{height:36px;padding:4px 8px}.foot-map iframe{height:200px}}

/* generated-page CTA band → blue tint */
.ctaband{background:linear-gradient(135deg,rgba(12,131,198,.12),rgba(12,131,198,.03));border-color:rgba(12,131,198,.26)}
.ctaband p{color:var(--muted)}

/* generated subheroes sit over a dark-overlaid photo → white H1 + light ribbon + light sub */
.subhero p.sub{color:#e8f0f7}
.subhero h1{color:#fff}
.subhero .ribbon{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);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:18px}
.subhero .ribbon .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.subhero .hero-cta .btn-ghost{background:rgba(255,255,255,.13);color:#fff;border-color:rgba(255,255,255,.34)}
.subhero .hero-cta .btn-ghost:hover{background:rgba(255,255,255,.22)}

/* listicle (per-neighborhood "top reasons" ranked list) */
.listicle-sec{background:var(--bg2)}
.listicle{max-width:820px;margin:30px auto 0;display:grid;gap:14px}
.listicle .li{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:0 6px 18px -14px rgba(15,36,58,.4)}
.listicle .num{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--green-soft);color:var(--green);font-family:'Anton',Impact,sans-serif;font-size:22px;line-height:1}
.listicle .lc h3{font-family:'Barlow Condensed',Arial,sans-serif;text-transform:uppercase;letter-spacing:.02em;font-size:20px;color:var(--ink);margin:2px 0 6px;line-height:1.1}
.listicle .lc p{color:var(--muted);font-size:15px;line-height:1.6;margin:0}

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