/* Elastic Search Plus — Frontend Styles v1.6.0
 * Design: elite card layout with left icon, badge, verification mark
 * Brand color: #7b1113 (Cosmos Club maroon)
 * Fonts: Sorts Mill Goudy (titles), Quattrocento (body), Quattrocento Sans (UI)
 *
 * v1.6.0 UI-consistency refresh (2026-08-07):
 *  - Type scale tokens (--esp-fs-*) so Pages/Files/SSR views share one hierarchy
 *  - 44px minimum touch targets (input, tabs, sort, pagination, clear)
 *  - Design-system focus rings (:focus-visible) on every interactive element
 *  - Active-tab count contrast fix (was white-on-white)
 *  - Neve link-underline guards on card anchors
 *  - Result summary line (.esp-results-summary)
 *  - Muted-text contrast raised to #6A5E57 / verified green to #2e523b
 *  - SSR fallback styles consolidated here (removed from ada-typography.css)
 *  - prefers-reduced-motion support
 */

/* ── Type + color tokens ──────────────────────────────────────────────── */

.esp-search-container,
.esp-ssr-results {
    --esp-fs-title: 19px;      /* result titles (Sorts Mill Goudy) */
    --esp-fs-body: 15px;       /* excerpts (Quattrocento) */
    --esp-fs-ui: 14px;         /* controls, counts (Quattrocento Sans) */
    --esp-fs-meta: 13px;       /* metadata lines */
    --esp-fs-label: 11px;      /* uppercase micro-labels */
    --esp-ink: #2c2218;
    --esp-muted: #6A5E57;
    --esp-maroon: #7b1113;
    --esp-maroon-dark: #5a0c0e;
    --esp-border: #E8E2DC;
    --esp-border-soft: #f0ede8;
    --esp-verified: #2e523b;
}

/* Screen-reader-only utility (used by the form label) */
.esp-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ── Container ─────────────────────────────────────────────────────────── */

.esp-search-container {
    max-width: 740px;
    margin: 0 auto;
    padding: 0;
}

/* ── Search input ──────────────────────────────────────────────────────── */

/* Space between the field and the results navigation. Tight on a phone, where
   vertical room is the scarce resource and the tabs should be reachable
   without a scroll, then allowed to breathe as the viewport grows. */
.esp-search-form {
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .esp-search-form { margin-bottom: 20px; }
}

@media (min-width: 1024px) {
    .esp-search-form { margin-bottom: 28px; }
}

.esp-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.esp-search-container .esp-search-input {
    width: 100% !important;
    /* One trailing control slot (56px): magnifier OR clear X, never both. */
    padding: 12px 56px 12px 20px !important;
    border: 1px solid #d9d4cd !important;
    border-radius: 24px !important;
    font-size: 16px;
    font-family: 'Quattrocento Sans', sans-serif;
    color: var(--esp-ink);
    background: #fff;
    box-sizing: border-box !important;
    height: 48px;
    transition: border-color .2s, box-shadow .2s;
}

.esp-search-container .esp-search-input::placeholder {
    color: var(--esp-muted);
    opacity: 1;
}

.esp-search-container .esp-search-input:focus,
.esp-search-container .esp-search-input:focus-visible {
    outline: none;
    border-color: var(--esp-maroon) !important;
    box-shadow: 0 0 0 3px rgba(123, 17, 19, .25);
}

/* ── Search / clear: ONE trailing slot, ONE icon at a time ──────────────
   2026-08-21 final pattern (Yoni): the magnifier and the X are NEVER shown
   together. Both buttons occupy the same trailing slot; the wrap class
   esp-confirmed decides which one is visible:
     - no esp-confirmed (default, and the moment the text changes): the
       maroon magnifier — a real submit. Click = search, Enter = search.
     - esp-confirmed (set ONLY by an explicit confirm — Enter, magnifier
       click, or an SSR arrival — never by the live-as-you-type render):
       the grey X, which clears ONLY on an explicit click (or Esc).
   Because the swap needs an explicit confirm, the button under the user's
   finger right after typing is always "search" — the original tap-X-wipes-
   my-results bug cannot recur.

     rest    #2c2218 glyph on a transparent ground
     hover   #7b1113   focus  #7b1113 + inset ring   active  #5a0c0e

   The ground never fills: Neve paints button:hover maroon site-wide, so every
   state repeats `background: transparent !important` to hold the glyph on the
   field's own white. */
