/* Phase 3A-Claude: approved design-system stylesheet, replacing the earlier
   unapproved Phase 3A visual direction. Tokens/components translated from
   the approved handoff at docs/design_handoff_headstart_directory/ (see
   docs/phase-3a-claude/02-approved-design-crosswalk.md for the full
   element-by-element mapping). Kept separate from style.min.css/
   responsive.css/phase1b.css so those files stay untouched (same
   convention Phase 1B established); loaded last in layouts/app.blade.php
   so these rules are the one authoritative public visual layer -- no
   competing design system. Mobile-first; no JS framework, no build step. */

:root {
    /* ---- Handoff design tokens (docs/design_handoff_headstart_directory/README.md) ---- */
    --bg: #faf8f4;
    --surface: #ffffff;
    --surface-tint: #f2ede4;
    --text: #2b2620;
    --text-muted: #58503f;
    --border: #e3dccc;

    --accent-50: oklch(0.96 0.02 155);
    --accent-100: oklch(0.92 0.035 155);
    --accent-200: oklch(0.85 0.05 155);
    --accent: oklch(0.48 0.09 155);
    --accent-600: oklch(0.42 0.09 155);
    --accent-700: oklch(0.34 0.08 155);
    --accent-900: oklch(0.20 0.045 155);

    --accent2-50: oklch(0.96 0.025 55);
    --accent2-100: oklch(0.90 0.06 55);
    --accent2: oklch(0.62 0.13 55);
    --accent2-600: oklch(0.55 0.13 50);
    --accent2-700: oklch(0.42 0.12 45);

    --footer-bg: #22261f;
    --footer-text: #e8e4da;
    --footer-accent: #9fbfa8;

    --font-head: 'Source Serif 4', Georgia, serif;
    --font-body: 'Libre Franklin', system-ui, -apple-system, sans-serif;

    --radius-sm: 8px;
    --radius-md: 11px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 3px rgba(43,38,32,.09);
    --shadow-md: 0 8px 24px rgba(43,38,32,.10);
    --shadow-lg: 0 24px 56px rgba(43,38,32,.16);

    --max-width: 1180px;
    --section-pad: clamp(32px, 6vw, 72px);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; font-weight: 700; }

::selection { background: var(--accent-100); }

a { color: var(--accent-700); }
a:hover { color: var(--accent-900); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

img { max-width: 100%; height: auto; }
html, body { max-width: 100%; overflow-x: hidden; }

/* ---------- Page shell ---------- */
#page-wrapper, #inner-page-wrapper {
    width: 100%;
    background: var(--bg);
}

#wrapper {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

#footer-wrapper #wrapper { padding: 0 24px; }

/* ---------- Header: sticky white bar, logo badge, pill search ---------- */
#header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(43,38,32,.03);
    margin: 0 -24px;
    padding-left: 24px;
    padding-right: 24px;
    position: sticky;
    top: 0;
    z-index: 40;
}

#page-wrapper #header, #inner-page-wrapper #header { width: 100%; }

.logo { float: none; width: auto; padding: 0; display: flex; align-items: center; gap: 10px; }
.logo a {
    float: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    height: auto;
    min-height: 36px;
    background: none;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 19px;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.01em;
}
.logo a::before {
    content: "H";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: var(--accent-900);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 18px;
    border-radius: 9px;
    flex-shrink: 0;
}
.pd-logo-tagline { display: none; }

.topmenu { order: 3; width: 100%; padding: 4px 0 0; }
.topmenu ul { justify-content: flex-end; gap: 14px; }
.topmenu li a, .topmenu li.LoginName { color: var(--text-muted); font-size: 13px; }
.topmenu li a:hover { color: var(--accent-700); }

.header-rightcol { float: none; width: auto; margin-left: auto; }

@media (min-width: 900px) {
    #header { flex-wrap: nowrap; }
    .topmenu { order: 2; width: auto; margin-left: 20px; }
    .header-rightcol { order: 3; }
}

