/* ============================================================================
   THE MAMMOTH STEPPES - WEBSITE STYLES
   A fantasy novel website with ice age theme
   Color Scheme: Ice blues and warm golds to evoke frozen steppes and warmth
   Typography: Cinzel (headings) + Lora (body) for elegant, literary feel
   ============================================================================ */

/* ========== CSS CUSTOM PROPERTIES (VARIABLES) ========== */

:root {
    /* Warm parchment tones */
    --parchment-base: #fae3ae;
    --parchment-shadow: #625b49;
    --ink-color: #2c241a;
    /* Soft charcoal-brown for better legibility */

    /* Primary Color Palette - Ice Blue (cold) and Warm Gold (warmth/hope) */
    --ice-blue: #4A90E2;
    --ice-blue-dark: #2E5A8C;
    --ice-blue-light: #7AB3F5;
    --warm-gold: #D4AF37;
    --warm-gold-dark: #B8941F;
    --warm-gold-light: #E8C968;

    /* Neutral Colors - Parchment theme for readability */
    --parchment: #F5F1E8;
    /* Main background - aged parchment */
    --dark-text: #2C2C2C;
    /* Primary text color */
    --medium-text: #555555;
    /* Secondary text, captions */
    --light-bg: #FAFAF8;
    /* Subtle backgrounds, blockquotes */
    --white: #FFFFFF;
    /* Card backgrounds, pure white */
    --pale-gold-bg: #F9F3E3;
    /* Pale gold background for jump links */

    /* Typography Stack */
    --heading-font: 'Libre Bodoni', serif;
    /* Elegant serif for headings */
    --body-font: 'Lora', serif;
    /* Readable serif for body text */
}

.reader-container {
    background-color: var(--parchment-base);
    /* The gradient adds subtle "stains" and aging to the edges */
    /*background-image:
        radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.03) 100%),
        url("https://firebasestorage.googleapis.com/v0/b/gen-lang-client-0131429414.firebasestorage.app/o/site-content%2Ffaded-parchment.png?alt=media&token=79866b54-409c-4726-8d9a-0e041492a61e");
        */
    /* Subtle paper grain */
    color: var(--ink-color);
    padding: 3rem;
    max-width: 800px;
    margin: 2rem auto;

    /* Adds the "lifted sheet" effect */
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.1),
        0 10px 20px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--parchment-shadow);
    border-radius: 2px;
    position: relative;
    line-height: 1.8;
    /* Increased spacing for easier reading */
}

/* Adds a decorative "ragged" edge look to the top */
.reader-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(45deg, var(--parchment-shadow) 25%, transparent 25%) -5px 0,
        linear-gradient(-45deg, var(--parchment-shadow) 25%, transparent 25%) -5px 0;
    background-size: 10px 10px;
    z-index: 2;
    /* Must be above ::after noise overlay (z-index: 1) */
}

/* Adds subtle paper grain/noise texture over the parchment background */
.reader-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.4;
    pointer-events: none;
    /* Allows clicks to pass through to content */
    filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E#noise");
    mix-blend-mode: multiply;
    z-index: 1;
}

/* Ensure reader content stays above the noise layer */
.reader-container>* {
    position: relative;
    z-index: 2;
}

/* ========== GLOBAL RESET & BASE STYLES ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--body-font);
    color: var(--dark-text);
    background-color: var(--parchment);
    line-height: 1.8;
    /* Fluid base: 16px on small screens → 20px on wide displays */
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading-font);
    color: var(--ice-blue-dark);
    margin-bottom: 1rem;
    font-weight: 600;
}

h1 {
    /* Fluid: ~2rem on phones → ~5rem on large TVs */
    font-size: clamp(2rem, 5vw + 0.5rem, 5.5rem);
    margin-bottom: 1.5rem;
}

h2 {
    /* Fluid: ~1.6rem on phones → ~3rem on large TVs */
    font-size: clamp(1.6rem, 2.5vw + 0.75rem, 3rem);
    margin-top: 2rem;
    border: none;
    padding-bottom: 0.5rem;
}