.esp-search-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    font-size: 0;
    cursor: pointer;
    z-index: 2;
    background: transparent !important;
    color: var(--esp-ink);
    transition: color .15s;
}

/* Must out-specify dist/css/a11y-enhancements.css, which sets
   `position: relative` on this same selector to hang a touch-target ::before
   off it. That rule has equal specificity and is enqueued after this
   stylesheet, so at plain `.esp-search-toggle` it won: the control fell back
   into the wrap's flex flow and rendered as a loose icon BESIDE the pill,
   with the field shortened by the button's width. Absolute positioning
   establishes the same containing block the ::before needs, so nothing is
   lost by winning here. */
.esp-search-container .esp-input-wrap .esp-search-toggle {
    position: absolute;
}

.esp-search-toggle svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
}

/* 2026-08-21: the maroon control is ALWAYS a search button — no icon swap.
   (The old X mode made mobile users wipe their results when tapping it as
   "go".) Clearing moved to the dedicated .esp-clear-btn below. The
   esp-has-results wrap class remains as a state marker only. */
.esp-search-toggle .cc-si-search { display: block; }
.esp-search-toggle .cc-si-close  { display: none; }
.esp-has-results .esp-search-toggle .cc-si-search { display: block; }
.esp-has-results .esp-search-toggle .cc-si-close  { display: none; }

/* ── Dedicated clear control ─────────────────────────────────────────────
   The grey X. Shares the SAME trailing slot as the magnifier; the wrap
   class esp-confirmed swaps which of the two is displayed (see the pattern
   comment above). Clears ONLY on an explicit click; the search button and
   Enter never clear. Same absolute-positioning guard as the toggle
   (a11y-enhancements.css sets position: relative at equal specificity, see
   the toggle comment above). */
.esp-clear-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 0;
    font-size: 0;
    cursor: pointer;
    z-index: 2;
    background: transparent !important;
    color: var(--esp-muted);
    transition: color .15s;
}
.esp-search-container .esp-input-wrap .esp-clear-btn { position: absolute; }
/* The one-icon-at-a-time swap. */
.esp-input-wrap.esp-confirmed .esp-clear-btn { display: flex; }
.esp-input-wrap.esp-confirmed .esp-search-toggle { display: none; }
.esp-clear-btn svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
}
.esp-clear-btn:hover,
.esp-clear-btn:focus,
.esp-clear-btn:focus-visible {
    background: transparent !important;
    color: var(--esp-maroon);
}
.esp-clear-btn:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px rgba(123, 17, 19, .35);
}

.esp-search-toggle:hover,
.esp-search-toggle:focus,
.esp-search-toggle:focus-visible {
    background: transparent !important;
    color: var(--esp-maroon);
}

.esp-search-toggle:active {
    background: transparent !important;
    color: var(--esp-maroon-dark);
}

.esp-search-toggle:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px rgba(123, 17, 19, .35);
}

/* ── Loading state ─────────────────────────────────────────────────────── */

.esp-search-loading {
    text-align: center;
    padding: 48px 20px;
    color: var(--esp-muted);
    font-size: 14px;
    font-family: 'Quattrocento Sans', sans-serif;
}

.esp-loading-spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid #f0ede8;
    border-top-color: #7b1113;
    border-radius: 50%;
    animation: esp-spin .7s linear infinite;
    margin-bottom: 12px;
}

@keyframes esp-spin {
    to { transform: rotate(360deg); }
}

/* ── Tab bar ───────────────────────────────────────────────────────────── */

.esp-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #f0ede8;
    margin-bottom: 0;
}

.esp-tab {
    min-height: 44px;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 700;
    color: var(--esp-muted);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Quattrocento Sans', sans-serif;
}

.esp-tab:hover {
    color: #fff !important;
    background: #7b1113;
    border-radius: 4px 4px 0 0;
}

.esp-tab:hover .esp-tab-count {
    color: #fff !important;
}

.esp-tab:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px rgba(123, 17, 19, .35);
    border-radius: 4px 4px 0 0;
}

.esp-tab.active {
    color: var(--esp-ink);
    border-bottom-color: #7b1113;
}

