:root {
    --usapr-primary: #2563eb;
    --usapr-strong: #0f172a;
    --usapr-text: #334155;
    --usapr-muted: #64748b;
    --usapr-border: #e2e8f0;
    --usapr-surface-muted: #f8fafc;
    --usapr-surface-info: #f8fbff;
    --usapr-primary-soft: #eef4ff;
    --usapr-shadow-sm: 0 1px 2px rgba(15, 23, 42, .03);
    --usapr-shadow-hover: 0 6px 18px rgba(15, 23, 42, .08);
    --usapr-btn-primary-start: #719dfc;
    --usapr-btn-primary-end: #8d6efd;
    --usapr-btn-secondary-start: #f8fafc;
    --usapr-btn-secondary-end: #e2e8f0;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--usapr-text);
    background: #fff;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { color: var(--usapr-primary); text-decoration: underline; }

/*
 * Narrative and footer links stay visually identifiable without making the
 * application-like header/navigation noisy. Buttons and navigation controls
 * retain their dedicated treatments below.
 */
.usapr-page-container p a,
.usapr-page-container li a,
.usapr-state-guide p a,
.usapr-state-guide li a,
.usapr-site-footer a {
    color: var(--usapr-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.usapr-container { width: min(1120px, calc(100% - 32px)); margin-inline: auto; }
.usapr-reading-width { max-width: 720px; }
.usapr-page-container, .usapr-state-guide { padding-block: 36px; }

/* Application-like shell surfaces stay square and border-led, never card-like. */
.usapr-site-header {
    background: #fff;
    border-bottom: 1px solid var(--usapr-border);
}

.usapr-site-header__inner {
    min-height: 68px;
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
}

.usapr-brand-name {
    margin: 0;
    color: var(--usapr-strong);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

.usapr-brand-name a {
    color: inherit;
    text-decoration: none;
}

.usapr-brand-logo {
    margin: 0;
}

.usapr-site-header .wp-block-navigation { font-size: .9375rem; font-weight: 500; }

.usapr-site-footer {
    background: var(--usapr-surface-muted);
    border-top: 1px solid var(--usapr-border);
}

.usapr-site-footer__inner { padding-block: 32px; color: var(--usapr-muted); font-size: .875rem; }
.usapr-site-footer p { margin-top: 0; }
.usapr-site-footer__brand .usapr-brand-logo img {
    display: block;
    width: min(220px, 100%);
    height: auto;
    max-height: 82px;
    object-fit: contain;
    object-position: left center;
}

@supports selector(.usapr-site-footer__brand:has(img)) {
    .usapr-site-footer__brand:has(.usapr-brand-logo img) > .usapr-brand-name {
        display: none;
    }
}

/*
 * Reading-width headers stay anchored to the page's left content edge. WordPress
 * constrained layouts otherwise center any block with a narrower max-width,
 * creating a zig-zag between headings, copy, buttons, and full-width panels.
 */
.usapr-page-header, .usapr-section-header {
    max-width: 720px;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.usapr-page-header { padding-block: 36px 28px; }
.usapr-section-header { padding-block: 28px 16px; }
.usapr-page-title { margin: 0; color: var(--usapr-strong); font-size: clamp(1.75rem, 3vw, 2rem); font-weight: 600; line-height: 1.1; }
.usapr-section-title { margin: 0; color: var(--usapr-strong); font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.usapr-card-title { margin: 0; color: var(--usapr-strong); font-size: 1rem; font-weight: 600; }
.usapr-meta, .usapr-helper { color: var(--usapr-muted); font-size: .875rem; }
.usapr-label, .usapr-pattern-kicker { color: var(--usapr-primary); font-size: .875rem; font-weight: 600; }

/* Cards hold focused information; full-width sections use background and border only. */
.usapr-card, .usapr-information-card, .usapr-pattern-card {
    padding: 24px;
    background: #fff;
    border: 1px solid var(--usapr-border);
    border-radius: 18px;
    box-shadow: var(--usapr-shadow-sm);
}

.usapr-pattern-section { padding-block: 40px; }

/*
 * Primary page introductions receive one restrained branded visual surface.
 * The radial accents provide a graphic break without introducing decorative
 * imagery that competes with regulatory content.
 */
.usapr-page-container > .usapr-pattern-section:first-child {
    padding: 32px;
    border: 1px solid var(--usapr-border);
    border-radius: 24px;
    background:
        radial-gradient(circle at 92% 18%, rgba(13, 181, 219, .14), transparent 28%),
        radial-gradient(circle at 80% 84%, rgba(113, 157, 252, .13), transparent 34%),
        linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}

/* Alternating content sections become calm surface islands rather than plain text bands. */
.usapr-pattern-section--muted {
    padding-inline: 32px;
    border: 1px solid #edf1f6;
    border-radius: 24px;
    background: linear-gradient(180deg, #fbfcfe 0%, var(--usapr-surface-muted) 100%);
}

.usapr-pattern-heading, .usapr-pattern-copy { max-width: 760px; }
.usapr-pattern-heading { margin: 0; color: var(--usapr-strong); }
.usapr-pattern-copy { color: var(--usapr-muted); }

/*
 * Keep each section's narrative cluster on one shared left edge while allowing
 * cards, status panels, and grids to use the full content width.
 */
.usapr-pattern-section > .usapr-pattern-kicker,
.usapr-pattern-section > .usapr-pattern-heading,
.usapr-pattern-section > .usapr-pattern-copy,
.usapr-pattern-section > .usapr-section-title,
.usapr-pattern-section > .wp-block-buttons {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.usapr-pattern-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.usapr-pattern-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.usapr-assistance-panel, .usapr-monitoring-panel, .usapr-demo-panel, .usapr-updates-panel {
    padding: 32px;
    border: 1px solid var(--usapr-border);
    border-radius: 18px;
}

.usapr-assistance-panel { background: var(--usapr-primary-soft); }
.usapr-monitoring-panel { background: var(--usapr-surface-info); }
.usapr-demo-panel, .usapr-updates-panel { background: #fff; box-shadow: var(--usapr-shadow-sm); }

.wp-block-button__link, input[type="submit"], button {
    --usapr-button-start: var(--usapr-btn-primary-start);
    --usapr-button-end: var(--usapr-btn-primary-end);
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 12px;
    background-color: var(--usapr-button-end);
    background-image: linear-gradient(135deg, var(--usapr-button-start), var(--usapr-button-end));
    color: #fff;
    font-weight: 500;
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.wp-block-button__link:hover, .wp-block-button__link:focus-visible, input[type="submit"]:hover, button:hover {
    box-shadow: var(--usapr-shadow-hover);
    filter: brightness(.985);
    color: #fff;
    text-decoration: none;
}

.is-style-outline .wp-block-button__link {
    position: relative;
    background: #fff;
    border-color: transparent;
    color: #4f74e8;
    box-shadow: none;
}

.is-style-outline .wp-block-button__link::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--usapr-btn-primary-start), var(--usapr-btn-primary-end));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.is-style-outline .wp-block-button__link:hover, .is-style-outline .wp-block-button__link:focus-visible {
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--usapr-btn-primary-start) 14%, white), color-mix(in srgb, var(--usapr-btn-primary-end) 14%, white));
    color: #4f74e8;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
}

.usapr-button-text .wp-block-button__link {
    min-height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--usapr-primary);
    box-shadow: none;
}

input:not([type="submit"]), textarea, select, .wp-block-search__input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--usapr-border);
    border-radius: 12px;
    background: #fff;
    color: var(--usapr-text);
    font: inherit;
}

input:focus, textarea:focus, select:focus, .wp-block-search__input:focus, .wp-block-button__link:focus-visible {
    outline: 0;
    border-color: rgba(37, 99, 235, .45);
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .12);
}

/* Status labels are the only pill treatment and always include readable text. */
.usapr-status { display: inline-flex; align-items: center; min-height: 30px; padding: .2rem .65rem; border-radius: 999px; font-size: .875rem; font-weight: 500; }
.usapr-status--info { background: #eaf2ff; color: #315ea8; }
.usapr-status--success { background: #eaf7ee; color: #2f6b45; }
.usapr-status--warning { background: #fff4d6; color: #8a6512; }
.usapr-status--danger { background: #fde8e8; color: #b42318; }
.usapr-status--neutral { background: #eef2f6; color: #5b6878; }
.usapr-status--unknown { background: #f1f5f9; color: #64748b; }

.usapr-status-summary { padding: 20px 24px; border: 1px solid var(--usapr-border); border-left: 3px solid var(--usapr-primary); background: var(--usapr-surface-info); border-radius: 12px; }
.usapr-status-summary--warning { border-left-color: #d99010; background: #fffaf0; }
.usapr-status-summary--danger { border-left-color: #dc2626; background: #fff7f7; }
.usapr-facts-list { margin: 0; padding: 0; list-style: none; }
.usapr-facts-list li { padding: 12px 0; border-bottom: 1px solid var(--usapr-border); }
.usapr-facts-list li:last-child { border-bottom: 0; }

/* Numbered operating steps create a visual break while preserving native ordered-list semantics. */
.usapr-process-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: usapr-process-step;
    display: grid;
    gap: 14px;
}

.usapr-process-timeline li {
    position: relative;
    min-height: 58px;
    padding: 16px 18px 16px 62px;
    border: 1px solid var(--usapr-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--usapr-shadow-sm);
    counter-increment: usapr-process-step;
}

.usapr-process-timeline li::before {
    content: counter(usapr-process-step);
    position: absolute;
    top: 14px;
    left: 16px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--usapr-btn-primary-start), var(--usapr-btn-primary-end));
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1;
}

.usapr-resource-list a::after { content: " ↗"; font-size: .875em; }

/* Taxonomy patterns use existing surfaces and remain plain, editable core blocks. */
.usapr-breadcrumbs { gap: 8px; margin-block: 4px 16px; color: var(--usapr-muted); font-size: .875rem; }
.usapr-breadcrumbs p { margin: 0; }
.usapr-breadcrumbs a { color: var(--usapr-text); text-decoration: underline; text-underline-offset: 2px; }
.usapr-breadcrumbs__separator { color: var(--usapr-muted); }
.usapr-topic-links { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.usapr-topic-links p { margin: 0; padding: 16px; border: 1px solid var(--usapr-border); border-radius: 12px; background: #fff; }
.usapr-topic-links a { color: var(--usapr-primary); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.usapr-obligation-list, .usapr-state-index { display: grid; gap: 8px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 1.25rem; }
.usapr-obligation-list li, .usapr-state-index li { padding-left: 4px; }
.usapr-state-index a { color: var(--usapr-primary); text-decoration: underline; text-underline-offset: 2px; }

/*
 * `/states/` is a directory first: State names dominate, while coverage remains
 * quiet secondary metadata. The names themselves still come from Laravel.
 */
.usapr-state-directory-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 18px;
    margin: 24px 0 16px;
    padding: 0;
    list-style: none;
}
.usapr-state-directory-list li {
    padding: 14px 16px;
    border: 1px solid var(--usapr-border);
    border-radius: 12px;
    background: #fff;
}
.usapr-state-directory-list__link {
    display: flex;
    gap: 8px;
    align-items: baseline;
    justify-content: space-between;
}
.usapr-showcase { padding-block: 48px; }
.usapr-showcase__section { padding-block: 24px; border-top: 1px solid var(--usapr-border); }
.usapr-showcase__swatches { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.usapr-showcase__swatch { min-height: 88px; padding: 12px; border: 1px solid var(--usapr-border); border-radius: 12px; font-size: .875rem; font-weight: 500; }
.usapr-showcase__swatch--canvas { background: #fff; }.usapr-showcase__swatch--muted { background: var(--usapr-surface-muted); }.usapr-showcase__swatch--soft { background: var(--usapr-primary-soft); }.usapr-showcase__swatch--strong { background: var(--usapr-strong); color: #fff; }

@media (max-width: 1023px) and (min-width: 768px) {
    .usapr-state-directory-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .usapr-page-container, .usapr-state-guide { padding-block: 24px; }
    .usapr-site-header__inner { padding-block: 16px; align-items: flex-start; flex-direction: column; }
    .usapr-pattern-section { padding-block: 32px; }
    .usapr-page-container > .usapr-pattern-section:first-child { padding: 24px; border-radius: 18px; }
    .usapr-pattern-section--muted { padding-inline: 20px; border-radius: 18px; }
    .usapr-pattern-grid, .usapr-pattern-grid--two, .usapr-showcase__swatches, .usapr-topic-links, .usapr-obligation-list, .usapr-state-index { grid-template-columns: 1fr; }
    .usapr-card, .usapr-information-card, .usapr-pattern-card, .usapr-assistance-panel, .usapr-monitoring-panel, .usapr-demo-panel, .usapr-updates-panel { padding: 24px; }
    .usapr-process-timeline li { padding: 15px 16px 15px 58px; }
}

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

/* State hubs and topic pages use one aligned regulatory-brief reading frame. */
.usapr-state-guide .usapr-breadcrumbs,
.usapr-state-guide .usapr-page-header,
.usapr-state-topic .usapr-breadcrumbs,
.usapr-state-topic .usapr-page-header,
.usapr-state-topic .usapr-state-flow {
    width: min(100%, 1040px);
    max-width: 1040px;
    margin-inline: auto !important;
}
.usapr-state-topic .usapr-breadcrumbs { margin-block: 0 8px; }
.usapr-state-topic .usapr-page-header { padding-block: 18px 8px; }
.usapr-state-flow { padding-block: 8px 24px; }
.usapr-brief-meta {
    display: flex;
    gap: 12px 16px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-block: 8px 16px;
}
.usapr-brief-section {
    padding-block: 24px;
    border-top: 1px solid var(--usapr-border);
}
.usapr-brief-section--key {
    padding-top: 8px;
    border-top: 0;
}
.usapr-brief-title {
    margin: 0;
    color: var(--usapr-strong);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
}
.usapr-brief-subtitle {
    margin: 20px 0 0;
    color: var(--usapr-strong);
    font-size: .9375rem;
    font-weight: 600;
}
.usapr-brief-key-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid var(--usapr-border);
    border-radius: 14px;
    background: var(--usapr-border);
}
.usapr-brief-key-fact {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 18px 20px;
    background: #fff;
}
.usapr-brief-key-label {
    color: var(--usapr-muted);
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.usapr-brief-key-value {
    color: var(--usapr-strong);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.usapr-brief-pathways {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 14px;
}
.usapr-brief-pathway {
    padding: 20px;
    border: 1px solid var(--usapr-border);
    border-radius: 14px;
    background: #fff;
}
.usapr-brief-pathway .usapr-label { margin: 0 0 4px; }
.usapr-brief-pathway h3 {
    margin: 0;
    color: var(--usapr-strong);
    font-size: 1rem;
    font-weight: 600;
}
.usapr-brief-price {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-top: 16px;
}
.usapr-brief-value {
    color: var(--usapr-strong);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.2;
}
.usapr-brief-timing {
    display: grid;
    gap: 0;
    margin: 14px 0 0;
}
.usapr-brief-timing div {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding-block: 9px;
    border-top: 1px solid var(--usapr-border);
}
.usapr-brief-timing dt { color: var(--usapr-muted); }
.usapr-brief-timing dd { margin: 0; color: var(--usapr-strong); font-weight: 600; text-align: right; }
.usapr-brief-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 40px;
}
.usapr-brief-panel {
    padding-top: 16px;
    border-top: 2px solid var(--usapr-border);
}
.usapr-brief-list {
    display: grid;
    gap: 8px;
    margin: 14px 0 0;
    padding-left: 1.1rem;
}
.usapr-brief-list li { padding-left: 2px; }
.usapr-brief-list li > span { display: block; margin-top: 2px; }
.usapr-brief-contact {
    display: grid;
    margin: 10px 0 0;
}
.usapr-brief-contact div {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    padding-block: 9px;
    border-bottom: 1px solid var(--usapr-border);
}
.usapr-brief-contact div:last-child { border-bottom: 0; }
.usapr-brief-contact dt { color: var(--usapr-muted); font-size: .875rem; }
.usapr-brief-contact dd { margin: 0; overflow-wrap: anywhere; }
.usapr-brief-contact address { font-style: normal; }
.usapr-resource-list {
    display: grid;
    gap: 10px;
    margin: 12px 0 0;
    padding-left: 1.1rem;
}
.usapr-resource-list li > .usapr-meta { display: block; margin-top: 2px; }
.usapr-brief-filing-method {
    margin-top: 14px;
    padding: 16px 18px;
    border-left: 3px solid var(--usapr-primary);
    border-radius: 10px;
    background: var(--usapr-surface-info);
}
.usapr-brief-filing-method .usapr-label { display: block; margin-bottom: 3px; }
.usapr-brief-filing-method > strong { color: var(--usapr-strong); }
.usapr-brief-filing-method p { margin: 6px 0 0; }
.usapr-process-list {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
    padding-inline-start: 1.5rem;
}
.usapr-process-list li { padding-inline-start: 4px; }
.usapr-brief-related-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 12px;
}
.usapr-brief-related-links a {
    color: var(--usapr-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.usapr-brief-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    margin-top: 24px;
    padding: 20px 22px;
    border: 1px solid var(--usapr-border);
    border-radius: 16px;
    background: var(--usapr-surface-muted);
}
.usapr-brief-cta .usapr-pattern-kicker { margin: 0 0 4px; }
.usapr-brief-cta p { margin: 6px 0 0; }
.usapr-brief-cta .wp-block-buttons { margin: 0; justify-content: flex-end; }
.usapr-brief-footer {
    padding-top: 18px;
    color: var(--usapr-muted);
    font-size: .8125rem;
}
.usapr-brief-footer p { margin: 0; }

@media (max-width: 767px) {
    .usapr-state-topic .usapr-breadcrumbs,
    .usapr-state-topic .usapr-page-header,
    .usapr-state-topic .usapr-state-flow {
        width: 100%;
    }
    .usapr-brief-pathways,
    .usapr-brief-columns,
    .usapr-brief-cta {
        grid-template-columns: 1fr;
    }
    .usapr-brief-columns { gap: 24px; }
    .usapr-brief-contact div { grid-template-columns: 1fr; gap: 2px; }
    .usapr-brief-cta .wp-block-buttons { justify-content: flex-start; }
}