h3 {
    /* Fluid: ~1.3rem on phones → ~2rem on large TVs */
    font-size: clamp(1.3rem, 1.5vw + 0.5rem, 2rem);
    color: var(--ice-blue);
    margin-top: 1.5rem;
}

.scene-heading {
    text-align: center;
    border: none;
}

.scene-heading::before {
    content: "";
    display: block;
    height: 1px;
    max-width: 300px;
    margin: 0 auto 1rem;
    background: linear-gradient(to right, transparent, var(--warm-gold), transparent);
}

p {
    margin-bottom: 1.2rem;
}

/* Navigation */
nav {
    background: linear-gradient(135deg, var(--ice-blue-dark) 0%, var(--ice-blue) 100%);
    padding: 1rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

nav .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav .site-title {
    font-family: var(--heading-font);
    font-size: 1.5rem;
    color: var(--warm-gold);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 1px;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;
}

nav a {
    color: var(--white);
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s ease;
    font-family: var(--heading-font);
}

nav a:hover {
    color: var(--warm-gold-light);
}

nav a.active {
    color: var(--warm-gold);
    border-bottom: 2px solid var(--warm-gold);
}

/* Main Content Container */
/* Top padding accounts for the fixed hamburger menu button (50px + 1.5rem offset) */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 2rem 3rem;
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 4rem 2rem;
    background: linear-gradient(to bottom, var(--ice-blue-light) 0%, var(--parchment) 100%);
    margin-bottom: 3rem;
}


.hero h1 {
    color: var(--ice-blue-dark);
    margin-bottom: 0.5rem;
    /* Enhanced viewport-based scaling for smoother responsiveness */
    font-size: clamp(2.5rem, 8vw, 5.5rem);
    line-height: 1.1;
}

.hero .subtitle {
    font-style: italic;
    color: var(--medium-text);
    /* Fluid: ~1rem on phones → ~1.8rem on large TVs */
    font-size: clamp(1rem, 1.2vw + 0.5rem, 1.8rem);
    margin-bottom: 1rem;
}

/* Content Cards */
.card {
    background: var(--white);
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--warm-gold);
}

.card h2 {
    color: var(--ice-blue-dark);
    margin-top: 0;
}

/* Grid Layout for Cards */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.card-grid .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-grid .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* Section Dividers */
.section {
    margin: 3rem 0;
}

.divider {
    height: 2px;
    background: linear-gradient(to right, var(--ice-blue) 0%, var(--warm-gold) 50%, var(--ice-blue) 100%);
    margin: 3rem 0;
}

/* Links */
a {
    color: var(--ice-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--warm-gold);
}

/* ========== JUMP LINKS (CROSS-PAGE NAVIGATION) ========== */
/* Styled navigation links between pages with consistent pale gold background
   Used for "Explore Further", "Continue Exploring", and carousel navigation links */

