/* =========================================================================
   Ellis Liberty — dark theme with Statue of Liberty verdigris palette
   ========================================================================= */

:root {
    /* Dark surfaces */
    --bg:           #0c1518;      /* near-black with teal undertone */
    --surface:      #142025;      /* card/section background */
    --surface-2:    #1a2a30;      /* slightly elevated */
    --surface-3:    #1f323a;      /* hover / table header */

    /* Liberty patina greens */
    --patina:       #4d9d8c;      /* primary green (oxidized copper) */
    --patina-light: #7ac0ad;      /* lighter accent */
    --patina-dim:   #2f6b5e;      /* darker, for muted accents */

    /* Text */
    --text:         #e6e2cf;      /* warm cream */
    --text-dim:     #a7b3b6;      /* muted gray-green */
    --text-faint:   #6f7e82;
    --border:       #25333a;

    /* Status accents */
    --warning:      #d4a847;
    --warning-bg:   #2b2316;

    /* Legacy aliases used by older selectors (keep until templates renamed) */
    --color-cream:      var(--surface);
    --color-navy:       var(--patina-light);
    --color-sepia:      var(--patina);
    --color-light-gray: var(--border);

    --font-serif: Georgia, "Times New Roman", Times, serif;
    --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
                  Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--bg); }
body {
    font-family: var(--font-sans);
    line-height: 1.6;
    color: var(--text);
    background-color: var(--bg);
    margin: 0;
    padding: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

/* ---- Header / nav ---- */
.site-header {
    background-color: var(--surface);
    color: var(--text);
    padding: 14px 0;
    border-bottom: 3px solid var(--patina);
}
.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}
.site-title {
    color: var(--patina-light);
    text-decoration: none;
    font-family: var(--font-serif);
    font-size: 1.6em;
    letter-spacing: 0.01em;
}
nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; }
nav li a {
    color: var(--text);
    text-decoration: none;
    padding: 8px 14px;
    display: block;
    border-radius: 4px;
    transition: background-color 0.15s, color 0.15s;
}
nav li a:hover { background-color: var(--surface-2); color: var(--patina-light); }

/* ---- Typography ---- */
h1, h2, h3, h4 {
    font-family: var(--font-serif);
    color: var(--patina-light);
    margin-top: 1.4em;
    line-height: 1.25;
}
h2 { border-bottom: 2px solid var(--patina-dim); padding-bottom: 6px; }
a { color: var(--patina-light); }
a:hover { color: var(--patina); }

/* ---- Hero ---- */
.hero {
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    padding: 50px 36px 40px;
    border-radius: 6px;
    margin: 20px 0 30px;
    border: 1px solid var(--border);
}
.hero h2 {
    margin-top: 0;
    font-size: 2.4em;
    border-bottom: none;
    color: var(--patina-light);
}
.hero p { color: var(--text-dim); }

/* ---- Search section ---- */
.search-section { margin-bottom: 30px; }
.search-section #search { max-width: 800px; margin: 0 auto; }

