/*
 * Theme Name:  Decameron Child
 * Template:    twentytwentyfive
 * Description: Bilingual Decameron - ADA compliant, fully responsive
 * Version:     4.0
 */

/* ============================================================
   CSS VARIABLES - ADA Compliant Colors
   ============================================================ */

:root {
    --color-bg-dark: #1a1a2e;
    --color-bg-nav: #12122a;
    --color-text-light: #e0e0e0;
    --color-text-dim: #a0a0b8;
    --color-accent: #a78bfa;
    --color-accent-dark: #7c3aed;
    --color-border: #2a2a3e;
    
    --color-italian-bg: #fffbf5;
    --color-italian-border: #b07d3c;  /* was #d4a574 (2.23:1 FAIL) → 3.59:1 PASS */
    --color-english-bg: #f5f9ff;
    --color-english-border: #4a7faf;  /* was #6b9bd1 (2.90:1 FAIL) → 4.25:1 PASS */
    
    --color-argument-bg: #fff8e7;
    --color-argument-border: #c4941d;
    
    --color-name-person: #7c3aed;
    --color-name-place: #0369a1;
    
    --font-base: Georgia, 'Times New Roman', serif;
    --font-mono: 'Courier New', Consolas, monospace;
    --font-ui:   system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --spacing-unit: 1rem;
    --nav-height: 3.5rem;

    /* Sidebar collapse */
    --sidebar-width-desktop: 280px;
    --sidebar-width-tablet:  240px;
    --sidebar-transition:    width 0.25s ease, min-width 0.25s ease;
    --color-accent-hero: #667eea; /* homepage gradient / stat numbers */
    --color-bg-hover: #2a2a4e;   /* sidebar nav hover background */
    --color-bg-active: #16213e;  /* sidebar nav active background */
    --color-milestone: #9333ea;  /* milestone / named entity highlight */

    /* WCAG 1.4.11: focus ring must be ≥3:1 against adjacent background.
       #a78bfa is only 2.72:1 on white (FAIL). #7c3aed is 5.70:1 (PASS).
       Elements on light/white backgrounds use --color-focus.
       Elements on dark nav backgrounds use --color-accent (6.27:1 PASS). */
    --color-focus: #7c3aed;

    /* Layout rhythm */
    --page-max:    1120px;  /* max content width for homepage sections */
    --page-gutter: 2rem;    /* horizontal breathing room */

    /* Light mode text hierarchy */
    --color-text-body: #2a2a2a;       /* main paragraph text */
    --color-text-secondary: #444;      /* argument, verse, intro text */
    --color-text-muted: #555;          /* toggle bar labels */
    --color-text-faint: #666;          /* subtitles, card text, stat labels */
    --color-text-nav: #888;            /* nav header, toggle button, nav label */

    /* Light mode sidebar nav */
    --color-nav-item: #c0c0d0;         /* sidebar nav item text */
    --color-nav-day: #d0d0e8;          /* sidebar day link text */

    /* Light mode surfaces & borders */
    --color-surface-subtle: #f5f5f5;   /* toggle bar bg, nav hover bg */
    --color-surface-card: #f9fafb;     /* control item hover, card bg */
    --color-border-light: #ddd;        /* panel border, button border */
    --color-border-faint: #eee;        /* divider line */
    --color-border-mid: #e5e5e5;       /* subtitle border, page nav borders */
    --color-border-reset: #e5e7eb;     /* reset button hover bg */
    --color-surface-reset: #f3f4f6;    /* reset button bg */

    /* Light mode semantic / feature colors */
    --color-speaker-bg: #f3e8ff;       /* speaker label background */
    --color-stanza-border: #d4af37;    /* stanza gold border */
    --color-selection-it: #fde68a;     /* Italian column text selection */
    --color-selection-en: #bfdbfe;     /* English column text selection */
    --color-milestone-bg: #fef3c7;     /* milestone highlight background (light) */
    --color-speaker-hl: #fef08a;       /* speaker highlight */
    --color-hero-end: #764ba2;         /* hero gradient end */

    /* Dark mode palette */
    --color-dark-bg: #0f0f1a;          /* dark page/section background */
    --color-dark-surface: #1e1e32;     /* dark toggle bar, nav hover */
    --color-dark-it-col: #1c1712;      /* dark Italian column background */
    --color-dark-en-col: #10161c;      /* dark English column background */
    --color-dark-arg-bg: #1a1600;      /* dark argument background */
    --color-dark-speaker-bg: #2d1b69;  /* dark speaker label background */
    --color-dark-reset-hover: #3a3a5e; /* dark reset button hover */
    --color-dark-milestone: #78350f;   /* dark highlight / Italian selection */
    --color-dark-selection-en: #1e3a5f;/* dark English selection */
    --color-dark-stanza: #b8962e;      /* dark stanza border */
    --color-dark-verse: #c8c0b0;       /* dark verse text */
    --color-dark-arg-text: #c0b080;    /* dark argument text */
    --color-dark-paragraph: #ccc8c0;   /* dark column paragraph text */
    --color-dark-muted: #aaa;          /* dark mode muted text */
    --color-dark-subtle: #bbb;         /* dark mode subtle text */
}

/* ============================================================
   SKIP LINK (ADA requirement)
   ============================================================ */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-accent);
    color: #000;
    padding: 0.5rem 1rem;
    text-decoration: none;
    font-weight: bold;
    z-index: 10000;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #000;
    outline-offset: 2px;
}

/* ============================================================
   SITE HEADER WRAPPER
   ============================================================ */

/* The <header class="site-header"> wraps the top nav on all pages.
   The nav inside handles its own sticky positioning. */
.site-header {
    display: block; /* explicit, prevents any theme override */
}

/* ============================================================
   LAYOUT - RESPONSIVE GRID
   ============================================================ */

.decameron-layout {
    display: grid;
    grid-template-columns: var(--sidebar-width-desktop) 1fr;
    grid-template-areas: "sidebar content";
    gap: 0;
    min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--nav-height));
    transition: grid-template-columns 0.25s ease;
}

.decameron-sidebar {
    grid-area: sidebar;
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--nav-height));
    height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--nav-height));
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--color-bg-dark);
    color: var(--color-text-light);
    padding: 0;                         /* was 1.5rem 0 — caused white gap at top */
    scrollbar-width: thin;
    scrollbar-color: var(--color-text-secondary) var(--color-bg-dark);
    transition: var(--sidebar-transition);
    min-width: 0;
    will-change: width;
}

.decameron-sidebar::-webkit-scrollbar { width: 6px; }
.decameron-sidebar::-webkit-scrollbar-track { background: var(--color-bg-dark); }
.decameron-sidebar::-webkit-scrollbar-thumb { background: var(--color-text-secondary); border-radius: 3px; }

.decameron-content {
    grid-area: content;
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    max-width: 100%;
    overflow-x: hidden;
}

/* ============================================================
   SIDEBAR NAVIGATION
   ============================================================ */

.dec-nav-header {
    padding: 1rem 1.25rem 1rem;         /* top: 1rem replaces the removed sidebar padding */
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: var(--font-ui);
    color: var(--color-text-nav);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.5rem;
}

.dec-nav-item {
    display: block;
    width: 100%;
    padding: 0.6rem 1.25rem;
    color: var(--color-nav-item);
    text-decoration: none;
    font-size: 0.875rem;
    font-family: var(--font-ui);
    font-weight: 500;
    line-height: 1.4;
    transition: background 0.15s, color 0.15s;
    min-height: 44px; /* ADA touch target */
}

.dec-nav-item:hover,
.dec-nav-item:focus {
    background: var(--color-bg-hover);
    color: #fff;
    text-decoration: none;
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.dec-nav-item.active {
    background: var(--color-bg-active);
    color: var(--color-accent);
    font-weight: 600;
    border-left: 3px solid var(--color-accent);
    padding-left: calc(1.25rem - 3px);
}

/* Day container */
.dec-nav-day-container {
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: stretch;
}

.dec-nav-day-link {
    flex: 1;
    display: block;
    padding: 0.65rem 1.25rem;
    color: var(--color-nav-day);
    font-size: 0.875rem;
    font-family: var(--font-ui);
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    min-height: 44px; /* ADA */
}

.dec-nav-day-link:hover,
.dec-nav-day-link:focus {
    background: var(--color-bg-hover);
    color: #fff;
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.dec-nav-day-link.active {
    color: var(--color-accent);
    background: var(--color-bg-active);
}

.dec-nav-day-toggle {
    flex-shrink: 0;
    width: 44px; /* ADA minimum */
    height: 44px; /* ADA minimum */
    background: none;
    border: none;
    border-left: 1px solid var(--color-border);
    color: var(--color-text-nav);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.dec-nav-day-toggle:hover,
.dec-nav-day-toggle:focus {
    background: var(--color-bg-hover);
    color: var(--color-accent);
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.dec-nav-day-toggle.open {
    color: var(--color-accent);
}

.dec-nav-day-toggle svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
}

.dec-nav-day-toggle.open svg {
    transform: rotate(90deg);
}

.dec-nav-novellas {
    display: none;
    background: var(--color-bg-nav);
    padding: 0.25rem 0;
}

.dec-nav-novellas.open {
    display: block;
}

.dec-nav-novellas .dec-nav-item {
    padding-left: 2.25rem;
    font-size: 0.82rem;
    color: var(--color-text-dim);
}

.dec-nav-novellas .dec-nav-item:hover,
.dec-nav-novellas .dec-nav-item:focus {
    color: #fff;
}

.dec-nav-novellas .dec-nav-item.active {
    color: var(--color-accent);
    border-left-color: var(--color-accent);
    padding-left: calc(2.25rem - 3px);
}

/* ============================================================
   PAGE HEADER
   ============================================================ */

.dec-page-title {
    font-size: clamp(1.2rem, 4vw, 1.6rem);
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--color-bg-dark);
}

.dec-page-subtitle {
    font-size: clamp(0.85rem, 2vw, 0.95rem);
    color: var(--color-text-faint);
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-border-mid);
}

/* Language toggle */
.dec-toggle-bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface-subtle);
    border-radius: 6px;
    font-size: 0.875rem;
    flex-wrap: wrap;
}

.dec-toggle-bar span {
    font-weight: 600;
    color: var(--color-text-muted);
}

.dec-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    user-select: none;
    min-height: 44px; /* ADA */
}