/* Primary nav */
.main-nav__list { gap: 22px; align-items: center; }
.main-nav__item > a, .nav-dropdown summary {
    padding: 6px 2px;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--text);
    white-space: nowrap;
}
.main-nav__item > a:hover, .main-nav__item > a:focus,
.nav-dropdown summary:hover, .nav-dropdown summary:focus {
    background: none;
    color: var(--accent-700);
    text-decoration: none;
}
.nav-dropdown[open] summary { color: var(--accent-700); }
.main-nav__item > a.pd-pill-btn, .main-nav__item > a.pd-pill-btn:hover, .main-nav__item > a.pd-pill-btn:focus {
    color: #fff;
    padding: 10px 18px;
    font-size: 14px;
}
.nav-dropdown__menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 6px;
    min-width: 220px;
    margin-top: 8px;
}
.nav-dropdown__menu li a {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-weight: 500;
    font-size: 14px;
}
.nav-dropdown__menu li a:hover { background: var(--accent-50); color: var(--accent-700); }

/* "Search" pill button in header, and generic pill-button pattern reused elsewhere */
.pd-pill-btn, .mobile-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 10px 18px;
    background: var(--accent-900);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    border: none;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.pd-pill-btn:hover, .mobile-nav__toggle:hover { background: var(--accent-700); color: #fff; }
.mobile-nav[open] .mobile-nav__toggle { background: var(--accent-700); }

.mobile-nav__list { padding: 8px 0; }
.mobile-nav__list li a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    color: var(--text);
    font-weight: 500;
    border-bottom: 1px solid var(--border);
}
.mobile-nav__account { padding: 12px 4px; display: flex; gap: 16px; }

/* ---------- Buttons ---------- */
.pd-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 22px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
}
.pd-cta--primary { background: var(--accent-900); color: #fff; box-shadow: var(--shadow-sm); }
/* input[type="submit"]/[type="button"] in style.css sets background:none/
   border:none with higher specificity ((0,1,1) attribute+type) than a single
   .pd-cta--primary class (0,1,0) can win on source order alone -- the search
   submit buttons are <input type="submit">, so match that specificity. */
input[type="submit"].pd-cta--primary, input[type="button"].pd-cta--primary {
    background: var(--accent-900);
    color: #fff;
    border: 1.5px solid var(--accent-900);
}
.pd-cta--primary:hover { background: var(--accent-700); color: #fff; }
.pd-cta--pill { border-radius: var(--radius-pill); }
.pd-cta--secondary { background: transparent; border-color: var(--border); color: var(--text); }
.pd-cta--secondary:hover { background: var(--surface-tint); color: var(--text); }
.pd-cta--outline {
    background: transparent;
    border-color: var(--accent2-100);
    color: var(--accent2-700);
    border-radius: var(--radius-pill);
    font-size: 14.5px;
    padding: 11px 20px;
}
.pd-cta--outline:hover { background: var(--accent2-50); border-color: var(--accent2); color: var(--accent2-700); }

/* Small fallback link, deliberately not a .pd-cta button -- sits below
   Claim This Listing / Suggest an Update so it reads as a catch-all, not a
   third button competing for the same attention. */
.pd-report-link { margin-top: 2px; }
.pd-report-link a { font-size: 13px; color: var(--text-muted); text-decoration: none; }
.pd-report-link a:hover { color: var(--accent-900); text-decoration: underline; }

/* ---------- Hero (homepage) ---------- */
.pd-hero {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--section-pad) 24px 8px;
}
.pd-hero__grid {
    display: flex;
    flex-wrap: wrap-reverse;
    gap: 40px;
    align-items: center;
}
.pd-hero__copy { flex: 1 1 460px; }
.pd-hero__eyebrow {
    display: inline-flex;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    background: var(--accent-50);
    color: var(--accent-700);
    border: 1px solid var(--accent-100);
}
.pd-hero__title {
    margin-top: 18px;
    font-size: clamp(30px, 4.6vw, 54px);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.pd-hero__title em { color: var(--accent-700); font-style: normal; }
.pd-hero__subtitle {
    font-size: 17.5px;
    line-height: 1.6;
    max-width: 540px;
    color: var(--text-muted);
    margin-top: 16px;
}
.pd-hero__image { flex: 1 1 320px; max-width: 440px; }
.pd-hero__image img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: center 30%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: block;
    background: var(--surface-tint);
}

/* ---------- Search card ---------- */
.pd-search-card {
    margin-top: 40px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: clamp(22px, 3vw, 34px);
    position: relative;
    overflow: hidden;
}
.pd-search-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--accent-900);
}
.pd-search-card__label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-700);
    margin-bottom: 14px;
}
.pd-search-box {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    align-items: stretch;
}
.pd-search-box input[type="text"] {
    float: none;
    flex: 1 1 320px;
    min-width: 0;
    width: auto;
    height: auto;
    min-height: 48px;
    max-height: none;
    font-size: 16px;
    padding: 14px 18px;
    margin: 0;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
}
.pd-search-box .pd-cta { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 599px) {
    .pd-search-box .pd-cta { padding: 12px 16px; }
}