.jump-link {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--pale-gold-bg);
    color: var(--ice-blue-dark);
    border: 2px solid var(--warm-gold);
    border-radius: 6px;
    text-decoration: none;
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.jump-link:hover {
    background: var(--warm-gold);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Blockquotes */
blockquote {
    border-left: 4px solid var(--warm-gold);
    margin: 2rem 0;
    font-style: italic;
    color: var(--medium-text);
    background: var(--light-bg);
    padding: 1.5rem;
    border-radius: 4px;
}

/* Lists */
ul,
ol {
    margin-left: 2rem;
    margin-bottom: 1.5rem;
}

li {
    margin-bottom: 0.5rem;
}

/* Footer */
footer {
    background: var(--ice-blue-dark);
    color: var(--white);
    text-align: center;
    padding: 2rem;
    margin-top: 4rem;
}

footer p {
    margin: 0;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-contact {
    margin-top: 0.75rem;
}

.visit-counter {
    display: block;
    margin-top: 1rem;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    color: var(--white);
    opacity: 0;
    letter-spacing: 0.1em;
    transition: opacity 0.3s ease;
}

footer:hover .visit-counter {
    opacity: 0.45;
}

.contact-link {
    color: var(--warm-gold);
    text-decoration: none;
    font-family: var(--heading-font);
    font-size: 0.95rem;
    transition: color 0.3s ease;
    display: inline-block;
}

.contact-link:hover {
    color: var(--warm-gold-light);
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    nav .container {
        flex-direction: column;
        gap: 1rem;
    }

    nav ul {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    /* h1 and h2 sizes are now handled by clamp() above */

    .container {
        padding: 5rem 1rem 2rem;
    }

    .card-grid {
        grid-template-columns: 1fr;
    }
}

/* Special Elements */
.highlight {
    color: var(--warm-gold-dark);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
    font-weight: 600;
}

.emphasis {
    color: var(--ice-blue-dark);
    font-weight: 600;
}

/* Responsive Images */
img {
    max-width: 100%;
    height: auto;
}

.card img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1rem 0;
}

/* Like button overlay — sits on the bottom-left of the character image */
.like-button-overlay {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    z-index: 5;
}

.like-button {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.5px solid rgba(212, 175, 55, 0.6);
    border-radius: 20px;
    padding: 0.35rem 0.9rem;
    cursor: pointer;
    font-family: var(--body-font);
    font-size: 0.9rem;
    color: var(--warm-gold);
    transition: all 0.3s ease;
    margin: 0;
}

.like-button:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.05);
}

/* Heart icon — outlined by default, filled when liked */
.like-heart {
    font-size: 1.2rem;
    line-height: 1;
    transition: transform 0.3s ease;
}

.like-button:hover .like-heart {
    transform: scale(1.2);
}

/* Liked state — filled heart with warm gold */
.like-button.liked {
    background: rgba(0, 0, 0, 0.55);
    border-color: var(--warm-gold);
    color: var(--warm-gold);
    cursor: default;
}

.like-button.liked .like-heart {
    color: #e74c3c;
}

.like-count {
    font-weight: 600;
    min-width: 1ch;
}

/* Images in story content */
#story-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2rem auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ========== HTML CHAPTER CONTENT (Google Docs paste) ========== */
/* When chapters are uploaded as HTML instead of Markdown, these styles
   ensure Google Docs formatting blends with the site theme. Google Docs
   adds inline styles, so these rules use !important sparingly to override. */

.chapter-html-content {
    font-family: var(--body-font);
    line-height: 1.8;
    color: var(--dark-text);
}

.chapter-html-content p {
    margin-bottom: 1rem;
}

.chapter-html-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2rem auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chapter-html-content h1,
.chapter-html-content h2,
.chapter-html-content h3 {
    font-family: var(--heading-font);
    color: var(--ice-blue-dark);
    margin-top: 2rem;
}

.chapter-html-content blockquote {
    border-left: 3px solid var(--warm-gold);
    padding-left: 1.5rem;
    font-style: italic;
    color: var(--medium-text);
    margin: 1.5rem 0;
}

.chapter-html-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.chapter-html-content td,
.chapter-html-content th {
    padding: 0.5rem;
    border: 1px solid var(--ice-blue-light);
}

/* ========== TRANSPARENT SIDEBAR NAVIGATION - HIGH CONTRAST VERSION ========== */

/* Hamburger Menu Button */
.menu-toggle {
    position: fixed;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 1001;
    background: rgba(46, 90, 140, 0.9);
    border: 2px solid #D4AF37;
    color: #FFFFFF;
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.menu-toggle:hover {
    background: rgba(212, 175, 55, 0.9);
    color: #2E5A8C;
    transform: scale(1.05);
}

/* Dark Overlay (appears behind menu when open) */
.nav-overlay {
    position: fixed;
    /* Stay in place when scrolling */
    top: 0;
    left: 0;
    width: 100%;
    /* Cover entire screen */
    height: 100%;
    background: rgba(0, 0, 0, 0.16);
    z-index: 999;
    /* Above content, below sidebar (1000) */
    pointer-events: none;
    /* Don't block clicks when hidden */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
}

.nav-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* Allow clicks when visible */
}


