/*
 * PublicAssistance.net — Phase 1A design system.
 *
 * Hand-authored, no build step: production has no Node, so there is nothing to
 * compile and nothing to purge. Served as a new file rather than appended to
 * default.min.css, because this fleet has no Cloudflare purge tooling and an
 * in-place edit of a long-cached stylesheet is served stale for its full TTL.
 * The link carries a content hash, so a future edit becomes a new cache key.
 *
 * Two jobs:
 *   1. the vocabulary the new navigator, category and hub pages are built from;
 *   2. making the legacy 960px fixed layout survive a phone, without editing a
 *      single legacy page body.
 *
 * Written for people under stress: high contrast, large targets, no motion, no
 * cleverness. Colour never carries meaning on its own.
 */

:root {
  --pa-ink: #16202b;
  --pa-ink-soft: #47535f;
  --pa-line: #cfd8e0;
  --pa-line-soft: #e4eaf0;
  --pa-bg: #ffffff;
  --pa-bg-soft: #f4f7fa;
  --pa-brand: #14508c;
  --pa-brand-dark: #0e3a67;
  --pa-brand-soft: #e8f0f8;
  --pa-urgent: #8a1c1c;
  --pa-urgent-soft: #fdf0f0;
  --pa-ok: #1c6b45;
  --pa-focus: #b8560f;
  --pa-radius: 8px;
  --pa-gap: 1rem;
  --pa-measure: 68ch;
}

/* ------------------------------------------------- legacy specificity -- */
/*
 * default.min.css styles content typography through ID selectors -- #content h1,
 * #content h2, #content p, #content a. An ID beats a class however late this
 * file loads, so the new pages inherited green headings with a brown left bar
 * and brown bold links, including inside the primary button.
 *
 * The fix is specificity, not !important: every rule below is the same
 * declaration as its .pa- counterpart, re-stated at #content strength so it
 * applies inside the legacy container. Scoped under .pa-page so no legacy page
 * is restyled by accident.
 */
#content .pa-page h1,
#content .pa-page h2,
#content .pa-page h3,
#content .pa-page h4 {
  color: var(--pa-ink);
  border-left: 0;
  padding-left: 0;
  font-weight: 700;
  margin-top: 0;
}
#content .pa-page h1 { font-size: 1.65rem; line-height: 1.25; margin: .25rem 0 .5rem; }
#content .pa-page h2 { font-size: 1.25rem; line-height: 1.3; margin: 2rem 0 .5rem; }
#content .pa-page h3 { font-size: 1.05rem; margin: 1.25rem 0 .35rem; }
#content .pa-page p { margin-left: 0; line-height: 1.6; }
#content .pa-page a { color: var(--pa-brand-dark); font-weight: 400; text-decoration: underline; }
#content .pa-page a:hover { color: var(--pa-brand); }
#content .pa-page .pa-btn { color: #fff; font-weight: 700; text-decoration: none; }
#content .pa-page .pa-btn:hover { color: #fff; text-decoration: underline; }
#content .pa-page .pa-btn--secondary,
#content .pa-page .pa-btn--secondary:hover { color: var(--pa-brand-dark); }
#content .pa-page .pa-card__link { font-weight: 700; text-decoration: none; }
#content .pa-page .pa-card__link:hover { text-decoration: underline; }
#content .pa-page .pa-urgent h2,
#content .pa-page .pa-urgent h3 { color: var(--pa-urgent); }
#content .pa-page .pa-card h2,
#content .pa-page .pa-card h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
#content .pa-page .pa-result h3 { margin: 0 0 .3rem; font-size: 1.08rem; }
#content .pa-page .pa-breadcrumb,
#content .pa-page .pa-result__meta,
#content .pa-page .pa-handoff__note { color: var(--pa-ink-soft); }
#content { width: auto; }