/* Stacked variant for the dedicated /search page (wraps legacy dl/dt/dd) */
.pd-search-box--stacked {
    display: block;
    max-width: 480px;
    margin: 0;
    background: none;
    padding: 0;
    box-shadow: none;
}
.pd-search-box--stacked input[type="text"] {
    float: none;
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    padding: 14px 18px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    margin: var(--space-1, 4px) 0 0;
}
.pd-search-box--stacked .form-textbox { width: 100%; max-width: 320px; }

/* ---------- Auth (magic-link sign in) -- plain block markup, no floats,
   so it can't hit the dl.zend_form/.content-box float-collapse issue. ---------- */
.pd-auth-form { display: flex; flex-direction: column; gap: 18px; max-width: 380px; }
.pd-auth-form__field { display: flex; flex-direction: column; }
.pd-auth-form label { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.pd-auth-form input[type="email"], .pd-auth-form input[type="text"] {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
}
.pd-auth-form input:focus { outline: none; border-color: var(--accent-900); }
.pd-auth-form__error { color: var(--accent2-700); font-size: 13px; margin-top: 6px; }
.pd-auth-form .pd-cta { align-self: flex-start; }

/* Segmented pill toggle (search mode / type filter) */
.pd-segmented {
    display: inline-flex;
    background: var(--surface-tint);
    border-radius: var(--radius-pill);
    padding: 4px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 2px;
}
.pd-segmented button, .pd-segmented a, .pd-segmented label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13.5px;
    border: none;
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    background: transparent;
    color: var(--text-muted);
    text-decoration: none;
}
.pd-segmented button.is-active, .pd-segmented a.is-active {
    background: var(--accent-900);
    color: #fff;
}

/* Homepage "Find a Program" mode toggle -- CSS-only via a hidden radio pair,
   so switching between location search and state browse needs no JS. */
.pd-search-panel { display: none; }
#mode-location:checked ~ .pd-search-panel--location,
#mode-state:checked ~ .pd-search-panel--state {
    display: flex;
}
#mode-location:checked ~ .pd-segmented label[for="mode-location"],
#mode-state:checked ~ .pd-segmented label[for="mode-state"] {
    background: var(--accent-900);
    color: #fff;
}
#mode-location:focus-visible ~ .pd-segmented label[for="mode-location"],
#mode-state:focus-visible ~ .pd-segmented label[for="mode-state"] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.hero-search__select {
    flex: 1 1 320px;
    min-width: 0;
    min-height: 48px;
    font-size: 16px;
    padding: 14px 18px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
}

/* ---------- Section rhythm ---------- */
.pd-section { max-width: var(--max-width); margin: 0 auto; padding: var(--section-pad) 24px 8px; }
/* .pd-section is designed for full-bleed top-level page sections (the
   homepage). Nested inside the detail-page two-column layout
   (.pd-layout__main), its own max-width/auto-margin/24px side padding
   have nothing to center against and just shift that section's content
   inward relative to sibling cards that aren't wrapped in .pd-section
   (About/How to Apply, Operated By, etc.) -- drop them, keep only the
   vertical rhythm. */
.pd-layout__main .pd-section { max-width: none; margin: 0; padding: 28px 0 0; }
.pd-section__title { font-size: 28px; margin-bottom: 16px; }
.pd-section__head .pd-section__title { margin-bottom: 0; }
.pd-section__intro { color: var(--text-muted); margin-top: 8px; max-width: 620px; font-size: 15.5px; line-height: 1.6; }
.pd-section__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.pd-section-tint { background: var(--surface-tint); margin-top: 20px; }
.pd-section-tint > .pd-section { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }

/* ---------- State / county grid (auto-fill card grid) ---------- */
.pd-state-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0; padding: 0;
}
.pd-state-grid li { display: contents; }
.pd-state-grid li a, .pd-state-card {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 9px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 18px 20px;
    transition: box-shadow .15s ease, transform .15s ease, border-left-color .15s ease;
}
.pd-state-grid li a:hover, .pd-state-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-left-color: var(--accent-900);
    color: inherit;
}
.pd-state-card__region {
    font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-700);
}
.pd-state-card__name { font-family: var(--font-head); font-size: 20px; font-weight: 600; }
.pd-state-card__meta { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }

.pd-county-group-heading {
    font-size: 20px;
    padding-bottom: 10px;
    margin: 32px 0 16px;
    border-bottom: 1px solid var(--border);
}
.pd-county-group-heading:first-child { margin-top: 8px; }

/* County/city sibling-location grids: same tile treatment, room for a count */
.pd-county-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin: 16px 0 32px; }
.pd-county-grid li a { flex-direction: row; align-items: center; justify-content: space-between; padding: 14px 18px; }
.pd-county-grid__count { color: var(--text-muted); font-weight: 400; font-size: 13px; }

/* ---------- HS / EHS type badges (pill tags) ---------- */
.pd-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}
.pd-badge--hs { background: var(--accent-100); color: var(--accent-700); }
.pd-badge--ehs { background: var(--accent2-100); color: var(--accent2-700); }

/* ---------- Cards (listing-card / resource-card / recent-program-card / search-result-card) ---------- */
.listing-card, .recent-program-card, .search-result-card, .pd-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-600);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 18px 22px;
    list-style: none;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.listing-card:hover, .recent-program-card:hover, .search-result-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--accent-900);
    transform: translateY(-1px);
}
.listing-card__name, .recent-program-card__name, .search-result-card__name, .pd-card__title {
    font-family: var(--font-head);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.listing-card__name a, .recent-program-card__name a, .search-result-card__name a, .pd-card__title a {
    color: var(--text);
    text-decoration: none;
    font-family: inherit;
}
.listing-card__name a:hover, .recent-program-card__name a:hover, .search-result-card__name a:hover, .pd-card__title a:hover { color: var(--accent-700); }
.listing-card__meta, .recent-program-card__meta, .recent-program-card__excerpt, .search-result-card__meta, .pd-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 13.5px;
    margin: 0;
}
.listing-card__actions, .search-result-card__actions, .pd-card__actions {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.listing-card__action, .search-result-card__action {
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    color: var(--accent-700);
}
.listing-card__action:hover, .search-result-card__action:hover { color: var(--accent-900); text-decoration: underline; }

.listing-card-grid, .recent-programs__grid, .search-results-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Homepage recent-programs and search-result grids read better as cards
   (auto-fill), unlike the vertical center-list stack the handoff uses on
   county/search pages -- both patterns exist in the handoff itself. */
.recent-programs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* ---------- Breadcrumbs ---------- */
.pd-breadcrumb, .page-index.breadcrumbs {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px 14px;
    font-size: 13.5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
}
.pd-breadcrumb a, .page-index.breadcrumbs a { color: var(--text-muted); font-weight: 500; text-decoration: none; }
.pd-breadcrumb a:hover, .page-index.breadcrumbs a:hover { color: var(--accent-700); }

/* ---------- Directory notice (trust banner) ---------- */
.directory-notice, .pd-trust-banner {
    background: var(--accent2-50);
    border: 1px solid var(--accent2-100);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-size: 13.5px;
    color: var(--text);
}

/* ---------- Two-column content/sidebar grid ---------- */
.pd-layout { display: block; }
.pd-layout__main { min-width: 0; }
.pd-layout__aside { margin-top: 24px; }
@media (min-width: 900px) {
    .pd-layout { display: flex; flex-wrap: wrap; gap: 32px; }
    .pd-layout__main { flex: 3 1 560px; min-width: 0; }
    .pd-layout__aside { flex: 1 1 260px; margin-top: 0; display: flex; flex-direction: column; gap: 16px; }
}

/* Single-column pages (e.g. the homepage, which has no sidebar): style.css's
   unconditional `#page-content .leftcol{float:left;width:715px}` and
   responsive.css's matching >=992px rule are both ID+class selectors
   (specificity 1,1,0) -- a class-only override can never beat an ID
   selector regardless of source order, so this must match ID+class too. */
#page-content.pd-single-col .leftcol {
    float: none;
    width: 100%;
}