.esp-tab.active:hover {
    color: #fff !important;
    background: #7b1113;
}

.esp-tab-count {
    margin-left: 6px;
    font-weight: 400;
    color: var(--esp-muted);
}

/* Active-tab count: the ACTIVE tab is maroon-filled by the child theme
   (style.css ".esp-tab.active { background:#7b1113 }"), so the count must be
   white like the label. The previous maroon here assumed the active tab kept
   the page background and rendered invisible maroon-on-maroon. */
.esp-tab.active .esp-tab-count {
    color: #fff;
    font-weight: 600;
}

/* ── Results header ───────────────────────────────────────────────────── */

.esp-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0 14px;
    border-bottom: 1px solid #f0ede8;
    margin-bottom: 14px;
}

.esp-results-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.esp-results-heading h3 {
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--esp-ink);
    margin: 0;
    line-height: 1.2;
}

.esp-heading-dot {
    width: 6px;
    height: 6px;
    background: #7b1113;
    border-radius: 50%;
    flex-shrink: 0;
}

.esp-sort-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.esp-sort-label {
    font-family: 'Quattrocento Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--esp-muted);
    white-space: nowrap;
}

.esp-sort-select {
    font-family: 'Quattrocento Sans', sans-serif;
    font-size: 14px;
    min-height: 44px;
    padding: 8px 32px 8px 14px;
    border: 1px solid #d9d4cd;
    border-radius: 6px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236A5E57' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center / 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--esp-ink);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.esp-sort-select:hover {
    border-color: #7b1113;
}

.esp-sort-select:focus,
.esp-sort-select:focus-visible {
    outline: none;
    border-color: #7b1113;
    box-shadow: 0 0 0 3px rgba(123, 17, 19, .25);
}

/* ── Result summary line ("19 page results for “concert”") ─────────────── */

.esp-results-summary {
    font-family: 'Quattrocento Sans', sans-serif;
    font-size: var(--esp-fs-ui);
    color: var(--esp-muted);
    margin: 0 0 16px;
}

.esp-results-summary strong {
    color: var(--esp-ink);
    font-weight: 700;
}

/* ── Result count (scoped/paginated view) ──────────────────────────────── */

.esp-result-count {
    font-family: 'Quattrocento Sans', sans-serif;
    font-size: 14px;
    color: var(--esp-muted);
    margin-bottom: 16px;
}

.esp-result-count strong {
    color: var(--esp-ink);
    font-weight: 600;
}

/* ── Tab panel ─────────────────────────────────────────────────────────── */

.esp-tab-panel {
    min-height: 120px;
}

/* ── Results list ──────────────────────────────────────────────────────── */

.esp-results-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Individual result card ────────────────────────────────────────────── */

.esp-card {
    display: block;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .06);
    border: 1px solid #f0ede8;
    padding: 24px;
    text-decoration: none !important;
    color: inherit;
    transition: box-shadow .15s, border-color .15s, transform .15s;
    cursor: pointer;
}

/* Guard against theme/global link styling inside cards */
.esp-card:link,
.esp-card:visited,
.esp-card:hover,
.esp-card:focus,
.esp-card * {
    text-decoration: none !important;
}

.esp-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, .10);
    border-color: #e0dcd6;
    transform: translateY(-1px);
}

.esp-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(123, 17, 19, .35), 0 4px 20px rgba(0, 0, 0, .10);
    border-color: #7b1113;
}

/* Card body: flex row with icon + content */
.esp-card-body {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Left icon square */
.esp-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.esp-card-icon svg {
    width: 22px;
    height: 22px;
}

/* Content area */
.esp-card-content {
    flex: 1;
    min-width: 0;
}

/* Top row: category label + badge */
.esp-card-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 8px;
}

.esp-card-category {
    font-family: 'Quattrocento Sans', sans-serif;
    font-size: var(--esp-fs-label);
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #7b1113;
    white-space: nowrap;
}

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

.esp-card-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-family: 'Quattrocento Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.esp-badge-official {
    background: #2c2218;
    color: #fff;
}

/* Pinned "Best Match" card (curated per-query, see Search.php get_query_pins) */
.esp-badge-pinned {
    background: #7b1113;
    color: #fff;
}

.esp-card-pinned {
    border-color: #7b1113;
    box-shadow: 0 2px 12px rgba(123, 17, 19, .12);
}

