/* Poppins, self-hosted. Zendesk loads it from Google Fonts; a government help site should
   not make a third-party request to render text, so the files are vendored (SIL Open Font
   License permits this). It also keeps every page self-contained, which is a gate here:
   browser_gate flags offsite requests and verify_mirror checks self-containment.

   THE PREVIOUS FILES WERE THE WRONG SUBSET AND NOTHING CAUGHT IT. Google's CSS lists
   Poppins subsets devanagari FIRST, then latin-ext, then latin, for each weight. Whoever
   vendored these took the first URL per weight, so all three files were Devanagari:
   byte-identical to Google's devanagari subset (verified by sha256), valid woff2, reported
   `loaded` by document.fonts, and containing no Latin glyph at all. Every page silently
   rendered in the next stack entry instead. `document.fonts.check()` returned true and
   `getComputedStyle().fontFamily` reported "Poppins", because both describe what was
   REQUESTED, not what painted. The only test that catches this compares rendered text
   width against a control face.

   ONLY WEIGHT 400 IS SHIPPED, deliberately. Zendesk loads exactly one Poppins face — 400 —
   and every heavier weight it declares renders from that face, with the browser faking the
   weight: its tile titles declare 500 and its support hero declares 900, both painted from
   400. Shipping real 500/600/900 faces made our text genuinely heavier than the page it
   replaces everywhere a weight is declared. Keeping the declarations and shipping only 400
   reproduces the original's mechanism exactly, and costs two files instead of eight.

   latin and latin-ext, each with its unicode-range so a browser fetches only what it needs.
   ~13 KB total, against 118 KB of Devanagari before. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/_assets/fonts/poppins-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }   /* latin-ext */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/_assets/fonts/poppins-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }   /* latin */

/* Shared stylesheet for every generated Help Center.
   Per-Client differences arrive as CSS custom properties set in base.html from
   site.yaml — this file never varies. Poppins is VENDORED (the two @font-face
   blocks above), not fetched from Google: design spec rule 9/10 forbids the
   third-party request, not the webfont. Weight 400 only — see the note there. */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  /* 15px, not 16: measured on all 56 mirrored sites.
     This does NOT rescale the sheet's rem sizes. `rem` resolves against the root element,
     and nothing here sets a root font-size — the `:root` block in base.html declares only
     custom properties — so all 65 rem-based declarations below are unaffected. What moves
     is body text itself and anything sized in px or em beneath it. Narrower than it looks,
     but still the value the original renders. */
  font: 15px/1.65 "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}
/* Uncapped, matching the original: Zendesk's container is ~89% of the viewport with no
   max-width, so on a wide display its content runs to 1787px where ours stopped at 1152.
   That is why our tiles were narrower than the original at every width.
   Article prose is deliberately NOT uncapped — see `.prose` below. */
.container { width: 89%; margin-inline: auto; }
@media (max-width: 40rem) { .container { width: calc(100% - 2rem); } }
a { color: var(--link); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
img { max-width: 100%; height: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--accent);
  color: #fff; padding: .6rem 1rem; z-index: 10;
}
.skip-link:focus { left: 0; }