/* ---------- Ad slot: <x-directory-ad> already renders its own .directory-ad
   wrapper + .directory-ad__label "Advertisement" caption -- style those
   directly rather than adding a second wrapper around the component. ---------- */
.directory-ad {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-tint);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 100px;
    margin: 24px 0;
    overflow: hidden;
    text-align: center;
}
.directory-ad__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.directory-ad ins[data-ad-format="rectangle"] { min-height: 250px; }

/* ---------- Detail pages (center/program) ---------- */
.pd-entity-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pd-entity-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 4px 13px;
    border-radius: var(--radius-pill);
    background: var(--surface-tint);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.pd-entity-badge--primary { background: var(--accent-900); color: #fff; font-weight: 700; border-color: var(--accent-900); }
.pd-entity-badge svg { flex-shrink: 0; }

.page-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 32px; line-height: 1.18; color: var(--text); font-family: var(--font-head); font-weight: 700; }
.pd-detail-subtitle { display: flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 15.5px; margin: 8px 0 0; max-width: 60ch; }
.pd-detail-contact-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}
.pd-detail-contact-card__facts { flex: 1 1 220px; display: flex; flex-direction: column; gap: 14px; }
.pd-detail-contact-card__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 22px 28px;
}

/* Center detail: map sits flush below the facts, full width -- not beside
   them -- per the design spec. */
.pd-detail-contact-card--stacked { flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.pd-detail-contact-card--stacked .pd-detail-contact-card__facts { padding: 28px 28px 24px; gap: 0; }
.pd-detail-contact-card--stacked .pd-detail-contact-card__facts > .pd-detail-contact-card__grid { margin-bottom: 14px; }
.pd-detail-contact-card--stacked .pd-detail-contact-card__facts > .listing-actions { margin: 12px 0 6px; }
.pd-detail-contact-card__map {
    flex: 2 1 280px;
    min-height: 220px;
}
.pd-detail-contact-card--stacked .pd-detail-contact-card__map {
    flex: none;
    width: 100%;
    min-height: 280px;
    border-top: 1px solid var(--border);
}
.listing-map { width: 100%; height: 100%; min-height: 220px; }
.listing-map iframe { width: 100%; height: 100%; min-height: 220px; display: block; }
.listing-map-fallback { padding: 16px; margin: 0; color: var(--text-muted); font-size: 13.5px; }
.pd-detail-contact-card__fact { display: flex; gap: 10px; align-items: center; font-size: 14.5px; }
.pd-detail-contact-card__fact--phone { font-weight: 700; color: var(--text); font-size: 16px; }
.pd-detail-contact-card__map { flex: 2 1 280px; min-height: 220px; }

/* style.css's `.job-description-title{float:left;width:200px}` and
   `.job-description-content{float:right;width:425px}` (meant for the old
   label/value job-listing layout) still apply wherever these classes are
   reused -- the 425px fixed width squeezes long rich-text content (e.g.
   the About This Organization card) into a narrow column with blank
   space beside it. Neutralize both; the flex/block containers these are
   used in now handle layout. */
.job-description-title, .job-description-content { float: none; width: auto; }
.job-description-title { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-bottom: 2px; }
/* style.css's `.job-description-content a { color:#DB6B00 }` outranks a bare
   `a` rule on specificity -- match it so rich-text links (how_to_apply,
   description) use the design system's link color, not the legacy orange. */
.job-description-content a { color: var(--accent-700); }
.job-description-content a:hover { color: var(--accent-900); }
.job-description-content { font-size: 14.5px; line-height: 1.6; }

.parent-program-card, .pd-tinted-card {
    background: var(--accent-50);
    border-radius: var(--radius-lg);
    padding: 26px;
}
.parent-program-card__title { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-700); margin-bottom: 6px; }
.parent-program-card__name {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text);
    text-decoration: none;
    margin: 0 0 10px;
}
.parent-program-card__name span { font-family: var(--font-head); font-size: 22px; font-weight: 700; }
.parent-program-card__name svg { flex-shrink: 0; color: var(--accent-700); }
.parent-program-card__name:hover span { color: var(--accent-700); }
.parent-program-card__blurb { margin: 0 0 14px; font-size: 14.5px; color: var(--text-muted); line-height: 1.6; max-width: 66ch; }
.parent-program-card__links { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; font-weight: 600; }