/* Sidebar Navigation */
.sidebar-nav {
    position: fixed;
    top: 0;
    left: -85vw;
    width: 85vw;
    max-width: 320px;
    height: 100%;
    background: #1a2a3a;
    background: rgba(26, 42, 58, 0.75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 1000;
    padding: 4rem 0 2rem 0;
    transition: left 0.4s ease;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 3px solid #D4AF37;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
}

.sidebar-nav.active {
    left: 0;
}

/* Site Title in Sidebar */
.sidebar-nav .site-title {
    display: block !important;
    text-align: center !important;
    font-family: 'Cinzel', serif !important;
    font-size: 1.5rem !important;
    color: #D4AF37 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    padding: 0 2rem !important;
    margin-bottom: 2rem !important;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3) !important;
    padding-bottom: 1.5rem !important;
}

.sidebar-nav .site-title:hover {
    color: #E8C968 !important;
}

/* Navigation Links */
.sidebar-nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

.sidebar-nav li {
    margin: 0 !important;
    display: block !important;
}

.sidebar-nav a {
    display: block !important;
    color: #FFFFFF !important;
    background: transparent !important;
    text-decoration: none !important;
    padding: 1rem 2rem !important;
    font-family: 'Cinzel', serif !important;
    font-size: 1.1rem !important;
    transition: all 0.3s ease !important;
    border-left: 4px solid transparent !important;
    border-bottom: none !important;
}

.sidebar-nav a:hover {
    background: rgba(212, 175, 55, 0.2) !important;
    border-left-color: #D4AF37 !important;
    padding-left: 2.5rem !important;
    color: #E8C968 !important;
}

.sidebar-nav a.active {
    background: rgba(212, 175, 55, 0.3) !important;
    border-left-color: #D4AF37 !important;
    color: #D4AF37 !important;
    font-weight: 600 !important;
}

.sidebar-nav a.hub-return-link {
    color: #A3D3ED !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.25) !important;
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.75rem !important;
    font-size: 0.95rem !important;
    opacity: 0.9;
}

.sidebar-nav a.hub-return-link:hover {
    color: #F5D77F !important;
    border-left-color: #A3D3ED !important;
    opacity: 1;
}

/* Hide the old navigation bar */
nav:not(.sidebar-nav) {
    display: none !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .sidebar-nav {
        width: 85vw;
        max-width: none;
        left: -85vw;
        padding: 4rem 0 2rem 0;
    }

    .menu-toggle {
        top: 1rem;
        left: 1rem;
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
    }

    .sidebar-nav a {
        padding: 1.2rem 1.5rem !important;
        font-size: 1.05rem !important;
    }

    .sidebar-nav .site-title {
        font-size: 1.3rem !important;
        padding: 0 1.5rem !important;
        padding-bottom: 1.2rem !important;
    }
}

/* Extra specificity to override any conflicting styles */
body .sidebar-nav a {
    color: #FFFFFF !important;
}

body .sidebar-nav a.active {
    color: #D4AF37 !important;
}

body .sidebar-nav .site-title {
    color: #D4AF37 !important;
}

/* ========== HAMBURGER MENU (FOR COLLAPSIBLE CONTENT SECTIONS) ========== */
/* Used in book.html and mapping.html to toggle visibility of detail lists
   Creates animated 3-line icon that transforms to X when active */

/* Hamburger button - 3 horizontal lines */
.hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
}

.hamburger:hover {
    transform: scale(1.1);
}

.hamburger span {
    width: 100%;
    height: 3px;
    background: var(--ice-blue);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Hamburger animation when active (open) */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Collapsible menu styling */
.hamburger+ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
}

.hamburger+ul.menu-open {
    max-height: 1000px;
    opacity: 1;
    margin-top: 1rem;
}

/* ========== CAROUSEL STYLES ========== */
/* Interactive card carousel for "Explore This World" section on index.html
   Features: Slide transitions, arrow navigation, dot indicators, touch/swipe support
   Animation: Cards fade in/out and slide horizontally using CSS transforms */

