/**
 * Patriot University — Component Styles
 * All reusable UI components. Loads after theme.css.
 * BEM naming: .pu-{component}__{element}--{modifier}
 */

/* ── Icons ───────────────────────────────────────────────────────────── */

.pu-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.pu-icon--sm { width: 16px; height: 16px; }
.pu-icon--lg { width: 32px; height: 32px; }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.pu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--iti-space-sm);
    min-height: var(--pu-touch);
    padding: var(--iti-space-sm) var(--iti-space-lg);
    font-family: var(--pu-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--pu-radius);
    cursor: pointer;
    transition: background var(--iti-duration-fast) var(--iti-ease-standard),
                color var(--iti-duration-fast) var(--iti-ease-standard),
                border-color var(--iti-duration-fast) var(--iti-ease-standard);
    white-space: nowrap;
}

.pu-btn:focus-visible {
    outline: 3px solid var(--pu-navy);
    outline-offset: 2px;
}

.pu-btn--primary {
    background: var(--pu-navy);
    color: #fff;
    border-color: var(--pu-navy);
}

.pu-btn--primary:hover {
    background: var(--pu-navy-dark);
    border-color: var(--pu-navy-dark);
    color: #fff;
}

.pu-btn--secondary {
    background: transparent;
    color: var(--pu-navy);
    border-color: var(--pu-navy);
}

.pu-btn--secondary:hover {
    background: var(--pu-navy-light);
}

.pu-btn--ghost {
    background: transparent;
    color: var(--pu-gray-600);
    border-color: transparent;
}

.pu-btn--ghost:hover {
    background: var(--pu-gray-100);
    color: var(--pu-ink);
}

.pu-btn--danger {
    background: var(--pu-red);
    color: #fff;
    border-color: var(--pu-red);
}

.pu-btn--danger:hover {
    background: #a93226;
    border-color: #a93226;
    color: #fff;
}

.pu-btn--sm {
    min-height: 32px;
    padding: var(--iti-space-xs) var(--iti-space-md);
    font-size: 0.8125rem;
}

.pu-btn:disabled,
.pu-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Cards ────────────────────────────────────────────────────────────── */

.pu-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--iti-space-md);
}

.pu-card-grid--2col { grid-template-columns: repeat(2, 1fr); }
.pu-card-grid--3col { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 767px) {
    .pu-card-grid--2col,
    .pu-card-grid--3col { grid-template-columns: 1fr; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .pu-card-grid--3col { grid-template-columns: repeat(2, 1fr); }
}

.pu-card {
    background: var(--iti-surface);
    border: 1px solid var(--iti-border);
    border-radius: var(--pu-radius-lg);
    overflow: hidden;
    transition: box-shadow var(--iti-duration-fast) var(--iti-ease-standard),
                border-color var(--iti-duration-fast) var(--iti-ease-standard);
}

.pu-card:hover {
    box-shadow: var(--pu-shadow);
    border-color: var(--pu-navy-light);
}

.pu-card__link {
    display: flex;
    align-items: flex-start;
    gap: var(--iti-space-md);
    padding: var(--iti-space-md);
    text-decoration: none;
    color: inherit;
    min-height: var(--pu-touch);
}

.pu-card__link:focus-visible {
    outline: 3px solid var(--pu-navy);
    outline-offset: -3px;
    border-radius: var(--pu-radius-lg);
}

.pu-card__icon-area {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pu-navy-light);
    border-radius: var(--pu-radius);
    color: var(--pu-navy);
}

.pu-card__icon-area--profile {
    background: var(--pu-red-light);
    color: var(--pu-red);
}

.pu-card__icon-area--tool {
    background: var(--pu-green-light);
    color: var(--pu-green);
}

.pu-card__icon {
    width: 20px;
    height: 20px;
}

.pu-card__body {
    flex: 1;
    min-width: 0;
}

.pu-card__title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--iti-space-xs);
    color: var(--pu-ink);
}

.pu-card__excerpt {
    font-size: 0.875rem;
    color: var(--pu-gray-600);
    line-height: 1.5;
    margin: 0;
}

/* Category card (front page grid) */
.pu-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--iti-space-sm);
    padding: var(--iti-space-lg) var(--iti-space-md);
    background: var(--iti-surface);
    border: 1px solid var(--iti-border);
    border-radius: var(--pu-radius-lg);
    text-decoration: none;
    color: inherit;
    text-align: center;
    transition: box-shadow var(--iti-duration-fast) var(--iti-ease-standard),
                border-color var(--iti-duration-fast) var(--iti-ease-standard);
    min-height: var(--pu-touch);
}

.pu-category-card:hover {
    box-shadow: var(--pu-shadow);
    border-color: var(--pu-navy);
}

.pu-category-card:focus-visible {
    outline: 3px solid var(--pu-navy);
    outline-offset: 2px;
}

.pu-category-card__icon {
    width: 32px;
    height: 32px;
    color: var(--pu-navy);
}

.pu-category-card__title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
}

.pu-category-card__count {
    font-size: 0.75rem;
    color: var(--pu-gray-400);
}

.pu-category-card--wide {
    flex-direction: row;
    text-align: left;
}

/* ── Badges ──────────────────────────────────────────────────────────── */

