/*
 * HomeBase Senior Care shared public design system - Step 36A
 *
 * Color direction comes from the Columba Jacobi visual palette:
 * deep brown #392b1b, warm secondary #8c7256, soft blue #5faad7,
 * warm ivory surfaces and #fafafa header/surface neutrals.
 *
 * Interaction direction borrows information-design principles from
 * Kalshi: compact controls, strong status hierarchy, thin borders,
 * restrained radii, prominent numeric/status values and dense layouts.
 */

:root {
    --hb-color-ink: #392b1b;
    --hb-color-ink-strong: #241a10;
    --hb-color-ink-muted: #705e4d;
    --hb-color-secondary: #8c7256;
    --hb-color-blue: #5faad7;
    --hb-color-blue-soft: #e9f4fb;
    --hb-color-action: #39779b;
    --hb-color-action-hover: #2f6889;
    --hb-color-navy: #0d1b2a;

    --hb-color-page: #fbf7f0;
    --hb-color-page-deep: #f5efe6;
    --hb-color-surface: #ffffff;
    --hb-color-surface-soft: #fafafa;
    --hb-color-surface-warm: #fffdf9;

    --hb-color-border: #ddd2c2;
    --hb-color-border-soft: #ebe3d7;
    --hb-color-border-strong: #c8b8a3;

    --hb-color-success: #266b4f;
    --hb-color-success-soft: #edf7f2;
    --hb-color-warning: #8a5b13;
    --hb-color-warning-soft: #fff6df;
    --hb-color-danger: #9b3d34;
    --hb-color-danger-soft: #fff0ee;

    --hb-font-sans:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    --hb-font-mono:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    --hb-radius-xs: 4px;
    --hb-radius-sm: 6px;
    --hb-radius-md: 9px;
    --hb-radius-lg: 12px;
    --hb-radius-pill: 999px;

    --hb-shadow-focus: 0 0 0 3px rgba(95, 170, 215, 0.22);
    --hb-shadow-raised: 0 8px 26px rgba(57, 43, 27, 0.08);

    --hb-shell-wide: 1180px;
    --hb-shell-content: 1040px;

    --hb-space-1: 4px;
    --hb-space-2: 8px;
    --hb-space-3: 12px;
    --hb-space-4: 16px;
    --hb-space-5: 20px;
    --hb-space-6: 24px;
    --hb-space-8: 32px;
    --hb-space-10: 40px;
    --hb-space-12: 48px;
}

html {
    color-scheme: light;
}

body.public-page {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(13, 27, 42, 0.045) 0,
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 42%,
            rgba(95, 170, 215, 0.075) 0,
            transparent 32%
        ),
        linear-gradient(
            135deg,
            var(--hb-color-page) 0%,
            var(--hb-color-page-deep) 48%,
            var(--hb-color-page) 100%
        );
    color: var(--hb-color-ink);
    font-family: var(--hb-font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.public-page *,
.public-page *::before,
.public-page *::after {
    box-sizing: border-box;
}

.public-page a {
    color: inherit;
}

.public-page button,
.public-page input,
.public-page select,
.public-page textarea {
    font: inherit;
}

.public-page :focus-visible {
    outline: 2px solid var(--hb-color-blue);
    outline-offset: 2px;
}

/* ---------- Shared public header ---------- */

.hb-site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background: rgba(250, 250, 250, 0.96);
    border-bottom: 1px solid var(--hb-color-border);
    backdrop-filter: blur(12px);
}

.hb-header-inner {
    width: min(100%, var(--hb-shell-wide));
    min-height: 62px;
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.hb-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: max-content;
    text-decoration: none;
    color: var(--hb-color-ink);
}

.hb-brand-mark {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--hb-color-ink);
    border-radius: var(--hb-radius-sm);
    background: var(--hb-color-ink);
    color: #ffffff;
    font-family: var(--hb-font-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.hb-brand-name {
    font-size: 16px;
    font-weight: 750;
    letter-spacing: -0.015em;
}

.hb-desktop-nav {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    gap: 4px;
    flex: 1;
}

.hb-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    color: var(--hb-color-ink-muted);
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}

.hb-nav-link:hover {
    color: var(--hb-color-ink);
    background: rgba(140, 114, 86, 0.055);
}

.hb-nav-link-active {
    color: var(--hb-color-ink);
}