.pd-report-card { background: var(--surface-tint); border-radius: var(--radius-lg); padding: 26px; }

.pd-family-resources-card__list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; }
.pd-family-resources-card__list li { border-top: 1px solid var(--border); }
.pd-family-resources-card__list li:first-child { border-top: none; }
.pd-family-resources-card__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 2px;
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}
.pd-family-resources-card__list a:hover { color: var(--accent-700); }
.pd-family-resources-card__list svg { flex-shrink: 0; color: var(--text-muted); }
.pd-family-resources-card__list a:hover svg { color: var(--accent-700); }

.related-resources-teaser { margin: 32px 0; font-size: 14.5px; }

/* ---------- Listing actions row ---------- */
.listing-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.listing-action {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border: 1.5px solid var(--border);
    color: var(--text);
}
.listing-action:hover { border-color: var(--accent-900); color: var(--accent-900); }
.listing-action--call { background: var(--accent-900); border-color: var(--accent-900); color: #fff; }
.listing-action--call:hover { background: var(--accent-700); border-color: var(--accent-700); color: #fff; }

/* ---------- Footer ---------- */
#footer-wrapper {
    background: var(--footer-bg);
    color: var(--footer-text);
    margin-top: 40px;
}
#footer-wrapper #wrapper { padding-top: 56px; padding-bottom: 0; }
.footer-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
@media (min-width: 700px) { .footer-groups { grid-template-columns: repeat(4, 1fr); } }
.footer-group__title {
    font-family: var(--font-head);
    color: var(--footer-text);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: .55;
    margin-bottom: 10px;
}
.footer-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-group a { color: var(--footer-text); text-decoration: none; font-size: 14px; }
.footer-group a:hover { color: var(--footer-accent); text-decoration: underline; }
.copyright {
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: 40px;
    padding: 18px 0;
    text-align: center;
    font-size: 12px;
    opacity: .55;
}

/* ---------- Homepage trust band (dark, full-bleed) ---------- */
.pd-trust-band {
    background: var(--accent-900);
    color: #fff;
    margin-top: 8px;
}
.pd-trust-band__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: clamp(44px, 6vw, 64px) 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
    justify-content: space-between;
}
.pd-trust-band h2 { color: #fff; font-size: 25px; margin-bottom: 12px; }
.pd-trust-band p { opacity: .85; max-width: 520px; margin: 0; line-height: 1.6; }
.pd-trust-band__actions { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.pd-trust-band__actions a { color: #fff; text-decoration: underline; font-weight: 600; }

/* ---------- Homepage: notice strip under search card ---------- */
.pd-hero__notice.directory-notice {
    max-width: 640px;
    margin: 18px auto 0;
    text-align: center;
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 0;
}

/* ---------- Homepage: HS/EHS "What's the difference" cards ---------- */
.pd-type-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 700px) { .pd-type-cards { grid-template-columns: 1fr 1fr; } }
.pd-type-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 26px 26px 22px;
    border-top: 6px solid var(--accent);
}
.pd-type-card--ehs { border-top-color: var(--accent2); }
.pd-type-card h3 { font-size: 21px; margin: 12px 0 8px; }
.pd-type-card h3 a { color: var(--text); text-decoration: none; }
.pd-type-card p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.6; }
.pd-type-cards__more {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: var(--text-muted);
}
.pd-type-cards__more a { font-weight: 600; }

/* ---------- Homepage: Getting Started info cards ---------- */
.pd-info-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 700px) { .pd-info-cards { grid-template-columns: repeat(3, 1fr); } }
.pd-info-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--accent-100);
    color: var(--accent-700);
    margin-bottom: 12px;
}
.pd-info-card h3 { font-size: 18px; margin-bottom: 6px; }
.pd-info-card p { margin: 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.6; }
.pd-info-cards__links { margin-top: 28px; font-size: 14px; color: var(--text-muted); }
.pd-info-cards__links a { font-weight: 600; }

/* ---------- Homepage: related sibling directories (de-emphasized) ---------- */
/* ---------- Resource card ---------- */
.pd-resource-card { border-left-color: var(--accent2-600); }
.pd-resource-card__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent2-700); }
.pd-resource-card__image { border-radius: var(--radius-sm); width: 100%; aspect-ratio: 16/10; object-fit: cover; }