.pu-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--iti-space-xs);
    padding: 2px var(--iti-space-sm);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--pu-radius);
    background: var(--pu-navy-light);
    color: var(--pu-navy);
    text-decoration: none;
    white-space: nowrap;
}

.pu-badge--linked:hover {
    background: var(--pu-navy);
    color: #fff;
}

.pu-badge--profile {
    background: var(--pu-red-light);
    color: var(--pu-red);
}

.pu-badge--tool {
    background: var(--pu-green-light);
    color: var(--pu-green);
}

.pu-badge--gold {
    background: var(--pu-gold-light);
    color: var(--pu-gold);
}

.pu-badge--severity-high {
    background: var(--pu-red-light);
    color: var(--pu-red);
}

.pu-badge--severity-medium {
    background: var(--pu-gold-light);
    color: var(--pu-gold);
}

.pu-badge--severity-low {
    background: var(--pu-green-light);
    color: var(--pu-green);
}

.pu-badge__icon {
    width: 12px;
    height: 12px;
}

/* ── Breadcrumb ──────────────────────────────────────────────────────── */

.pu-breadcrumb {
    padding: var(--iti-space-md) 0;
    font-size: 0.8125rem;
}

.pu-breadcrumb__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--iti-space-xs);
}

.pu-breadcrumb__item {
    display: flex;
    align-items: center;
    gap: var(--iti-space-xs);
}

.pu-breadcrumb__link {
    color: var(--pu-gray-600);
    text-decoration: none;
}

.pu-breadcrumb__link:hover {
    color: var(--pu-navy);
    text-decoration: underline;
}

.pu-breadcrumb__current {
    color: var(--pu-ink);
    font-weight: 500;
}

.pu-breadcrumb__sep {
    width: 12px;
    height: 12px;
    color: var(--pu-gray-400);
}

/* ── Search Form ─────────────────────────────────────────────────────── */

.pu-search-form {
    display: flex;
    gap: var(--iti-space-sm);
    align-items: center;
}

.pu-search-form__field {
    flex: 1;
    position: relative;
}

.pu-search-form__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--pu-gray-400);
    pointer-events: none;
}

.pu-search-form__input {
    width: 100%;
    padding: var(--iti-space-sm) var(--iti-space-md) var(--iti-space-sm) 40px;
    font-family: var(--pu-font-body);
    font-size: 1rem;
    border: 2px solid var(--iti-border);
    border-radius: var(--pu-radius-pill);
    background: var(--iti-surface);
    color: var(--pu-ink);
    min-height: var(--pu-touch);
    outline: none;
    transition: border-color var(--iti-duration-fast) var(--iti-ease-standard);
}

.pu-search-form__input:focus {
    border-color: var(--pu-navy);
    box-shadow: var(--iti-shadow-focus);
}

.pu-search-form__submit {
    flex-shrink: 0;
}

/* ── Table of Contents ───────────────────────────────────────────────── */

.pu-toc {
    background: var(--iti-surface-2);
    border: 1px solid var(--iti-border);
    border-radius: var(--pu-radius-lg);
    padding: var(--iti-space-md) var(--iti-space-lg);
    margin-bottom: var(--iti-space-xl);
}

.pu-toc__title {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pu-gray-600);
    margin-bottom: var(--iti-space-sm);
}

.pu-toc__list {
    list-style: none;
    counter-reset: toc;
}

.pu-toc__item {
    counter-increment: toc;
}

.pu-toc__item--nested {
    padding-left: var(--iti-space-lg);
}

.pu-toc__link {
    display: block;
    padding: var(--iti-space-xs) 0;
    font-size: 0.875rem;
    color: var(--pu-gray-600);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.pu-toc__link:hover {
    color: var(--pu-navy);
}

/* ── Toast ────────────────────────────────────────────────────────────── */

.pu-toast {
    position: fixed;
    bottom: var(--iti-space-lg);
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    padding: var(--iti-space-sm) var(--iti-space-lg);
    border-radius: var(--pu-radius);
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: var(--pu-shadow-lg);
    z-index: 100000;
    opacity: 0;
    transition: transform var(--iti-duration-medium) var(--iti-ease-standard),
                opacity var(--iti-duration-medium) var(--iti-ease-standard);
    max-width: 400px;
}

.pu-toast.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.pu-toast--success { background: var(--pu-green); color: #fff; }
.pu-toast--error   { background: var(--pu-red); color: #fff; }
.pu-toast--warning { background: var(--pu-gold); color: var(--pu-ink); }
.pu-toast--info    { background: var(--pu-navy); color: #fff; }

/* ── Modal ────────────────────────────────────────────────────────────── */

.pu-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--iti-space-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--iti-duration-medium) var(--iti-ease-standard),
                visibility var(--iti-duration-medium);
}

.pu-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.pu-modal {
    background: var(--iti-surface);
    border-radius: var(--pu-radius-lg);
    box-shadow: var(--pu-shadow-lg);
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
}

.pu-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--iti-space-md) var(--iti-space-lg);
    border-bottom: 1px solid var(--iti-border);
}

.pu-modal__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.pu-modal__close {
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--iti-space-sm);
    color: var(--pu-gray-600);
    min-width: var(--pu-touch);
    min-height: var(--pu-touch);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pu-radius);
}

.pu-modal__close:hover {
    background: var(--pu-gray-100);
}