/* Outer container - centers carousel and provides overflow hidden */
.carousel-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 2rem auto;
    overflow: hidden;
    /* This hides cards that slide out of view */
}

/* The track that holds all carousel cards */
.carousel-track {
    display: flex;
    position: relative;
    touch-action: pan-y; /* Pass horizontal swipes to JS; browser handles vertical scroll */
}

/* Individual carousel cards
   Default state: Hidden off-screen to the right
   Active state: Visible and centered
   Transition: Smooth slide-in animation */
.carousel-card {
    min-width: 100%;
    /* Each card takes full width */
    background: var(--white);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--warm-gold);

    /* Hidden state - invisible and positioned off-screen to right */
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.5s ease, transform 0.5s ease;

    /* Stack all cards on top of each other using absolute positioning */
    position: absolute;
    width: 100%;
}

/* Active card state - visible and centered
   JavaScript adds/removes 'active' class to control which card shows */
.carousel-card.active {
    opacity: 1;
    /* Fully visible */
    transform: translateX(0);
    /* Centered (no horizontal offset) */
    position: relative;
    /* Active card maintains document flow so container has height */
}

.carousel-card h3 {
    color: var(--ice-blue-dark);
    margin-top: 0;
    margin-bottom: 1rem;
}

.carousel-card p {
    margin-bottom: 1.5rem;
    color: var(--medium-text);
}

/* Carousel card links inherit jump-link styling for consistency */
.carousel-card a {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--pale-gold-bg);
    color: var(--ice-blue-dark);
    border: 2px solid var(--warm-gold);
    border-radius: 6px;
    text-decoration: none;
    font-family: var(--heading-font);
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.carousel-card a:hover {
    background: var(--warm-gold);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Navigation buttons (Previous/Next arrows) */
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--warm-gold);
    color: var(--white);
    border: none;
    font-size: 2rem;
    padding: 1rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.3s ease;
    z-index: 10;
    /* Sit above the cards */
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-button:hover {
    background: var(--warm-gold-dark);
}

/* Position the previous button on the left */
.carousel-button-prev {
    left: -60px;
}

/* Position the next button on the right */
.carousel-button-next {
    right: -60px;
}

/* Dot indicators below the carousel */
.carousel-dots {
    text-align: center;
    margin-top: 2rem;
}

.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--medium-text);
    margin: 0 0.5rem;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.dot:hover {
    transform: scale(1.2);
}

/* The active dot shows which slide is currently visible */
.dot.active {
    background: var(--warm-gold);
    transform: scale(1.3);
}

/* Mobile responsiveness for carousel */
@media (max-width: 768px) {
    .carousel-container {
        max-width: 90%;
    }

    /* On mobile, move buttons inside the carousel */
    .carousel-button-prev {
        left: 10px;
    }

    .carousel-button-next {
        right: 10px;
    }

    .carousel-button {
        font-size: 1.5rem;
        padding: 0.5rem;
        width: 40px;
        height: 40px;
        opacity: 0.8;
    }

    .carousel-card {
        padding: 1.5rem;
    }
}

/* ========== SUPPORT SECTION STYLES ========== */

.support-card {
    text-align: center;
    background: linear-gradient(135deg, var(--light-bg) 0%, var(--white) 100%);
    border-left-color: var(--warm-gold);
    border-left-width: 6px;
}