.esp-card-pinned:hover {
    border-color: #7b1113;
}

.esp-badge-pdf {
    background: #fce4e4;
    color: #7b1113;
}

.esp-badge-doc,
.esp-badge-docx {
    background: #e4ecfc;
    color: #2c5aa0;
}

.esp-badge-file {
    background: #f0ede8;
    color: #4c4540;
}

/* ── Card title ────────────────────────────────────────────────────────── */

.esp-card-title {
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-size: var(--esp-fs-title);
    font-weight: 400;
    color: var(--esp-ink);
    line-height: 1.35;
    margin: 0 0 6px;
}

.esp-card:hover .esp-card-title,
.esp-card:focus-visible .esp-card-title {
    color: #7b1113;
}

/* ── Card excerpt ──────────────────────────────────────────────────────── */

.esp-card-excerpt {
    font-family: 'Quattrocento', Georgia, serif;
    font-size: var(--esp-fs-body);
    color: #4c4540;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 12px;
}

/* ── Card meta (file info, updated date) ───────────────────────────────── */

.esp-card-meta {
    display: block;
    font-family: 'Quattrocento Sans', sans-serif;
    font-size: var(--esp-fs-meta);
    color: var(--esp-muted);
    margin-bottom: 12px;
}

/* ── Card footer ───────────────────────────────────────────────────────── */

.esp-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid #f5f3f0;
}

/* Verified badge */
.esp-card-verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Quattrocento Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--esp-verified);
}

.esp-card-verified svg {
    color: var(--esp-verified);
}

/* CTA */
.esp-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Quattrocento Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #7b1113;
    letter-spacing: 0.3px;
}

.esp-card-cta svg {
    width: 14px;
    height: 14px;
    transition: transform .15s;
}

.esp-card:hover .esp-card-cta svg {
    transform: translateX(3px);
}

/* ── Highlight marks ───────────────────────────────────────────────────── */

/* Title highlights: maroon underline accent */
.esp-card-title .esp-highlight {
    background: transparent;
    color: #7b1113;
    font-weight: 400;
    text-decoration: underline !important;
    text-decoration-color: rgba(123, 17, 19, .4) !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px !important;
    border-radius: 0;
    padding: 0;
}

/* Excerpt highlights: warm gold background */
.esp-card-excerpt .esp-highlight {
    background: linear-gradient(to bottom, rgba(255, 230, 120, .45), rgba(255, 210, 70, .35));
    border-radius: 2px;
    padding: 1px 3px;
    margin: 0 -1px;
    font-weight: 700;
    color: #1a1a1a;
}

/* Generic fallback highlight */
.esp-highlight {
    background-color: #fff4a3;
    border-radius: 2px;
    font-weight: 600;
    padding: 1px 3px;
}

/* ── See more link ─────────────────────────────────────────────────────── */

.esp-see-more-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 14px 20px;
    background: #fff;
    border-radius: 10px;
    border: 1px dashed #d5d0c9;
    font-family: 'Quattrocento Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #7b1113;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: background .15s, border-color .15s;
    cursor: pointer;
}

.esp-see-more-link:hover {
    background: #faf7f5;
    border-color: #7b1113;
}

.esp-see-more-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(123, 17, 19, .35);
}

.esp-see-more-link svg {
    width: 14px;
    height: 14px;
}

/* ── Back link ─────────────────────────────────────────────────────────── */

.esp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-family: 'Quattrocento Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #7b1113;
    text-decoration: none !important;
    margin-bottom: 8px;
    cursor: pointer;
    transition: color .15s;
}

.esp-back-link:hover {
    color: #5a0c0e;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.esp-back-link:focus-visible {
    outline: 2px solid rgba(123, 17, 19, .55);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── No results ────────────────────────────────────────────────────────── */

.esp-no-results {
    padding: 56px 24px;
    text-align: center;
    color: var(--esp-muted);
    font-size: 15px;
    font-family: 'Quattrocento Sans', sans-serif;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .06);
    border: 1px solid #f0ede8;
}

.esp-no-results--inline {
    box-shadow: none;
    border: none;
    background: none;
    padding: 40px 20px;
}

.esp-no-results-icon {
    display: block;
    margin: 0 auto 16px;
    color: #b5aca4;
}