.pu-modal__body {
    padding: var(--iti-space-lg);
}

.pu-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--iti-space-sm);
    padding: var(--iti-space-md) var(--iti-space-lg);
    border-top: 1px solid var(--iti-border);
}

/* ── Tabs ─────────────────────────────────────────────────────────────── */

.pu-tabs {
    margin-bottom: var(--iti-space-xl);
}

.pu-tabs__list {
    display: flex;
    gap: var(--iti-space-xs);
    border-bottom: 2px solid var(--iti-border);
    list-style: none;
}

.pu-tabs__tab {
    padding: var(--iti-space-sm) var(--iti-space-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--pu-gray-600);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    min-height: var(--pu-touch);
    transition: color var(--iti-duration-fast) var(--iti-ease-standard),
                border-color var(--iti-duration-fast) var(--iti-ease-standard);
}

.pu-tabs__tab:hover {
    color: var(--pu-navy);
}

.pu-tabs__tab[aria-selected="true"] {
    color: var(--pu-navy);
    border-bottom-color: var(--pu-navy);
    font-weight: 600;
}

.pu-tabs__panel {
    padding: var(--iti-space-lg) 0;
}

.pu-tabs__panel[hidden] {
    display: none;
}

/* ── Accordion ───────────────────────────────────────────────────────── */

.pu-accordion {
    border: 1px solid var(--iti-border);
    border-radius: var(--pu-radius-lg);
    overflow: hidden;
}

.pu-accordion__item {
    border-bottom: 1px solid var(--iti-border);
}

.pu-accordion__item:last-child {
    border-bottom: none;
}

.pu-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--iti-space-md) var(--iti-space-lg);
    font-family: var(--pu-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--pu-ink);
    background: var(--iti-surface);
    border: none;
    cursor: pointer;
    text-align: left;
    min-height: var(--pu-touch);
    transition: background var(--iti-duration-fast) var(--iti-ease-standard);
}

.pu-accordion__trigger:hover {
    background: var(--iti-surface-2);
}

.pu-accordion__trigger[aria-expanded="true"] {
    background: var(--iti-surface-2);
}

.pu-accordion__chevron {
    width: 20px;
    height: 20px;
    transition: transform var(--iti-duration-fast) var(--iti-ease-standard);
    flex-shrink: 0;
}

.pu-accordion__trigger[aria-expanded="true"] .pu-accordion__chevron {
    transform: rotate(180deg);
}

.pu-accordion__panel {
    padding: 0 var(--iti-space-lg) var(--iti-space-md);
    display: none;
}

.pu-accordion__panel[aria-hidden="false"] {
    display: block;
}

/* ── Form Inputs ─────────────────────────────────────────────────────── */

.pu-input,
.pu-select,
.pu-textarea {
    width: 100%;
    padding: var(--iti-space-sm) var(--iti-space-md);
    font-family: var(--pu-font-body);
    font-size: 1rem;
    color: var(--pu-ink);
    background: var(--iti-surface);
    border: 2px solid var(--iti-border);
    border-radius: var(--pu-radius);
    min-height: var(--pu-touch);
    outline: none;
    transition: border-color var(--iti-duration-fast) var(--iti-ease-standard);
}

.pu-input:focus,
.pu-select:focus,
.pu-textarea:focus {
    border-color: var(--pu-navy);
    box-shadow: var(--iti-shadow-focus);
}

.pu-textarea {
    min-height: 120px;
    resize: vertical;
}

.pu-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--iti-space-xs);
    color: var(--pu-ink);
}

.pu-form-group {
    margin-bottom: var(--iti-space-md);
}

.pu-form-hint {
    font-size: 0.75rem;
    color: var(--pu-gray-600);
    margin-top: var(--iti-space-xs);
}

.pu-form-error {
    font-size: 0.75rem;
    color: var(--pu-red);
    margin-top: var(--iti-space-xs);
}

/* ── Category Hero Banner ────────────────────────────────────────────── */

.pu-category-hero {
    position: relative;
    border-radius: var(--pu-radius-lg);
    overflow: hidden;
    margin-bottom: var(--iti-space-sm);
    aspect-ratio: 4 / 1;
    max-height: 160px;
    background: var(--pu-navy-light);
}

.pu-category-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pu-category-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 36, 71, 0.7) 0%, transparent 60%);
    display: flex;
    align-items: flex-end;
    padding: var(--iti-space-lg);
}

.pu-category-hero__title {
    color: #fff;
    font-size: 1.75rem;
    margin: 0;
}

/* ── State Selector (Voting Guide) ───────────────────────────────────── */

.pu-state-selector {
    display: flex;
    gap: var(--iti-space-sm);
    align-items: center;
    flex-wrap: wrap;
}

.pu-state-selector__select {
    min-width: 200px;
}

/* ── Utility ─────────────────────────────────────────────────────────── */

.pu-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Hero Band (Breadcrumb Wrapper) ─────────────────────────────────── */

.pu-hero-band {
    background: var(--pu-navy);
    color: #fff;
    padding: var(--iti-space-lg) 0 var(--iti-space-md);
    margin-bottom: var(--iti-space-lg);
}

.pu-hero-band__inner {
    max-width: var(--iti-content-width, 1200px);
    margin: 0 auto;
    padding: 0 var(--iti-space-md);
}