.support-options {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.support-button {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 1.1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.support-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.kofi-button {
    background: #FF5E5B;
    color: white;
}

.kofi-button:hover {
    background: #E54946;
    color: white;
}

.paypal-button {
    background: #0070BA;
    color: white;
}

.paypal-button:hover {
    background: #005A94;
    color: white;
}

.support-note {
    font-size: 0.9rem;
    color: var(--medium-text);
    font-style: italic;
    margin-top: 1.5rem;
    margin-bottom: 0;
}

/* ========== CHAPTER LIKE / SUPPORT SECTION ========== */

.chapter-support-section {
    margin-top: 3rem;
}

.chapter-like-container {
    text-align: center;
    margin-bottom: 2rem;
}

.chapter-like-prompt {
    font-family: var(--heading-font);
    font-size: 1.2rem;
    color: var(--ice-blue-dark);
    margin-bottom: 0.75rem;
}

.chapter-like-container .like-button {
    font-size: 1.1rem;
    padding: 0.5rem 1.2rem;
}

/* Hero Image Skeleton - reserves space while image loads from Firebase */
.hero-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 480px;
    /* prevents portrait image from going full-width on desktop */
    aspect-ratio: 3 / 4;
    margin: 0 auto 2rem;
    /* centred horizontally */
    border-radius: 8px;
    overflow: hidden;
}

/* On larger screens give the hero a bit more room but keep it contained */
@media (min-width: 769px) {
    .hero-image-wrapper {
        max-width: 680px;
    }
}

/* The pulsing grey placeholder */
.hero-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(110deg,
            #e0e7ee 8%,
            /* ice-tinted grey */
            #edf2f7 18%,
            /* lighter shimmer */
            #e0e7ee 33%
            /* back to grey */
        );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* When the image loads, it sits on top of the skeleton */
.hero-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Fade in once loaded */
.hero-image-wrapper img.loaded {
    opacity: 1;
}

/* ========== CHARACTER IMAGE SKELETON (CLS Prevention) ========== */

/* Character image wrapper - reserves space to prevent layout shift */
.character-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
}

/* Skeleton placeholder with shimmer animation */
.character-image-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(110deg,
            #e0e7ee 8%,
            #edf2f7 18%,
            #e0e7ee 33%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
    z-index: 1;
}

/* Character images - start invisible and fade in */
.character-image-wrapper .card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 2;
    margin: 0;
}

/* Fade in when image is loaded */
.card-image.loaded {
    opacity: 1;
}

/* Mobile responsiveness for character images */
@media (max-width: 768px) {
    .character-image-wrapper {
        max-width: 100%;
    }
}

/* ============================================================
     CHAPTER-SPECIFIC STYLES
     These styles only affect the chapter content above.
     They are self-contained here so each chapter can optionally
     override or extend them without touching the main styles.css
     How this works: when the chapter-reader.html sets
     contentDiv.innerHTML = contentText, these <style> tags are
     included and the browser applies them to the page.
     ============================================================ */
/* ── Opening Epigraph ── */
.chapter-epigraph {
    text-align: center;
    margin: 2rem auto 1.5rem;
    max-width: 520px;
    font-style: italic;
    color: var(--medium-text);
    /* uses your site's #555555 */
    font-size: 1.05rem;
    line-height: 1.9;
}

.epigraph-attribution {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    font-family: var(--heading-font);
    /* Cinzel */
    color: var(--warm-gold-dark);
    letter-spacing: 0.5px;
}

/* ── Decorative Divider ── */
.chapter-divider {
    height: 1px;
    max-width: 300px;
    margin: 1.5rem auto 2.5rem;
    background: linear-gradient(to right,
            transparent,
            var(--warm-gold),
            transparent);
}

/* ── Chapter Body: prose container ── */
.chapter-body {
    max-width: 680px;
    /* comfortable reading line length */
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.95;
    color: var(--dark-text);
}

.chapter-body p {
    margin-bottom: 1.4rem;
    text-indent: 1.5em;
    /* first-line indent like a printed book */
}

/* Remove indent on paragraphs that follow a scene break or the opening */
.chapter-body p:first-of-type,
.scene-break+p,
.pull-quote+p {
    text-indent: 0;
}

/* ── Drop Cap on first letter of first paragraph ── */
.chapter-body>p:first-of-type::first-letter {
    float: left;
    font-family: var(--heading-font);
    /* Cinzel */
    font-size: 4.2rem;
    line-height: 0.75;
    margin-right: 0.12em;
    margin-top: 0.1em;
    color: var(--warm-gold);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
}

/* ── Scene Break ── */
.scene-break {
    text-align: center;
    color: var(--warm-gold);
    font-size: 1.1rem;
    letter-spacing: 0.6em;
    margin: 2.5rem 0;
    user-select: none;
    /* prevents accidental selection when reading */
}


