/* --- Main Book Framework --- */

#multei-book-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0;
    opacity: 0;
    animation: fadeInAnimation 1.5s ease-in-out 1s forwards;
}

@keyframes fadeInAnimation {
    from { opacity: 0; }
    to { opacity: 1; }
}

#multei-book-container {
    width: 940px;
    height: 640px;
    margin: 25px 0 0 0;
    position: relative;
    z-index: 1;
    perspective: 2000px;
}


/* --- Physical Page Styling (The Paper) --- */

/* All inner pages (Not the Hard Covers) */
div.page:not(.hard) > .book-page-content > .multei-page-container {
    background: #f1e9d2; /* Parchment Color */
    width: 460px;
    height: 620px;
}

div.page.even:not(.hard) > .book-page-content > .multei-page-container {
    box-shadow: inset -15px 0 20px -10px rgba(0,0,0,0.3);
    border-radius: 5px 0 0 5px;
    margin: 10px 0 10px 10px;
    padding: 20px 30px 20px 20px !important;
}

div.page.odd:not(.hard) > .book-page-content > .multei-page-container {
    box-shadow: inset 15px 0 20px -10px rgba(0,0,0,0.3);
    border-radius: 0 5px 5px 0;
    margin: 10px 10px 10px 0;
    padding: 20px 20px 20px 30px !important;
}

/* --- Gutenberg Content Styling (The Text) --- */
/* This targets the 'Group' block from your PHP template */
.multei-page-container {
    padding: 20px 0 20px 0 !important;
    width: 470px;
    height: 640px;
}

.multei-page-container h1, .multei-page-container h2 {
    text-shadow:
        /* Highlight: light from bottom-right, shining on top-left outside (negative x, negative y offset) */
        -1px -1px 1px rgba(255, 255, 255, 0.4),
        /* Shadow: dark shadow inset bottom-right (positive x, positive y offset) */
        1px 2px 2px rgba(0, 0, 0, 0.8);
}

/* Hyperlinks within the book */
.multei-page-container .wp-block-list a,
.multei-page-container ol,
.multei-page-container ul,
.multei-page-container li,
.multei-page-container li a,
.multei-page-container li strong {
    color: #8b4513 !important; /* Saddle Brown */
    font-size: 20px !important;
    font-weight: bold !important;
}

/* Reset and Indent the nested lists */
.multei-page-container ol.wp-block-list,
.multei-page-container ul.wp-block-list {
    margin-left: 1.5em !important; /* This creates the hierarchy */
    padding-left: 0 !important;
    list-style-position: outside !important;
}

/* Fix the "Return Space" (the gap between parent and child) */
.multei-page-container li > ul,
.multei-page-container li > ol {
    margin-top: 0px !important;    /* Removes the gap after 'Members of the Board' */
    margin-bottom: 5px !important; /* Slight breathing room before the next main item */
}

/* Tighten the spacing between individual list items */
.multei-page-container li {
    margin-bottom: 0.3em !important;
    line-height: 1.4 !important;
}

/* Fix the bullet alignment */
.multei-page-container ul {
    list-style-type: disc !important; /* Ensures sub-items have bullets */
}

/* Change nested bullet size and transparency */
.multei-page-container li li {
    font-size: 0.9em !important;
    opacity: 0.9;
}

/* Remove the 'Return' gap between a nested list and the next sibling <li> */
.multei-page-container li ul,
.multei-page-container li ol {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove top margin from nested lists to pull them up to their parent */
.multei-page-container li > ul,
.multei-page-container li > ol {
    margin-top: 0 !important;
}

/* Ensure the <li> itself doesn't have a giant bottom margin */
.multei-page-container .wp-block-list li {
    margin-bottom: 2px !important; /* Adjust this to your preferred line spacing */
    padding-bottom: 0 !important;
}

/* --- Cover Styling --- */
/* Apply color, texture and box shadow */
.hard {
    background-image: url("/wp-content/uploads/2026/03/book-tattered-leather-330x450-1.png");
    /* background-repeat: repeat; */
    /* background-color: #805819; */
    /* box-shadow:
        inset 5px 5px 4px rgba(0,0,0,0.4),
        inset -5px -5px 4px rgba(255,255,255,0.2) !important; */
    background-size: cover;
}

.hard .multei-page-container {
    background: transparent !important;
    margin: 0;
}

/* Logic for page visibility during turns */
.force-visible-cover {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: -1 !important;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.5) !important;
}

/* webpage transitions */
.book-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 9999999;
    opacity: 1;
    visibility: visible;
    transition: opacity 1.5s ease-in-out, visibility 0.5s;
    pointer-events: auto; /* Blocks clicks to elements below while visible */
}

/* The state after the fade-in */
.book-mask.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Allows user to click things once the mask is gone */
}

#page-container {
    filter: blur(10px);
    transition: filter 1.5s ease-out;
}

body:not(.scroll-lock) #page-container {
    filter: blur(0px);
}