/* ============================================================ CountyOffices — State Page (WordPress port) Source of truth: countyoffices-state-master-v3 (Kaleb's mockup), florida.html + css/state-page.css, ported to server-side render. Locked brand rules (do not change per state): - Navy primary, red brand accents - Red "Know what comes next." refrain - Navy alert/hazard box with red accents - Light-blue state/county map treatment Everything state-variable is driven by the ACF `state_json` field. CHANGES FROM MOCKUP (per client meetings, Sept 2026): 1. The full county/division directory (filter, A-Z nav, list, map) is now nested inside the "Find your county" section instead of living further down the page as its own "All {State} {Divisions}" block. That section is now full-width, not one of three columns in the utility row (utility row is now just questions | help — see .utility-2col). 2. Inside that directory, list is left / map is right (division list left, map right). 3. The division list previews 40 entries with a "View all N {jurisdiction}" expand button instead of dumping the full list. 4. Hero eyebrow + "works differently" heading use the real per-state map SVG instead of a generic placeholder shape. 5. The county map is a real interactive SVG (hover/click/keyboard, matching the homepage's .state pattern in co-us-map.svg). The thumbnail opens a genuinely separate floating window on click — position:fixed, stays in place while the page scrolls behind it, not a dimmed/blocking modal, not grown out of the thumbnail's own box. See .cowp-map-* rules below. ============================================================ */ :root{ --navy:#0d2247; --navy-2:#132e5c; --red:#d92b2b; --red-dark:#b92020; --link:#1e62c9; --green-cta:#0b7b5b; --text:#122647; --body:#33455f; --muted:#68788f; --line:#e0e6ee; --line-soft:#e9edf3; --soft:#f7f8fb; --cream:#fffaf3; --cream-2:#fbf8f3; --cream-line:#efe6d9; --ac-green:#1c8a4b; --ac-green-bg:#eaf6ee; --ac-blue:#2065cf; --ac-blue-bg:#eaf1fc; --ac-red:#e02b2b; --ac-red-bg:#fdebeb; --ac-slate:#52627d; --ac-slate-bg:#eef1f5; --ac-teal:#1f8c90; --ac-teal-bg:#e8f5f5; --ac-orange:#e4711c; --ac-orange-bg:#fdf0e4; --ac-navy:#28477e; --ac-navy-bg:#eaeef6; --map-fill:#b9d0f1; --serif:Georgia,'Times New Roman',serif; --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,Helvetica,sans-serif; --max:1240px; --pad:26px; --radius:10px; --shadow-card:0 1px 3px rgba(13,34,71,.06); --shadow-float:0 12px 30px rgba(6,20,48,.25); } .co-state-page *,.co-state-page *::before,.co-state-page *::after{box-sizing:border-box} .co-state-page{width:100%;background:#fff;color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased} .co-state-page img,.co-state-page svg{display:block;max-width:100%} .co-state-page a{color:inherit;text-decoration:none} .co-state-page a:hover{text-decoration:underline} .co-state-page button,.co-state-page input,.co-state-page select{font:inherit;color:inherit} .co-state-page h1,.co-state-page h2,.co-state-page h3,.co-state-page h4{font-family:var(--serif);color:var(--navy);margin:0;font-weight:700} .co-state-page p{margin:0} .co-state-page .icon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none} .co-state-page img.icon{object-fit:contain} /* Accent utility — set on any card/pill to color its icon + CTA */ .accent-green {--ac:var(--ac-green); --ac-bg:var(--ac-green-bg)} .accent-blue {--ac:var(--ac-blue); --ac-bg:var(--ac-blue-bg)} .accent-red {--ac:var(--ac-red); --ac-bg:var(--ac-red-bg)} .accent-slate {--ac:var(--ac-slate); --ac-bg:var(--ac-slate-bg)} .accent-teal {--ac:var(--ac-teal); --ac-bg:var(--ac-teal-bg)} .accent-orange{--ac:var(--ac-orange);--ac-bg:var(--ac-orange-bg)} .accent-navy {--ac:var(--ac-navy); --ac-bg:var(--ac-navy-bg)} /* ============ Hero ============ */ .hero{width:100%;position:relative;overflow:hidden;border-bottom:1px solid var(--line)} /* Gradient fallback shows whenever the per-state hero photo is missing or fails to load (img gets display:none via onerror in the template) instead of leaving this area blank white. */ .hero-photo{position:absolute;inset:0;background:linear-gradient(135deg,var(--navy) 0%,#1b3763 60%,#284a82 100%)} .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%} /* Readability wash on the left (text sits here) plus a matching fade on the right edge so the photo blends into the navy backdrop on both sides instead of ending in a hard edge — was left-only before, which is why the previous version looked cropped/off-balance on the right. */ .hero-wash{position:absolute;inset:0;background: linear-gradient(90deg,#fff 0%,rgba(255,255,255,.95) 18%,rgba(255,255,255,.55) 38%,transparent 58%), linear-gradient(270deg,#fff 0%,rgba(255,255,255,.7) 10%,transparent 26%)} .hero-inner{position:relative;max-width:var(--max);margin:auto;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.9fr);align-items:center;gap:26px;padding:32px var(--pad) 36px;min-height:460px} /* Redesign Phase 1 (Hero/Fold Compression): this replaces the previous viewport-fill behavior (hero grew to fill the remaining space below the header on tall monitors) with real compression -- the two goals are opposites. Viewport-fill solved "empty space below a short hero on a tall screen" by making the hero taller; Phase 1 asks for the opposite: hero + headline + a visible slice of the first life-event card row, with NO scroll, at 1440x900. A hero that fills the viewport can never satisfy that on any screen taller than the hero itself. min-height dropped from 700px to 460px -- within the spec's ~30-35% reduction target -- and the desktop-only 100dvh override removed entirely. --co-header-h is no longer referenced here; it's left defined in JS in case a future section needs real header-height math, but nothing here depends on it now. */ .eyebrow{display:flex;align-items:center;gap:9px;color:var(--red);font-size:12.5px;font-weight:800;letter-spacing:.04em;margin-bottom:14px} .eyebrow .icon{width:26px;height:26px;stroke-width:2.2} .hero h1{font-size:46px;line-height:1.04;margin-bottom:10px} .hero h1 .refrain{display:block;color:var(--red);font-size:44px} .hero-intro{font-size:15px;line-height:1.55;color:var(--body);max-width:560px;margin-bottom:14px} .hero-intro strong{color:var(--text)} .search-label{display:block;font-family:var(--serif);font-weight:700;font-size:17px;color:var(--navy);margin-bottom:9px} .hero-trust-line{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--body);max-width:560px;margin:0 0 14px;text-shadow:0 1px 3px rgba(255,255,255,.9),0 0 6px rgba(255,255,255,.7)} .hero-trust-line .icon{filter:drop-shadow(0 1px 2px rgba(255,255,255,.9))} .alert-row-list{display:flex;flex-direction:column;gap:12px;margin-bottom:20px} .alert-row{display:flex;align-items:center;gap:16px;background:#fff;border-left:4px solid var(--red);border-radius:4px 10px 10px 4px;padding:16px 18px;box-shadow:0 3px 10px rgba(20,30,60,.06)} .alert-row-icon{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--red-bg,#fdecec);color:var(--red)} .alert-row-icon .icon{width:22px;height:22px} .alert-row-body{flex:1;min-width:0} .alert-row-eyebrow{display:block;font-size:10.5px;font-weight:800;letter-spacing:.05em;color:var(--red);text-transform:uppercase;margin-bottom:3px} .alert-row-body h3{font-family:var(--sans);font-size:14px;color:var(--text);margin-bottom:3px} .alert-row-body p{font-size:12.5px;line-height:1.5;color:var(--body);margin:0} .alert-row-badge{flex:none;font-size:11px;font-weight:700;color:var(--red);background:var(--red-bg,#fdecec);border-radius:12px;padding:4px 10px;white-space:nowrap} .alert-row-cta{flex:none;font-size:12.5px;font-weight:700;color:var(--red)!important;white-space:nowrap} @media(max-width:760px){ .alert-row{flex-wrap:wrap;padding:14px} .alert-row-badge{order:1} .alert-row-cta{order:2;margin-left:auto} } .hero-trust-line .icon{width:15px;height:15px;flex:none;color:var(--ac-green,#1c8a4b)} .searchbox{display:flex;max-width:620px;height:50px;background:#fff;border:1px solid #d6deea;border-radius:7px;overflow:hidden;box-shadow:0 2px 10px rgba(9,30,66,.12)} .searchbox input{flex:1;border:0;outline:0;padding:0 16px;font-size:14px;min-width:0} .searchbox input::placeholder{color:#8b98ab} .searchbox button{width:58px;border:0;background:var(--red);color:#fff;cursor:pointer;display:grid;place-items:center} .searchbox button:hover{background:var(--red-dark)} .searchbox .icon{width:20px;height:20px} .quicklinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px} .quicklinks a{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--text);background:#fff;border:1px solid #d9e0ea;border-radius:20px;padding:13px 16px;box-shadow:0 1px 3px rgba(0,0,0,.06)} .quicklinks a:hover{text-decoration:none;border-color:var(--ac)} .quicklinks .icon{width:15px;height:15px;color:var(--ac)} .alert-stack{position:relative;justify-self:end;width:min(370px,100%)} .alert-card{position:absolute;top:0;left:0;width:100%;background:var(--navy);color:#fff;border-radius:10px;padding:20px 22px;box-shadow:var(--shadow-float);border:1px solid rgba(255,255,255,.12);transition:transform .25s ease,opacity .25s ease} .alert-card[data-stack-pos="0"]{position:relative;z-index:3;transform:none;opacity:1} .alert-card[data-stack-pos="1"]{z-index:2;transform:translate(10px,10px) scale(.97);opacity:.9;border-color:rgba(255,255,255,.35)} .alert-card[data-stack-pos="2"]{z-index:1;transform:translate(20px,20px) scale(.94);opacity:.75;border-color:rgba(255,255,255,.5)} .alert-card[data-stack-pos]:not([data-stack-pos="0"]):not([data-stack-pos="1"]):not([data-stack-pos="2"]){opacity:0;pointer-events:none} .alert-head{display:flex;align-items:center;gap:14px} .alert-icon{width:40px;height:40px;flex:none;border-radius:50%;background:var(--red);display:grid;place-items:center} .alert-icon .icon{width:22px;height:22px;color:#fff} .alert-head b{display:block;color:#ff5252;font-size:11px;letter-spacing:.05em} .alert-head strong{display:block;font-family:var(--serif);font-size:17px;margin-top:3px} .alert-body{padding-left:54px} .alert-body p{font-size:13px;line-height:1.5;margin-top:10px;color:#e7ecf5} .alert-body p:first-child{margin-top:12px;color:#fff;font-weight:600} .alert-cta{display:inline-flex;align-items:center;gap:7px;margin-top:20px;color:var(--red)!important;font-weight:700;font-size:13.5px} .alert-cta:hover{color:#fff!important;text-decoration:none} .alert-stack-next{position:absolute;bottom:-16px;right:-16px;z-index:4;width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid #d9e0ea;box-shadow:0 3px 10px rgba(20,30,60,.15);display:grid;place-items:center;cursor:pointer;transition:transform .15s ease} .alert-stack-next:hover{transform:scale(1.08)} .alert-stack-next svg{width:18px;height:18px;stroke:var(--navy);stroke-width:2.4;fill:none} /* ============ Sections ============ */ /* Vertical rhythm (top/bottom padding) is kept identical for every section regardless of .framed — only the horizontal padding, max- width, and border differ for framed sections. Previously framed sections used 26/28px vertical padding against 34/30px for plain ones, so the gap between two sections varied by up to 8px depending on which types happened to be adjacent — inconsistent enough to read as uneven spacing down the page. */ .co-state-page .section{width:100%;max-width:var(--max);margin:0 auto;padding:32px var(--pad);box-sizing:border-box} .co-state-page .framed{border:1px solid var(--line);border-radius:var(--radius)} .co-state-page .section.framed{max-width:calc(var(--max) - 2 * var(--pad));padding:32px 28px} /* Hero has no bottom spacing of its own (just a border line), so the first section after it needs extra top margin to match the ~64px gap used everywhere else between sections — otherwise it's the one spot on the page noticeably tighter than the rest. */ .co-state-page .first-content-section{margin-top:32px} .title-rule{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;margin-bottom:26px} .title-rule::before,.title-rule::after{content:"";height:1px;background:var(--line)} .title-rule h2{font-size:26px} .life-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:9px} .life-card{display:flex;flex-direction:column;align-items:center;text-align:center;border:1px solid var(--line-soft);border-radius:9px;background:#fff;padding:18px 12px 15px;box-shadow:var(--shadow-card);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .icon-bubble{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--ac-bg,#f3f5f8);color:var(--ac,var(--navy));margin-bottom:12px;transition:transform .18s ease} .icon-bubble .icon{width:28px;height:28px} .life-card h3{font-family:var(--sans);font-size:13.5px;line-height:1.3;color:var(--text);margin-bottom:8px} .life-card p{font-size:11.5px;line-height:1.55;color:var(--body)} .life-card .card-cta{margin-top:auto;padding-top:13px;font-size:11px;font-weight:700;color:var(--red)} .work-card{text-align:center;padding:22px 18px 20px;display:flex;flex-direction:column;align-items:center;border-radius:12px;background:var(--soft);border:1px solid var(--line-soft);box-shadow:0 3px 10px rgba(20,30,60,.05);transition:transform .18s ease,box-shadow .18s ease,background .18s ease;cursor:default} .work-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(20,30,60,.13)} .work-card .work-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--ac-bg,#f3f5f8);color:var(--ac,var(--navy));margin-bottom:12px;transition:transform .18s ease} .work-card .work-icon .icon{width:24px;height:24px} .work-card:hover .work-icon{transform:scale(1.06)} .work-card h3{font-family:var(--sans);font-size:12.5px;line-height:1.35;color:var(--text);margin-bottom:8px} .work-card p{font-size:11px;line-height:1.6;color:var(--body)} /* Whole-card hover — only for cards that actually expand (.has-detail, added by JS once it confirms a card has a toggle button), so plain linked cards don't imply an interaction they don't have. Lifts the whole card and tints its border with the card's own accent color rather than a generic gray, so hover feels tied to that card specifically instead of a stock effect reused site-wide. */ .life-card.has-detail,.work-card.has-detail{cursor:pointer} .life-card.has-detail:hover,.work-card.has-detail:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(20,30,60,.13);border-color:var(--ac,var(--line-soft))} .life-card.has-detail:hover .icon-bubble{transform:scale(1.06)} .work-card.has-detail:hover{background:var(--ac-bg,#f8f9fb)} /* The CTA no longer carries its own hover state (no more lone underlined text) — the whole card communicates interactivity now. The arrow nudges right on hover as a small, deliberate accent. */ .card-cta{white-space:nowrap;transition:color .15s ease} .card-cta:hover,.card-cta:focus,.card-cta:active{text-decoration:none!important;background:none!important} .card-cta .cta-arrow{display:inline-block;transition:transform .18s ease} .life-card.has-detail:hover .cta-arrow,.work-card.has-detail:hover .cta-arrow{transform:translateX(3px)} button.card-cta{background:none;border:none;padding:0;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:3px} /* Open state — the owning card gets a solid accent-colored top border and its CTA switches color to match, so when a panel is open it's unambiguous which card it belongs to even after scrolling. */ .life-card.is-open,.work-card.is-open{border-color:var(--ac,var(--navy));box-shadow:0 14px 28px rgba(20,30,60,.13)} .life-card.is-open .card-cta,.work-card.is-open .card-cta{color:var(--ac,var(--navy))} .life-card.is-open .cta-arrow,.work-card.is-open .cta-arrow{transform:rotate(90deg)} .card-detail-panel{grid-column:1/-1;position:relative;background:var(--soft);border:1.5px solid var(--line-soft);border-radius:10px;padding:22px 26px;margin:4px 0 6px;text-align:left;animation:cardDetailIn .22s ease} @keyframes cardDetailIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}} .card-detail-panel h4{font-family:var(--serif);font-size:16px;color:var(--navy);margin:0 0 10px;padding-right:28px} .card-detail-panel p{font-size:13px;line-height:1.65;color:var(--text);margin:0 0 10px} .card-detail-panel p:last-child{margin-bottom:0} .card-detail-panel .detail-sources{font-size:11.5px;color:var(--muted)} .card-detail-close{position:absolute;top:14px;right:16px;width:26px;height:26px;border-radius:50%;border:none;background:#fff;color:var(--navy);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(20,30,60,.12);transition:background .15s ease} .card-detail-close:hover{background:var(--line-soft)} .works h2{display:flex;align-items:center;gap:10px;font-size:22px;margin-bottom:24px} .works h2 .icon{width:24px;height:24px;color:var(--ac-teal);stroke-width:2.2} .works-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} @media (max-width:1100px){.works-grid{grid-template-columns:repeat(3,1fr)}} @media (max-width:700px){.works-grid{grid-template-columns:repeat(2,1fr)}} /* ============ Utility row (questions / help — finder moved to its own section) ============ */ .utility{display:grid;gap:16px;padding-top:6px} .utility-2col{grid-template-columns:1.1fr .9fr} .panel{border:1px solid var(--line-soft);border-radius:var(--radius);background:#fff;padding:22px;display:flex;flex-direction:column} .panel h2{font-size:19px;line-height:1.3;margin-bottom:12px} .questions{background:var(--cream);border-color:#efe7da} .question-item{border-bottom:1px solid #e8e0d2} .question-row{display:flex;align-items:center;gap:9px;width:100%;padding:9px 0;border:0;background:none;text-align:left;font-size:12px;line-height:1.4;color:var(--text);cursor:pointer} .question-row .icon{width:15px;height:15px;color:var(--ac-navy);flex:none} .question-row .chev{margin-left:auto;color:#3764ad;font-size:17px;line-height:1;transition:transform .15s ease;flex:none} .question-row:focus,.question-row:active,.question-row[aria-expanded="true"]{color:var(--text)!important} .question-row:hover{text-decoration:none;color:var(--link)!important} .question-row:hover,.question-row:focus,.question-row:active,.question-row[aria-expanded="true"]{background:none!important;outline:none!important;box-shadow:none!important} .question-row:focus-visible{outline:2px solid var(--navy)!important;outline-offset:-2px} .question-row[aria-expanded="true"] .chev{transform:rotate(90deg)} .question-answer{padding:0 0 12px 24px;font-size:12px;line-height:1.65;color:var(--body)} .question-answer[hidden]{display:none} .more-link{display:inline-block;margin-top:14px;font-size:12px;font-weight:700;color:var(--red)!important} .panel-body{font-size:12px;line-height:1.6;color:var(--body)} .help{background:#fbfcfd} .help-prompt{display:block;width:100%;text-align:left;background:#fff;border:1px solid #e2e6ec;border-radius:6px;padding:13px 12px;margin:7px 0 0;font-size:12px;line-height:1.5;color:var(--body);cursor:pointer} .help-prompt:hover{border-color:var(--ac-blue)} .help-cta{display:inline-flex;align-items:center;gap:8px;margin-top:16px;background:var(--navy);color:#fff!important;padding:11px 24px;border-radius:6px;font-weight:700;font-size:12.5px;align-self:flex-start} .help-cta:hover{color:#fff!important;text-decoration:none;background:var(--navy-2)} .trust-line{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:11px;color:var(--muted)} .trust-line .icon{width:12px;height:12px} /* ============ Important strip ============ */ .co-state-page .section.important{margin-top:36px;margin-bottom:36px} .important{background:var(--cream-2);border:1px solid var(--cream-line);border-radius:var(--radius)} .section-eyebrow{font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--red);margin-bottom:14px} .important-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px} .important-card{display:flex;gap:11px;background:#fff;border:1px solid #e6e2d9;border-radius:8px;padding:15px 14px;box-shadow:0 3px 10px rgba(20,30,60,.05);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .important-card .important-icon-bubble{width:40px;height:40px;flex:none;margin-bottom:0;margin-right:2px} .important-card .important-icon-bubble .icon{width:20px;height:20px} .guides-carousel{position:relative} .guides-scroll{display:flex;gap:9px;overflow-x:auto;padding:12px 2px 2px;scrollbar-width:none;-ms-overflow-style:none} .guides-scroll::-webkit-scrollbar{display:none;width:0;height:0} .guides-scroll .life-card{flex:0 0 calc((100% - 4 * 9px) / 5);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease} .guides-scroll .life-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(20,30,60,.12);border-color:var(--ac,var(--line-soft))} .guides-scroll .life-card:hover .card-cta,.guides-scroll .life-card .card-cta{text-decoration:none} .guides-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-soft);background:#fff;color:var(--navy);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(20,30,60,.12);transition:background .15s ease} .guides-arrow:hover{background:var(--soft)} .guides-arrow-prev{left:-14px} .guides-arrow-next{right:-14px} @media (max-width:900px){.guides-scroll .life-card{flex:0 0 calc((100% - 2 * 9px) / 3)}} @media (max-width:600px){.guides-scroll .life-card{flex:0 0 calc((100% - 9px) / 2)}.guides-arrow{display:none}} .important-card h3{font-family:var(--sans);font-size:12px;color:var(--text);margin-bottom:5px} .important-card p{font-size:11px;line-height:1.5;color:var(--body);margin-bottom:8px} .important-card .card-cta{font-size:11px;font-weight:700;color:var(--red)!important} /* Whole-card hover/open states, matching .life-card's existing pattern (state-page-interactive JS already adds .has-detail/.is-open to important-card the same way it does for life-card/work-card — this was a missing CSS rule, not a missing behavior). */ .important-card.has-detail{cursor:pointer} .important-card.has-detail:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(20,30,60,.13);border-color:var(--ac,var(--line-soft))} .important-card.has-detail:hover .cta-arrow{transform:translateX(3px)} .important-card.is-open{border-color:var(--ac,var(--navy));box-shadow:0 14px 28px rgba(20,30,60,.13)} .important-card.is-open .card-cta{color:var(--ac,var(--navy))} .important-card.is-open .cta-arrow{transform:rotate(90deg)} /* Related-guide link inside a card-detail-panel, styled as a real button (Tier-2 outline, per the redesign spec's CTA system) rather than a plain text line, so it reads as "this takes you somewhere" rather than more body copy. */ .guide-link-btn{display:inline-flex;align-items:center;gap:6px;margin-top:2px;padding:9px 16px;border:1.5px solid var(--navy);border-radius:6px;color:var(--navy)!important;font-size:12.5px;font-weight:700;text-decoration:none!important;transition:background .15s ease,color .15s ease} .guide-link-btn:hover{background:var(--navy);color:#fff!important} .guide-link-btn:hover .cta-arrow{transform:translateX(3px)} /* ============ Find your county (MERGED: select+button + full directory in one section) ============ */ .co-state-page .section.find-county{margin-top:36px} .find-county-head h2{font-size:22px} .find-county-head p{font-size:12.5px;color:var(--body);margin-top:6px;max-width:640px} /* The directory (filter/A-Z/list/map) nested inside .find-county, below the select+button — was its own top-level ".directory" section before the client-meeting layout change; kept the same class names internally since the CSS didn't need to change, only its parent. */ .directory-sub{position:relative;border-top:1px solid var(--line-soft);padding-top:22px;margin-top:6px} .directory-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:16px} .directory-title{display:flex;gap:12px;align-items:flex-start} .directory-title .icon{width:26px;height:26px;color:var(--ac-navy);margin-top:3px;stroke-width:1.4} .directory-head h3{font-family:var(--serif);color:var(--navy);font-weight:700;font-size:19px} .directory-head p{font-size:12px;color:var(--body);margin-top:5px} .directory-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end} .directory-tools input{height:36px;width:230px;border:1px solid #dce2ea;border-radius:6px;padding:0 12px;font-size:12px} .alpha-nav{display:flex;flex-wrap:wrap;gap:6px;max-width:460px} .alpha-nav button{width:32px;height:32px;border:1px solid #d9e0ea;background:#fff;border-radius:4px;font-size:11.5px;font-weight:600;color:#345078;cursor:pointer;padding:0} .alpha-nav button:hover:not(:disabled){border-color:var(--link);color:var(--link)} .alpha-nav button.active{background:var(--navy);border-color:var(--navy);color:#fff} .alpha-nav button:disabled{opacity:.32;cursor:default} .alpha-nav .alpha-all{width:auto;padding:0 8px} /* MOVED MAP: two-column body — division list left, map right */ .directory-body{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start} .division-grid{columns:5 148px;column-gap:20px} .division-cell{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:4.5px 0;break-inside:avoid;font-size:12.5px} .division-cell:hover{text-decoration:none} .division-cell .d-name{font-weight:700;color:#1446a1} .division-cell:hover .d-name{text-decoration:underline} .division-cell .d-seat{font-size:11px;color:var(--muted)} .division-cell.hidden{display:none} .division-empty{display:none;font-size:12.5px;color:var(--muted);padding:10px 0} .division-empty.show{display:block} .division-grid-more{margin-top:2px} .view-all-counties{display:inline-flex;align-items:center;gap:6px;margin-top:14px;background:none;border:0;padding:0;font-size:12.5px;font-weight:700;color:var(--link);cursor:pointer} .view-all-counties:hover{text-decoration:underline} .directory-map{position:relative;border:1px solid var(--line-soft);border-radius:8px;background:var(--soft);padding:18px 12px 10px;display:grid;place-items:center;min-height:230px;overflow:visible;transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease} .cowp-map-unavailable{font-size:12.5px;color:var(--muted);text-align:center;margin:0;padding:0 12px} .directory-map img{max-height:250px;width:auto;max-width:100%} /* ---- Interactive county map ---- The small box here is only a thumbnail/trigger. Clicking it opens a SEPARATE floating window built fresh by JS and appended inside .directory-sub (assets/js/state-page-interactive.js) — position:absolute anchored to that section, so it scrolls naturally WITH the page and always stays exactly over the counties section. It is NOT grown out of the thumbnail's own box, and it is NOT a dimmed/scroll-blocking modal — only the × button closes it. Every class below is prefixed `cowp-map-` on purpose. Two earlier attempts at this feature broke because generic names (`.zoom`, `.is-expanded`) collided with unrelated CSS already on the site. Do not rename these back down to something shorter/generic. */ .cowp-map-thumb{position:relative;width:100%;cursor:pointer;display:block;background:none;border:none;padding:0;margin:0;font:inherit;text-align:inherit} .cowp-map-thumb .state-county-map{width:100%;height:auto;max-height:230px;display:block;pointer-events:none} .cowp-map-thumb .county{fill:var(--map-fill);stroke:#fff;stroke-width:.6;transition:fill .12s ease;outline:none} /* Per feedback: the map's own fill color used to lighten on hover (filter:brightness on .state-county-map) -- replaced with a hover effect on the whole containing box (.directory-map) instead, so the map itself stays visually consistent and the "this is interactive" signal comes from the card lifting, not the map washing out. :has() is well-supported across all current major browsers. Explicit hover locks below: .cowp-map-thumb only became a real