/* ── Pull Quote ── */
/* Overrides the global blockquote style in styles.css
       to create a more dramatic, centred display */
.pull-quote {
    border-left: none !important;
    /* remove the standard left border */
    background: transparent !important;
    text-align: center;
    max-width: 500px;
    margin: 2.5rem auto !important;
    padding: 0 2rem !important;
    font-size: 1.25rem;
    font-style: italic;
    color: var(--ice-blue-dark);
    border-top: 1px solid var(--warm-gold) !important;
    border-bottom: 1px solid var(--warm-gold) !important;
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
    line-height: 1.7;
}

/* ── Inline Chapter Image ── */
.chapter-image {
    margin: 2.5rem auto;
    max-width: 600px;
    text-align: center;
}

.chapter-image img {
    width: 100%;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.chapter-image figcaption {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--medium-text);
    font-family: var(--heading-font);
    letter-spacing: 0.3px;
}

/* ── End Ornament ── */
.chapter-end-ornament {
    text-align: center;
    color: var(--warm-gold);
    font-size: 1.2rem;
    letter-spacing: 0.4em;
    margin: 3rem 0 1rem;
}

/* ── Mobile adjustments ── */
@media (max-width: 768px) {
    .chapter-body {
        font-size: 1rem;
    }

    .chapter-body>p:first-of-type::first-letter {
        font-size: 3.4rem;
    }

    .pull-quote {
        font-size: 1.1rem;
    }
}

.silver-veins {
    color: #264d77;
    font-style: italic;
    text-shadow: 0 0 8px rgba(13, 18, 25, 0.3);
    letter-spacing: 0.02em;
}

/* ========== CHAPTER READER PAGE ========== */
/* Styles for chapter-reader.html: story content, navigation, and carousel.
   Moved here from chapter-reader.html inline <style> block for maintainability. */

/* ── Breadcrumb ── */
.breadcrumb {
    margin-bottom: 2rem;
}

.breadcrumb a {
    color: var(--ice-blue);
    text-decoration: none;
    font-family: var(--heading-font);
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: var(--warm-gold);
}

/* ── Story Content Box ── */
#story-content:not(.reader-container) {
    background: var(--white);
}

#story-content {
    padding: 3rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 3rem;
}

#story-content h1 {
    color: var(--ice-blue-dark);
    font-size: 2.5rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    padding-top: 2rem;
    border-top: 3px solid var(--warm-gold);
}

#story-content h1:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

#story-content h2 {
    color: var(--ice-blue-dark);
    font-size: 2rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    /* padding-top: 2rem; */
    /* border-top: 2px solid var(--warm-gold); */
}

#story-content h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

#story-content h3 {
    color: var(--ice-blue);
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

#story-content p {
    margin-bottom: 1.2rem;
    line-height: 1.8;
}

#story-content em {
    font-style: italic;
    color: var(--medium-text);
}

#story-content strong {
    font-weight: 600;
    color: var(--ice-blue-dark);
}

#story-content blockquote {
    border-left: 4px solid var(--warm-gold);
    margin: 2rem 0;
    font-style: italic;
    color: var(--medium-text);
    background: var(--light-bg);
    padding: 1.5rem;
    border-radius: 4px;
}

#story-content hr {
    border: none;
    height: 2px;
    background: linear-gradient(to right, var(--ice-blue) 0%, var(--warm-gold) 50%, var(--ice-blue) 100%);
    margin: 3rem 0;
}

/* ── Chapter Navigation ── */
.chapter-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    gap: 2rem;
}

.nav-previous,
.nav-next {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.nav-previous {
    align-items: flex-start;
}

.nav-next {
    align-items: flex-end;
    text-align: right;
}

.nav-chapters {
    flex: 0 0 auto;
}

.nav-label {
    font-size: 0.85rem;
    color: var(--medium-text);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    font-family: var(--heading-font);
}

.nav-link {
    color: var(--ice-blue);
    text-decoration: none;
    font-family: var(--heading-font);
    font-weight: 600;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--warm-gold);
}