/* --------------------------------------------------- contrast repairs -- */
/*
 * Two inherited WCAG failures, found by axe and fixed here rather than left
 * for a phase that "owns" them, because the pages they appear on are pages this
 * phase is asking the owner to approve.
 *
 * 1. The legacy heading green #6bb224 on white is 2.61:1 — well under the 4.5:1
 *    AA threshold for body-size text, and it appears in the `contents` sidebar
 *    on the new homepage as well as on every legacy page. #417016 is the same
 *    hue, two steps darker, at 5.91:1. This is a visible change to legacy pages
 *    and is called out in the owner review packet.
 * 2. The cookie-consent hint text #777 on #f7f7f7 is 4.18:1. #5a5a5a on the
 *    same ground is 6.44:1 and changes nothing else.
 *
 * Neither is !important; both simply match or exceed the specificity of the
 * rule they correct.
 */
#content h1,
#content h2,
#content h3,
#content .black-title { color: #417016; }
#content .pa-page h1,
#content .pa-page h2,
#content .pa-page h3,
#content .pa-page h4 { color: var(--pa-ink); }
#content .pa-page .pa-urgent h2,
#content .pa-page .pa-urgent h3 { color: var(--pa-urgent); }
.pa-legacy-heading,
#content .pa-legacy-heading { color: var(--pa-ink-soft); }
#cookie-banner .option span { color: #5a5a5a; }

/*
 * WCAG 2.2 AA 2.5.8 target size (minimum, 24x24). The legacy `.btn` — the
 * "More" link on the resources index and the question buttons — rendered below
 * that. Padding is added rather than a fixed height so the label still governs
 * the width and no layout reflows.
 */
#content .btn,
#content a.btn {
  display: inline-block;
  min-height: 24px;
  min-width: 24px;
  padding: .45rem .8rem;
  box-sizing: border-box;
  line-height: 1.5;
}
#cookie-banner p { color: #4a4a4a; }

/* ---------------------------------------------------------------- shell -- */

.pa-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pa-brand-dark);
  color: #fff;
  padding: .75rem 1rem;
  z-index: 100;
  font-weight: 700;
}
.pa-skip:focus { left: 0; }

.pa-site-header {
  background: var(--pa-bg);
  border-bottom: 1px solid var(--pa-line);
}
.pa-site-header__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: .6rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
}
.pa-brand {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--pa-brand-dark);
  text-decoration: none;
  line-height: 1.2;
}
.pa-brand span { display: block; font-size: .72rem; font-weight: 400; color: var(--pa-ink-soft); }

.pa-nav { margin-left: auto; }
.pa-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .35rem;
}
.pa-nav a {
  display: block;
  padding: .55rem .7rem;
  min-height: 44px;
  box-sizing: border-box;
  color: var(--pa-ink);
  text-decoration: none;
  border-radius: var(--pa-radius);
  font-size: .9rem;
  line-height: 1.6;
}
.pa-nav a:hover { background: var(--pa-brand-soft); color: var(--pa-brand-dark); text-decoration: underline; }
.pa-nav a[aria-current="page"] {
  background: var(--pa-brand-soft);
  color: var(--pa-brand-dark);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--pa-brand);
}

.pa-site-footer {
  background: var(--pa-bg-soft);
  border-top: 1px solid var(--pa-line);
  margin-top: 2.5rem;
  padding: 1.5rem 1rem 2rem;
  font-size: .875rem;
  color: var(--pa-ink-soft);
}
.pa-site-footer__inner { max-width: 1100px; margin: 0 auto; }
.pa-site-footer nav ul {
  list-style: none; margin: .75rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .25rem 1.25rem;
}
.pa-site-footer a { color: var(--pa-brand-dark); }

/* ------------------------------------------------------------ new pages -- */

.pa-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem 1rem 0;
  color: var(--pa-ink);
  font-size: 1rem;
  line-height: 1.6;
}
.pa-page h1 { font-size: 1.65rem; line-height: 1.25; margin: .25rem 0 .5rem; }
.pa-page h2 { font-size: 1.25rem; line-height: 1.3; margin: 2rem 0 .5rem; }
.pa-page h3 { font-size: 1.05rem; margin: 1.25rem 0 .35rem; }
.pa-page p, .pa-page li { max-width: var(--pa-measure); }
.pa-lede { font-size: 1.08rem; color: var(--pa-ink-soft); }