.hb-nav-link-active::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: -1px;
    left: 12px;
    height: 2px;
    background: var(--hb-color-blue);
}

.hb-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hb-context-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--hb-color-border);
    border-radius: var(--hb-radius-pill);
    background: var(--hb-color-surface-warm);
    color: var(--hb-color-ink-muted);
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}

.hb-header-cta {
    min-height: 36px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hb-color-action);
    border-radius: var(--hb-radius-sm);
    background: var(--hb-color-action);
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        transform 120ms ease;
}

.hb-header-cta:hover {
    background: var(--hb-color-action-hover);
    border-color: var(--hb-color-action-hover);
}

.hb-header-cta:active {
    transform: translateY(1px);
}

.hb-menu-button {
    display: none;
    width: 38px;
    height: 36px;
    padding: 8px;
    border: 1px solid var(--hb-color-border);
    border-radius: var(--hb-radius-sm);
    background: var(--hb-color-surface);
    cursor: pointer;
}

.hb-menu-button span {
    display: block;
    height: 2px;
    margin: 3px 0;
    border-radius: 1px;
    background: var(--hb-color-ink);
}

.hb-mobile-nav {
    display: none;
}

/* ---------- Shared public footer ---------- */

.hb-site-footer {
    margin-top: 36px;
    border-top: 1px solid var(--hb-color-border);
    background: rgba(250, 250, 250, 0.94);
}

.hb-footer-inner {
    width: min(100%, var(--hb-shell-wide));
    margin: 0 auto;
    padding: 30px 22px 34px;
    display: grid;
    grid-template-columns: 1.15fr auto 1.3fr;
    gap: 36px;
    align-items: start;
}

.hb-footer-brand {
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
}

.hb-footer-brand-block p,
.hb-footer-disclaimer {
    margin: 8px 0 0;
    color: var(--hb-color-ink-muted);
    font-size: 11px;
    line-height: 1.55;
}

.hb-footer-brand-block p {
    max-width: 390px;
}

.hb-footer-nav {
    display: flex;
    gap: 16px;
}

.hb-footer-nav a {
    color: var(--hb-color-ink-muted);
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
}

.hb-footer-nav a:hover {
    color: var(--hb-color-ink);
    text-decoration: underline;
}

.hb-footer-disclaimer {
    max-width: 430px;
    margin-top: 0;
}

/* ---------- Shared component primitives ---------- */

.public-page .hb-card {
    background: var(--hb-color-surface);
    border: 1px solid var(--hb-color-border);
    border-radius: var(--hb-radius-md);
}

.public-page .hb-panel-header {
    padding: 14px 16px;
    background: var(--hb-color-surface-soft);
    border-bottom: 1px solid var(--hb-color-border-soft);
}

