/* ==========================================================================
   German Propaganda Archive — default-new.css
   Variables, then layout, then components, then utilities, then responsive.
   ========================================================================== */

/* --- CSS Variables --- */
:root {
    /* Colors */
    --color-text: #1a1a1a;
    --color-bg: #fdfdfd;
    --color-bg-alt: #f4f4f4;
    --color-border: #ccc;
    --color-border-light: #eee;
    --color-title: #8b0000;
    --color-link: #0056b3;
    --color-muted: #444;
    --color-brown: #795548;
    --color-muted-dark: #333;
    --color-white: #fff;
    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 15px rgba(0, 0, 0, 0.1); /* New for hover effect */

    /* Spacing */
    --space-xs: 10px;
    --space-sm: 15px;
    --space-md: 20px;
    --space-lg: 25px;
    --space-xl: 30px;
    --space-2xl: 40px;
    --radius: 4px;

    /* Typography */
    --font-serif: "Georgia", "Times New Roman", serif;
    --font-sans: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --line-height-body: 1.8;
    --line-height-tight: 1.3;
    --line-height-caption: 1.4;
    --font-size-caption: 0.9rem;
    --font-size-h3: 1.7rem;
    --font-size-h4: 1.3rem;

    /* Layout */
    --max-width: 1000px;
    --breakpoint-mobile: 650px;
}

/* --- 1. Global Reset & Typography --- */
body {
    font-family: var(--font-serif);
    line-height: var(--line-height-body);
    color: var(--color-text);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-md);
    background-color: var(--color-bg);
}

/* Keyboard accessibility: hidden until focused */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 1000;
}

.skip-link:focus,
.skip-link:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    display: inline-block;
    margin-bottom: var(--space-sm);
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
}

/* --- 2. Site Header & Empty Space Fixes --- */
/* Use <header> or .site-header for logos (.clearfix) and <h1>; h1 hidden, main title is <h3> in content */
header h1,
.site-header h1 {
    display: none;
}

body > p:first-of-type:empty,
body > p:has(br):first-child {
    display: none;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Force first two header images into left/right logo positions sitewide */
header .clearfix img:first-of-type,
.site-header .clearfix img:first-of-type {
    float: left;
}

header .clearfix img:nth-of-type(2),
.site-header .clearfix img:nth-of-type(2) {
    float: right;
}

/* --- 3. Dividers & Double-Line Prevention --- */
img.center[src*="line.jpg"] {
    width: 100%;
    height: 2px;
    object-fit: cover;
    margin: var(--space-xs) 0;
    display: block;
}

img.center + main hr:first-child,
img.center + hr {
    display: none;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-sm) 0;
}

/* --- 4. Titles & Subtitles --- */
h3, h4 {
    font-family: var(--font-sans);
    text-align: center;
    color: var(--color-title) !important;
    line-height: var(--line-height-tight);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-xs);
}

h3 {
    font-size: var(--font-size-h3);
    font-weight: bold;
}

h4 {
    font-size: var(--font-size-h4);
    font-weight: normal;
    margin-top: -5px;
}

/* --- 5. Gallery (Updated to Pairs) --- */
.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Set to 2 columns */
    gap: var(--space-xl);
    margin: var(--space-2xl) 0;
    align-items: start;
}

.gallery-item {
    background: var(--color-white);
    padding: var(--space-xs);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover transition */
}

/* Hover effect for gallery boxes */
.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
}

.gallery-item figcaption {
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
    margin-top: 12px;
    color: var(--color-muted);
}

/* --- 6. Editorial Brown (Brackets) --- */
.brown {
    color: var(--color-brown) !important;
    font-weight: bold;
}
/* Custom class for red characters */
.red {
    color: #cc0000;
}

h3.brown, h3 .brown, h4.brown, h4 .brown {
    color: var(--color-muted-dark) !important;
}

blockquote {
    margin: var(--space-xl) 0;
    padding: var(--space-md);
    border: none;
    background-color: var(--color-bg-alt);
    font-style: italic;
    border-radius: var(--radius);
}

/* Keep blockquote text normal on this one long directive page */
.dw-page blockquote {
    font-style: normal;
}

/* FAQ answers should be plain text unless explicitly emphasized */
.faq-page blockquote {
    font-style: normal;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

/* Preserve plain left labels inside dw comparison tables */
.dw-page .plain-label {
    text-align: left !important;
    font-weight: 700 !important;
    font-style: normal !important;
}

/* Override first-row table heading style for these specific labels */
.dw-page .table-scroll tr:first-child td.plain-label-cell {
    text-align: left !important;
    font-weight: 400 !important;
    background: transparent !important;
}

/* Responsive table containers for legacy document tables */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    margin: var(--space-sm) 0;
}

.table-scroll table {
    border-collapse: collapse;
    width: 100%;
    min-width: 760px;
    background: var(--color-white);
}

.table-scroll th,
.table-scroll td {
    border: 1px solid var(--color-border);
    padding: 8px 10px;
    vertical-align: top;
    line-height: 1.4;
}

.table-scroll tr:first-child th,
.table-scroll tr:first-child td {
    background: var(--color-bg-alt);
    font-weight: 700;
    text-align: center;
}

/* Page-specific readability improvements for arier.htm data tables */
.arier-page .table-scroll table {
    width: 100%;
    min-width: 640px;
    background: var(--color-white);
}

.arier-page .table-scroll th,
.arier-page .table-scroll td {
    border: 1px solid var(--color-border);
    padding: 8px 10px;
    vertical-align: top;
    line-height: 1.4;
}