.pu-hero-band__title {
    display: block;
    font-size: 1.375rem;
    font-weight: 600;
    margin-bottom: var(--iti-space-sm);
}

.pu-hero-band .pu-breadcrumb__link {
    color: rgba(255, 255, 255, 0.7);
}

.pu-hero-band .pu-breadcrumb__link:hover {
    color: #fff;
}

.pu-hero-band .pu-breadcrumb__current {
    color: #fff;
}

.pu-hero-band .pu-breadcrumb__sep {
    color: rgba(255, 255, 255, 0.4);
}

/* ── Header Bar ─────────────────────────────────────────────────────── */

.pu-header-bar {
    background: var(--pu-navy-dark);
    font-size: 0.75rem;
}

.pu-header-bar__inner {
    max-width: var(--iti-content-width, 1200px);
    margin: 0 auto;
    padding: var(--iti-space-xs) var(--iti-space-md);
}

.pu-header-bar__list {
    list-style: none;
    display: flex;
    gap: var(--iti-space-md);
    justify-content: flex-end;
}

.pu-header-bar__list a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.pu-header-bar__list a:hover {
    color: #fff;
}

.pu-header-bar__list .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: contents;
}

/* ── Alert Bar ──────────────────────────────────────────────────────── */

.pu-alert-bar {
    background: var(--pu-red);
    color: #fff;
    font-size: 0.875rem;
}

.pu-alert-bar__inner {
    max-width: var(--iti-content-width, 1200px);
    margin: 0 auto;
    padding: var(--iti-space-sm) var(--iti-space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--iti-space-md);
}

.pu-alert-bar__dismiss {
    appearance: none;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: var(--iti-space-xs);
    flex-shrink: 0;
    opacity: 0.8;
    min-width: var(--pu-touch);
    min-height: var(--pu-touch);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pu-alert-bar__dismiss:hover {
    opacity: 1;
}

/* ── Share Bar ──────────────────────────────────────────────────────── */

.pu-share-bar {
    display: flex;
    align-items: center;
    gap: var(--iti-space-sm);
    flex-wrap: wrap;
    padding: var(--iti-space-md) 0;
    margin-top: var(--iti-space-lg);
    border-top: 1px solid var(--iti-border);
}

.pu-share-bar__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pu-gray-600);
}

.pu-share-bar__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--iti-space-xs);
    padding: var(--iti-space-xs) var(--iti-space-sm);
    font-size: 0.8125rem;
    color: var(--pu-gray-600);
    background: none;
    border: 1px solid var(--iti-border);
    border-radius: var(--pu-radius);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--iti-duration-fast) var(--iti-ease-standard),
                color var(--iti-duration-fast) var(--iti-ease-standard);
    min-height: 32px;
    font-family: var(--pu-font-body);
}

.pu-share-bar__btn:hover {
    background: var(--pu-navy-light);
    color: var(--pu-navy);
}

/* ── Related Articles ───────────────────────────────────────────────── */

.pu-related {
    margin-top: var(--iti-space-2xl);
    padding-top: var(--iti-space-lg);
    border-top: 1px solid var(--iti-border);
}

.pu-related__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--iti-space-md);
}

/* ── Author Box ─────────────────────────────────────────────────────── */

/* Stacked and centred by default; side-by-side once there is room. Base state
   inverted from `@media (max-width: 599px)` (spec §4.1). */
.pu-author-box {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: var(--iti-space-md);
    padding: var(--iti-space-lg);
    margin-top: var(--iti-space-lg);
    background: var(--iti-surface-2, var(--pu-gray-50));
    border: 1px solid var(--iti-border);
    border-radius: var(--pu-radius-lg);
}

.pu-author-box__avatar img {
    border-radius: 50%;
    width: 80px;
    height: 80px;
}

.pu-author-box__name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--iti-space-xs);
}

.pu-author-box__bio {
    font-size: 0.875rem;
    color: var(--pu-gray-600);
    line-height: 1.5;
    margin: 0;
}

/* 599.02px, not 600: `max-width: 599px` INCLUDES 599, so its complement starts
   just above it. Every value is restored explicitly — the base now carries the
   stacked state, so "unset" has to be said rather than left to cascade. */
@media (min-width: 599.02px) {
    .pu-author-box {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
    }
}

/* ── List Layout ────────────────────────────────────────────────────── */

.pu-archive-list--list {
    display: flex;
    flex-direction: column;
    gap: var(--iti-space-sm);
}

.pu-list-item {
    border-bottom: 1px solid var(--iti-border);
}

.pu-list-item:last-child {
    border-bottom: none;
}

.pu-list-item__link {
    display: block;
    padding: var(--iti-space-md) 0;
    text-decoration: none;
    color: inherit;
}

.pu-list-item__link:hover .pu-list-item__title {
    color: var(--pu-navy);
}

.pu-list-item__title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--iti-space-xs);
    transition: color var(--iti-duration-fast) var(--iti-ease-standard);
}

.pu-list-item__excerpt {
    font-size: 0.875rem;
    color: var(--pu-gray-600);
    line-height: 1.5;
    margin: 0 0 var(--iti-space-xs);
}

.pu-list-item__meta {
    display: flex;
    gap: var(--iti-space-md);
    font-size: 0.75rem;
    color: var(--pu-gray-600);
}