.pa-breadcrumb { font-size: .85rem; color: var(--pa-ink-soft); margin: 0 0 .5rem; }
.pa-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.pa-breadcrumb li:not(:last-child)::after { content: "›"; margin-left: .3rem; color: var(--pa-line); }

/* Buttons and calls to action */
.pa-btn {
  display: inline-block;
  padding: .8rem 1.15rem;
  min-height: 44px;
  box-sizing: border-box;
  background: var(--pa-brand);
  color: #fff;
  border: 1px solid var(--pa-brand-dark);
  border-radius: var(--pa-radius);
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1.5;
}
.pa-btn:hover { background: var(--pa-brand-dark); color: #fff; text-decoration: underline; }
.pa-btn--secondary { background: #fff; color: var(--pa-brand-dark); }
.pa-btn--secondary:hover { background: var(--pa-brand-soft); color: var(--pa-brand-dark); }

/* Card grids: the homepage entry points and the category list */
.pa-grid { display: grid; gap: var(--pa-gap); grid-template-columns: 1fr; margin: 1rem 0 0; padding: 0; list-style: none; }
.pa-card {
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius);
  background: var(--pa-bg);
  padding: 1rem;
}
.pa-card h2, .pa-card h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.pa-card p { margin: 0; color: var(--pa-ink-soft); font-size: .94rem; }
.pa-card a.pa-card__link { text-decoration: none; color: var(--pa-brand-dark); font-weight: 700; }
.pa-card a.pa-card__link:hover { text-decoration: underline; }
.pa-card--action { border-color: var(--pa-brand); border-left-width: 5px; }

/* The urgent panel. Marked by border, heading AND text, never colour alone. */
.pa-urgent {
  border: 2px solid var(--pa-urgent);
  background: var(--pa-urgent-soft);
  border-radius: var(--pa-radius);
  padding: 1rem;
  margin: 1.25rem 0;
}
.pa-urgent h2, .pa-urgent h3 { margin-top: 0; color: var(--pa-urgent); }
.pa-urgent ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.pa-urgent li { margin-bottom: .35rem; }
.pa-urgent a { color: var(--pa-urgent); }

/* Results */
.pa-result {
  border: 1px solid var(--pa-line);
  border-left: 5px solid var(--pa-brand);
  border-radius: var(--pa-radius);
  padding: 1rem;
  margin: 0 0 var(--pa-gap);
  background: var(--pa-bg);
}
.pa-result--urgent { border-left-color: var(--pa-urgent); background: var(--pa-urgent-soft); }
.pa-result h3 { margin: 0 0 .3rem; font-size: 1.08rem; }
.pa-result__meta { font-size: .82rem; color: var(--pa-ink-soft); margin: .15rem 0 .5rem; }
.pa-result__why {
  background: var(--pa-bg-soft);
  border-left: 3px solid var(--pa-line);
  padding: .5rem .75rem;
  margin: .6rem 0;
  font-size: .875rem;
}
.pa-result__why p { margin: 0 0 .2rem; }
.pa-result__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }

.pa-tag {
  display: inline-block;
  font-size: .75rem;
  padding: .15rem .5rem;
  border: 1px solid var(--pa-line);
  border-radius: 999px;
  color: var(--pa-ink-soft);
  background: var(--pa-bg-soft);
}

/* Handoff to a sister directory: visually distinct from official links */
.pa-handoff {
  border: 1px dashed var(--pa-line);
  background: var(--pa-bg-soft);
  border-radius: var(--pa-radius);
  padding: .7rem .9rem;
  margin: .6rem 0 0;
  font-size: .9rem;
}
.pa-handoff__note { display: block; font-size: .78rem; color: var(--pa-ink-soft); margin-top: .2rem; }

/* Official link marker — an icon plus a word, never colour alone.
   Not on buttons: their own label already says "official site", and the
   pseudo-element rendered a second, half-legible copy inside the button. */
.pa-official:not(.pa-btn)::after {
  content: " ↗ official site";
  font-size: .78rem;
  color: var(--pa-ink-soft);
  white-space: nowrap;
}