/* Many legacy tables use first-row <td> cells as headers */
.arier-page .table-scroll tr:first-child th,
.arier-page .table-scroll tr:first-child td {
    background: var(--color-bg-alt);
    font-weight: 700;
}

/* Stronger per-column visual separation */
.arier-page .table-scroll tr > th:not(:first-child),
.arier-page .table-scroll tr > td:not(:first-child) {
    border-left: 2px solid #b8b8b8;
}

/* Light column banding helps track values horizontally */
.arier-page .table-scroll tr > th:nth-child(even),
.arier-page .table-scroll tr > td:nth-child(even) {
    background: #f7f7f7;
}

/* Keep row striping subtle so column cues remain visible */
.arier-page .table-scroll tbody tr:nth-child(even) td {
    box-shadow: inset 0 9999px 0 rgba(0, 0, 0, 0.015);
}

/* First column is usually the label column */
.arier-page .table-scroll tr > th:first-child,
.arier-page .table-scroll tr > td:first-child {
    font-weight: 600;
    min-width: 220px;
}

/* Data columns are easier to scan when right-aligned */
.arier-page .table-scroll tr > th:not(:first-child),
.arier-page .table-scroll tr > td:not(:first-child) {
    text-align: right;
    white-space: nowrap;
}

/* Keep the first census table in its original 4-column layout style */
.arier-page .arier-census-table {
    table-layout: fixed;
}

.arier-page .arier-census-table td {
    width: 25%;
    text-align: center !important;
    white-space: normal !important;
}

.arier-page .arier-province-table {
    table-layout: fixed;
}

.arier-page .arier-province-table td:nth-child(1) { width: 34%; text-align: left !important; white-space: normal !important; }
.arier-page .arier-province-table td:nth-child(2) { width: 22%; text-align: center !important; }
.arier-page .arier-province-table td:nth-child(3) { width: 22%; text-align: center !important; }
.arier-page .arier-province-table td:nth-child(4) { width: 22%; text-align: center !important; }

/* Prevent wrapped header text overlap in this table */
.arier-page .arier-province-table th {
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
    vertical-align: top;
}

.arier-page .arier-occupation-table {
    table-layout: auto;
    min-width: 760px;
}

.arier-page .arier-occupation-table td:nth-child(1) { width: 44%; text-align: left !important; white-space: normal !important; }
.arier-page .arier-occupation-table td:nth-child(2),
.arier-page .arier-occupation-table td:nth-child(3),
.arier-page .arier-occupation-table td:nth-child(4),
.arier-page .arier-occupation-table td:nth-child(5) { width: 14%; text-align: center !important; }

/* Keep this table closer to original, simpler styling */
.arier-page .arier-occupation-table tr > td,
.arier-page .arier-occupation-table tr > th {
    border-left: 1px solid var(--color-border) !important;
    background: transparent !important;
    text-align: left !important;
    white-space: normal !important;
}

.arier-page .arier-occupation-table tr:first-child td,
.arier-page .arier-occupation-table tr:first-child th {
    background: var(--color-bg-alt) !important;
    text-align: center !important;
}

.arier-page .arier-occupation-table tbody tr:nth-child(even) td {
    box-shadow: none !important;
}

.arier-page .arier-structure-table {
    table-layout: fixed;
}

.arier-page .arier-structure-table th:first-child,
.arier-page .arier-structure-table td:first-child { width: 40%; text-align: left !important; white-space: normal !important; }
.arier-page .arier-structure-table th:not(:first-child),
.arier-page .arier-structure-table td:not(:first-child) { width: 15%; text-align: center !important; }

.arier-page .arier-stock-table {
    table-layout: fixed;
}

.arier-page .arier-stock-table td:nth-child(1) { width: 60%; text-align: left !important; white-space: normal !important; }
.arier-page .arier-stock-table td:nth-child(2),
.arier-page .arier-stock-table td:nth-child(3) { width: 20%; text-align: center !important; }

.arier-page .arier-committee-table {
    table-layout: fixed;
}

.arier-page .arier-committee-table td:nth-child(1) { width: 72%; text-align: left !important; white-space: normal !important; }
.arier-page .arier-committee-table td:nth-child(2) { width: 28%; text-align: center !important; }

/* --- 7. Alignment & Floats --- */
.right {
    text-align: right;
    display: block;
    width: 100%;
}

.center, .author {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.floatleft {
    float: left;
    margin: 0 var(--space-lg) var(--space-md) 0;
}

.floatright {
    float: right;
    margin: 0 0 var(--space-md) var(--space-lg);
}

/* --- 8. Links --- */
a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    color: var(--color-title);
    text-decoration: underline;
}

/* --- 9. Responsive --- */
@media (max-width: 650px) {
    .floatleft, .floatright {
        float: none !important;
        display: block;
        margin: var(--space-md) auto;
        max-width: 100%;
    }

    .gallery {
        grid-template-columns: 1fr; /* Stacks to 1 column on mobile */
        gap: var(--space-md);
    }

    header .clearfix,
    .site-header .clearfix {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}


/* Lugen pages: keep framed text plain */
.lugen-page .table-scroll tr:first-child th,
.lugen-page .table-scroll tr:first-child td {
    background: transparent;
    font-weight: 400;
    text-align: left;
}

.lugen-page .table-scroll blockquote {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    font-style: normal;
}

.lugen-page .table-scroll td,
.lugen-page .table-scroll th,
.lugen-page .table-scroll p,
.lugen-page .table-scroll span,
.lugen-page .table-scroll h4,
.lugen-page .table-scroll strong,
.lugen-page .table-scroll em {
    text-align: left !important;
    font-weight: 400 !important;
    font-style: normal !important;
}