/* Pagefind UI overrides */
:root {
    --pagefind-ui-primary:       var(--patina);
    --pagefind-ui-text:          var(--text);
    --pagefind-ui-background:    var(--surface);
    --pagefind-ui-border:        var(--border);
    --pagefind-ui-tag:           var(--surface-3);
    --pagefind-ui-border-radius: 4px;
    --pagefind-ui-font:          var(--font-sans);
}
.pagefind-ui__result-link { color: var(--patina-light) !important; }
.pagefind-ui__search-input { background: var(--surface-2) !important; color: var(--text) !important; }
.pagefind-ui__result-excerpt mark { background: var(--patina); color: #0a1518; padding: 1px 3px; }

/* ---- Cards ---- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.card {
    background-color: var(--surface);
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s, border-color 0.15s;
}
a.card { display: block; text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--patina); transform: translateY(-2px); }
.card h4 { margin-top: 0; color: var(--patina-light); }
.card p { color: var(--text-dim); }
.series-card h4 { font-size: 1.4em; letter-spacing: 0.04em; }
.card-meta { color: var(--text-dim); font-size: 0.9em; margin: 4px 0 8px; }
.series-tag {
    display: inline-block;
    background: var(--patina-dim);
    color: var(--text);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.85em;
    font-family: var(--font-sans);
    letter-spacing: 0.05em;
}

.browse-section, .featured-section { margin-top: 50px; }

/* ---- Interview detail page ---- */
.interview-detail { padding: 20px 0; }

.interview-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.main-name {
    font-size: 2.6em;
    margin-bottom: 12px;
    color: var(--patina-light);
    border-bottom: none;
}
.interview-subhead {
    display: flex; flex-wrap: wrap; gap: 10px;
    align-items: center; justify-content: center;
    margin: 8px 0 4px;
}
.series-badge {
    display: inline-block;
    background-color: var(--patina);
    color: #0a1518;
    padding: 6px 14px;
    border-radius: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 0.9em;
    font-family: var(--font-sans);
}
.meta-chip {
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.9em;
    color: var(--text);
}
.alt-names {
    text-align: center;
    color: var(--text-dim);
    font-style: italic;
    margin-top: 6px;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    margin-top: 30px;
}
.metadata-sidebar {
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.metadata-sidebar h3 {
    margin-top: 0;
    color: var(--patina-light);
    border-bottom: 1px solid var(--patina-dim);
    padding-bottom: 6px;
}

.metadata-list { margin-top: 8px; }
.metadata-list .meta-row { margin: 8px 0; line-height: 1.5; }
.metadata-list .meta-label {
    font-weight: bold;
    color: var(--patina-light);
    display: inline-block;
    min-width: 140px;
    vertical-align: top;
}
.metadata-list .meta-value { color: var(--text); }
@media (max-width: 700px) {
    .metadata-list .meta-label { min-width: 110px; }
}

.audio-section, .transcript-section {
    margin-bottom: 24px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.audio-section h2, .transcript-section h2 {
    margin-top: 0;
    border-bottom: none;
    color: var(--patina-light);
}
audio { width: 100%; margin-bottom: 12px; }
.audio-block { margin-bottom: 16px; }
.audio-label {
    margin: 0 0 4px;
    font-size: 0.9em;
    color: var(--text-dim);
    font-weight: 600;
}
.download-link {
    display: inline-block;
    color: var(--patina-light);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid var(--patina);
}
.download-link:hover { color: var(--patina); border-bottom-color: var(--patina-light); }
.hint, .summary-note {
    font-size: 0.9em;
    color: var(--text-dim);
    font-style: italic;
    margin-top: 12px;
}

/* ---- Summary highlights ---- */
.summary-block {
    margin-top: 40px;
    padding: 24px 28px;
    background: var(--surface);
    border-left: 4px solid var(--patina);
    border-radius: 4px;
}
.summary-block h3 { margin-top: 0; color: var(--patina-light); }
.summary-block p { line-height: 1.75; color: var(--text); }

/* ---- Inline transcript ---- */
.transcript-content {
    margin-top: 50px;
    padding: 30px 36px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--patina);
    border-radius: 6px;
}
.transcript-content h2 {
    margin-top: 0;
    border-bottom: none;
    color: var(--patina-light);
}
.transcript-content .header-block {
    background: var(--surface-2);
    padding: 16px 20px;
    border-left: 4px solid var(--patina-dim);
    margin: 0 0 24px;
    font-family: var(--font-sans);
    font-size: 0.95em;
    color: var(--text-dim);
    border-radius: 0 4px 4px 0;
}
.transcript-content .header-block p { margin: 4px 0; }
.transcript-content .dialogue {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px 16px;
}
.transcript-content .speaker {
    font-weight: bold;
    color: var(--patina-light);
    font-family: var(--font-sans);
    letter-spacing: 0.02em;
}
.transcript-content .line { margin: 0; color: var(--text); }
@media (max-width: 600px) {
    .transcript-content { padding: 20px; }
    .transcript-content .dialogue { grid-template-columns: 1fr; gap: 4px 0; }
    .transcript-content .speaker { margin-top: 12px; }
}

/* ---- Transcript toolbar (per-page search) ---- */
.transcript-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.transcript-toolbar h2 { margin: 0; }
.page-search-label { display: flex; align-items: center; gap: 12px; }
.page-search-label input {
    padding: 8px 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    border-radius: 4px;
    font-size: 0.95em;
    min-width: 220px;
}
.page-search-label input:focus { outline: 2px solid var(--patina); outline-offset: 2px; }
.page-search-status { color: var(--text-dim); font-size: 0.85em; min-width: 80px; }
mark.page-mark { background: var(--patina); color: #0a1518; padding: 1px 3px; border-radius: 2px; }
.visually-hidden {
    position: absolute; left: -9999px;
    width: 1px; height: 1px; overflow: hidden;
}

/* ---- Citation block ---- */
.citation-block {
    margin-top: 40px;
    padding: 20px 24px;
    background: var(--surface);
    border-left: 4px solid var(--patina-light);
    border-radius: 4px;
}
.citation-block h3 { margin-top: 0; color: var(--patina-light); }
.citation-text {
    font-family: Georgia, serif;
    font-size: 0.95em;
    color: var(--text);
    margin: 8px 0 14px;
    line-height: 1.6;
}
.copy-btn {
    background: var(--patina);
    color: #0a1518;
    border: none;
    padding: 8px 18px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    font-family: var(--font-sans);
    font-weight: 600;
}
.copy-btn:hover { background: var(--patina-light); }
.copy-btn:focus { outline: 2px solid var(--patina-light); outline-offset: 2px; }

.citation-example {
    font-family: Georgia, serif;
    background: var(--surface);
    padding: 14px 18px;
    border-left: 3px solid var(--patina);
    color: var(--text-dim);
}

/* ---- Restricted notice ---- */
.restricted-notice {
    background: var(--warning-bg);
    border-left: 4px solid var(--warning);
    padding: 18px 22px;
    margin-bottom: 24px;
    border-radius: 0 4px 4px 0;
}
.restricted-notice h2 {
    margin-top: 0;
    color: var(--warning);
    border-bottom: 2px solid var(--warning);
}
.restricted-notice p { color: var(--text); }

/* ---- Cross-refs ---- */
.cross-refs-block {
    margin-top: 40px;
    padding: 20px 24px;
    background: var(--surface);
    border-left: 4px solid var(--patina-dim);
    border-radius: 4px;
}
.cross-refs-block ul { list-style: none; padding-left: 0; line-height: 2; }
.dead-xref { color: var(--text-faint); font-style: italic; }
.dead-xref .note { color: var(--text-faint); font-size: 0.85em; }

/* ---- Series browse page ---- */
.series-page { padding: 20px 0; }
.series-header .breadcrumb { color: var(--text-dim); font-size: 0.9em; margin-bottom: 8px; }
.series-header h1 { margin: 0; font-size: 2.4em; }
.series-tagline { color: var(--text-dim); font-style: italic; font-size: 1.05em; }
.series-count {
    display: inline-block;
    background: var(--patina);
    color: #0a1518;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.9em;
    font-weight: 600;
}
.series-history {
    background: var(--surface);
    padding: 22px 26px;
    border-left: 4px solid var(--patina);
    margin: 30px 0;
    border-radius: 0 4px 4px 0;
}
.series-history p { margin: 0; line-height: 1.75; color: var(--text); }
.series-listing { margin-top: 40px; }
.series-quicklist { line-height: 1.9; }

.entry-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    font-size: 0.95em;
    background: var(--surface);
    border-radius: 6px;
    overflow: hidden;
}
.entry-table th, .entry-table td {
    text-align: left;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
}
.entry-table th {
    background: var(--surface-3);
    color: var(--patina-light);
    font-family: var(--font-sans);
    font-weight: 600;
    border-bottom: 2px solid var(--patina-dim);
}
.entry-table th.sortable { cursor: pointer; user-select: none; }
.entry-table th.sortable:hover { background: var(--patina-dim); color: var(--text); }
.entry-table .sort-indicator { color: var(--patina-light); margin-left: 4px; font-weight: bold; }
.entry-table tr:hover { background: var(--surface-2); }
.entry-table .col-id { white-space: nowrap; width: 90px; }
.entry-table .col-year { width: 80px; text-align: right; }
.entry-table a { color: var(--patina-light); text-decoration: none; }
.entry-table a:hover { text-decoration: underline; }
@media (max-width: 700px) {
    .entry-table { font-size: 0.85em; }
    .entry-table .col-first, .entry-table .col-country { display: none; }
}

/* ---- Footer ---- */
.site-footer {
    background-color: var(--surface);
    color: var(--text-dim);
    padding: 28px 0;
    text-align: center;
    font-size: 0.9em;
    border-top: 1px solid var(--border);
    margin-top: 60px;
}
.site-footer a { color: var(--patina-light); }
.attribution { margin-top: 8px; font-style: italic; }
.portal-footer { background: transparent; border: none; margin-top: 40px; }

/* ---- 404 ---- */
.not-found { padding: 40px 0; max-width: 700px; }
.not-found h1 { font-size: 2.4em; }

/* ---- Librarian review page ---- */
.review-page { padding: 20px 0; }
.review-page .review-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 24px 28px;
    margin: 30px 0;
}
.review-page .review-section.warning { border-left: 4px solid var(--warning); }
.review-page table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}
.review-page th, .review-page td {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.review-page th { color: var(--patina-light); background: var(--surface-3); font-family: var(--font-sans); }
.review-page .small { font-size: 0.85em; color: var(--text-dim); }

/* ---- Focus / a11y ---- */
a:focus-visible, button:focus-visible, input:focus-visible, audio:focus-visible {
    outline: 2px solid var(--patina);
    outline-offset: 2px;
}

/* ---- Mobile ---- */
@media (max-width: 900px) {
    .content-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .site-header .container { flex-direction: column; text-align: center; gap: 8px; }
    nav ul { flex-direction: row; justify-content: center; }
    .main-name { font-size: 1.9em; }
    .transcript-toolbar { flex-direction: column; align-items: flex-start; }
    .page-search-label input { min-width: 0; width: 100%; }
}

/* Statue of Liberty emoji accent in the site title */
.site-emoji {
    display: inline-block;
    margin-right: 6px;
    transform: translateY(-1px);
    /* Emoji color is fixed; this just keeps it from looking out of place */
    filter: grayscale(0.1) brightness(1.05);
}
.portal-hero .site-emoji {
    font-size: 0.9em;
    margin-right: 10px;
}

/* Compact hero — no heading, just one short paragraph */
.hero.hero-compact {
    padding: 22px 30px;
    margin: 16px 0 24px;
}
.hero.hero-compact p {
    margin: 0;
    line-height: 1.5;
    color: var(--text);
}

/* =============================================================
   Pagefind UI — comprehensive dark-theme overrides
   Pagefind ships Svelte-scoped classes (e.g. .svelte-e9gkc3) that
   raise specificity, so we mirror those selectors here. The CSS
   var overrides above handle most cases; this block covers the
   spots where Pagefind hard-codes color or background through a
   high-specificity selector.
   ============================================================= */
.pagefind-ui { color: var(--text); }

.pagefind-ui__search-input,
.pagefind-ui input.pagefind-ui__search-input {
    background-color: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
}
.pagefind-ui__search-input::placeholder { color: var(--text-faint); opacity: 1; }

.pagefind-ui__search-clear,
.pagefind-ui__button {
    background-color: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
}
.pagefind-ui__button:hover {
    background-color: var(--patina-dim);
    color: var(--text);
    border-color: var(--patina);
}

.pagefind-ui__result,
.pagefind-ui__result-inner,
.pagefind-ui__result-excerpt,
.pagefind-ui__message {
    color: var(--text);
}
.pagefind-ui__result-title .pagefind-ui__result-link,
.pagefind-ui__result-link {
    color: var(--patina-light);
    text-decoration: none;
}
.pagefind-ui__result-link:hover {
    color: var(--patina);
    text-decoration: underline;
}
.pagefind-ui__result-excerpt {
    color: var(--text);
    line-height: 1.5;
}
.pagefind-ui__result-excerpt mark {
    background: var(--patina);
    color: #0a1518;
    padding: 1px 3px;
    border-radius: 2px;
}
.pagefind-ui__result-tag {
    background-color: var(--surface-3);
    color: var(--text);
}
.pagefind-ui__filter-name,
.pagefind-ui__filter-label {
    color: var(--text);
}
.pagefind-ui__filter-block {
    border-color: var(--border);
}
.pagefind-ui__filter-checkbox {
    background-color: var(--surface-2);
    border-color: var(--border);
}
.pagefind-ui__filter-checkbox:checked {
    background-color: var(--patina);
    border-color: var(--patina);
}
/* The little search-icon SVG is a black mask by default; make it visible on dark */
.pagefind-ui__form:before { background-color: var(--text-dim) !important; }