/* Homepage Family Resources teaser: curated cards over the generic
   auto-fill grid, plus a single link through to the full resources hub. */
.family-resources-teaser__grid { margin: 0 0 20px; }
.family-resources-teaser__more { font-size: 15px; }
.resource {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
}
.resource p { margin: 0 0 1em; }
.resource img { border-radius: var(--radius-md); }
.resource__content h2 { margin: 1.8em 0 .65em; font-size: 1.55em; line-height: 1.25; color: var(--ink); }
.resource__content h3 { margin: 1.5em 0 .55em; font-size: 1.2em; line-height: 1.3; color: var(--ink); }
.resource__content ul,
.resource__content ol { margin: 0 0 1.2em 1.5em; padding-left: .75em; }
.resource__content li { margin: .35em 0; }
.resource__content a { color: var(--accent2-700); text-decoration: underline; text-underline-offset: 2px; }
.resource__content blockquote { margin: 1.4em 0; padding: .8em 1.1em; border-left: 4px solid var(--accent2-500); background: var(--surface-tint); }
.resource__content hr { margin: 2em 0; border: 0; border-top: 1px solid var(--line); }
.resource__content table { display: block; width: 100%; max-width: 100%; margin: 1.4em 0; overflow-x: auto; border-collapse: collapse; -webkit-overflow-scrolling: touch; }
.resource__content th,
.resource__content td { padding: .7em .8em; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.resource__content th { background: var(--surface-tint); color: var(--ink); font-weight: 700; }

/* Editorial directory-search directive inside full resource articles. */
.resource__content .article-directory-search { margin: 2rem 0; padding: clamp(20px, 4vw, 30px); }
.resource__content .article-directory-search__title { margin: 0 0 .45rem; font-size: clamp(1.35rem, 3vw, 1.75rem); }
.resource__content .article-directory-search__description { margin: 0 0 1.1rem; }
.resource__content .article-directory-search__browse { display: inline-block; margin-top: 1rem; font-weight: 700; }
@media (max-width: 599px) {
    .resource__content .article-directory-search__form { flex-direction: column; }
    .resource__content .article-directory-search__form input[type="text"],
    .resource__content .article-directory-search__submit { width: 100%; min-height: 48px; }
}
.pd-resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    list-style: none;
    margin: 20px 0;
    padding: 0;
}

/* ---------- Detail pages: photos / reviews / review form / Q&A ----------
   Shared by the <x-listing-engagement> component (program_show/center_show
   had byte-for-byte identical legacy markup for these sections). */
.pd-photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}
.pd-photo-gallery__item {
    display: block;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
}
.pd-photo-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pd-reviews__count { color: var(--text-muted); font-size: 14.5px; margin: 0 0 18px; }
.pd-review-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pd-review-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
}
.pd-review-card__meta { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-muted); margin-bottom: 6px; flex-wrap: wrap; }
.pd-review-card__stars { color: var(--accent2-600); letter-spacing: 1px; }
.pd-review-card__by { font-weight: 700; color: var(--text); }
.pd-review-card__body { font-size: 14.5px; line-height: 1.6; }

.pd-review-form { margin-top: 24px; }
.pd-review-form__form { max-width: none; margin-top: 16px; }
.pd-review-form__form select.form-selectbox,
.pd-review-form__form textarea {
    width: 100%;
    min-height: 48px;
    font-size: 15px;
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
}
.pd-review-form__form textarea { min-height: 130px; }
.pd-review-form__submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 4px;
}
.pd-review-form__submit-row .pd-cta { align-self: auto; }

.pd-qa { margin-top: 8px; }
.pd-qa__intro { color: var(--text-muted); margin: 4px 0 0; }
.pd-qa-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 22px;
    margin-bottom: 12px;
}
.pd-qa-card__question { font-weight: 600; margin: 0 0 8px; }
.pd-qa-card__question-meta { color: var(--text-muted); font-weight: 400; font-size: 13px; }
.pd-qa-card__answer { margin: 8px 0 0 18px; padding: 10px 14px; background: var(--surface-tint); border-radius: var(--radius-sm); font-size: 14.5px; }
.pd-qa-card__actions { margin-top: 12px; }

/* ---------- Utility ---------- */
.pd-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}