/* v4 components with versions (round 2, 2026-11-04). Linked by v4_base.html after v4.css on every v4 page.
   One block per component version, every selector under its prefix:
     section-level:  [data-ui="related:b"] ...   (the partial puts data-ui="comp:ver" on its <section>)
     page-wide:      body[data-ui~="icons:a"] ... (v4_base writes every comp:ver into <body data-ui>)
   Deleting a version = deleting its partial templates/v4/c/<comp>_<ver>.html and its block here.
   W0 owns this file; a builder adds its own block at the end, marked with the component name. */

/* ── shared pieces (W0): chips from the chip() macro ──────────────────────────────────────────────── */
.v4-chips{display:flex;flex-wrap:wrap;gap:8px}
.v4-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--navy-2);font-size:16px;font-weight:600;line-height:1.2;text-decoration:none}
.v4-chip-n{color:var(--navy);font-weight:700}
.v4-chip small{font-size:14px;font-weight:400;color:var(--muted)}
.v4-chip.is-off{background:var(--pale);color:var(--muted)}

/* ── icons:a  white tile with an orange line, 56/32 and .sm 48/28, 2 px stroke (S1: tiles vanished on sand/pale) ── */
body[data-ui~="icons:a"] .ic-tile{width:56px;height:56px;border-radius:16px;flex:0 0 auto}
body[data-ui~="icons:a"] .ic-tile:not(.dark){background:#fff;border:1px solid var(--orange-line)}
body[data-ui~="icons:a"] .ic-tile .ico{width:32px;height:32px;stroke-width:2}
body[data-ui~="icons:a"] .ic-tile.sm{width:48px;height:48px;border-radius:14px;flex:0 0 48px}
body[data-ui~="icons:a"] .ic-tile.sm .ico{width:28px;height:28px}

/* ── contrast:a  --orange-dark #C94E0E -> #B84508: 4.72:1 on cream #F6EFE3 (the lowest light background), 4.88 on
   orange-soft/sand, 5.39 on white (was 4.01-4.59). "Checked" stamp navy (was orange 2.77:1), its line 14 px (was 11) ── */
body[data-ui~="contrast:a"]{--orange-dark:#B84508}
body[data-ui~="contrast:a"] .hx4-stamp{border-color:var(--navy);color:var(--navy)}
body[data-ui~="contrast:a"] .hx4-stamp small{font-size:14px;line-height:1.2}

/* ── footer:a  Contact strip, "Data and guides" row, 16 px links, targets >= 44 px under 900 px ──────────────── */
.ft-a{font-size:16px}
.ft-a .ft-contact{display:grid;grid-template-columns:140px minmax(0,1fr);gap:10px 28px;align-items:start;padding:24px 0;border-top:1px solid var(--line)}
.ft-a .ft-contact .ft-h,.ft-a .ft-data .ft-h{margin:0;padding-top:2px}
.ft-a .ft-contact-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px 40px}
.ft-a .ft-c{display:flex;flex-direction:column;gap:2px;min-width:0}
.ft-a .ft-c a{color:var(--ink);text-decoration:none;font-size:16px}
.ft-a .ft-c .ft-phone{font:700 20px/1.25 var(--head);color:var(--navy)}
.ft-a .ft-v{color:var(--ink)}
.ft-a .ft-c small,.ft-a .footer-menu small{font-size:14px;color:var(--muted)}
.ft-a .footer-menu a{font-size:16px}
.ft-a .ft-data{display:grid;grid-template-columns:140px minmax(0,1fr);gap:10px 28px;align-items:start;padding:0 0 22px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.ft-a .ft-data-links{display:flex;flex-wrap:wrap;gap:0 28px}
.ft-a .ft-data-links a{color:var(--ink);text-decoration:none;padding:3px 0;font-size:16px}
/* Targets >= 44 px on narrow screens and on touch devices of any width (iPad landscape); a mouse at 1280 keeps the compact look. */
@media (max-width:900px),(pointer:coarse){
  .ft-a .footer-menu a,.ft-a .ft-data-links a,.ft-a .ft-c a,.ft-a .footer-bottom a,.ft-a .footer-top .brand{display:flex;align-items:center;min-height:44px;padding:0}
  .ft-a .footer-top p a{display:inline-flex;align-items:center;min-height:44px}
  .ft-a .ft-data-links{gap:0 24px}
  .ft-a .ft-c a+small{margin-top:-8px}
}
/* The sticky request bar (<= 900 px) and the "Questions?" pill (> 900 px) float over the last footer line. The v4 pages
   do not load main.css, which had `body.has-sticky-cta .footer{padding-bottom:88px}`, so the room is made here. */
@media (max-width:900px){.footer{padding-bottom:calc(89px + env(safe-area-inset-bottom,0px) + 16px)}}
@media (min-width:901px){.footer-bottom{padding-right:170px}}
@media (max-width:620px){
  .ft-a .ft-contact,.ft-a .ft-data{grid-template-columns:1fr}
  .ft-a .ft-contact-row{flex-direction:column;gap:14px}
  .ft-a .ft-data-links{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
  .ft-a .footer-menu{grid-template-columns:1fr 1fr;gap:20px 16px}
  .ft-a .footer-menu>div:first-child,.ft-a .footer-menu>.ft-g-about{grid-column:1/-1}
  .ft-a .ft-g-about{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
  .ft-a .ft-g-about .ft-h{grid-column:1/-1}
}

/* ── shared: link lists of the legacy next / morelinks strips get 44 px targets on narrow screens (owner's law) ── */
@media (max-width:900px){
  .cl-cities a,.cl-linklist a,.cp-links a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
}

/* ── related:a / related:b  the city "Related reading" cards (.rr-* in v4.css), as a shared partial ─────────── */
.rr.rr-v{padding-top:64px}
.rr-v .rr-fact{font-size:16px}
.rr-v .rr-plain{align-items:flex-start}
.rr-v .rr-plain .ic-tile{margin:0}

/* ── morelinks:a  every link with a 28 px icon and one fact line under the anchor ────────────────────────── */
.ml-a,.ml-b{background:var(--pale)}
.ml-a h2,.ml-b h2{margin:0 0 24px}
.ml-a-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 28px}
.ml-a-item,.ml-b-group li{display:flex;gap:12px;align-items:flex-start;min-width:0}
.ml-a-ic{flex:0 0 28px;color:var(--navy-2);padding-top:8px}
.ml-a-ic .ico{width:28px;height:28px}
.ml-a-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ml-a-txt a{display:inline-flex;align-items:center;min-height:44px;font-weight:650;font-size:17px}
.ml-fact{font-size:16px;line-height:1.45;color:var(--muted)}
@media (max-width:900px){.ml-a-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.ml-a-grid{grid-template-columns:1fr}}

/* ── morelinks:b  groups by the homeowner's task, chips of nearby cities, a tail line ────────────────────── */
.ml-b-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 36px}
.ml-b-group h3{font-size:20px;margin:0 0 8px}
.ml-b-group ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ml-b-chips{margin-top:32px}
.ml-b-chips h3{font-size:18px;margin:0 0 12px}
.ml-b-tail{display:flex;flex-wrap:wrap;gap:0 28px;margin:24px 0 0}
.ml-b-tail a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
@media (max-width:900px){.ml-b-grid{grid-template-columns:1fr}}

/* ── next:a  step cards + chips of the state's cities and the nearby states; every selector sits under [data-ui="next:a"] ──────────────────────────── */
.nx-a[data-ui="next:a"]{background:var(--pale)}
.nx-a[data-ui="next:a"] .nx-a-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start}
.nx-a[data-ui="next:a"] .nx-a-h{font-size:clamp(26px,2.4vw,32px);margin:0 0 18px}
.nx-a[data-ui="next:a"] .nx-a-step{position:relative;display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:14px}
.nx-a[data-ui="next:a"] .nx-a-step .ic-tile{margin:0;flex:0 0 auto}
.nx-a[data-ui="next:a"] .nx-a-step a{display:flex;align-items:center;min-height:44px;font:600 19px/1.3 var(--head);color:var(--navy)}
.nx-a[data-ui="next:a"] .nx-a-step p{margin:6px 0 0;font-size:16px}
/* the whole card is the link: the title link is stretched over it (the line under the title stays outside the <a>) */
.nx-a[data-ui="next:a"] .nx-a-step a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.nx-a[data-ui="next:a"] .nx-a-step a:focus-visible{outline:none}
.nx-a[data-ui="next:a"] .nx-a-step:hover,.nx-a[data-ui="next:a"] .nx-a-step:has(a:focus-visible){border-color:var(--navy)}
.nx-a[data-ui="next:a"] .nx-a-step:has(a:focus-visible){outline:3px solid var(--ring);outline-offset:2px}
/* the ring is for the keyboard (:focus-visible), not for a mouse click; a browser without :has() falls back to :focus-within */
@supports not selector(:has(a)){.nx-a[data-ui="next:a"] .nx-a-step:focus-within{outline:3px solid var(--ring);outline-offset:2px;border-color:var(--navy)}}
.nx-a[data-ui="next:a"] .nx-a-chips h3{font-size:19px;margin:0 0 12px}
.nx-a[data-ui="next:a"] .nx-a-chips .v4-chips+h3{margin-top:28px}
@media (max-width:900px){.nx-a[data-ui="next:a"] .nx-a-grid{grid-template-columns:1fr;gap:28px}}

/* ══ Interaction layer (SW-01 / SW-02 / SW-03 / SW-14): hover, press and keyboard focus for EVERY link type ═══════════════════════
   One block, last in the cascade of the shared files, so page CSS (v4-<key>.css) does not need its own link :hover rules.
   Rules of the system
     * a link answers the pointer with TWO signals, never colour alone (the state colours differ by only 1.3:1):
       the underline goes to 2 px (and appears where a link has none) and a tint of the link's OWN text colour appears behind it
       (navy 12 % on light blocks, white 12 % on navy ones; color-mix(currentColor), so no per-surface rules and the text keeps
       its contrast); old browsers get the plain navy 8 % tint;
     * a card answers with a navy border (+ 1 px inset line) and a thicker underline on its title; no translate, no scale, no shadow jump;
     * a button answers with a change of fill: orange -> dark orange (the single primary, v4.css), navy -> white with a navy line, white -> pale;
     * the keyboard ring is outline 3 px var(--ring): navy on light (13.9:1 on white, 12.8:1 on pale), white on navy; the token is
       set in v4.css (.hero.dark / .rules-section white; the light cards inside them navy);
     * orange is used for nothing here except the primary button's own hover (v4.css) and static accents;
     * pointer styles sit in @media (hover:hover): a phone gets only the :active press, no sticky hover after a tap. */
:is(.v4,.header,.footer,.v4-header) :is(a[href],.text-link,summary,.brand,.helper-btn,.icon-button,.menu-toggle){transition:color .12s,text-decoration-thickness .12s,background-color .12s,box-shadow .12s,border-color .12s}
@media (hover:hover){
  /* links in text, lists, nav and footer (cards, chips, buttons and stretched card links have their own rules below) */
  :is(.v4,.header,.footer,.v4-header) a[href]:not(:is(.button,.v4-chip,.rr-card,.hub-city,.hub-next-item,.hub-tile,.hub-nophoto,.skip,.skip-link,.icon-button)):not(:where(.rr-card,[class~="nx-a-step"]) *):hover,
  :is(.v4,.header,.footer,.v4-header) .text-link:hover{text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:4px;background-color:rgba(16,45,80,.08);background-color:color-mix(in srgb,currentColor 12%,transparent);border-radius:3px}
  /* nav, logo and footer lists sit in 44 px rows: the line gets more air */
  :is(.header,.footer,.v4-header) :is(.main-nav,.footer-menu,.ft-a,.footer-bottom,.footer-top) a[href]:hover,
  :is(.header,.footer,.v4-header) .brand:hover{text-underline-offset:6px}
  /* summary rows (FAQ, folds) */
  summary:hover{background-color:rgba(16,45,80,.06);background-color:color-mix(in srgb,currentColor 8%,transparent);text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:5px}
  /* chips */
  a.v4-chip:hover{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);background-color:var(--pale);color:var(--navy);text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:4px}
  /* cards that are links: city list tiles, "what next" tiles, state tiles. Border goes navy, the name gets the thick underline. */
  .hub-city:hover,.hub-next-item:hover,a.hub-tile:hover{border-color:var(--navy)}
  .hub-city:hover b,.hub-next-item:hover b,a.hub-tile:hover b{text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:4px}
  .nx-a[data-ui="next:a"] .nx-a-step:hover{box-shadow:inset 0 0 0 1px var(--navy)}
  .nx-a[data-ui="next:a"] .nx-a-step:hover a{text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:4px}
  /* buttons and other controls */
  .button.dark:hover{background:#fff;color:var(--navy);border-color:var(--navy)}
  .helper-btn:hover{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy),0 0 0 1px rgba(16,45,80,.28),0 14px 30px -12px rgba(16,45,80,.6)}
  .helper-btn:hover svg{stroke:var(--navy)}
  .segmented button:not(.active):hover{border-color:var(--navy);background:var(--pale)}
  .icon-button:hover,.menu-toggle:hover{background:var(--pale);border-color:var(--navy)}
  .helper-q:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--navy)}
  .hx4-dots button:hover::before{background:#fff}
  .hero.light .hx4-dots button:hover::before{background:var(--navy)}
  input[type=checkbox],input[type=radio],label[for],select{cursor:pointer}
}
/* the floating chat button sits over any block, so its ring gets a white halo: navy ring on light pages, white halo on navy ones */
.helper-btn:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 1px rgba(16,45,80,.28),0 14px 30px -12px rgba(16,45,80,.6)}
/* the press (touch and mouse) */
:is(.v4,.header,.footer,.v4-header) a[href]:not(:is(.button,.v4-chip,.rr-card,.hub-city,.hub-next-item,.hub-tile,.hub-nophoto,.skip,.skip-link,.icon-button)):not(:where(.rr-card,[class~="nx-a-step"]) *):active,
:is(.v4,.header,.footer,.v4-header) summary:active{background-color:rgba(16,45,80,.14);background-color:color-mix(in srgb,currentColor 20%,transparent)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* SW-11: stand-alone link lists reach 44 px on narrow screens and on touch devices of any width (WCAG 2.5.8; inline links inside a
   sentence keep their line height). The footer lists do the same in the footer:a block above. */
@media (max-width:900px),(pointer:coarse){
  .v4 .home-more-grid li{padding:0}
  .v4 .home-more-grid ul{gap:4px}
  .v4 .home-more-grid li a{display:flex;align-items:center;min-height:44px}
  .v4 :is(.rr-more-g a,.home-rule-links a,.hx4-record footer a,.blog-guides-link,.hh-ph figcaption a,.cy-photo figcaption a){display:inline-flex;align-items:center;min-height:44px}
}

/* ── C9 (owner 2026-11-05), shared layer ─────────────────────────────────────────────────────────────────────────────
   1) The breadcrumb row above a dark hero takes the hero's navy, so it reads as the top of the hero and the hero's own top
      space shrinks by the same amount (text starts higher). The tap target stays 44 px. Light links on navy: #fff / #D6E1EE.
   2) Icon tiles are 40 px on phones.                                                                                      */
.cy-crumb:has(~ .hero.dark){background:var(--navy);border-bottom:0;position:relative;z-index:1;--ring:#fff}
.cy-crumb:has(~ .hero.dark) ol,.cy-crumb:has(~ .hero.dark) li+li::before{color:#D6E1EE}
.cy-crumb:has(~ .hero.dark) a,.cy-crumb:has(~ .hero.dark) a:visited{color:#fff}
.cy-crumb:has(~ .hero.dark) [aria-current]{color:#fff}
.cy-crumb:has(~ .hero.dark) a:hover,.cy-crumb:has(~ .hero.dark) a:focus-visible{color:#fff;background:rgba(255,255,255,.14);text-decoration-thickness:2px}
.cy-crumb ~ .hero.dark{margin-top:-24px}
@media (max-width:700px){
  .ic-tile,body[data-ui~="icons:a"] .ic-tile,.ic-tile.sm,body[data-ui~="icons:a"] .ic-tile.sm{width:40px;height:40px;flex:0 0 40px;border-radius:12px}
  .ic-tile .ico,body[data-ui~="icons:a"] .ic-tile .ico,body[data-ui~="icons:a"] .ic-tile.sm .ico{width:24px;height:24px}
}

/* ══ Accessibility layer (r4-q4, 2026-11-07), shared by every v4 page ══════════════════════════════════════════════════════
   1) Field outlines: the 1 px --line border of a text field is 1.2-1.3:1 on white (WCAG 1.4.11 asks 3:1 for the edge that tells
      a person where the field is). Fields get --field-line (#767F8C: 4.05:1 on white, 3.74 on pale, 3.54 on cream). A field on a
      dark hero keeps its transparent border (white fill on navy) because those rules are more specific.
   2) Stand-alone links (a link that is the whole line; links inside a sentence or a source line are left inline, WCAG 2.5.8 exempts them and a 44 px box breaks the line: "See the roofers in Houston", "All cities we cover", an e-mail address)
      are 44 px tall on narrow screens and touch devices; short names in lists and tables are 44 px wide.
   3) Breadcrumb on a phone: the last two crumbs (parent and current page) on one row; the full trail stays in the markup and in
      the BreadcrumbList.
   4) Map links: the keyboard ring of a state shape is a real outline plus a heavier edge. */
:root{--field-line:#767F8C}
body .v4 :is(input,select,textarea):not([type=checkbox],[type=radio],[type=range],[type=file],[type=hidden],[type=submit],[type=button]),.dialog-field{border-color:var(--field-line)}
.hero.dark .field-action input{border-color:transparent}
@media (max-width:900px),(pointer:coarse){
  .v4 :is(.cy-tablewrap .micro,.hub-card-foot,.profile-links,.pm-st-h p,#reach p,.vf-rec-name) a,.v4 .hub-photo h3 a,.v4 .area-card>small>#area-city-link{display:inline-flex;align-items:center;min-height:44px}
  .v4 .wx-links.hr-links a{display:inline-flex;align-items:center;min-height:44px}
  .v4 :is(.cy-towns,.nm-st,.wx-links,.tr-logo p) a,.v4 .text-link,.v4 .v4-chip,.v4 .cy-towns th button{min-width:44px}
  .v4 .cy-towns th button{min-height:44px}
}
@media (max-width:620px){
  .cy-crumb li:not(:nth-last-child(-n+2)){display:none}
  .cy-crumb li:nth-last-child(2)::before{content:none}
  /* a long page title shortens with an ellipsis instead of pushing the trail onto a second 44 px row (the full text stays for screen readers) */
  .cy-crumb ol{flex-wrap:nowrap}
  .cy-crumb li:last-child{min-width:0;flex:0 1 auto}
  .cy-crumb li:nth-last-child(2){flex:0 0 auto}
  .cy-crumb [aria-current]{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}