/* ============================================================================
   Florida Health Insurance Web — city-microsite shell
   /assets/shell-city.css   (phase 16, 2026-11-13)

   WHY: the ~160 city microsites (cape-coral, fort-myers, ...) each carried their own
   inline <style> and a generated ".seo-footer" with EMPTY hrefs (measured:
   <li><a href="">aca marketplace plans</a></li>), one service area, and a Google map
   query for the BRAND instead of the city. They had no site header at all, so a
   visitor arriving from search could not reach the rest of the site.

   This file adds the shared header/footer chrome to those pages. Classes are
   prefixed .fhic- so they can never collide with a page's own legacy inline <style>
   (which is intentional and still supplies each page's content design). Colour and
   spacing come from the SAME tokens as /assets/site.css — one design, not two.
   ========================================================================== */
.fhic-skip{position:absolute;left:-9999px;top:0}
.fhic-skip:focus{left:8px;top:8px;z-index:300;background:#fff;color:#0e3a63;padding:8px 14px;border-radius:8px}
.fhic-header{background:var(--brand,#0e3a63);color:#fff;position:sticky;top:0;z-index:60}
.fhic-header__bar{display:flex;align-items:center;gap:var(--s4,1.5rem);flex-wrap:wrap;
  max-width:1120px;margin:0 auto;padding:12px var(--s4,1.5rem);min-height:68px}
.fhic-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;margin-right:auto}
.fhic-brand__mark{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:#fff;color:#0e3a63;font-weight:800;font-size:.82rem;letter-spacing:.02em}
.fhic-brand__name{display:flex;flex-direction:column;line-height:1.15}
.fhic-brand__name b{font-size:1rem;font-weight:800}
.fhic-brand__name span{font-size:.74rem;color:#cfe0f2;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.fhic-nav{display:flex;align-items:center;gap:var(--s4,1.5rem)}
.fhic-nav ul{display:flex;align-items:center;gap:var(--s4,1.5rem);list-style:none;margin:0;padding:0}
.fhic-nav a{color:#e8f0f8;text-decoration:none;font-weight:600;font-size:.94rem;white-space:nowrap}
.fhic-nav a:hover{color:#fff;text-decoration:underline}
.fhic-actions{display:flex;align-items:center;gap:12px}
.fhic-phone{color:#fff;font-weight:800;text-decoration:none;font-size:.95rem;white-space:nowrap}
.fhic-btn{display:inline-block;padding:11px 18px;border-radius:999px;background:var(--accent,#0f7355);
  color:#fff;font-weight:800;text-decoration:none;font-size:.9rem;border:1px solid transparent}
.fhic-btn:hover{background:#0c5f46;color:#fff}
.fhic-toggle,.fhic-toggle-label{display:none}
@media (max-width:900px){
  .fhic-header__bar{padding:10px 14px;gap:10px}
  .fhic-toggle{position:absolute;opacity:0;pointer-events:none}
  .fhic-toggle-label{display:inline-block;margin-left:auto;cursor:pointer;
    border:1px solid rgba(255,255,255,.5);border-radius:8px;padding:7px 12px;font-size:.85rem;font-weight:700}
  .fhic-nav{display:none;order:9;width:100%}
  .fhic-toggle:checked ~ .fhic-nav{display:block}
  .fhic-nav ul{flex-direction:column;align-items:flex-start;gap:0;width:100%}
  .fhic-nav li{width:100%;border-top:1px solid rgba(255,255,255,.18)}
  .fhic-nav a{display:block;padding:11px 0;font-size:1rem}
  .fhic-actions{gap:8px}
  .fhic-btn{padding:9px 13px;font-size:.82rem}
}
/* ---- footer ---- */
.fhic-footer{background:var(--brand,#0e3a63);color:#d9e6f4;padding:var(--s6,3rem) 0 var(--s4,1.5rem);margin-top:var(--s6,3rem)}
.fhic-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:var(--s4,1.5rem);
  max-width:1120px;margin:0 auto;padding:0 var(--s4,1.5rem)}
.fhic-footer h2{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:#8fb4d6;margin:0 0 var(--s2,.75rem)}
.fhic-footer address{font-style:normal;line-height:1.7;font-size:.94rem;color:#d9e6f4}
.fhic-footer a{color:#cfe4f8;text-decoration:none}
.fhic-footer a:hover{color:#fff;text-decoration:underline}
.fhic-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:.92rem}
.fhic-footer__nap strong{color:#fff;font-size:1rem}
.fhic-footer iframe{width:100%;height:150px;border:0;border-radius:10px;display:block;background:#12314f}
.fhic-footer__legal{max-width:1120px;margin:var(--s4,1.5rem) auto 0;padding:var(--s3,1rem) var(--s4,1.5rem) 0;
  border-top:1px solid rgba(255,255,255,.18);font-size:.8rem;line-height:1.65;color:#a9c3db}
.fhic-footer__legal a{color:#cfe4f8}
@media (max-width:900px){ .fhic-footer__grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .fhic-footer__grid{grid-template-columns:1fr} }

/* ---- contrast repairs (measured in Chromium, 2026-11-13) -------------------
   The city template's own colours fail WCAG AA on their own backgrounds:
     .offer .label  #cfe9d8 on #1a7a3a = 4.19:1   (needs 4.5)
     .quote cite    #6b7d8f on #f4f7fb = 4.24:1   (needs 4.5)
   and site.css's ".hero a:not(.btn)" (specificity 0,2,1) repaints the offer card's
   call link #cfe4f8 on the same green = 4.14:1, beating the page's own
   ".offer a{color:#fff}" (0,1,1). !important is the only way for a later sheet to
   beat a higher-specificity rule; each value below is measured, not guessed. */
.hero .offer a, .offer a { color: #ffffff !important; }            /* 5.90:1 */
.offer .label { color: #f2fdf5 !important; }                       /* 9.66:1 */
.quote cite { color: #3d4c61 !important; }                         /* 8.21:1 */

/* ---- second contrast pass (measured, 2026-11-13) ---------------------------
   Three more real AA failures found by the gate after the gradient fix, all in
   the shared city template:
     .cta           white on the LIGHT end of its gradient (#2e86c1) = 3.97:1
     .tldr-upg h2   Key Takeaways inherits color:#fff from the dark hero rules
                    and lands on the #f1f5f9 panel = 1.10:1 (invisible heading)
     .chip          #2e86c1 on white / #f4f7fb = 3.97 / 3.69:1
   Every replacement below is computed, not eyeballed. */
.cta { background: linear-gradient(135deg, #143f5c 0%, #1c5f99 100%) !important; }
.cta p, .cta h2, .cta h3 { color: #ffffff !important; }        /* 6.67:1 worst stop */
.tldr-upg, .tldr-upg h2, .tldr-upg h3, .tldr-upg p, .tldr-upg li,
.tldr-upg strong, .tldr-upg a { color: #0b1220 !important; }   /* 17.09:1 on #f1f5f9 */
.chip { color: #10528c !important; }                            /* 8.05:1 on white */
.links a { color: #10528c !important; }                         /* 7.49:1 on #f4f7fb */
.seo-ilink, .seo-related-inline a { color: #10528c !important; }

/* third contrast pass: /medicare-plan-g-florida/ and any page using the green hero
   variant. .tag was #28c0e0 (cyan) on a #146152 green ground = 3.39:1. */
.tag { color: #ffffff !important; }                             /* 7.34:1 on #146152 */