/* --- Core Page Override Hook --- */
body.page-1-copertina {
    background: linear-gradient(to right, #0065ab, #a32c18);
    background-attachment: fixed;
}
body.page-13-retro-copertina {
	background-color: #000000;
	color: #ffffff;
}
/* --- Cover Page Footer  --- */
body.page-1-copertina footer {
    background-color: transparent;
    border-top: none;
    margin-top: 0 !important;
    flex-shrink: 0;
}
body.page-1-copertina footer,
body.page-1-copertina footer a {
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); 
}
body.page-13-retro-copertina footer {
	background-color: #000000;
}

/* 📱 Mobile Specific Jacket Enhancements (iPhone / Smartphone viewports) */
@media (max-width: 576px) {
    
    /* 1. LAYER THE DYNAMIC BACKGROUND */
    body.page-1-copertina {
        position: relative;
        overflow-x: hidden;
        background-color: #0b111e; /* Deep dark fallback base matching your top header */
    }

    /* Create the blurred atmospheric glow behind your interface */
body.page-1-copertina::before {
    content: "";
    position: fixed; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/cover.jpg') no-repeat center center; 
    background-size: cover;
    
    /* 🌟 THE GLOW BOOST:
       - scale(1.45) blows the image up so only the colorful center light source is visible.
       - brightness(1.4) actively over-exposes the dark tones to force them to glow.
       - contrast(1.3) keeps the colors saturated and deep instead of looking washed out/gray. */
    filter: blur(40px) brightness(1.4) contrast(1.3); 
    transform: scale(1.45); 
    
    z-index: -1; 
    opacity: 0.9;
}

    /* 2. FLEXBOX STRUCTURAL BALANCING (Strategy 1) */
    /* Ensure the main layout container stretches cleanly across the tall screen */
    body.page-1-copertina #content-window, 
    body.page-1-copertina main { 
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Spreads out header, image, and footer evenly */
        align-items: center;
        min-height: calc(100vh - 70px); /* Subtracts your top logo bar height to prevent scrolling leaks */
        box-sizing: border-box;
        padding: 15px 0;
    }

    /* 3. COVERT ARTWORK CONTAINER ADJUSTMENTS */
    /* This centers the image beautifully and scales it cleanly inside the phone dimensions */
    body.page-1-copertina .cover-container-class {
        flex-grow: 1;              /* Claims the massive center zone of the tall phone screen */
        display: flex;
        align-items: center;       /* Centers the square art vertically in that empty mid-zone */
        justify-content: center;
        width: 100%;
        max-width: 88vw;           /* Safely pulls the edges inward slightly from the absolute edge of the glass */
        margin: auto 0;
    }

    /* Ensure the img tag itself scales cleanly without warping */
    body.page-1-copertina .cover-container-class img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;        /* Soft premium radius matching your screenshot style */
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6); /* Deeper shadow to punch it off the blurred background */
    }

    /* 4. FOOTER NAVIGATION BASE */
    /* Ensure the bottom arrow is cleanly pinned to the absolute base of our frame */
    body.page-1-copertina .footer-nav-class {
        margin-top: auto;
        padding-top: 10px;
        padding-bottom: 15px;
        width: 100%;
        display: flex;
        justify-content: center;
    }
}






/* --- Cover Page Flaps  --- */
.btn-flap {
    display: none;
}
body.page-1-copertina .btn-flap {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(26, 26, 26, 0.75); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--sidebar-text, #EBEBEB);
    padding: 18px 6px;
    z-index: 1050;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    writing-mode: vertical-rl;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    display: block;
}
body.page-1-copertina .btn-flap:hover {
    background: rgba(26, 26, 26, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--accent-color, #ffffff);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); 
}
body.page-1-copertina .flap-right:hover {
    right: 0 !important;
}
body.page-1-copertina .flap-left:hover {
    left: 0 !important;
}
body.page-1-copertina .flap-left { 
    left: 0; 
    border-radius: 0 6px 6px 0; 
    border-left: none;
}
body.page-1-copertina .flap-right { 
    right: 0; 
    border-radius: 6px 0 0 6px; 
    border-right: none;
}
body.page-1-copertina .btn-flap:hover {
    background: rgba(26, 26, 26, 0.9);
    color: #FFFFFF;
}
#frontFlap, #backFlap {
    background-color: var(--sidebar-bg, #1A1A1A);
    color: var(--sidebar-text, #EBEBEB);
    border: none;
    overscroll-behavior: contain; 
}
#frontFlap .offcanvas-body, 
#backFlap .offcanvas-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
body.page-1-copertina #frontFlap .offcanvas-title, #backFlap .offcanvas-title { 
    font-family: var(--font-sp);
    font-size: 2.0rem;
}
body.page-1-copertina #frontFlap p, #backFlap p { 
    font-family: var(--font-uv);
}
body.page-1-copertina #frontFlap img.author, #backFlap img.author { 
    border: 3px solid #ffffff;
}
#frontFlap .offcanvas-header, 
#backFlap .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
#frontFlap .btn-close, 
#backFlap .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}
/* --- Master Cover Wrapper --- */
body.page-1-copertina .cover-wrapper {
    flex-grow: 1;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
body.page-1-copertina .primary-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}
/* --- The Floating Book Canvas --- */
body.page-1-copertina .book-cover-art {
    max-height: 70vh;
    width: auto; 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 
                0 5px 15px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    transition: transform 0.3s ease;
}
body.page-1-copertina .book-cover-art:hover {
    transform: scale(1.02);
}
body.page-13-retro-copertina .primary-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background-color: #000000;
}
/* --- Back Cover Typography Canvas --- */
body.page-13-retro-copertina {
    background-color: #000000;
    color: #ffffff;
}
body.page-13-retro-copertina .retro-content p {
    color: #EBEBEB;
    line-height: 1.8;
    font-size: 0.95rem;
    font-family: var(--font-at);
}
body.page-13-retro-copertina .retro-content .lead {
    color: #FFFFFF;
    font-family: var(--font-at);
	font-weight: 700;
    font-style: normal;
}
body.page-1-copertina .nav-arrow {
	color: #ffffff;
}
body.page-13-retro-copertina .nav-arrow {
	color: #ffffff;
}
body.page-1-copertina #prev-btn {
    display: none !important;
}
body.page-1-copertina #eye-candy {
    display: none !important;
}
/* --- Rear Cover Boundaries --- */
body.page-13-retro-copertina #next-btn {
    display: none !important;
}
body.page-13-retro-copertina #eye-candy {
    display: none !important;
}
/* --- Off Canvas Tabs --- */
.offcanvas {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 350px;
    background-color: var(--page-bg);
    background-clip: padding-box;
    outline: 0;
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
.offcanvas-start { 
	left: 0; transform: translateX(-100%); border-right: 1px solid rgba(0,0,0,0.1); 
}
.offcanvas-end {
	right: 0; transform: translateX(100%); border-left: 1px solid rgba(0,0,0,0.1);
}
.offcanvas.show {
    transform: none;
}
/* Offcanvas Header & Typography Spacing */
.offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.offcanvas-body {
    flex-grow: 1;
    padding: 1.5rem;
    overflow-y: auto;
    line-height: 1.6;
}