/* ── Compact Layout ─────────────────────────────────────────────────── */

.pu-archive-list--compact {
    display: flex;
    flex-direction: column;
}

.pu-compact-item__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--iti-space-sm) 0;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--iti-border);
}

.pu-compact-item:last-child .pu-compact-item__link {
    border-bottom: none;
}

.pu-compact-item__link:hover .pu-compact-item__title {
    color: var(--pu-navy);
}

.pu-compact-item__title {
    font-size: 0.875rem;
    font-weight: 500;
    transition: color var(--iti-duration-fast) var(--iti-ease-standard);
}

.pu-compact-item__date {
    font-size: 0.75rem;
    color: var(--pu-gray-600);
    flex-shrink: 0;
}

/* ── Search Results Table ───────────────────────────────────────────── */

.pu-search-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--iti-space-sm);
    margin-bottom: var(--iti-space-lg);
    padding-bottom: var(--iti-space-sm);
    border-bottom: 1px solid var(--iti-border);
}

.pu-search-controls__count {
    font-size: 0.875rem;
    color: var(--pu-gray-600);
    margin: 0;
}

.pu-search-controls__sort {
    display: flex;
    align-items: center;
    gap: var(--iti-space-xs);
    flex-wrap: wrap;
}

.pu-search-controls__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pu-gray-600);
}

.pu-search-controls__sort-link {
    font-size: 0.8125rem;
    padding: 4px 10px;
    border-radius: var(--pu-radius-sm, 4px);
    text-decoration: none;
    color: var(--pu-gray-600);
    transition: background var(--iti-duration-fast) var(--iti-ease-standard),
                color var(--iti-duration-fast) var(--iti-ease-standard);
}

.pu-search-controls__sort-link:hover {
    background: var(--pu-gray-100, #f5f5f5);
    color: var(--pu-navy);
}

.pu-search-controls__sort-link.is-active {
    background: var(--pu-navy);
    color: #fff;
    font-weight: 600;
}

.pu-search-results-table {
    width: 100%;
    border: 1px solid var(--iti-border);
    border-radius: var(--pu-radius-md, 8px);
    overflow: hidden;
}

.pu-search-results-table__header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 3fr;
    gap: var(--iti-space-sm);
    padding: var(--iti-space-sm) var(--iti-space-md);
    background: var(--pu-gray-100, #f5f5f5);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--pu-gray-600);
    border-bottom: 1px solid var(--iti-border);
}

.pu-search-results-table__row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 3fr;
    gap: var(--iti-space-sm);
    padding: var(--iti-space-md);
    border-bottom: 1px solid var(--iti-border);
    align-items: start;
    transition: background var(--iti-duration-fast) var(--iti-ease-standard);
}

.pu-search-results-table__row:last-child {
    border-bottom: none;
}

.pu-search-results-table__row:hover {
    background: var(--pu-gray-50, #fafafa);
}

.pu-search-results-table__title-link {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--pu-ink);
    text-decoration: none;
    transition: color var(--iti-duration-fast) var(--iti-ease-standard);
}

.pu-search-results-table__title-link:hover {
    color: var(--pu-navy);
}

.pu-search-results-table__col--category .pu-badge--sm {
    font-size: 0.6875rem;
    padding: 2px 8px;
}

.pu-search-results-table__col--date {
    font-size: 0.8125rem;
    color: var(--pu-gray-600);
}

.pu-search-results-table__excerpt-text {
    font-size: 0.8125rem;
    color: var(--pu-gray-600);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 767px) {
    .pu-search-results-table__header {
        display: none;
    }

    .pu-search-results-table__row {
        display: flex;
        flex-direction: column;
        gap: var(--iti-space-xs);
        padding: var(--iti-space-md);
    }

    .pu-search-results-table__col::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        font-size: 0.6875rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--pu-gray-500);
    }

    .pu-search-results-table__col--title::before {
        content: none;
    }

    .pu-search-results-table__col--title {
        font-size: 1rem;
    }

    .pu-search-controls {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .pu-search-results-table__header,
    .pu-search-results-table__row {
        grid-template-columns: 2fr 1fr 1fr 2fr;
    }
}

/* ── Scroll-to-Top Button ───────────────────────────────────────────── */

.pu-scroll-top {
    position: fixed;
    bottom: var(--iti-space-lg);
    right: var(--iti-space-lg);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pu-navy);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--pu-shadow);
    z-index: 1000;
    transition: opacity var(--iti-duration-fast) var(--iti-ease-standard),
                background var(--iti-duration-fast) var(--iti-ease-standard);
}

.pu-scroll-top:hover {
    background: var(--pu-navy-dark);
}

.pu-scroll-top:focus-visible {
    outline: 3px solid var(--pu-navy);
    outline-offset: 2px;
}

.pu-scroll-top__icon {
    width: 20px;
    height: 20px;
}

.pu-scroll-top[hidden] {
    display: none;
}

/* ── Footer Multi-Column ────────────────────────────────────────────── */

.pu-footer__widgets {
    display: grid;
    gap: var(--iti-space-lg);
    margin-bottom: var(--iti-space-xl);
}