.dec-toggle-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.dec-toggle-label input[type="checkbox"]:focus {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

/* ============================================================
   BILINGUAL CONTENT
   ============================================================ */

.wp-block-columns.decameron-bilingual {
    display: flex !important;
    gap: 0 !important;
    margin: 0 0 0.5rem 0 !important;
    border: none !important;
    background: none !important;
    align-items: stretch;
}

.wp-block-column.italian-column,
.wp-block-column.english-column {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 1rem 1.5rem !important;
    margin: 0 !important;
}

.wp-block-column.italian-column {
    background: var(--color-italian-bg);
    border-right: 3px solid var(--color-italian-border);
}

.wp-block-column.english-column {
    background: var(--color-english-bg);
    border-left: 3px solid var(--color-english-border);
}

/* Paragraphs */
.italian-column p,
.english-column p {
    font-family: var(--font-base);
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    line-height: 1.8;
    color: var(--color-text-body);
    margin: 0 0 1rem 0 !important;
    text-align: justify;
    hyphens: auto;
}

.italian-column p:last-child,
.english-column p:last-child {
    margin-bottom: 0 !important;
}

/* Argument (summary) paragraphs */
.dec-argument {
    background: var(--color-argument-bg) !important;
    border-left: 4px solid var(--color-argument-border);
    padding: 0.75rem 1rem !important;
    margin: 0 0 1.5rem 1rem !important;
    font-style: italic;
    /* font-size and line-height come from the display-controls variable block below */
    color: var(--color-text-secondary) !important;
}

/* Speaker labels */
.dec-speaker {
    display: inline-block;
    font-weight: 700;
    color: var(--color-accent-dark);
    font-size: 0.9em;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    padding: 0.2em 0.6em;
    background: var(--color-speaker-bg);
    border-radius: 4px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

/* Poetry/Verse/Songs */
.dec-stanza {
    margin: 1.5rem 0 1.5rem 2rem;
    padding-left: 1rem;
    border-left: 3px solid var(--color-stanza-border);
}

.dec-verse {
    font-family: var(--font-base);
    font-style: italic;
    line-height: 1.6;
    margin: 0.25rem 0;
    color: var(--color-text-secondary);
}

.dec-stanza:first-child {
    margin-top: 0;
}

.dec-stanza:last-child {
    margin-bottom: 0;
}

/* Named entities */
.dec-name-person {
    color: var(--color-name-person);
    font-style: italic;
    font-weight: 600;
}

button.dec-entity {
    display: inline;
    margin: 0 0.08em;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
}

button.dec-name-person {
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

button.dec-name-person:hover,
button.dec-name-person:focus {
    color: var(--color-accent-dark);
    background: var(--color-speaker-bg);
    outline: 2px solid transparent;
}

button.dec-name-person:focus-visible,
button.dec-name-place:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

.dec-name-place {
    color: var(--color-name-place);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

.dec-entity-popover {
    position: absolute;
    z-index: 10020;
    display: none;
    width: min(360px, calc(100vw - 24px));
    max-height: min(520px, calc(100vh - 32px));
    overflow: auto;
    padding: 1rem;
    background: #fffdf6;
    border: 1px solid #c8ad72;
    border-top: 4px solid var(--color-accent);
    box-shadow: 0 14px 34px rgba(43, 27, 22, 0.22);
    color: #2b1b16;
}

.dec-entity-popover.is-open {
    display: block;
}

.dec-entity-popover-close {
    position: absolute;
    top: 0.35rem;
    right: 0.45rem;
    width: 32px;
    height: 32px;
    border: 1px solid #d8c9a9;
    background: #fffaf0;
    color: #2b1b16;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
}

.dec-entity-popover h3 {
    margin: 0 2.25rem 0.35rem 0;
    font-family: var(--font-base);
    font-size: 1.35rem;
    color: #2b1b16;
}

.dec-entity-meta,
.dec-entity-summary,
.dec-entity-more {
    margin: 0 0 0.75rem;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    line-height: 1.45;
    color: #4a372d;
}

.dec-entity-appearances {
    margin: 0;
    padding-left: 1.15rem;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    line-height: 1.55;
}

.dec-entity-appearances a {
    color: #8f0000;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dec-entity-count {
    color: #5c4333;
    font-weight: 700;
}

/* Milestone paragraph numbers */
.dec-milestone {
    display: inline;
    font-size: 0.65em;
    color: var(--color-milestone);
    font-weight: 700;
    margin-left: 0.4em;
    margin-right: 0.4em;
    font-family: var(--font-mono);
    white-space: nowrap;
    vertical-align: super;
    line-height: 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

/* Selection highlight */
.italian-column ::selection { background: var(--color-selection-it); }
.english-column ::selection { background: var(--color-selection-en); }

/* Hide/show via toggle */
body.hide-italian .italian-column { display: none !important; }
body.hide-english .english-column { display: none !important; }

body.hide-italian .wp-block-columns.decameron-bilingual,
body.hide-english .wp-block-columns.decameron-bilingual {
    display: block !important;
}

body.hide-italian .english-column,
body.hide-english .italian-column {
    width: 100% !important;
    border: none !important;
    border-left: 4px solid var(--color-accent);
}

/* ============================================================
   RESPONSIVE - TABLET
   ============================================================ */

@media (max-width: 1024px) {
    .decameron-layout {
        grid-template-columns: var(--sidebar-width-tablet) 1fr;
    }
    
    .decameron-content {
        padding: 2rem;
    }
    
    .wp-block-column.italian-column,
    .wp-block-column.english-column {
        padding: 0.8rem 1.2rem !important;
    }
}

/* ============================================================
   MOBILE - COLLAPSIBLE SIDEBAR
   ============================================================ */

@media (max-width: 768px) {
    :root {
        --nav-height: 44px; /* On mobile the nav collapses to just the brand bar */
    }

    /* Make sidebar collapsible */
    .decameron-sidebar {
        position: fixed;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--nav-height));
        left: 0;
        width: 280px;
        height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--nav-height));
        transform: translateX(-100%); /* Hidden by default */
        transition: transform 0.3s ease;
        z-index: 999;
        border-right: 3px solid var(--color-accent);
        border-bottom: none;
    }

    .decameron-sidebar.open {
        transform: translateX(0); /* Shown when open */
    }

    /* Mobile menu toggle button */
    .mobile-menu-toggle {
        position: fixed;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--nav-height) + 0.5rem);
        right: 1rem;
        z-index: 1001;
        width: 48px;
        height: 48px;
        background: var(--color-accent);
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        transition: all 0.2s;
    }
    
    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:focus {
        background: var(--color-accent-dark);
        transform: scale(1.05);
    }
    
    .mobile-menu-toggle svg {
        width: 24px;
        height: 24px;
    }
    
    /* Overlay when menu is open */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
    }
    
    .sidebar-overlay.active {
        display: block;
    }
    
    /* Layout adjustments */
    .decameron-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "content";
    }
    
    .decameron-content {
        padding: 1.5rem 1rem;
        padding-top: 4rem; /* Space for menu toggle */
    }
    
    /* Fix text controls panel on mobile */
    .text-controls-panel {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        min-width: auto;
        max-width: none;
        border-radius: 16px 16px 0 0;
        max-height: 80vh;
        overflow-y: auto;
    }
    
    .text-controls-toggle {
        padding: 0.4rem 0.75rem;
        font-size: 0.85rem;
    }
    
    /* Fix toggle bar on mobile */
    .dec-toggle-bar {
        position: static; /* Remove relative positioning */
        z-index: auto;
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .dec-toggle-label {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ============================================================
   DISPLAY BUTTON — FLOATING BOTTOM-RIGHT WHEN SCROLLED
   Applies on mobile and desktop once user scrolls past 100px.
   ============================================================ */

/* Mobile: keep Display button below the sidebar overlay */
@media (max-width: 768px) {
    .dec-text-controls {
        z-index: 997; /* below overlay (998) and sidebar (999) */
    }

    /* Float to bottom-right when scrolled */
    body.scrolled .dec-text-controls {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        left: auto;
        top: auto;
        margin: 0;
        z-index: 997;
    }

    body.scrolled .text-controls-panel {
        bottom: 4rem;
        top: auto;
        right: 0;
        left: 0;
        border-radius: 16px 16px 0 0;
    }
}

/* Desktop: float to bottom-right when scrolled */
@media (min-width: 769px) {
    body.scrolled .dec-text-controls {
        position: fixed;
        bottom: 1.5rem;
        right: 1.5rem;
        left: auto;
        top: auto;
        margin: 0;
        z-index: 10001;
    }

    /* Panel opens upward from the floating button */
    body.scrolled .text-controls-panel {
        bottom: 4rem;
        top: auto;
        right: 0;
    }
}

/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {
    .mobile-menu-toggle {
        width: 44px;
        height: 44px;
    }
    
    .decameron-sidebar {
        width: 240px;
    }
    
    .decameron-content {
        padding: 1rem 0.75rem;
        padding-top: var(--nav-height);
    }
}

/* ============================================================
   HIGH CONTRAST MODE (ADA)
   ============================================================ */

@media (prefers-contrast: high) {
    :root {
        --color-bg-dark: #000;
        --color-text-light: #fff;
        --color-accent: #bb86fc;
        --color-border: #666;
    }
    
    .dec-nav-item:focus,
    .dec-nav-day-link:focus,
    .dec-nav-day-toggle:focus {
        outline: 3px solid #fff;
        outline-offset: 2px;
    }
}

/* ============================================================
   REDUCED MOTION (ADA)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   PRINT
   ============================================================ */

@media print {
    .dec-top-nav,
    .decameron-sidebar,
    .dec-toggle-bar,
    .skip-link { 
        display: none !important; 
    }
    
    .decameron-layout { 
        display: block; 
    }
    
    body.hide-italian .italian-column,
    body.hide-english .english-column { 
        display: block !important; 
    }
    
    .dec-milestone,
    .dec-speaker {
        color: var(--color-text-faint) !important;
    }
    
    .wp-block-columns.decameron-bilingual {
        break-inside: avoid;
    }
}

/* ============================================================
   ZOOM SUPPORT (ADA requirement - text up to 200%)
   ============================================================ */

@media (min-width: 1200px) {
    /* At high zoom, switch to single column */
    @supports (zoom: 2) {
        body[style*="zoom: 2"] .decameron-layout {
            grid-template-columns: 1fr;
        }
    }
}

/* ============================================================
   ADA COMPLIANCE - Skip Link in Landmark
   ============================================================ */

/* Hide the header visually but keep it for screen readers */
.screen-reader-only-header {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link inside the hidden header */
.screen-reader-only-header .skip-link {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-accent, #a78bfa);
    color: #000;
    padding: 0.5rem 1rem;
    text-decoration: none;
    font-weight: bold;
    z-index: 10000;
}

/* Show header when skip link is focused (Tab key) */
.screen-reader-only-header:focus-within {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Skip link visible and outlined on focus */
.screen-reader-only-header .skip-link:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* ============================================================
   MULTI-LEVEL DROPDOWN MENU
   ============================================================ */

/* Top navigation */
.dec-top-nav {
    background: var(--color-bg-dark, #1a1a2e);
    border-bottom: 2px solid var(--color-accent, #a78bfa);
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    z-index: 1000;
}

.dec-top-nav ul,
.dec-top-nav .menu {
    list-style: none;
    margin: 0;
    padding: 0 44px 0 0; /* right: space for theme toggle button */
    display: flex;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}

.dec-top-nav li {
    margin: 0;
    position: relative;
}

.dec-top-nav a {
    display: block;
    padding: 1rem 1.5rem;
    color: var(--color-text-light, #e0e0e0);
    text-decoration: none;
    font-weight: 500;
    min-height: 44px;
    transition: background 0.2s, color 0.2s;
}

.dec-top-nav a:hover,
.dec-top-nav a:focus {
    background: var(--color-bg-hover);
    color: var(--color-accent, #a78bfa);
}

.dec-top-nav .current-menu-item > a,
.dec-top-nav .current-page-ancestor > a,
.dec-top-nav .current-menu-ancestor > a {
    background: var(--color-bg-active);
    color: var(--color-accent, #a78bfa);
    border-bottom: 3px solid var(--color-accent, #a78bfa);
}

/* ============================================================
   FIRST LEVEL DROPDOWN (Indices → Index of Persons, Index of Places)
   ============================================================ */

/* Hide all submenus by default */
.dec-top-nav .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: var(--color-bg-dark, #1a1a2e);
    border: 1px solid var(--color-border, #2a2a3e);
    border-top: 3px solid var(--color-accent, #a78bfa);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    padding: 0;
    margin: 0;
    flex-direction: column;
}

/* Show first-level submenu on hover OR focus-within */
.dec-top-nav li:hover > .sub-menu,
.dec-top-nav li:focus-within > .sub-menu {
    display: flex;
}

/* Submenu items */
.dec-top-nav .sub-menu li {
    width: 100%;
    position: relative;
}

.dec-top-nav .sub-menu a {
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--color-border, #2a2a3e);
    font-size: 0.9rem;
}

.dec-top-nav .sub-menu li:last-child > a {
    border-bottom: none;
}

.dec-top-nav .sub-menu a:hover,
.dec-top-nav .sub-menu a:focus {
    background: var(--color-bg-hover);
    color: var(--color-accent, #a78bfa);
    padding-left: 2rem;
}

/* ============================================================
   SECOND LEVEL DROPDOWN (to the right)
   ============================================================ */

/* Second level submenu positioning */
.dec-top-nav .sub-menu .sub-menu {
    top: 0;
    left: 100%;  /* Position to the RIGHT of parent */
    border-top: 1px solid var(--color-border, #2a2a3e);
    border-left: 3px solid var(--color-accent, #a78bfa);
}

/* Show second-level submenu on hover */
.dec-top-nav .sub-menu li:hover > .sub-menu,
.dec-top-nav .sub-menu li:focus-within > .sub-menu {
    display: flex;
}

/* Dropdown indicator arrows */
.dec-top-nav .menu-item-has-children > a::after {
    content: ' ▾';
    font-size: 0.8em;
    margin-left: 0.3em;
    opacity: 0.7;
}

/* Second level gets right arrow instead */
.dec-top-nav .sub-menu .menu-item-has-children > a::after {
    content: ' ▸';
    float: right;
    margin-left: auto;
}

/* Active submenu items */
.dec-top-nav .sub-menu .current-menu-item > a {
    background: var(--color-bg-hover);
    color: var(--color-accent, #a78bfa);
    border-left: 3px solid var(--color-accent, #a78bfa);
    padding-left: calc(1.5rem - 3px);
}

/* ============================================================
   TOP NAV SUBMENU TOGGLE BUTTON
   JS injects a .dec-top-nav-item-row wrapper containing the
   existing <a> and a new .dec-top-subnav-toggle arrow button.
   Desktop: hover still opens via CSS; button is an extra option.
   Mobile:  hover is suppressed; button is the only way.
   ============================================================ */

.dec-top-nav-item-row {
    display: flex;
    align-items: stretch;
}

.dec-top-nav-item-row > a {
    flex: 1;
}

.dec-top-subnav-toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    background: none;
    border: none;
    border-left: 1px solid var(--color-border, #2a2a3e);
    color: var(--color-text-dim, #a0a0b8);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}

.dec-top-subnav-toggle svg {
    transition: transform 0.2s ease;
}

.dec-top-subnav-toggle.open svg {
    transform: rotate(90deg);
}

.dec-top-subnav-toggle:hover,
.dec-top-subnav-toggle:focus {
    background: var(--color-bg-hover);
    color: var(--color-accent, #a78bfa);
    outline: 2px solid var(--color-accent, #a78bfa);
    outline-offset: -2px;
}

/* Sub-menu opened via button click (desktop and mobile) */
.dec-top-nav li > ul.sub-menu.submenu-open {
    display: flex;
}

/* ============================================================
   MOBILE RESPONSIVE — TOP NAV
   ============================================================ */

/* ============================================================
   MOBILE RESPONSIVE — TOP NAV
   ============================================================ */

@media (max-width: 768px) {
    .dec-top-nav-brand {
        display: flex;
        align-items: center;
        gap: 0;
        padding: 0 0.5rem 0 1rem;
        min-height: 44px;
    }

    .dec-nav-site-title {
        flex: 1;
        color: var(--color-text-light, #e0e0e0);
        font-weight: 600;
        font-size: 1rem;
        font-family: var(--font-ui);
    }

    .dec-nav-hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: none;
        border: 1px solid var(--color-border, #2a2a3e);
        border-radius: 4px;
        color: var(--color-text-light, #e0e0e0);
        cursor: pointer;
        flex-shrink: 0;
        transition: background 0.2s, color 0.2s;
    }

    .dec-nav-hamburger:hover,
    .dec-nav-hamburger:focus {
        background: var(--color-bg-hover);
        color: var(--color-accent, #a78bfa);
        outline: 2px solid var(--color-accent, #a78bfa);
        outline-offset: -2px;
    }

    .dec-top-nav ul,
    .dec-top-nav .menu {
        display: none;
        flex-direction: column;
        width: 100%;
        padding: 0;
        border-top: 1px solid var(--color-border, #2a2a3e);
    }

    .dec-top-nav ul.nav-open,
    .dec-top-nav .menu.nav-open {
        display: flex;
    }

    .dec-top-nav li {
        width: 100%;
    }

    /* Row container gets a bottom border on mobile */
    .dec-top-nav-item-row {
        width: 100%;
        border-bottom: 1px solid var(--color-border, #2a2a3e);
    }

    .dec-top-nav-item-row > a {
        padding: 0.75rem 1.25rem;
        min-height: 44px;
    }

    /* Larger touch target on mobile */
    .dec-top-subnav-toggle {
        width: 44px;
        min-height: 44px;
    }

    /* Suppress hover-open on mobile — button is the only trigger */
    .dec-top-nav li:hover > .sub-menu,
    .dec-top-nav li:focus-within > .sub-menu {
        display: none;
    }

    /* Only .submenu-open (set by JS) shows the sub-menu on mobile */
    .dec-top-nav li > ul.sub-menu.submenu-open {
        display: flex;
    }

    /* First level submenu */
    .dec-top-nav .sub-menu {
        position: static;
        width: 100%;
        box-shadow: none;
        border: none;
        border-left: 3px solid var(--color-accent, #a78bfa);
        background: var(--color-bg-nav, #12122a);
    }

    .dec-top-nav .sub-menu a {
        padding-left: 2.5rem;
    }

    .dec-top-nav .sub-menu .dec-top-nav-item-row > a {
        padding-left: 2.5rem;
    }

    /* Second level submenu */
    .dec-top-nav .sub-menu .sub-menu {
        position: static;
        left: auto;
        border-left: 3px solid var(--color-accent, #a78bfa);
        margin-left: 1rem;
    }

    .dec-top-nav .sub-menu .sub-menu a {
        padding-left: 3.5rem;
    }

    /* Hide CSS-generated arrows — JS button replaces them */
    .dec-top-nav .menu-item-has-children > a::after,
    .dec-top-nav .sub-menu .menu-item-has-children > a::after {
        display: none;
    }
}

/* ============================================================
   THEME TOGGLE BUTTON (light / dark / auto)
   ============================================================ */

.dec-theme-toggle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    background: none;
    border: none;
    border-left: 1px solid var(--color-border, #2a2a3e);
    color: var(--color-text-light, #e0e0e0);
    cursor: pointer;
    font-size: 1.1rem;
    transition: background 0.2s;
}

.dec-theme-toggle:hover,
.dec-theme-toggle:focus {
    background: var(--color-bg-hover);
    outline: 2px solid var(--color-accent, #a78bfa);
    outline-offset: -2px;
}

/* On mobile the brand bar already has a right-side zone (hamburger).
   Keep the theme toggle in the brand bar too — JS will insert it. */
@media (max-width: 768px) {
    .dec-theme-toggle {
        position: static;
        width: 44px;
        height: 44px;
        border-left: none;
    }
}

/* ============================================================
   KEYBOARD NAVIGATION (ADA)
   ============================================================ */

/* Ensure focus is visible */
.dec-top-nav a:focus {
    outline: 2px solid var(--color-accent, #a78bfa);
    outline-offset: -2px;
}

/* Keep submenu open when navigating with keyboard */
.dec-top-nav li:focus-within > .sub-menu {
    display: flex;
}


/* ============================================================
   TEXT DISPLAY CONTROLS
   Add to your style.css
   ============================================================ */

/* CSS Variables for text customization */
:root {
    --text-font-size: 18px;
    --text-line-height: 1.8;
}

/* Apply variables to text content */
.italian-column p,
.english-column p {
    font-size: var(--text-font-size);
    line-height: var(--text-line-height);
}

/* Argument block scales with the same slider — slightly smaller via calc */
.dec-argument {
    font-size: calc(var(--text-font-size) * 0.925) !important;
    line-height: var(--text-line-height) !important;
}

/* Controls container */
.dec-text-controls {
    display: inline-block;
    position: relative;
    margin-left: 1rem;
    z-index: 100;
}

/* Toggle button */
.text-controls-toggle {
    padding: 0.5rem 1rem;
    background: var(--color-accent, #a78bfa);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.text-controls-toggle:hover {
    background: var(--color-accent-dark);
    transform: translateY(-1px);
}

/* Controls panel */
.text-controls-panel {
    position: fixed; /* Changed from absolute to fixed */
    top: 8rem; /* Adjust based on your header height */
    right: 2rem;
    min-width: 320px;
    max-width: 400px;
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    padding: 1.5rem;
    z-index: 10001;
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
}

.text-controls-panel h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--color-bg-dark);
    border-bottom: 2px solid var(--color-accent, #a78bfa);
    padding-bottom: 0.5rem;
}

/* Control items */
.control-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    cursor: pointer;
    transition: background 0.2s;
}

.control-item:hover {
    background: var(--color-surface-card);
    margin: 0 -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 4px;
}

.control-item input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

.control-item input[type="range"] {
    flex: 1;
    cursor: pointer;
}

.control-item span:first-of-type {
    flex: 1;
    font-size: 0.9rem;
}

.control-item span:last-of-type {
    font-size: 0.85rem;
    color: var(--color-text-faint);
    font-weight: 600;
    min-width: 3rem;
    text-align: right;
}

/* Divider */
.control-divider {
    border-top: 1px solid var(--color-border-faint);
    margin: 1rem 0;
}

/* Reset button */
.reset-settings-btn {
    width: 100%;
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--color-surface-reset);
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-faint);
    transition: all 0.2s;
}

.reset-settings-btn:hover {
    background: var(--color-border-reset);
    color: var(--color-bg-dark);
}

/* ============================================================
   TOGGLE STATES
   ============================================================ */

/* Hide milestones */
body.hide-milestones .dec-milestone {
    display: none;
}

/* Hide speakers */
body.hide-speakers .dec-speaker {
    display: none;
}

/* Hide person names styling */
body.hide-person-names .dec-name-person {
    color: inherit;
    font-style: inherit;
}

/* Hide place names styling */
body.hide-place-names .dec-name-place {
    color: inherit;
}

/* Milestone links: hover animation when "Paragraph numbers are links" is ON */
.milestone-clickable {
    cursor: pointer !important;
    transition: all 0.2s;
}

.milestone-clickable:hover {
    background: var(--color-milestone-bg);
    padding: 0.125rem 0.25rem;
    border-radius: 3px;
    transform: scale(1.1);
}

/* Milestone selectable: allow text to be included in mouse drag-selections */
.milestone-selectable {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
}

/* Speaker selectable: allow text to be included in mouse drag-selections */
.speaker-selectable {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
}

/* ============================================================
   TOAST NOTIFICATION
   ============================================================ */

.dec-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--color-bg-dark);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s;
    font-size: 0.9rem;
    font-weight: 500;
}

.dec-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .dec-text-controls {
        margin-left: 0.5rem;
    }
    
    .text-controls-toggle {
        padding: 0.4rem 0.75rem;
        font-size: 0.85rem;
    }
    
    .text-controls-panel {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        min-width: auto;
        border-radius: 16px 16px 0 0;
        max-height: 80vh;
        overflow-y: auto;
    }
    
    .dec-toast {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.text-controls-toggle:focus {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.control-item input:focus {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

/* Paragraph link highlight — applied by JS via classList, removed after 2 s */
.dec-milestone-highlight {
    background: var(--color-milestone-bg);
    padding: 0.125rem 0.3rem;
    border-radius: 3px;
}
html.theme-dark .dec-milestone-highlight { background: var(--color-dark-milestone); }
@media (prefers-color-scheme: dark) {
    html:not(.theme-light) .dec-milestone-highlight { background: var(--color-dark-milestone); }
}

/* ============================================================
   HOMEPAGE
   ============================================================ */

.dec-home-hero {
    background: linear-gradient(135deg, var(--color-accent-hero) 0%, var(--color-hero-end) 100%);
    color: white;
    padding: 4rem 2rem;
    text-align: center;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.dec-home-hero h1 {
    font-size: clamp(2rem, 6vw, 3.5rem);
    margin: 0 0 1rem 0;
    font-weight: 700;
}

.dec-home-hero .subtitle {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    margin: 0 0 0.5rem 0;
    opacity: 0.95;
}

.dec-home-hero .author {
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    margin: 0 0 2rem 0;
    font-style: italic;
    opacity: 0.85;
}

.dec-home-cta {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: white;
    color: var(--color-accent-hero);
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    min-width: 44px;
    min-height: 44px;
}

.dec-home-cta:hover,
.dec-home-cta:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    outline: 2px solid white;
    outline-offset: 4px;
}

.dec-home-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

.dec-home-section {
    margin-bottom: 3rem;
}

.dec-home-section h2 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: var(--color-bg-dark);
    margin-bottom: 1.5rem;
    border-bottom: 3px solid var(--color-accent);
    padding-bottom: 0.5rem;
}

.dec-home-intro-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
}

.dec-home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.dec-home-card {
    background: var(--color-surface-card);
    padding: 2rem;
    border-radius: 8px;
    border-left: 4px solid var(--color-accent);
    transition: transform 0.2s, box-shadow 0.2s;
}

.dec-home-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dec-home-card h3 {
    font-size: 1.3rem;
    color: var(--color-bg-dark);
    margin: 0 0 1rem 0;
}

.dec-home-card p {
    color: var(--color-text-faint);
    line-height: 1.6;
    margin: 0;
}

.dec-home-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    margin: 2rem 0;
}

.dec-stat {
    text-align: center;
}

.dec-stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-accent-hero);
    line-height: 1;
}

.dec-stat-label {
    font-size: 1rem;
    color: var(--color-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    .dec-home-hero {
        padding: 3rem 1.5rem;
        min-height: 50vh;
    }

    .dec-home-content {
        padding: 2rem 1rem;
    }

    .dec-home-stats {
        gap: 2rem;
    }
}

/* ============================================================
   PREV / NEXT PAGE NAVIGATION
   ============================================================ */

.dec-page-nav {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border-mid);
}

.dec-page-nav-spacer {
    flex: 1;
}

.dec-page-nav-prev,
.dec-page-nav-next {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
    text-decoration: none;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    border: 1px solid var(--color-border-light);
    background: var(--color-surface-card);
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.15s;
    flex: 1;
    max-width: 48%;
    min-height: 52px;
}

.dec-page-nav-prev {
    border-left: 3px solid var(--color-accent);
}

.dec-page-nav-next {
    border-right: 3px solid var(--color-accent);
    margin-left: auto;
    justify-content: flex-end;
}

.dec-page-nav-prev:hover,
.dec-page-nav-next:hover,
.dec-page-nav-prev:focus-visible,
.dec-page-nav-next:focus-visible {
    background: var(--color-surface-subtle);
    border-color: var(--color-accent);
    box-shadow: 0 2px 12px rgba(167, 139, 250, 0.15);
    outline: none;
}

.dec-page-nav-prev:hover { transform: translateX(-2px); }
.dec-page-nav-next:hover { transform: translateX(2px); }

.dec-page-nav-arrow {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--color-accent);
    transition: transform 0.15s;
}

.dec-page-nav-prev:hover .dec-page-nav-arrow { transform: translateX(-3px); }
.dec-page-nav-next:hover .dec-page-nav-arrow { transform: translateX(3px); }

.dec-page-nav-content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.dec-page-nav-next .dec-page-nav-content {
    text-align: right;
}

.dec-page-nav-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-nav);
    font-weight: 700;
}

.dec-page-nav-title {
    font-size: 0.88rem;
    color: var(--color-text-body);
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .dec-page-nav {
        flex-direction: column;
    }

    .dec-page-nav-prev,
    .dec-page-nav-next {
        max-width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    .dec-page-nav-next .dec-page-nav-content {
        text-align: left;
    }

    .dec-page-nav-prev:hover { transform: none; }
    .dec-page-nav-next:hover { transform: none; }
}

/* ============================================================
   DARK MODE
   Applies when: system preference is dark (and not forced light),
   OR when the user manually selects dark via html.theme-dark.
   html.theme-light forces light even on dark-preference systems.
   ============================================================ */

/* System auto: respects prefers-color-scheme unless overridden */
@media (prefers-color-scheme: dark) {
    /* !important beats WordPress global-styles inline CSS that loads after our stylesheet */
    html:not(.theme-light) body,
    html:not(.theme-light) main { background: var(--color-dark-bg) !important; color: var(--color-text-light) !important; }
    html:not(.theme-light) .decameron-content { background: var(--color-dark-bg) !important; }
    html:not(.theme-light) .dec-home-content  { background: var(--color-dark-bg) !important; }
    html:not(.theme-light) .dec-page-title   { color: var(--color-text-light); }
    html:not(.theme-light) .dec-page-subtitle {
        color: var(--color-dark-muted);
        border-bottom-color: var(--color-border);
    }
    html:not(.theme-light) .dec-toggle-bar { background: var(--color-dark-surface); }
    html:not(.theme-light) .wp-block-column.italian-column {
        background: var(--color-dark-it-col) !important;
        border-right-color: var(--color-italian-border) !important;
    }
    html:not(.theme-light) .wp-block-column.english-column {
        background: var(--color-dark-en-col) !important;
        border-left-color: var(--color-english-border) !important;
    }
    html:not(.theme-light) .italian-column p,
    html:not(.theme-light) .english-column p { color: var(--color-dark-paragraph) !important; }
    html:not(.theme-light) .dec-argument {
        background: var(--color-dark-arg-bg) !important;
        color: var(--color-dark-arg-text) !important;
    }
    html:not(.theme-light) .dec-page-nav { border-top-color: var(--color-border); }
    html:not(.theme-light) .dec-page-nav-prev,
    html:not(.theme-light) .dec-page-nav-next { background: var(--color-dark-surface); border-color: var(--color-border); }
    html:not(.theme-light) .dec-page-nav-prev { border-left-color: var(--color-accent); }
    html:not(.theme-light) .dec-page-nav-next { border-right-color: var(--color-accent); }
    html:not(.theme-light) .dec-page-nav-prev:hover,
    html:not(.theme-light) .dec-page-nav-next:hover { background: var(--color-bg-hover); border-color: var(--color-accent); }
    html:not(.theme-light) .dec-page-nav-title { color: var(--color-text-light); }
    html:not(.theme-light) .dec-page-nav-label { color: var(--color-dark-muted); }
    html:not(.theme-light) .text-controls-panel {
        background: var(--color-bg-dark);
        border-color: var(--color-border);
        color: var(--color-text-light);
    }
    html:not(.theme-light) .text-controls-panel h4 { color: var(--color-text-light); }
    html:not(.theme-light) .control-item:hover      { background: var(--color-bg-hover); }
    html:not(.theme-light) .reset-settings-btn {
        background: var(--color-bg-hover);
        border-color: var(--color-border);
        color: var(--color-text-light);
    }
    html:not(.theme-light) .reset-settings-btn:hover { background: var(--color-dark-reset-hover); }
    html:not(.theme-light) .dec-home-content { background: var(--color-dark-bg) !important; }
    html:not(.theme-light) .dec-home-intro-text { color: var(--color-dark-subtle); }
    html:not(.theme-light) .dec-home-section h2 { color: var(--color-text-light); }
    html:not(.theme-light) .dec-home-card {
        background: var(--color-bg-dark);
        border-left-color: var(--color-accent);
    }
    html:not(.theme-light) .dec-home-card h3 { color: var(--color-text-light); }
    html:not(.theme-light) .dec-home-card p  { color: var(--color-dark-muted); }
    /* Missed overrides */
    html:not(.theme-light) .dec-toggle-bar span { color: var(--color-dark-muted); }
    html:not(.theme-light) .dec-speaker { background: var(--color-dark-speaker-bg); }
    html:not(.theme-light) .dec-stanza  { border-left-color: var(--color-dark-stanza); }
    html:not(.theme-light) .dec-verse   { color: var(--color-dark-verse); }
    html:not(.theme-light) .control-divider { border-top-color: var(--color-border); }
    html:not(.theme-light) .dec-home-card, html:not(.theme-light) .dec-home-card:hover { box-shadow: none; }
    html:not(.theme-light) .dec-home-stats .dec-stat-label { color: var(--color-dark-muted); }
    html:not(.theme-light) .italian-column ::selection { background: var(--color-dark-milestone); }
    html:not(.theme-light) .english-column ::selection { background: var(--color-dark-selection-en); }
}

/* Manual dark: html.theme-dark (same rules as above, without media query) */
html.theme-dark body,
html.theme-dark main { background: var(--color-dark-bg) !important; color: var(--color-text-light) !important; }
html.theme-dark .decameron-content { background: var(--color-dark-bg) !important; }
html.theme-dark .dec-home-content  { background: var(--color-dark-bg) !important; }
html.theme-dark .dec-page-title   { color: var(--color-text-light); }
html.theme-dark .dec-page-subtitle {
    color: var(--color-dark-muted);
    border-bottom-color: var(--color-border);
}
html.theme-dark .dec-toggle-bar { background: var(--color-dark-surface); }
html.theme-dark .wp-block-column.italian-column {
    background: var(--color-dark-it-col) !important;
    border-right-color: var(--color-italian-border) !important;
}
html.theme-dark .wp-block-column.english-column {
    background: var(--color-dark-en-col) !important;
    border-left-color: var(--color-english-border) !important;
}
html.theme-dark .italian-column p,
html.theme-dark .english-column p { color: var(--color-dark-paragraph) !important; }
html.theme-dark .dec-argument {
    background: var(--color-dark-arg-bg) !important;
    color: var(--color-dark-arg-text) !important;
}
html.theme-dark .dec-page-nav { border-top-color: var(--color-border); }
html.theme-dark .dec-page-nav-prev,
html.theme-dark .dec-page-nav-next { background: var(--color-dark-surface); border-color: var(--color-border); }
html.theme-dark .dec-page-nav-prev { border-left-color: var(--color-accent); }
html.theme-dark .dec-page-nav-next { border-right-color: var(--color-accent); }
html.theme-dark .dec-page-nav-prev:hover,
html.theme-dark .dec-page-nav-next:hover { background: var(--color-bg-hover); border-color: var(--color-accent); }
html.theme-dark .dec-page-nav-title { color: var(--color-text-light); }
html.theme-dark .dec-page-nav-label { color: var(--color-dark-muted); }
html.theme-dark .text-controls-panel {
    background: var(--color-bg-dark);
    border-color: var(--color-border);
    color: var(--color-text-light);
}
html.theme-dark .text-controls-panel h4 { color: var(--color-text-light); }
html.theme-dark .control-item:hover      { background: var(--color-bg-hover); }
html.theme-dark .reset-settings-btn {
    background: var(--color-bg-hover);
    border-color: var(--color-border);
    color: var(--color-text-light);
}
html.theme-dark .reset-settings-btn:hover { background: var(--color-dark-reset-hover); }
html.theme-dark .dec-home-content { background: var(--color-dark-bg); }
html.theme-dark .dec-home-intro-text { color: var(--color-dark-subtle); }
html.theme-dark .dec-home-section h2 { color: var(--color-text-light); }
html.theme-dark .dec-home-card {
    background: var(--color-bg-dark);
    border-left-color: var(--color-accent);
}
html.theme-dark .dec-home-card h3 { color: var(--color-text-light); }
html.theme-dark .dec-home-card p  { color: var(--color-dark-muted); }
/* Missed overrides */
html.theme-dark .dec-toggle-bar span { color: var(--color-dark-muted); }
html.theme-dark .dec-speaker { background: var(--color-dark-speaker-bg); }
html.theme-dark .dec-stanza  { border-left-color: var(--color-dark-stanza); }
html.theme-dark .dec-verse   { color: var(--color-dark-verse); }
html.theme-dark .control-divider { border-top-color: var(--color-border); }
html.theme-dark .dec-home-card, html.theme-dark .dec-home-card:hover { box-shadow: none; }
html.theme-dark .dec-home-stats .dec-stat-label { color: var(--color-dark-muted); }
html.theme-dark .italian-column ::selection { background: var(--color-dark-milestone); }
html.theme-dark .english-column ::selection { background: var(--color-dark-selection-en); }

/* Also style the theme toggle button itself in dark mode */
html.theme-dark .dec-top-nav,
html.theme-dark .dec-top-nav .sub-menu {
    background: var(--color-bg-dark);
}

/* ============================================================
   SIDEBAR COLLAPSE — desktop + tablet
   Toggled by body.sidebar-collapsed (set by JS).
   The toggle button (#dec-sidebar-toggle) is injected by JS.
   Mobile uses the existing overlay system and ignores these rules.
   ============================================================ */

/* Collapsed: shrink sidebar column to zero */
body.sidebar-collapsed .decameron-layout {
    grid-template-columns: 0 1fr;
}

body.sidebar-collapsed .decameron-sidebar {
    width: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Hide sidebar content instantly so text doesn't peek out */
body.sidebar-collapsed .decameron-sidebar > * {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.decameron-sidebar > * {
    opacity: 1;
    transition: opacity 0.2s ease 0.1s;
}

/* ── Toggle button ─────────────────────────────────────────── */

#dec-sidebar-toggle {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    /* JS sets left: dynamically; default matches desktop sidebar width */
    left: var(--sidebar-width-desktop);
    z-index: 500;

    width: 20px;
    height: 48px;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-left: none;
    border-radius: 0 6px 6px 0;
    color: var(--color-text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: left 0.25s ease, background 0.15s, color 0.15s;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.25);
}

#dec-sidebar-toggle:hover,
#dec-sidebar-toggle:focus {
    background: var(--color-bg-hover);
    color: var(--color-accent);
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

#dec-sidebar-toggle svg {
    width: 12px;
    height: 12px;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

/* Arrow points left (= "collapse") when sidebar is open */
#dec-sidebar-toggle svg.toggle-arrow {
    transform: rotate(0deg); /* left chevron = "collapse" (sidebar is open) */
}

/* Arrow points right (= "expand") when sidebar is collapsed */
body.sidebar-collapsed #dec-sidebar-toggle svg.toggle-arrow {
    transform: rotate(180deg);
}

/* Button slides to x=0 when collapsed */
body.sidebar-collapsed #dec-sidebar-toggle {
    left: 0;
}

/* Tablet: align button to narrower sidebar */
@media (max-width: 1024px) {
    #dec-sidebar-toggle {
        left: var(--sidebar-width-tablet);
    }
    body.sidebar-collapsed #dec-sidebar-toggle {
        left: 0;
    }
}

/* Mobile: hide the collapse toggle entirely (overlay system handles mobile) */
@media (max-width: 768px) {
    #dec-sidebar-toggle {
        display: none;
    }
    /* Prevent sidebar-collapsed from breaking mobile layout */
    body.sidebar-collapsed .decameron-layout {
        grid-template-columns: 1fr;
    }
    body.sidebar-collapsed .decameron-sidebar {
        width: auto !important;
        padding: inherit !important;
        border: inherit !important;
    }
    body.sidebar-collapsed .decameron-sidebar > * {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Dark mode: toggle button matches sidebar colour */
html.theme-dark #dec-sidebar-toggle {
    background: var(--color-bg-dark);
    border-color: var(--color-border);
    color: var(--color-text-dim);
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.5);
}

html.theme-dark #dec-sidebar-toggle:hover,
html.theme-dark #dec-sidebar-toggle:focus {
    background: var(--color-bg-hover);
    color: var(--color-accent);
}

/* ============================================================
   WCAG 1.4.11 — FOCUS RING: dark-mode --color-focus override
   Light mode: --color-focus = #7c3aed (5.70:1 on white, PASS)
   Dark mode:  --color-focus = #a78bfa (6.27:1 on #1a1a2e, PASS)
   ============================================================ */
html.theme-dark { --color-focus: #a78bfa; }

@media (prefers-color-scheme: dark) {
    html:not(.theme-light) { --color-focus: #a78bfa; }
}

/* Page-nav buttons sit on a light surface in light mode */
.dec-page-nav-prev:focus-visible,
.dec-page-nav-next:focus-visible,
.dec-page-nav-prev:focus,
.dec-page-nav-next:focus {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

/* ============================================================
   FONT ALIASES — map theme.json presets to legacy vars
   --font-ui and --font-base are already declared in :root above.
   These aliases ensure theme.json presets resolve the same fonts
   so blocks using var(--wp--preset--font-family--font-ui) etc. match.
   ============================================================ */

:root {
    --wp--preset--font-family--font-ui:   var(--font-ui);
    --wp--preset--font-family--font-base: var(--font-base);
}

/* ============================================================
   HOMEPAGE — dec-hp-* component system
   Replaces old dec-home-* classes for the new Custom HTML blocks.
   ============================================================ */

/* --- Hero -------------------------------------------------- */

.dec-hp-hero {
    background: linear-gradient(
        150deg,
        var(--color-accent-hero, #667eea) 0%,
        var(--color-hero-end,    #764ba2) 100%
    );
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72vh;
    padding: 5rem 2rem 4rem;
    text-align: center;
}

.dec-hp-hero-inner {
    max-width: 680px; /* narrower than sections — keeps hero copy tight */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.dec-hp-eyebrow {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.85;
    margin: 0 0 1.1rem;
}

.dec-hp-title {
    font-family: var(--font-ui);
    font-size: clamp(3rem, 10vw, 6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0 0 0.6rem;
    color: #fff;
}

.dec-hp-author {
    font-family: var(--font-base);
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-style: italic;
    opacity: 0.9;
    margin: 0 0 1.4rem;
}

.dec-hp-tagline {
    font-family: var(--font-ui);
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    line-height: 1.65;
    opacity: 0.88;
    margin: 0 0 2.25rem;
    max-width: 520px;
}

/* CTA buttons */
.dec-hp-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 3rem;
}

.dec-hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.7rem 2rem;
    border-radius: 50px;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.dec-hp-btn-primary {
    background: #fff;
    color: var(--color-accent-hero, #667eea);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

.dec-hp-btn-primary:hover,
.dec-hp-btn-primary:focus {
    transform: translateY(-2px);
    box-shadow: 0 7px 22px rgba(0,0,0,0.25);
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.dec-hp-btn-secondary {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 2px solid rgba(255,255,255,0.6);
    backdrop-filter: blur(4px);
}

.dec-hp-btn-secondary:hover,
.dec-hp-btn-secondary:focus {
    background: rgba(255,255,255,0.28);
    transform: translateY(-2px);
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Stats strip */
.dec-hp-stats {
    display: flex;
    align-items: center;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.3);
    padding-top: 2rem;
    width: 100%;
    max-width: 400px;
    justify-content: center;
}

.dec-hp-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 0.2rem;
}

.dec-hp-stat-n {
    font-family: var(--font-ui);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}

.dec-hp-stat-l {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.8;
}

.dec-hp-stat-div {
    width: 1px;
    height: 2.5rem;
    background: rgba(255,255,255,0.35);
    flex-shrink: 0;
}

/* --- Shared section chrome --------------------------------- */

.dec-hp-section-title {
    font-family: var(--font-ui);
    font-size: clamp(1.4rem, 3.5vw, 1.9rem);
    font-weight: 700;
    color: var(--color-bg-dark);
    margin: 0 0 2rem;
    padding-bottom: 0.6rem;
    border-bottom: 3px solid var(--color-accent);
}

/* --- Features section -------------------------------------- */

.dec-hp-features {
    padding: 4.5rem 0;
}

.dec-hp-features > * {
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

/* Section title needs same constraint */
.dec-hp-features .dec-hp-section-title {
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.dec-hp-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    /* width is now governed by .dec-hp-features > * */
}

.dec-hp-card {
    background: var(--color-surface-card);
    border-radius: 10px;
    border-left: 4px solid var(--color-accent);
    padding: 1.75rem 1.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.dec-hp-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.09);
}

.dec-hp-card-icon {
    font-size: 1.6rem;
    margin-bottom: 0.8rem;
    line-height: 1;
}

.dec-hp-card h3 {
    font-family: var(--font-ui);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-bg-dark);
    margin: 0 0 0.6rem;
}

.dec-hp-card p {
    font-family: var(--font-base);
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--color-text-faint);
    margin: 0;
}

/* --- Explore section --------------------------------------- */

.dec-hp-explore {
    background: var(--color-surface-subtle);
    padding: 4rem 0;
}

.dec-hp-explore > * {
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.dec-hp-explore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.dec-hp-explore-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.5rem 1.75rem;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--color-border-light);
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    min-height: 44px;
}

.dec-hp-explore-card:hover,
.dec-hp-explore-card:focus {
    border-color: var(--color-accent);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.12);
    transform: translateY(-2px);
    outline: none;
}

.dec-hp-explore-card:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.dec-hp-explore-title {
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-accent-dark);
}

.dec-hp-explore-sub {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--color-text-faint);
    line-height: 1.5;
}

/* --- Homepage responsive ----------------------------------- */

@media (max-width: 768px) {
    .dec-hp-hero {
        min-height: 60vh;
        padding: 3.5rem 1.25rem 3rem;
    }

    .dec-hp-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 320px;
    }

    .dec-hp-btn {
        width: 100%;
    }

    .dec-hp-stats {
        max-width: 100%;
    }

    .dec-hp-stat-n {
        font-size: 1.8rem;
    }

    .dec-hp-features,
    .dec-hp-explore {
        padding: 3rem 0;
    }

    .dec-hp-features > *,
    .dec-hp-explore > * {
        padding-inline: 1.25rem;
    }
}

/* --- Homepage dark mode ------------------------------------ */

@media (prefers-color-scheme: dark) {
    html:not(.theme-light) .dec-hp-section-title { color: var(--color-text-light); }
    html:not(.theme-light) .dec-hp-features       { background: var(--color-dark-bg); }
    html:not(.theme-light) .dec-hp-card           { background: var(--color-bg-dark); }
    html:not(.theme-light) .dec-hp-card h3        { color: var(--color-text-light); }
    html:not(.theme-light) .dec-hp-card p         { color: var(--color-dark-muted); }
    html:not(.theme-light) .dec-hp-explore        { background: var(--color-bg-nav); }
    html:not(.theme-light) .dec-hp-explore-card   { background: var(--color-bg-dark); border-color: var(--color-border); }
    html:not(.theme-light) .dec-hp-explore-title  { color: var(--color-accent); }
    html:not(.theme-light) .dec-hp-explore-sub    { color: var(--color-dark-muted); }
}

html.theme-dark .dec-hp-section-title { color: var(--color-text-light); }
html.theme-dark .dec-hp-features       { background: var(--color-dark-bg); }
html.theme-dark .dec-hp-card           { background: var(--color-bg-dark); }
html.theme-dark .dec-hp-card h3        { color: var(--color-text-light); }
html.theme-dark .dec-hp-card p         { color: var(--color-dark-muted); }
html.theme-dark .dec-hp-explore        { background: var(--color-bg-nav); }
html.theme-dark .dec-hp-explore-card   { background: var(--color-bg-dark); border-color: var(--color-border); }
html.theme-dark .dec-hp-explore-title  { color: var(--color-accent); }
html.theme-dark .dec-hp-explore-sub    { color: var(--color-dark-muted); }

/* ============================================================
   SITE FOOTER
   Used by parts/footer.html on all non-Decameron pages.
   page-decameron.php calls wp_footer() which runs our hook,
   but the footer element is not output there — so no conflict.
   ============================================================ */

.dec-site-footer {
    background: var(--color-bg-dark);
    color: var(--color-text-dim);
    border-top: 2px solid var(--color-accent);
    padding: 2rem 2rem;
}

.dec-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

/* Brand */
.dec-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.dec-footer-brand .wp-block-site-title,
.dec-footer-site-title {
    font-family: var(--font-ui);
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--color-text-light) !important;
    text-decoration: none !important;
    margin: 0 !important;
}

.dec-footer-brand .wp-block-site-title a {
    color: inherit !important;
    text-decoration: none !important;
}

.dec-footer-tagline {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--color-text-dim);
    margin: 0 !important;
    opacity: 0.8;
}

/* Footer nav */
.dec-footer-nav .wp-block-navigation__container,
.dec-footer-nav ul {
    gap: 0.25rem !important;
    flex-wrap: wrap;
}

.dec-footer-nav a {
    font-family: var(--font-ui);
    font-size: 0.825rem;
    color: var(--color-text-dim);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.dec-footer-nav a:hover,
.dec-footer-nav a:focus {
    color: var(--color-accent);
    background: rgba(255,255,255,0.06);
}

/* Copyright line */
.dec-footer-copy {
    font-family: var(--font-ui);
    font-size: 0.775rem;
    color: var(--color-text-dim);
    opacity: 0.65;
    margin: 0 !important;
    text-align: right;
}

@media (max-width: 768px) {
    .dec-footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .dec-footer-copy {
        text-align: left;
        opacity: 0.55;
    }
}

/* ============================================================
   SUPPRESS TWENTYTWENTYFIVE THEME FOOTER / PAGE CHROME
   Block templates handle layout; kill any residual TT5 output
   that bleeds through on pages not using page-decameron.php.
   ============================================================ */

/* TT5 injects a <footer class="wp-block-template-part site-footer"> */
/* We replace it with our own — hide the parent theme's copy. */
.wp-site-blocks > footer.wp-block-template-part:not(.dec-site-footer) {
    display: none !important;
}

/* Kill TT5 default body padding that creates unwanted whitespace */
.wp-site-blocks {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Prevent TT5 global-styles from resetting our layout on .entry-content */
.entry-content {
    padding: 0 !important;
}

/* ============================================================
   NORMAL PAGE LAYOUT — dec-page-main / dec-page-header / dec-page-body
   Used by templates/page.html for all standard (non-Decameron) pages.
   ============================================================ */

/* ── Outer wrapper ────────────────────────────────────────── */

.dec-page-main {
    min-height: calc(100vh - var(--nav-height) - 120px); /* keep footer at bottom */
    background: var(--color-surface-card);
}

/* ── Page header band ─────────────────────────────────────── */

.dec-page-header {
    background: linear-gradient(
        160deg,
        var(--color-bg-dark)   0%,
        #16213e               100%
    );
    /* Band is full-width. Inner content uses the same constraint as .dec-page-body */
    padding: 3.5rem 0 3rem;
}

/* A centred inner column — same width and gutter as .dec-page-body */
.dec-page-header-inner {
    max-width: 780px;
    margin-inline: auto;
    padding-inline: 2rem;
    box-sizing: border-box;
}

/* Title typography */
.dec-page-header .dec-page-h1,
.dec-page-header .wp-block-post-title {
    font-family: var(--font-ui) !important;
    font-size: clamp(1.6rem, 4vw, 2.5rem) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: -0.02em;
}

/* Accent rule below title */
.dec-page-header::after {
    content: '';
    display: block;
    height: 3px;
    background: var(--color-accent);
    margin-top: 0; /* sits flush under the band */
}

/* ── Page body ────────────────────────────────────────────── */

.dec-page-body {
    max-width: 780px;
    margin-inline: auto;
    padding: 3rem 2rem 4rem;
    box-sizing: border-box;
}

/* ── Typography inside page body ─────────────────────────── */

.dec-page-body p,
.dec-page-body li {
    font-family: var(--font-base);
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--color-text-body);
}

.dec-page-body h2 {
    font-family: var(--font-ui);
    font-size: clamp(1.25rem, 3vw, 1.7rem);
    font-weight: 700;
    color: var(--color-bg-dark);
    margin: 2.5rem 0 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--color-accent);
}

.dec-page-body h3 {
    font-family: var(--font-ui);
    font-size: clamp(1.05rem, 2.5vw, 1.3rem);
    font-weight: 700;
    color: var(--color-bg-dark);
    margin: 2rem 0 0.75rem;
}

.dec-page-body h4,
.dec-page-body h5,
.dec-page-body h6 {
    font-family: var(--font-ui);
    font-weight: 700;
    color: var(--color-bg-dark);
    margin: 1.5rem 0 0.5rem;
}

.dec-page-body a {
    color: var(--color-accent-dark);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: 3px;
    transition: color 0.15s;
}

.dec-page-body a:hover {
    color: var(--color-accent);
}

.dec-page-body blockquote {
    border-left: 4px solid var(--color-accent);
    margin: 1.75rem 0;
    padding: 0.75rem 1.25rem;
    background: var(--color-surface-subtle);
    font-style: italic;
    color: var(--color-text-secondary);
    border-radius: 0 6px 6px 0;
}

.dec-page-body blockquote p {
    margin: 0;
}

.dec-page-body ul,
.dec-page-body ol {
    padding-left: 1.5rem;
    margin: 1rem 0;
}

.dec-page-body li {
    margin-bottom: 0.4rem;
}

.dec-page-body hr {
    border: none;
    border-top: 1px solid var(--color-border-mid);
    margin: 2.5rem 0;
}

.dec-page-body .wp-block-table {
    width: 100%;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.dec-page-body table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-ui);
    font-size: 0.9rem;
}

.dec-page-body th {
    background: var(--color-bg-dark);
    color: #fff;
    font-weight: 600;
    text-align: left;
    padding: 0.65rem 0.9rem;
}

.dec-page-body td {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--color-border-mid);
    color: var(--color-text-body);
}

.dec-page-body tr:nth-child(even) td {
    background: var(--color-surface-subtle);
}

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

@media (max-width: 768px) {
    .dec-page-header {
        padding: 2.5rem 0 2rem;
    }

    .dec-page-header-inner {
        padding-inline: 1.25rem;
    }

    .dec-page-body {
        padding: 2rem 1.25rem 3rem;
    }
}

/* ── Dark mode ────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
    html:not(.theme-light) .dec-page-main          { background: var(--color-dark-bg); }
    html:not(.theme-light) .dec-page-body p,
    html:not(.theme-light) .dec-page-body li       { color: var(--color-dark-paragraph); }
    html:not(.theme-light) .dec-page-body h2,
    html:not(.theme-light) .dec-page-body h3,
    html:not(.theme-light) .dec-page-body h4       { color: var(--color-text-light); }
    html:not(.theme-light) .dec-page-body a        { color: var(--color-accent); }
    html:not(.theme-light) .dec-page-body blockquote {
        background: var(--color-dark-surface);
        color: var(--color-dark-arg-text);
    }
    html:not(.theme-light) .dec-page-body td       { color: var(--color-dark-paragraph); }
    html:not(.theme-light) .dec-page-body tr:nth-child(even) td { background: var(--color-dark-surface); }
    html:not(.theme-light) .dec-page-body th       { background: var(--color-bg-nav); }
}

html.theme-dark .dec-page-main                     { background: var(--color-dark-bg); }
html.theme-dark .dec-page-body p,
html.theme-dark .dec-page-body li                  { color: var(--color-dark-paragraph); }
html.theme-dark .dec-page-body h2,
html.theme-dark .dec-page-body h3,
html.theme-dark .dec-page-body h4                  { color: var(--color-text-light); }
html.theme-dark .dec-page-body a                   { color: var(--color-accent); }
html.theme-dark .dec-page-body blockquote {
    background: var(--color-dark-surface);
    color: var(--color-dark-arg-text);
}
html.theme-dark .dec-page-body td                  { color: var(--color-dark-paragraph); }
html.theme-dark .dec-page-body tr:nth-child(even) td { background: var(--color-dark-surface); }
html.theme-dark .dec-page-body th                  { background: var(--color-bg-nav); }

/* ============================================================
   INDICES PAGE — dec-indices / dec-idx-* component system
   Used by the Custom HTML block on the Indices landing page.
   ============================================================ */

.dec-indices {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Intro paragraph */
.dec-indices-intro {
    font-family: var(--font-base);
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
    margin: 0 0 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border-mid);
}

/* ── Section ──────────────────────────────────────────────── */

.dec-idx-section {
    padding: 2rem 0;
    /* Two-column grid: icon column | content column.
       Pills row reuses the same grid so alignment is structural, not arithmetic. */
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    grid-template-rows: auto auto;
    column-gap: 1.25rem;
    row-gap: 0;
}

/* ── Section header row (icon + title/desc) ───────────────── */

.dec-idx-header {
    /* Spans both columns so it can place icon and text independently */
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    column-gap: 1.25rem;
    align-items: start;
    margin-bottom: 0.9rem;
}

/* Subgrid not supported everywhere — fallback */
@supports not (grid-template-columns: subgrid) {
    .dec-idx-header {
        display: flex;
        gap: 1.25rem;
    }
}

.dec-idx-icon {
    grid-column: 1;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-dark);
    color: var(--color-accent);
    font-size: 1.15rem;
    border-radius: 8px;
    margin-top: 0.15rem;
    user-select: none;
}

/* Title + desc wrapper sits in column 2 */
.dec-idx-header > div {
    grid-column: 2;
    min-width: 0;
}

.dec-idx-title {
    font-family: var(--font-ui);
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
    font-weight: 700;
    color: var(--color-bg-dark);
    margin: 0 0 0.35rem;
    line-height: 1.2;
}

.dec-idx-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}

.dec-idx-title a:hover,
.dec-idx-title a:focus {
    color: var(--color-accent-dark);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: 3px;
    outline: none;
}

.dec-idx-title a:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: 2px;
}

.dec-idx-desc {
    font-family: var(--font-base);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-faint);
    margin: 0;
}

/* ── Sub-links list ───────────────────────────────────────── */
/* Sits in column 2 of the section grid — structurally aligned with title */

.dec-idx-sub {
    grid-column: 2; /* same column as title/desc — guaranteed alignment */
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dec-idx-sub li {
    margin: 0;
}

.dec-idx-sub-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.85rem 0.35rem 0.7rem;
    background: transparent;
    border: 1px solid var(--color-border-light);
    border-radius: 100px; /* full pill */
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    min-height: 32px;
    cursor: pointer;
}

/* Arrow glyph — injected via ::before so no markup change needed */
.dec-idx-sub-link::before {
    content: '→';
    font-size: 0.7rem;
    color: var(--color-accent);
    flex-shrink: 0;
    transition: transform 0.15s;
}

.dec-idx-sub-link:hover,
.dec-idx-sub-link:focus {
    background: var(--color-speaker-bg); /* very light violet tint */
    border-color: var(--color-accent);
    outline: none;
}

.dec-idx-sub-link:hover::before {
    transform: translateX(2px);
}

.dec-idx-sub-link:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.dec-idx-sub-title {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-body);
    line-height: 1;
    white-space: nowrap;
}

/* Description hidden in pill mode — screen-reader accessible only */
.dec-idx-sub-desc {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── Divider ──────────────────────────────────────────────── */

.dec-idx-divider {
    height: 1px;
    background: var(--color-border-mid);
    margin: 0;
}

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

@media (max-width: 600px) {
    .dec-idx-section {
        grid-template-columns: 2rem 1fr;
        column-gap: 0.75rem;
    }

    .dec-idx-icon {
        width: 2rem;
        height: 2rem;
        font-size: 0.95rem;
    }
}

/* ── Dark mode ────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
    html:not(.theme-light) .dec-indices-intro       { color: var(--color-dark-muted); border-bottom-color: var(--color-border); }
    html:not(.theme-light) .dec-idx-icon            { background: var(--color-bg-nav); }
    html:not(.theme-light) .dec-idx-title           { color: var(--color-text-light); }
    html:not(.theme-light) .dec-idx-title a:hover   { color: var(--color-accent); }
    html:not(.theme-light) .dec-idx-desc            { color: var(--color-dark-muted); }
    html:not(.theme-light) .dec-idx-sub-link        { border-color: var(--color-border); }
    html:not(.theme-light) .dec-idx-sub-link:hover  { background: rgba(167,139,250,0.1); border-color: var(--color-accent); }
    html:not(.theme-light) .dec-idx-sub-title       { color: var(--color-text-light); }
    html:not(.theme-light) .dec-idx-divider         { background: var(--color-border); }
}

html.theme-dark .dec-indices-intro                  { color: var(--color-dark-muted); border-bottom-color: var(--color-border); }
html.theme-dark .dec-idx-icon                       { background: var(--color-bg-nav); }
html.theme-dark .dec-idx-title                      { color: var(--color-text-light); }
html.theme-dark .dec-idx-title a:hover              { color: var(--color-accent); }
html.theme-dark .dec-idx-desc                       { color: var(--color-dark-muted); }
html.theme-dark .dec-idx-sub-link                   { border-color: var(--color-border); }
html.theme-dark .dec-idx-sub-link:hover             { background: rgba(167,139,250,0.1); border-color: var(--color-accent); }
html.theme-dark .dec-idx-sub-title                  { color: var(--color-text-light); }
html.theme-dark .dec-idx-divider                    { background: var(--color-border); }

/* ============================================================
   HOMEPAGE PROSE SECTION — dec-hp-section
   A Custom HTML wrapper for native WP blocks on the front page.
   Constrains width and provides typography matching dec-page-body.
   Usage: wrap a Custom HTML block around your WP content blocks.
   ============================================================ */

.dec-hp-section {
    padding: 4rem 0;
}

.dec-hp-section-inner {
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

/* Native block typography inside the section */
.dec-hp-section p,
.dec-hp-section li {
    font-family: var(--font-base);
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--color-text-body);
}

.dec-hp-section h2 {
    font-family: var(--font-ui);
    font-size: clamp(1.25rem, 3vw, 1.7rem);
    font-weight: 700;
    color: var(--color-bg-dark);
    margin: 0 0 1.25rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--color-accent);
}

.dec-hp-section h3 {
    font-family: var(--font-ui);
    font-size: clamp(1.05rem, 2.5vw, 1.3rem);
    font-weight: 700;
    color: var(--color-bg-dark);
    margin: 1.75rem 0 0.75rem;
}

.dec-hp-section blockquote {
    border-left: 4px solid var(--color-accent);
    margin: 1.75rem 0;
    padding: 0.75rem 1.25rem;
    background: var(--color-surface-subtle);
    font-style: italic;
    color: var(--color-text-secondary);
    border-radius: 0 6px 6px 0;
}

.dec-hp-section a {
    color: var(--color-accent-dark);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: 3px;
}

/* Alternate background variant */
.dec-hp-section--tinted {
    background: var(--color-surface-subtle);
}

@media (max-width: 768px) {
    .dec-hp-section {
        padding: 2.5rem 0;
    }

    .dec-hp-section-inner {
        padding-inline: 1.25rem;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    html:not(.theme-light) .dec-hp-section p,
    html:not(.theme-light) .dec-hp-section li      { color: var(--color-dark-paragraph); }
    html:not(.theme-light) .dec-hp-section h2,
    html:not(.theme-light) .dec-hp-section h3      { color: var(--color-text-light); }
    html:not(.theme-light) .dec-hp-section--tinted { background: var(--color-dark-surface); }
    html:not(.theme-light) .dec-hp-section blockquote {
        background: var(--color-dark-surface);
        color: var(--color-dark-arg-text);
    }
}

html.theme-dark .dec-hp-section p,
html.theme-dark .dec-hp-section li                 { color: var(--color-dark-paragraph); }
html.theme-dark .dec-hp-section h2,
html.theme-dark .dec-hp-section h3                 { color: var(--color-text-light); }
html.theme-dark .dec-hp-section--tinted            { background: var(--color-dark-surface); }
html.theme-dark .dec-hp-section blockquote {
    background: var(--color-dark-surface);
    color: var(--color-dark-arg-text);
}

/* ============================================================
   BREAKOUT BLOCK — dec-breakout
   Escapes the 780px column AND any ancestor padding to fill the
   full available viewport width (minus the sidebar on desktop).

   Use by wrapping any Custom HTML block in:
     <div class="dec-breakout"> … </div>

   Technique: position relative on the body anchors the stacking
   context; the breakout uses left/transform to recentre itself
   on the viewport, then 100vw width. A right-padding offset
   compensates for the scrollbar so the map never overlaps it.
   ============================================================ */

/* Anchor needed so the breakout is positioned relative to the
   page body flow, not the viewport */
.dec-page-body {
    position: relative;
}

.dec-page-body .dec-breakout {
    position: relative;
    /* Step 1: move the left edge to the centre of the viewport */
    left: 50%;
    /* Step 2: pull back by half the viewport width */
    transform: translateX(-50%);
    /* Step 3: fill the full viewport width */
    width: 100vw;
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 2rem;
}

.dec-page-body .dec-breakout:last-child {
    margin-bottom: 0;
}

/* Padded variant: adds standard gutters for non-map full-bleed content */
.dec-page-body .dec-breakout--padded {
    padding-inline: 2rem;
}

@media (max-width: 768px) {
    .dec-page-body .dec-breakout--padded {
        padding-inline: 1.25rem;
    }
}

/* ============================================================
   DW 2.0 VISUAL IDENTITY OVERRIDES
   Brown + legacy Decameron Web continuity, with AA contrast.
   ============================================================ */

:root {
    --color-bg-dark: #2b1b16;
    --color-bg-nav: #1f120f;
    --color-text-light: #fffaf0;
    --color-text-dim: #e8ddc9;
    --color-accent: #c00404;
    --color-accent-dark: #8f0000;
    --color-border: #5f4738;

    --color-italian-bg: #fffaf0;
    --color-italian-border: #8a5a23;
    --color-english-bg: #f8f4e8;
    --color-english-border: #5c6f7c;

    --color-argument-bg: #fff3cc;
    --color-argument-border: #946c12;

    --color-name-person: #8f0000;
    --color-name-place: #1b607a;
    --color-accent-hero: #c00404;
    --color-bg-hover: #44291f;
    --color-bg-active: #3a2018;
    --color-milestone: #8f0000;
    --color-focus: #005ea8;

    --color-surface-subtle: #f4efd9;
    --color-surface-card: #fffdf6;
    --color-border-light: #d8c9a9;
    --color-border-faint: #eadfca;
    --color-border-mid: #d8c9a9;
    --color-speaker-bg: #f4e3c1;
    --color-stanza-border: #946c12;
    --color-hero-end: #2b1b16;
}

.skip-link,
.screen-reader-only-header .skip-link {
    background: #fff;
    color: #111;
    border: 3px solid var(--color-focus);
}

.dec-top-nav {
    background: var(--color-bg-nav);
    border-bottom: 4px solid var(--color-accent);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.dec-top-nav ul,
.dec-top-nav .menu {
    justify-content: center;
    max-width: none;
    margin-inline: auto;
    padding: 0 52px;
    flex: 1 1 auto;
}

.dec-top-nav-logo {
    flex: 0 0 auto;
    background: #f4efd9;
    border-bottom: 1px solid #c8ad72;
}

.dec-top-nav .dec-top-nav-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    padding: 0.25rem 1rem 0.2rem;
    text-decoration: none;
}

.dec-top-nav .dec-top-nav-logo img {
    display: block;
    width: min(220px, 68vw);
    height: auto;
}

.dec-top-nav a {
    font-family: var(--font-ui);
    color: #fffaf0;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dec-top-nav .main-menu > li > a,
.dec-top-nav .menu > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    box-sizing: border-box;
    padding: 0.42rem 0.95rem;
}

.dec-top-nav a:hover,
.dec-top-nav a:focus,
.dec-top-nav .current-menu-item > a,
.dec-top-nav .current-page-ancestor > a,
.dec-top-nav .current-menu-ancestor > a {
    background: #fffaf0;
    color: #2b1b16;
}

.dec-top-nav a:focus,
.dec-top-subnav-toggle:focus,
.dec-theme-toggle:focus {
    outline: 3px solid #fff;
    outline-offset: -3px;
}

.dec-top-nav .sub-menu {
    background: #fffaf0;
    border-color: var(--color-border-light);
    border-top-color: var(--color-accent);
}

.dec-top-nav .sub-menu a {
    color: #2b1b16;
    text-transform: none;
    letter-spacing: 0;
}

.dec-top-nav .sub-menu a:hover,
.dec-top-nav .sub-menu a:focus {
    background: #f4efd9;
    color: #8f0000;
}

.dec-theme-toggle {
    color: #fffaf0;
}

.dec-hp-hero {
    position: relative;
    min-height: 74vh;
    box-sizing: border-box;
    align-items: center;
    overflow: hidden;
    background:
        linear-gradient(rgba(43, 27, 22, 0.05), rgba(43, 27, 22, 0.05)),
        var(--color-surface-subtle);
    color: #2b1b16;
    padding: 5rem 2rem 4rem;
}

.dec-hp-hero::before,
.dec-hp-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    width: min(920px, calc(100% - 2rem));
    height: 1px;
    transform: translateX(-50%);
    background: #c8ad72;
}

.dec-hp-hero::before {
    top: 3rem;
}

.dec-hp-hero::after {
    bottom: 3rem;
}

.dec-hp-hero-inner {
    position: relative;
    max-width: 780px;
    padding: 3rem 2rem;
    border-top: 6px solid var(--color-accent);
    border-bottom: 1px solid #c8ad72;
    background: rgba(255, 250, 240, 0.72);
}

.dec-hp-hero-inner .dec-hp-title:first-child {
    margin-top: 0;
}

.dec-hp-eyebrow {
    color: #6b4b36;
    opacity: 1;
}

.dec-hp-title {
    font-family: var(--font-base);
    font-size: clamp(3rem, 8vw, 5.6rem);
    font-weight: 400;
    color: #2b1b16;
    letter-spacing: 0;
}

.dec-hp-author {
    color: #5c4333;
    opacity: 1;
}

.dec-hp-tagline {
    color: #342019;
    opacity: 1;
    font-family: var(--font-base);
    font-size: clamp(1rem, 2vw, 1.15rem);
}

.dec-hp-btn {
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-sizing: border-box;
}

.dec-hp-btn-primary {
    background: var(--color-accent);
    color: #fff;
    box-shadow: none;
}

.dec-hp-btn-primary:hover,
.dec-hp-btn-primary:focus {
    background: #8f0000;
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

.dec-hp-btn-secondary {
    background: transparent;
    color: #2b1b16;
    border: 2px solid #6b4b36;
    backdrop-filter: none;
}

.dec-hp-btn-secondary:hover,
.dec-hp-btn-secondary:focus {
    background: #2b1b16;
    color: #fffaf0;
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

.dec-hp-stats {
    border-top-color: #c8ad72;
}

.dec-hp-stat-n {
    color: #8f0000;
}

.dec-hp-stat-l {
    color: #5c4333;
    opacity: 1;
}

.dec-hp-stat-div {
    background: #c8ad72;
}

.dec-hp-section-title,
.dec-page-body h2,
.dec-hp-section h2 {
    color: #2b1b16;
    border-bottom-color: var(--color-accent);
}

.dec-hp-features,
.dec-page-main {
    background: #fffdf6;
}

.dec-hp-card,
.dec-hp-explore-card {
    border-radius: 4px;
    box-shadow: none;
}

.dec-hp-card {
    background: #fffaf0;
    border: 1px solid var(--color-border-light);
    border-top: 4px solid var(--color-accent);
}

.dec-hp-card:hover {
    transform: none;
    box-shadow: 0 0 0 3px #f4efd9;
}

.dec-hp-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2rem;
    padding: 0.2rem 0.45rem;
    border: 1px solid #c8ad72;
    color: #8f0000;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.dec-hp-card h3,
.dec-hp-explore-title {
    color: #2b1b16;
}

.dec-hp-card p,
.dec-hp-explore-sub {
    color: #3f342e;
}

.dec-hp-explore {
    background: #f4efd9;
}

.dec-hp-explore-card:hover,
.dec-hp-explore-card:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(192, 4, 4, 0.16);
    transform: none;
}

.dec-page-header {
    background: #2b1b16;
}

.dec-page-header::after {
    background: var(--color-accent);
}

.dec-indices-intro,
.dec-idx-desc {
    color: #3f342e;
}

.dec-idx-icon {
    background: #2b1b16;
    color: #fffaf0;
    border-radius: 4px;
    font-family: var(--font-ui);
    font-weight: 800;
}

.dec-idx-sub-link {
    border-radius: 4px;
    min-height: 44px;
}

.dec-idx-sub-link::before {
    color: #8f0000;
}

.dec-site-footer {
    background: #2b1b16;
    border-top-color: var(--color-accent);
}

@media (max-width: 768px) {
    .dec-top-nav {
        display: block;
    }

    .dec-top-nav-logo {
        display: flex !important;
        min-height: 38px;
        padding: 0.25rem 0.75rem 0.15rem;
    }

    .dec-top-nav ul,
    .dec-top-nav .menu {
        max-width: none;
        padding: 0;
    }

    .dec-nav-site-title {
        display: flex;
        align-items: center;
        min-width: 0;
    }

    .dec-nav-site-logo {
        display: none;
    }

    .dec-hp-hero {
        min-height: auto;
        padding: 3rem 1rem;
    }

    .dec-hp-hero-inner {
        padding: 2rem 1rem;
    }
}