.esp-no-results-title {
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-size: 20px;
    color: var(--esp-ink);
    margin-bottom: 8px;
}

.esp-no-results-text {
    font-size: 14px;
    color: var(--esp-muted);
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.5;
}

.esp-error {
    padding: 16px 20px;
    background: #fef7f7;
    border-left: 4px solid #d63638;
    color: #b3261e;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Quattrocento Sans', sans-serif;
}

/* ── Pagination ────────────────────────────────────────────────────────── */

.esp-search-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 24px;
    padding: 16px 0;
}

.esp-page-button {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 14px;
    border: 1px solid #d9d4cd;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--esp-ink);
    font-size: 14px;
    font-family: 'Quattrocento Sans', sans-serif;
}

.esp-page-button:hover:not(:disabled) {
    background: #7b1113;
    color: #fff;
    border-color: #7b1113;
}

.esp-page-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(123, 17, 19, .35);
}

.esp-page-button:disabled {
    color: #8a7f76;
    border-color: #e8e2dc;
    background: #faf9f7;
    cursor: not-allowed;
}

.esp-page-button.active {
    background: #7b1113;
    color: #fff;
    border-color: #7b1113;
}

.esp-pagination-dots {
    display: flex;
    align-items: center;
    padding: 0 4px;
    color: var(--esp-muted);
    font-family: 'Quattrocento Sans', sans-serif;
}

/* ── Keyboard hint ─────────────────────────────────────────────────────── */

.esp-hint {
    text-align: center;
    padding: 16px 0 0;
    font-family: 'Quattrocento Sans', sans-serif;
    font-size: 12px;
    color: var(--esp-muted);
}

.esp-hint kbd {
    display: inline-block;
    padding: 1px 6px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-family: 'Quattrocento Sans', sans-serif;
    font-size: 11px;
    color: #4c4540;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .esp-search-container {
        padding: 0 12px;
    }

    .esp-card {
        padding: 18px 16px;
    }

    .esp-card-body {
        flex-direction: column;
        gap: 12px;
    }

    .esp-card-icon {
        width: 40px;
        height: 40px;
    }

    .esp-card-icon svg {
        width: 20px;
        height: 20px;
    }

    .esp-card-title {
        font-size: 17px;
    }

    .esp-card-excerpt {
        font-size: 14px;
    }

    .esp-card-top-row {
        flex-wrap: wrap;
        gap: 6px;
    }

    .esp-results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .esp-sort-wrap {
        width: 100%;
    }

    .esp-sort-select {
        flex: 1;
    }

    .esp-results-list {
        gap: 12px;
    }

    .esp-card-footer {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .esp-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .esp-tab {
        padding: 10px 16px;
        font-size: 12px;
        white-space: nowrap;
    }
}

/* ── Search Loading Overlay (matches Member Directory style) ───────── */
.esp-loading-overlay {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    min-height: 420px;
    background: #141425;
    overflow: hidden;
    border-radius: 12px;
    margin: 20px 0;
}
.esp-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    text-align: center;
}
.esp-loading-logo {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 32px;
}
.esp-loading-rings {
    position: absolute;
    inset: 0;
}
.esp-loading-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(191,163,107,0.2);
}
.esp-loading-ring-1 { inset: 0; animation: espPulseRing 3s ease-in-out infinite; }
.esp-loading-ring-2 { inset: 10px; border-color: rgba(191,163,107,0.3); animation: espPulseRing 3s ease-in-out 0.5s infinite; }
.esp-loading-ring-3 { inset: 20px; border-color: rgba(191,163,107,0.15); animation: espPulseRing 3s ease-in-out 1s infinite; }