.pu-footer__widgets--1col { grid-template-columns: 1fr; }
.pu-footer__widgets--2col { grid-template-columns: repeat(2, 1fr); }
.pu-footer__widgets--3col { grid-template-columns: repeat(3, 1fr); }
.pu-footer__widgets--4col { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 767px) {
    .pu-footer__widgets--2col,
    .pu-footer__widgets--3col,
    .pu-footer__widgets--4col {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .pu-footer__widgets--3col,
    .pu-footer__widgets--4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

.pu-footer__nav-row {
    display: flex;
    gap: var(--iti-space-xl);
    flex-wrap: wrap;
    margin-bottom: var(--iti-space-md);
}

/* ── Content Area Sidebar Variants ──────────────────────────────────── */

.pu-content-area--sidebar-left {
    flex-direction: row-reverse;
}

.pu-content-area--sidebar-left .pu-sidebar {
    order: -1;
}

.pu-content-area--full-width .pu-content-area__main {
    max-width: 100%;
    flex: 1;
}

/* ── Landing Page Variants ──────────────────────────────────────────── */

.pu-body--landing .pu-header--landing {
    text-align: center;
}

.pu-body--landing .pu-header--landing .pu-header__inner {
    justify-content: center;
}

.pu-footer--landing {
    text-align: center;
    padding: var(--iti-space-lg) 0;
}

/* ── Utility ─────────────────────────────────────────────────────────── */

.pu-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pu-text-center { text-align: center; }
.pu-text-muted { color: var(--pu-gray-600); }
.pu-mb-0 { margin-bottom: 0; }
.pu-mt-lg { margin-top: var(--iti-space-lg); }

/* ── Premium Search page (page-search.php) ────────────────────────────────
   Relevanssi-powered /search/ experience. Isolated from the table-layout
   core search (search.php) — this is a landing-style search over the KB. */

.pu-premium-search {
    max-width: 820px;
    margin-inline: auto;
}

.pu-premium-search__hero {
    text-align: center;
    padding: var(--iti-space-xl) 0 var(--iti-space-lg);
}

.pu-premium-search__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--pu-navy);
    margin: 0 0 var(--iti-space-sm);
}

.pu-premium-search__subtitle {
    color: var(--pu-gray-600);
    font-size: 1.05rem;
    max-width: 60ch;
    margin: 0 auto var(--iti-space-lg);
}

/* Stacked by default; a row once there is room. Base state inverted from
   `@media (max-width: 640px)` (spec §4.1). */
.pu-premium-search__form {
    display: flex;
    flex-direction: column;
    gap: var(--iti-space-sm);
    align-items: center;
    /* Width overridable per-request via ?width=<px> (page-search.php sets
       --pu-search-width inline, clamped 240–1200); default 640px. */
    max-width: var(--pu-search-width, 640px);
    margin-inline: auto;
}

.pu-premium-search__input {
    flex: 1;
    width: 100%;
    padding: var(--iti-space-sm) var(--iti-space-md);
    font-family: var(--pu-font-body);
    font-size: 1.05rem;
    border: 2px solid var(--iti-border);
    border-radius: var(--pu-radius-pill);
    background: var(--iti-surface);
    color: var(--pu-ink);
    min-height: 64px; /* taller-than-standard search bar (search UI only) */
    outline: none;
    transition: border-color var(--iti-duration-fast) var(--iti-ease-standard);
}

.pu-premium-search__input:focus {
    border-color: var(--pu-navy);
    box-shadow: var(--iti-shadow-focus);
}

.pu-premium-search__submit {
    flex-shrink: 0;
    /* Full width while stacked; the >=640.02px enhancement returns it to
       auto. The INPUT needs no such move — it already carries width:100% at
       base, so the old max-width rule was redundant for it. */
    width: 100%;
    min-height: 64px; /* match the taller input */
    padding: 0 var(--iti-space-lg);
    font-weight: 600;
    color: #fff;
    background: var(--pu-navy);
    border: 0;
    border-radius: var(--pu-radius-pill);
    cursor: pointer;
    transition: background var(--iti-duration-fast) var(--iti-ease-standard);
}

.pu-premium-search__submit:hover { background: var(--pu-navy-dark); }

.pu-premium-search__tip {
    margin: var(--iti-space-sm) auto 0;
    max-width: 640px;
    font-size: 0.85rem;
    color: var(--pu-gray-500);
}

.pu-premium-search__tip code {
    font-family: var(--pu-font-mono);
    font-size: 0.85em;
    padding: 1px 5px;
    border-radius: var(--pu-radius);
    background: var(--pu-gray-100);
    color: var(--pu-navy);
}

.pu-premium-search__prompt {
    text-align: center;
    color: var(--pu-gray-500);
    padding: var(--iti-space-2xl) 0;
}

.pu-premium-search__didyoumean {
    text-align: center;
    color: var(--pu-gray-600);
    margin: 0 0 var(--iti-space-md);
}

.pu-premium-search__didyoumean a {
    color: var(--pu-navy);
    font-weight: 600;
}

/* Facet pills */
.pu-premium-search__facets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--iti-space-xs);
    justify-content: center;
    padding: var(--iti-space-sm) 0;
    border-bottom: 1px solid var(--iti-border);
}

.pu-premium-search__facet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--pu-radius-pill);
    color: var(--pu-gray-600);
    font-size: 0.95rem;
    text-decoration: none;
    transition: background var(--iti-duration-fast) var(--iti-ease-standard);
}