/* Navigator form */
.pa-form fieldset { border: 1px solid var(--pa-line); border-radius: var(--pa-radius); padding: 1rem; margin: 0 0 1.25rem; }
.pa-form legend { font-weight: 700; padding: 0 .4rem; font-size: 1.05rem; }
.pa-choices { display: grid; gap: .5rem; grid-template-columns: 1fr; margin: .5rem 0 0; }
.pa-choice {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius);
  padding: .7rem .8rem;
  min-height: 44px;
  cursor: pointer;
  background: var(--pa-bg);
}
.pa-choice:hover { background: var(--pa-brand-soft); }
.pa-choice input { margin-top: .2rem; width: 20px; height: 20px; flex: none; }
.pa-choice__text { font-size: .95rem; }
.pa-choice__hint { display: block; font-size: .82rem; color: var(--pa-ink-soft); }
.pa-form select {
  font-size: 1rem; padding: .6rem; min-height: 44px;
  border: 1px solid var(--pa-line); border-radius: var(--pa-radius);
  background: #fff; color: var(--pa-ink); max-width: 100%;
}
.pa-form label.pa-label { display: block; font-weight: 700; margin-bottom: .3rem; }

.pa-steps { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1rem; font-size: .85rem; }
.pa-steps li { color: var(--pa-ink-soft); }
.pa-steps li[aria-current="step"] { font-weight: 700; color: var(--pa-brand-dark); }

.pa-note { background: var(--pa-bg-soft); border: 1px solid var(--pa-line); border-radius: var(--pa-radius); padding: .8rem 1rem; margin: 1rem 0; font-size: .9rem; }
.pa-checklist { padding-left: 1.2rem; }
.pa-checklist li { margin-bottom: .3rem; }

.pa-section { margin: 2rem 0 0; }
.pa-divider { border: 0; border-top: 1px solid var(--pa-line); margin: 2rem 0; }

.pa-legacy-heading { font-size: 1.1rem; color: var(--pa-ink-soft); }

/* ------------------------------------------------------- focus & motion -- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--pa-focus);
  outline-offset: 2px;
}

/*
 * Fallback for anything that focuses without matching :focus-visible -- older
 * engines that never implemented it, and programmatic focus moves. The
 * stylesheets remove no outline anywhere, so the UA ring would still show; this
 * makes ours show instead, so the indicator is the same everywhere rather than
 * whatever the browser happens to draw.
 */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
[tabindex]:focus {
  outline: 3px solid var(--pa-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

@media print {
  .pa-site-header, .pa-site-footer, .pa-nav, .adsbygoogle, #cookie-banner,
  #cookie-overlay, #cookie-settings-btn, .pa-no-print { display: none !important; }
  .pa-result, .pa-card { break-inside: avoid; border-color: #999; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75rem; word-break: break-all; }
  body { background: #fff; }
}

/* --------------------------------------------------------------- legacy -- */
/*
 * The legacy shell is a 960px #wrapper with a 600px + 300px float pair. That is
 * the horizontal overflow Phase 0C measured on mobile and correctly declined to
 * fix inside its scope. Fixing it here is a chrome change -- no legacy page
 * body is edited -- and it is what lets listing, city and search pages sit
 * inside the new shell without breaking on a phone.
 */
#wrapper { width: auto; max-width: 960px; margin: 0 auto; }
#content { overflow: hidden; }
#left-col, #right-col { box-sizing: border-box; }

@media (max-width: 991px) {
  #left-col, #right-col { float: none; width: auto; max-width: 100%; margin: 1rem 0; display: block; }
  #content table { max-width: 100%; }
  #content img { max-width: 100%; height: auto; }
  /* Wide legacy tables scroll inside themselves rather than the page. */
  #content > table, #left-col table { display: block; overflow-x: auto; }
}

@media (max-width: 640px) {
  body { padding: 0; }
  .pa-page { padding: 1rem .85rem 0; }
  .pa-page h1 { font-size: 1.4rem; }
  #content { padding: 0 .5rem; }
}

/* ----------------------------------------------------------- wider view -- */

@media (min-width: 640px) {
  .pa-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .pa-page { padding: 1.5rem 1.25rem 0; }
  .pa-page h1 { font-size: 2rem; }
  .pa-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pa-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}