.public-page .hb-eyebrow,
.public-page .eyebrow,
.public-page .small-label,
.public-page .meta-label,
.public-page .summary-label {
    color: var(--hb-color-secondary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.public-page .hb-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border: 1px solid var(--hb-color-border);
    border-radius: var(--hb-radius-pill);
    background: var(--hb-color-surface-soft);
    color: var(--hb-color-ink-muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.public-page .hb-metric {
    font-family: var(--hb-font-mono);
    font-variant-numeric: tabular-nums;
}

.public-page .hb-button,
.public-page .primary-button,
.public-page .primary-action,
.public-page .result-action,
.public-page .agency-search button {
    min-height: 38px;
    border-radius: var(--hb-radius-sm);
    font-weight: 750;
    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        color 120ms ease,
        transform 120ms ease;
}

.public-page .primary-button,
.public-page .primary-action,
.public-page .agency-search button {
    border-color: var(--hb-color-action) !important;
    background: var(--hb-color-action) !important;
    color: #ffffff !important;
}

.public-page .primary-button:hover,
.public-page .primary-action:hover,
.public-page .agency-search button:hover {
    border-color: var(--hb-color-action-hover) !important;
    background: var(--hb-color-action-hover) !important;
}

.public-page input[type="text"],
.public-page input[type="search"],
.public-page input[type="number"],
.public-page input[type="email"],
.public-page input[type="tel"],
.public-page select,
.public-page textarea {
    border-color: var(--hb-color-border-strong) !important;
    background: var(--hb-color-surface) !important;
    color: var(--hb-color-ink) !important;
}

.public-page input:focus,
.public-page select:focus,
.public-page textarea:focus {
    border-color: var(--hb-color-blue) !important;
    box-shadow: var(--hb-shadow-focus);
    outline: none;
}

/* ---------- Harmonize the existing public pages ---------- */

.public-page .page-shell {
    width: 100%;
    color: var(--hb-color-ink);
}

.public-page .intro-copy,
.public-page .directory-hero p,
.public-page .area-hero p,
.public-page .body-copy,
.public-page .legal-name,
.public-page .location-line,
.public-page .note,
.public-page .next-copy,
.public-page .requirement-category {
    color: var(--hb-color-ink-muted);
}

.public-page .intro-panel,
.public-page .directory-hero,
.public-page .area-hero,
.public-page .hero-panel,
.public-page .panel,
.public-page .notice,
.public-page .directory-note,
.public-page .requirements-panel,
.public-page .search-summary,
.public-page .next-panel,
.public-page .question-section {
    border-color: var(--hb-color-border);
}

.public-page .directory-hero,
.public-page .area-hero,
.public-page .hero-panel,
.public-page .panel,
.public-page .notice,
.public-page .directory-note,
.public-page .requirements-panel,
.public-page .search-summary,
.public-page .next-panel,
.public-page .question-section,
.public-page .agency-card,
.public-page .privacy-note {
    background: rgba(255, 255, 255, 0.94);
}

.public-page .section-heading,
.public-page .requirements-heading,
.public-page .license-box,
.public-page .count-pill,
.public-page .empty-state {
    background: var(--hb-color-surface-soft);
    border-color: var(--hb-color-border-soft);
}

.public-page .agency-card,
.public-page .question-section,
.public-page .requirements-panel,
.public-page .search-summary,
.public-page .next-panel,
.public-page .hero-panel,
.public-page .panel,
.public-page .directory-hero,
.public-page .area-hero,
.public-page .notice,
.public-page .directory-note {
    border-radius: var(--hb-radius-md);
}

.public-page .agency-card:hover {
    border-color: var(--hb-color-border-strong);
}

.public-page h1,
.public-page h2,
.public-page h3,
.public-page strong {
    color: var(--hb-color-ink-strong);
}

.public-page h1 {
    letter-spacing: -0.025em;
}

/* Step 35 ranking/status elements */

.public-page .match-rank,
.public-page .match-percent,
.public-page .score-value,
.public-page .summary-value {
    font-variant-numeric: tabular-nums;
}

.public-page .match-percent,
.public-page .score-value {
    font-family: var(--hb-font-mono);
}

.public-page .requirement-level-required {
    background: var(--hb-color-ink) !important;
    border-color: var(--hb-color-ink) !important;
}

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

@media (max-width: 900px) {
    .hb-context-pill {
        display: none;
    }

    .hb-footer-inner {
        grid-template-columns: 1fr 1fr;
    }

    .hb-footer-disclaimer {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .hb-header-inner {
        min-height: 58px;
        padding: 0 16px;
        gap: 14px;
    }

    .hb-brand-name {
        font-size: 14px;
    }

    .hb-brand-mark {
        width: 28px;
        height: 28px;
    }

    .hb-desktop-nav,
    .hb-header-cta {
        display: none;
    }

    .hb-menu-button {
        display: block;
    }

    .hb-mobile-nav {
        padding: 8px 16px 14px;
        border-top: 1px solid var(--hb-color-border-soft);
        background: var(--hb-color-surface-soft);
    }

    .hb-mobile-nav-open {
        display: grid;
        gap: 4px;
    }

    .hb-mobile-nav-link {
        padding: 11px 10px;
        border-radius: var(--hb-radius-sm);
        color: var(--hb-color-ink-muted);
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
    }

    .hb-mobile-nav-link:hover,
    .hb-mobile-nav-link.hb-nav-link-active {
        background: var(--hb-color-blue-soft);
        color: var(--hb-color-ink);
    }

    body.hb-mobile-menu-open {
        overflow: hidden;
    }

    .hb-footer-inner {
        padding: 26px 16px 30px;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hb-footer-disclaimer {
        grid-column: auto;
    }

    .hb-footer-nav {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-page *,
    .public-page *::before,
    .public-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}