.pu-premium-search__facet:hover { background: var(--pu-gray-100); }

.pu-premium-search__facet.is-active {
    background: var(--pu-navy);
    color: #fff;
}

.pu-premium-search__facet-count {
    font-size: 0.8rem;
    padding: 1px 8px;
    border-radius: var(--pu-radius-pill);
    background: rgba(0, 0, 0, 0.08);
}

.pu-premium-search__facet.is-active .pu-premium-search__facet-count {
    background: rgba(255, 255, 255, 0.22);
}

/* Result count + sort row */
.pu-premium-search__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--iti-space-sm);
    align-items: baseline;
    justify-content: space-between;
    padding: var(--iti-space-md) 0 var(--iti-space-sm);
}

.pu-premium-search__count { margin: 0; color: var(--pu-gray-600); }

.pu-premium-search__sort {
    display: flex;
    align-items: center;
    gap: var(--iti-space-xs);
    font-size: 0.9rem;
}

.pu-premium-search__sort-label { color: var(--pu-gray-500); }

.pu-premium-search__sort-link {
    color: var(--pu-gray-600);
    text-decoration: none;
    padding: 2px 8px;
    border-radius: var(--pu-radius);
}

.pu-premium-search__sort-link.is-active {
    color: var(--pu-navy);
    font-weight: 600;
    background: var(--pu-gray-100);
}

/* Results list */
.pu-premium-search__results {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pu-premium-search__result {
    padding: var(--iti-space-lg) 0;
    border-bottom: 1px solid var(--iti-border);
}

.pu-premium-search__result-link { text-decoration: none; }

.pu-premium-search__result-title {
    font-size: 1.2rem;
    line-height: 1.35;
    color: var(--pu-navy);
    margin: 0 0 6px;
}

.pu-premium-search__result-link:hover .pu-premium-search__result-title {
    text-decoration: underline;
}

.pu-premium-search__result-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--iti-space-sm);
    margin-bottom: 6px;
}

.pu-premium-search__result-date { color: var(--pu-gray-500); font-size: 0.85rem; }

.pu-premium-search__result-excerpt {
    margin: 0;
    color: var(--pu-gray-600);
    line-height: 1.6;
}

/* Relevanssi highlight token inside results */
.pu-premium-search__result mark,
.pu-premium-search__result-excerpt mark,
.pu-premium-search__result-title mark {
    background: var(--pu-gold-light);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

.pu-badge--faq {
    background: var(--pu-green-light);
    color: var(--pu-green);
}

/* 640.02px, not 640: `max-width: 640px` INCLUDES 640. The input keeps
   `width: 100%` from its own base rule at every width — only the FORM's
   direction and the meta row change here, so nothing needs an explicit width
   reset. */
@media (min-width: 640.02px) {
    .pu-premium-search__form { flex-direction: row; }
    .pu-premium-search__submit { width: auto; }
    /* `baseline`, NOT `center` — that is what the base declares, and an
       inversion restores the original value rather than a plausible one. */
    .pu-premium-search__meta { flex-direction: row; align-items: baseline; }
}

/* ── Relevanssi Live Ajax Search — type-ahead dropdown (SAFE OVERRIDES) ───
   SKIN ONLY. We do NOT dequeue the plugin stylesheet — it stays loaded so it
   keeps HIDING the empty results container and POSITIONING the dropdown. These
   rules override only cosmetic properties, with a `body`-prefixed selector so
   they win over the plugin's single-class rules (which load after the theme CSS).
   Do NOT add `display`, `position`, `top/left`, or visibility here — leave those
   to the plugin, or the empty box regression returns. The dropdown only renders
   on forms we opt in with data-rlvlive (see relevanssi_live_search_hijack filter). */

body .relevanssi-live-search-results {
    box-sizing: border-box;
    max-height: min(60vh, 460px);
    overflow-y: auto;
    padding: 6px;
    background: var(--iti-surface);
    border: 1px solid var(--iti-border);
    border-radius: var(--pu-radius-lg);
    box-shadow: var(--pu-shadow-lg);
    font-family: var(--pu-font-body);
}

body .relevanssi-live-search-result-status {
    padding: 6px 12px 8px;
    margin: 0;
    border-bottom: 1px solid var(--iti-border);
}

body .relevanssi-live-search-result-status p {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--pu-gray-500);
}

body .relevanssi-live-search-result {
    border-radius: var(--pu-radius);
    transition: background var(--iti-duration-fast) var(--iti-ease-standard);
}

body .relevanssi-live-search-result p { margin: 0; }

body .relevanssi-live-search-result a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--iti-space-sm);
    padding: 10px 12px;
    color: var(--pu-navy);
    font-size: 0.95rem;
    line-height: 1.35;
    text-decoration: none;
}

body .relevanssi-live-search-result:hover,
body .relevanssi-live-search-result[aria-selected="true"] {
    background: var(--pu-gray-100);
}

body .relevanssi-live-search-result:hover a,
body .relevanssi-live-search-result[aria-selected="true"] a {
    color: var(--pu-navy-dark);
}