@keyframes espPulseRing {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.04); }
}
.esp-loading-letter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-size: 40px;
    color: #bfa36b;
    font-weight: 400;
}
.esp-loading-title {
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-size: 28px;
    font-weight: 400;
    color: #bfa36b;
    letter-spacing: 8px;
    margin: 0 0 8px;
}
.esp-loading-subtitle {
    font-family: 'Quattrocento Sans', sans-serif;
    font-size: 12px;
    color: rgba(191,163,107,0.6);
    letter-spacing: 4px;
    margin: 0 0 40px;
    text-transform: uppercase;
}
.esp-loading-bar-track {
    width: 200px;
    height: 2px;
    background: rgba(191,163,107,0.15);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 20px;
}
.esp-loading-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #bfa36b, #d4b87a);
    border-radius: 2px;
    animation: espBarFill 2.5s ease-in-out infinite;
}
@keyframes espBarFill {
    0% { width: 0%; margin-left: 0%; }
    50% { width: 60%; margin-left: 20%; }
    100% { width: 0%; margin-left: 100%; }
}
.esp-loading-status {
    font-family: 'Quattrocento Sans', sans-serif;
    font-size: 11px;
    color: rgba(191,163,107,0.5);
    letter-spacing: 3px;
    margin: 0;
    text-transform: uppercase;
    animation: espStatusPulse 2s ease-in-out infinite;
}
@keyframes espStatusPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Hide default spinner when overlay is active */
.esp-search-loading { display: none !important; }

/* ============================================================
   SSR fallback styling (pre-JS paint)
   Single source of truth as of v1.6.0 — the duplicate block in
   the theme's ada-typography.css was removed; these rules match
   the previously-winning look so the rendered result is unchanged.
   The deferred search.js replaces .esp-ssr-results with the
   tabbed card UI; on slow networks or if JS fails these keep the
   fallback list on-brand.
   ============================================================ */
.esp-ssr-results {
    display: flex; flex-direction: column; gap: 14px;
    max-width: 860px; margin: 8px auto 24px; padding: 0;
}
.esp-ssr-heading {
    font-family: 'Sorts Mill Goudy', Georgia, serif !important;
    font-size: 22px; font-weight: 400; color: var(--esp-ink);
    margin: 16px 0 8px; padding: 0 0 6px;
    border-bottom: 1px solid #e5dfd2; display: flex; align-items: baseline; gap: 8px;
}
.esp-ssr-count {
    font-family: 'Quattrocento', Georgia, serif;
    font-size: 14px; color: #7b1113; font-weight: 600; letter-spacing: 0.03em;
}
.esp-ssr-list {
    list-style: none !important; margin: 0 !important; padding: 0 !important;
    display: flex; flex-direction: column; gap: 12px;
}
.esp-ssr-item {
    background: #fff; border: 1px solid #f0ede8; border-left: 3px solid #7b1113;
    border-radius: 8px; padding: 16px 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
.esp-ssr-item:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    border-color: #e0dcd6; border-left-color: #7b1113;
    transform: translateY(-1px);
}
.esp-ssr-title {
    display: inline-block;
    font-family: 'Sorts Mill Goudy', Georgia, serif !important;
    font-size: 18px !important; font-weight: 400;
    color: #5a0c0e !important; text-decoration: none;
    line-height: 1.35; margin-bottom: 4px;
    border-bottom: 1px solid transparent;
}
.esp-ssr-title:hover, .esp-ssr-title:focus-visible {
    color: #7b1113 !important; border-bottom-color: #7b1113;
}
.esp-ssr-title:focus-visible {
    outline: 2px solid rgba(123, 17, 19, .55);
    outline-offset: 2px;
    border-radius: 2px;
}
.esp-ssr-excerpt {
    font-family: 'Quattrocento', Georgia, serif !important;
    font-size: 15px !important; color: #2a2a2a;
    line-height: 1.55; margin: 4px 0 0 !important;
}
.esp-ssr-excerpt mark, .esp-ssr-excerpt .esp-highlight {
    background: #fff3cd; color: inherit; padding: 0 2px; border-radius: 2px;
}
.esp-ssr-noresults {
    font-family: 'Quattrocento', Georgia, serif;
    font-size: 16px; color: #4c4540;
    background: #fbf9f5; border: 1px solid #e5dfd2; border-radius: 8px;
    padding: 20px 24px; text-align: center;
}

/* ── Reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .esp-loading-ring-1,
    .esp-loading-ring-2,
    .esp-loading-ring-3,
    .esp-loading-bar-fill,
    .esp-loading-status,
    .esp-loading-spinner {
        animation: none !important;
    }
    .esp-card,
    .esp-card:hover,
    .esp-ssr-item,
    .esp-ssr-item:hover,
    .esp-card-cta svg,
    .esp-card:hover .esp-card-cta svg {
        transition: none !important;
        transform: none !important;
    }
}