/* Navigation button — inherits jump-link styling for consistency */
.nav-button {
    display: inline-block;
    background: var(--pale-gold-bg);
    color: var(--ice-blue-dark);
    border: 2px solid var(--warm-gold);
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-family: var(--heading-font);
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-button:hover {
    background: var(--warm-gold);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.nav-disabled {
    color: var(--medium-text);
    font-style: italic;
}

/* ── Chapter Carousel ── */
.chapter-carousel-outer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 1000px;
    margin: 2rem auto;
    position: relative;
}

.chapter-carousel-container {
    flex: 1;
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
}

.chapter-carousel-track {
    display: flex;
    position: relative;
    min-height: 400px;
    touch-action: pan-y; /* Pass horizontal swipes to JS; browser handles vertical scroll */
}

.chapter-carousel-card {
    min-width: 100%;
    background: var(--white);
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--warm-gold);
    overflow: hidden;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.5s ease, transform 0.5s ease;
    position: absolute;
    width: 100%;
}

.chapter-carousel-card.active {
    opacity: 1;
    transform: translateX(0);
    position: relative;
}

.chapter-banner {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, var(--ice-blue-dark) 0%, var(--ice-blue) 100%);
}

.chapter-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chapter-banner-placeholder {
    background: linear-gradient(135deg,
            var(--ice-blue-dark) 0%,
            var(--ice-blue) 50%,
            var(--warm-gold) 100%);
    position: relative;
}

.chapter-banner-placeholder::after {
    content: '📖';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    opacity: 0.3;
}

.chapter-content {
    padding: 2.5rem;
}

.chapter-number {
    font-family: var(--heading-font);
    font-size: 0.9rem;
    color: var(--ice-blue);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.chapter-carousel-card h3 {
    color: var(--ice-blue-dark);
    font-size: 1.8rem;
    margin: 0.5rem 0 1rem 0;
}

.chapter-description {
    color: var(--medium-text);
    line-height: 1.7;
    margin: 1rem 0 1.5rem 0;
}

/* Status badges */
.chapter-status-badge {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--heading-font);
    margin: 0.5rem 0 1rem 0;
}

.status-published {
    background: #d4edda;
    color: #155724;
}

.status-coming-soon {
    background: #fff3cd;
    color: #856404;
}

.status-planned {
    background: #e2e3e5;
    color: #383d41;
}

.current-chapter-badge {
    display: inline-block;
    background: var(--warm-gold);
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.chapter-read-button {
    display: block;
    margin: 0 auto;
    width: fit-content;
    background: var(--pale-gold-bg);
    color: var(--ice-blue-dark);
    border: 2px solid var(--warm-gold);
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-family: var(--heading-font);
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chapter-read-button:hover {
    background: var(--warm-gold);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.chapter-unavailable {
    color: var(--medium-text);
    font-style: italic;
}

.chapter-carousel-button {
    position: static;
    transform: none;
    background: var(--warm-gold);
    color: var(--white);
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.3s ease, transform 0.2s ease;
    z-index: 10;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chapter-carousel-button:hover {
    background: var(--warm-gold-dark);
    transform: scale(1.08);
}

.chapter-carousel-button-prev,
.chapter-carousel-button-next {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
}

.chapter-carousel-dots {
    text-align: center;
    margin-top: 2rem;
}

/* .dot styles are defined globally above — no overrides needed here */

/* ── Responsive: Chapter Reader ── */
@media (max-width: 768px) {
    #story-content {
        padding: 1.5rem;
    }

    .chapter-navigation {
        flex-direction: column;
        text-align: center;
    }

    .nav-previous,
    .nav-next {
        align-items: center;
        text-align: center;
    }

    .chapter-carousel-outer {
        gap: 0.4rem;
    }

    .chapter-carousel-container {
        max-width: 100%;
    }

    .chapter-carousel-button {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }

    .chapter-content {
        padding: 1.5rem;
    }

    .chapter-banner-placeholder::after {
        font-size: 3rem;
    }
}