body .relevanssi-live-search-result mark {
    background: var(--pu-gold-light);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

body .relevanssi-live-search-no-results,
body .relevanssi-live-search-didyoumean {
    margin: 0;
    padding: 12px;
    font-size: 0.9rem;
    color: var(--pu-gray-600);
}

body .relevanssi-live-search-didyoumean a {
    color: var(--pu-navy);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════
   KB Category Navigation (.pu-catnav) — PU_Category_List_Widget
   ══════════════════════════════════════════════════════════════════════════

   Structural rules only: the disclosure mechanics, indentation and hit areas.
   Colour and type on the House Style homepage are set in the child theme's
   chassis.css under `.hs`, per the Surface A / Surface B boundary in DESIGN.md.
   Nothing here names a House Style token.

   The tree is <details>/<summary> with no JavaScript, so everything below has
   to survive scripting being off. The one thing it cannot do without CSS is
   suppress the browser's default triangle, which needs two rules because Safari
   draws its own via a shadow pseudo-element that `list-style` does not reach.
   ────────────────────────────────────────────────────────────────────────── */

.pu-catnav {
    font-size: 0.9375rem;
    line-height: 1.4;
}

.pu-catnav summary {
    list-style: none;
    cursor: pointer;
}

.pu-catnav summary::-webkit-details-marker {
    display: none;
}

.pu-catnav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── The mobile shell ──────────────────────────────────────────────────────
   One toggle over the whole tree on small screens. It ships `open`, and the
   desktop rule below hides the control and forces the list visible.

   `content-visibility` is not optional here. A closed <details> hides its other
   children through the UA shadow slot, which `display` on the child does NOT
   override in Chromium or WebKit; without the second declaration a reader who
   collapsed the tree on a phone and then widened the window would find the list
   gone on desktop with no visible way back. */

.pu-catnav__toggle {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.6em 0;
    font-weight: 600;
}

.pu-catnav__toggle::before {
    content: "";
    flex: none;
    width: 1.1em;
    height: 2px;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
    background: currentColor;
}

@media (min-width: 768px) {
    .pu-catnav__shell > .pu-catnav__toggle {
        display: none;
    }

    .pu-catnav__shell > .pu-catnav__list {
        display: block;
        content-visibility: visible;
    }
}

/* ── Rows ─────────────────────────────────────────────────────────────────
   Summary and leaf link are the same shape so a Section with children and one
   without read as members of one list rather than two kinds of thing. */

.pu-catnav__summary,
.pu-catnav__link {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    padding: 0.42em 0;
    color: inherit;
    text-decoration: none;
}

.pu-catnav__label {
    flex: 1 1 auto;
    /* Grid and flex items refuse to shrink below their content's min-content
       width without this, which is how a long category name pushes a 300px
       sidebar into horizontal overflow. Same rule as .prose in DESIGN.md. */
    min-width: 0;
}

.pu-catnav__count {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    opacity: 0.62;
}

.pu-catnav__icon {
    flex: none;
    width: 1.1em;
    height: 1.1em;
}

/* The disclosure marker, drawn rather than typed: a character would inherit the
   display face, and in Bodoni a caret is another hairline (see the opsz note in
   chassis.css). A rotated border is weight-independent. */
.pu-catnav__summary::after {
    content: "";
    flex: none;
    align-self: center;
    width: 0.42em;
    height: 0.42em;
    margin-left: 0.15em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-0.06em, -0.06em);
    opacity: 0.55;
    transition: transform 0.16s ease;
}

.pu-catnav__group[open] > .pu-catnav__summary::after {
    transform: rotate(-135deg) translate(-0.06em, -0.06em);
}

@media (prefers-reduced-motion: reduce) {
    .pu-catnav__summary::after {
        transition: none;
    }
}

/* ── Nesting ──────────────────────────────────────────────────────────────
   A rule rather than pure indentation: at three levels, indentation alone stops
   telling you which parent a row belongs to once the parent has scrolled off. */

.pu-catnav__list--2,
.pu-catnav__list--3,
.pu-catnav__list--4 {
    margin-left: 0.55em;
    padding-left: 0.7em;
    border-left: 1px solid currentColor;
    border-left-color: color-mix(in srgb, currentColor 22%, transparent);
}

.pu-catnav__list--2 .pu-catnav__summary,
.pu-catnav__list--2 .pu-catnav__link,
.pu-catnav__list--3 .pu-catnav__summary,
.pu-catnav__list--3 .pu-catnav__link {
    font-size: 0.9375em;
    padding: 0.34em 0;
}

.pu-catnav__all {
    display: inline-block;
    margin: 0.1em 0 0.5em 1.25em;
    font-size: 0.8125rem;
    text-decoration: none;
    opacity: 0.75;
}

.pu-catnav__all:hover,
.pu-catnav__all:focus-visible {
    opacity: 1;
    text-decoration: underline;
}

.pu-catnav__link:hover .pu-catnav__label,
.pu-catnav__link:focus-visible .pu-catnav__label,
.pu-catnav__summary:hover .pu-catnav__label {
    text-decoration: underline;
    text-underline-offset: 0.14em;
}

.pu-catnav__item.is-current > .pu-catnav__link,
.pu-catnav__item.is-current > .pu-catnav__group > .pu-catnav__summary {
    font-weight: 700;
}

/* Surface A colours. The House Style skin overrides these under `.hs`. */
.pu-catnav {
    color: var(--pu-ink);
}

.pu-catnav__all,
.pu-catnav__link:hover .pu-catnav__label {
    color: var(--pu-navy);
}