/* header */
.site-header { background: var(--header-bg); color: var(--header-text); padding: 1rem 0;
               border-bottom: 1px solid #e3e5e9; }
.header-inner { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.brand-logo { max-height: 76px; width: auto; }
.brand-name { font-weight: 700; font-size: 1.15rem; }
/* Search lives in the hero, centred, as the primary call to action — residents come
   to search, so demoting it to a header corner buries the main task. */
.search-form { display: flex; width: min(38rem, 100%); background: #fff; border-radius: 4px;
               overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.search-form input {
  /* `font-family: inherit` matters: form controls do NOT inherit font by default, so this
     input was rendering in Arial while every other element used Poppins. */
  /* 15px/300 to match the original. Poppins 300 is not vendored — only 400, 500 and
     600 — so the light weight degrades to 400 rather than pulling a fourth font file for
     one input. Noted rather than hidden: this is the one measured difference left. */
  flex: 1; padding: .85rem 1rem; border: 0; font: inherit; font-size: 15px;
  font-weight: 300; color: #232323; min-width: 0;
}
.search-form input:focus-visible { outline-offset: -3px; }
.search-form button {
  padding: 0 1.1rem; border: 0; cursor: pointer; background: #fff; color: #5c626b;
  display: grid; place-items: center;
}
.search-form button:hover { color: var(--accent); }

/* hero */
/* Image first so it sits above the colour, which shows through where the photograph
   does not reach and while it is still loading. */
.hero { background: var(--hero-image) center / cover no-repeat, var(--hero-bg);
        color: var(--hero-color); padding: 3rem 0 3.4rem;
        width: min(92rem, 100% - 6rem); margin: 0 auto; }
.hero-inner { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
/* 45px / line-height 1.5 / letter-spacing normal, measured on the mirror. Every one of
   these was wrong on all 57 sites and I had "verified" the hero with a probe that never
   matched the right element: Zendesk wraps the heading in a non-standard <h7>, so a
   selector looking for h1 found nothing and silently measured something else. We keep <h1>
   because it is the correct element for a page heading; only the type is matched. */
.hero-title { margin: 0; font-size: var(--hero-size); font-weight: var(--hero-weight);
              line-height: 1.5; letter-spacing: normal; text-align: center; }
.welcome { background: #b8b8b8; color: #fff; padding: 1.1rem 0; text-align: center;
           width: min(92rem, 100% - 6rem); margin: 0 auto; }
.welcome p { margin: 0 0 .7rem; }
.welcome .btn { background: var(--accent); color: #fff; padding: .5rem 1.1rem; }
.btn {
  display: inline-block; background: #fff; color: var(--accent); font-weight: 500;
  font-size: 16.5px;
  padding: .6rem 1.1rem; border-radius: 4px; text-decoration: none;
}
.hero .btn:hover, .promo .btn:hover { text-decoration: underline; }
.promo .btn { background: var(--accent); color: #fff; }

main { padding: 2.4rem 0 3.5rem; }
@media (max-width: 48rem) {
  /* Gutters would eat the content on a phone. */
  .hero, .welcome { width: 100%; }
}
h1 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); line-height: 1.25; }
.section-heading { margin-top: 0; }

/* category tiles */
/* Columns are capped at 4 by raising the track MINIMUM to a quarter of the row rather
   than by fixing the count. A hard `repeat(4, 1fr)` packed a 3-category site into the
   left three quarters of the page and left a gap; with auto-fit the empty tracks
   collapse and the tiles spread evenly however many there are. */
/* Flex-wrap with grow, not a fixed-column grid. Zendesk's tiles are `flex: 1 0 240px`
   with 15px side margins, so every row STRETCHES to fill the container: at 1360px the
   first row is four tiles of 278px and the second is three of 380px, and at 1100px a
   trailing single tile spans the full width. A grid with fixed columns instead leaves the
   last row ragged and left-aligned, which is what made our page look different as it
   narrowed. Negative side margins on the container pull the first and last tiles back
   flush with the text above them. */
.tiles { list-style: none; margin: 3rem -15px 3.5rem; padding: 0;
         display: flex; flex-wrap: wrap; }
.tile { flex: 1 0 240px; margin: 0 15px 30px; box-sizing: border-box; }
.tile a {
  display: flex; flex-direction: column; align-items: center; gap: .85rem; height: 100%;
  text-decoration: none; color: inherit; text-align: center;
}
.tile-icon-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 100px; height: 100px; padding: 10px; box-sizing: border-box;
  border-radius: 12px; background: var(--accent);
}
/* NO fixed size. Zendesk gives the image no width at all — just `max-width: 100%` inside
   a 100px wrapper with 10px padding, so the artwork renders at its own natural size, capped
   at 80px — which is the wrapper's content box, hence `max-height: 100%` rather than a
   literal 100px that would disagree with that cap for any taller-than-wide artwork. The
   icons are not one size: a 48px asset shows at 48px, a 100px asset at 80px.
   Forcing every icon to a single size (52px, then 48px) shrank the 100px ones by nearly
   half and resampled them at a fractional ratio, which is what made them look smaller and
   muddier than the original. Let the artwork decide. */
.tile-icon { width: auto; height: auto; max-width: 100%; max-height: 100%; }
/* Zendesk renders these at weight 500 in #3b3b3b, measured across all 56 mirrors: 51 use
   this exactly and 5 (durham, gr, quincy, randolph, warren) carry a deep blue the owner
   confirms is an anomaly rather than the intended house style. Ours had drifted to weight
   400 in var(--text) (#232323), which read flatter and darker than the original. */
.tile-title { font-weight: 500; color: #3b3b3b; font-size: 18px; }
.tile a:hover .tile-title { text-decoration: underline; }
.tile-desc { font-size: .95rem; color: #4a4f57; max-width: 22rem; line-height: 1.5; }

/* lists */
/* Accordion sections. Type is deliberately smaller than a page heading: these are
   navigation, not content, and at h2 size they competed with the page title. */
.section-group { border: 1px solid #e3e5e9; border-bottom: 0; }
.section-group:last-of-type { border-bottom: 1px solid #e3e5e9; }
.section-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.1rem; background: #f7f8f9; cursor: pointer; list-style: none;
  font-size: .95rem; font-weight: 400; color: var(--text);
}
.section-summary::-webkit-details-marker { display: none; }
.section-summary:hover { background: #f1f2f4; }
.section-group[open] .section-summary { background: #f7f8f9; }
.section-toggle { position: relative; width: 16px; height: 16px; flex: none; }
.section-toggle::before, .section-toggle::after {
  content: ""; position: absolute; background: #5c626b; inset: 7px 0 auto 0; height: 2px;
}
.section-toggle::after { transform: rotate(90deg); transition: transform .15s ease; }
.section-group[open] .section-toggle::after { transform: rotate(0); }
.article-list { list-style: disc; padding: .9rem 1.1rem .9rem 2.4rem; margin: 0; }
.article-list li { padding: .28rem 0; border: 0; font-size: .95rem; }
.article-list li.empty { list-style: none; color: #6b7079; }

/* breadcrumb */
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1rem; font-size: .9rem; }
.breadcrumb li + li::before { content: "\203A"; margin-right: .4rem; color: #8b909a; }

/* article */
.article-layout { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .article-layout { grid-template-columns: minmax(0, 1fr) 17rem; } }
/* The one deliberate departure from the original's geometry, agreed with the owner.
   Zendesk lets article text run the full container width: measured at a 2000px viewport its
   body is 1358px, about 181 characters per line, roughly triple the readable maximum. The
   container above is uncapped to match Zendesk everywhere else; running prose is capped so
   help content stays readable on a wide screen. */
.prose { max-width: 46rem; }
.prose img { border: 1px solid #e6e8ec; border-radius: 4px; margin: .6rem 0; }
.prose h2 { margin-top: 2rem; font-size: 1.25rem; }
.prose h3 { margin-top: 1.5rem; font-size: 1.08rem; }
.prose table { border-collapse: collapse; width: 100%; margin: 1rem 0; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid #d7dbe2; padding: .5rem .7rem; text-align: left; }
.prose th { background: #f4f5f8; }
.prose pre { background: #f5f6f8; padding: .8rem; border-radius: 4px; overflow-x: auto; }
.prose code { background: #f0f1f4; padding: .1rem .3rem; border-radius: 3px; }
.prose iframe { max-width: 100%; }
.updated { color: #5c626b; font-size: .88rem; margin-top: 2rem; }
.sidebar h2 { font-size: 1rem; }
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar li { padding: .35rem 0; font-size: .93rem; }
.sidebar [aria-current] { font-weight: 650; }

/* promos + footer */
/* Utility row: cross-locale prompt left, app promo right, divided by a vertical rule.
   The rule is a left border on the right-hand column, so it vanishes with the column
   and again when the row stacks — a standalone divider element would have stayed
   behind as a stray line on single-column sites and on phones. */
.utility-row { display: grid; gap: 2rem; border-top: 1px solid #e6e8ec;
               padding-top: 2.5rem; margin-top: 1rem; }
@media (min-width: 48rem) {
  .utility-row { grid-template-columns: 1fr 1fr; gap: 0; }
  .utility-end { border-left: 1px solid #e6e8ec; padding-left: 3rem; }
  .utility-start { padding-right: 3rem; }
}
.lang-cta p { margin: 0 0 1rem; }
.lang-cta .btn { background: var(--accent); color: #fff; }
.app-promo .app-links { margin: .9rem 0 1rem; }
.app-promo p:last-child { color: #3f444c; line-height: 1.55; margin-bottom: 0; }
.promo h2 { margin-top: 0; font-size: 1.25rem; }
.app-links { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.site-footer { background: var(--footer-bg); color: var(--footer-text); padding: 2rem 0 2.4rem;
               margin-top: 0; }
.site-footer a { color: inherit; text-decoration: none; font-size: 15px; }
.site-footer a:hover, .site-footer a:focus-visible { text-decoration: underline; }
/* The muted copyright colour is DATA, not a derived mix. First it was hardcoded #a6a6a6 —
   right for the navy footer 56 sites have, illegible on support.payitgov.com, whose footer
   is #f4f6fb. Then it was color-mix toward the footer background, which mutes by lightening
   and produced pale blue on near-white: legible in principle, washed out in fact. Zendesk
   carries a distinct value per theme (rgb(166,166,166) on navy, rgb(20,28,86) on support's
   light footer), so this follows suit and defaults to the navy value.

   Original intent kept:
   The defect was INHERITANCE, not order: `.site-footer a { color: inherit }` made every
   anchor take its parent's colour, so once `.copyright` went grey the links followed. What
   fixes it is specificity — `.site-footer .copyright a` is (0,2,1) and outranks
   `.site-footer a` (0,1,1) wherever it appears in the file. `.site-footer .copyright` is
   (0,2,0) and matches the <p>, not the anchors, so it never competed with them at all.
   An earlier version of this comment claimed the two rules tied at (0,1,1) and that source
   order decided it. That was wrong, and it would have misled the next person to reorder
   this sheet into thinking they could break it by moving a line. */
.site-footer .copyright { color: var(--footer-muted); }
/* Links stay the full footer text colour, and opacity on the parent must not dim them. */
.site-footer .copyright a { color: var(--footer-text); opacity: 1; }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem;
                text-align: center; font-size: .92rem; }
.copyright { margin: 0; opacity: .92; }
/* Separators between the legal links, matching the original's pipe-delimited row. */
.copyright a { margin-left: 1rem; padding-left: 1rem; border-left: 1px solid rgba(255,255,255,.45); }
.copyright a:first-of-type { border-left: 0; }
.social { display: flex; gap: .6rem; }
/* Specificity matters here: `.site-footer a { color: inherit }` (0,1,1) outranks a bare
   `.social-link` (0,1,0), so the glyphs inherited the footer's white text and vanished
   against the white circle. Scope the rule to win. */
.site-footer .social-link {
  /* 40px circle with a 22px glyph, matching the original: Zendesk renders these as a 40x40
     icon-font <i> at font-size 22.5px, while ours was a 34px circle around a 16px SVG —
     less than half the glyph area, which is why the footer read as noticeably smaller. */
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  /* Grey circle with near-black glyphs, as the original. Ours were a white circle with
     navy glyphs, which read as a different design rather than the same one. */
  background: #cbcbcb; color: #232323; text-decoration: none;
}
.site-footer .social-link svg { width: 22px; height: 22px; }
.social-link:hover { opacity: .85; }
.locale-switch a, .locale-switch span { margin: 0 .5rem; }

/* App-store badges: the original uses the official artwork, so text links read as a
   downgrade. Height-capped so the two badges align regardless of source dimensions. */
.app-badge { height: 44px; width: auto; }

/* search */
.search-list { list-style: none; padding: 0; }
.search-list li { margin-bottom: 1.6rem; }
.search-list a { font-size: 1.1rem; font-weight: 600; }
.search-list p { margin: .3rem 0 0; }
.search-section { display: block; font-size: .82rem; opacity: .75; }
mark { background: #ffe9a8; }

/* Article byline — mirrors the live Help Center: avatar, author alias, updated date. */
.byline { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.5rem; }
.byline-avatar { border-radius: 50%; flex: 0 0 auto; object-fit: cover; }
.byline-text { display: flex; flex-direction: column; line-height: 1.35; }
.byline-name { font-weight: 600; }
.byline-date { font-size: .85rem; opacity: .7; }