@charset "utf-8";

/* =====================================================
   1. GLOBAL SITE STYLES & CENTERING
   ====================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; }

body {
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
    background-attachment: fixed;
    background-image: url('../images/thecave.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    padding: 0;
    text-align: center;
}

/* Background Cave Classes */
.bg-cave-1 { background-image: url('../images/thecave.jpg'); }
.bg-cave-2 { background-image: url('../images/thecave02.jpg'); }
.bg-cave-3 { background-image: url('../images/thecave03.jpg'); }
.bg-cave-4 { background-image: url('../images/thecave04.jpg'); }
.bg-cave-5 { background-image: url('../images/thecave05.jpg'); }
.bg-cave-6 { background-image: url('../images/thecave06.jpg'); }
.bg-cave-7 { background-image: url('../images/thecave07.jpg'); }

h2, h3 { color: #C2185B; font-size: 2em; }
.tobtella-color, .white-text { color: white !important; font-size: 1.6em; }
hr { border: 0; border-top: 1px solid rgba(255,255,255,0.2); margin: 20px auto; }

.centered-table {
    border-collapse: collapse;
    border-radius: 12px;
    margin: 0 auto !important;
    overflow: hidden;
}
.center-text { text-align: center; }

/* ======================================================
   2. HEADER & NAVIGATION (SILVER & COMPACT)
   ====================================================== */
.header-nav-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; 
    margin: 15px auto 10px auto;
}

.main-header {
    color: silver;           
    font-size: 1.25em;       
    font-style: italic;
    font-weight: bold;
    margin: 0 !important; 
    text-align: center;
}

nav { 
    margin: 0 !important; 
    text-align: center; 
}

.menu {
    display: flex;
    gap: 15px;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li a {
    background-color: rgba(0,0,0,0.65);
    border-radius: 8px;
    color: #C2185B;
    font-size: 0.9em;        
    padding: 6px 10px;       
    transition: 0.3s;
    text-decoration: none;
    display: inline-block;
}

.menu li a:hover { background: #005F77; color: white; }

.menu-toggle {
    display: none !important; 
    color: white;
    cursor: pointer;
    font-size: 2em;
}

/* =====================================
   2b. PAGE SECTION BUTTONS (CONTACT / FEEDBACK)
   ===================================== */
.page-section-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0px auto;
    flex-wrap: wrap;
}

.page-section-buttons a {
    background-color: rgba(0,0,0,0.65);
    border: 1px solid #FFFFFF;
    border-radius: 20px;
    color: #FFFFFF;
    font-size: 0.5em; /* Adjusted to fit the new shrunken header vibe */
    padding: 5px 12px;
    text-decoration: none;
    transition: 0.3s;
}

.page-section-buttons a:hover {
    background-color: #21821F; /* That signature green hover */
    color: white;
}

/* =====================================
   3. BOXES & ANIMATIONS (BUY ME A COFFEE)
   ===================================== */
.contact-box, .white-box {
    background: #ffffff;
    color: #000;
    border-radius: 20px;
    padding: 20px;
    margin: 20px auto;
    max-width: 800px;
    box-sizing: border-box;
}

.white-box-wide { padding: 20px 40px; }

@keyframes slow-glow {
  0% { box-shadow: 0 0 5px 0px rgba(232, 131, 18, 0.4); transform: scale(1); }
  50% { box-shadow: 0 0 20px 4px rgba(232, 131, 18, 0.8); transform: scale(1.02); }
  100% { box-shadow: 0 0 5px 0px rgba(232, 131, 18, 0.4); transform: scale(1); }
}

.buy-me {
  animation: slow-glow 6s infinite ease-in-out;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: block;
  width: 25%; /* Desktop default */
  min-width: 200px; /* Prevents it from ever getting too tiny */
}

/* Target ONLY the Buy Me a Coffee button on the Contact page */
#contact .buy-me {
    width: max-content !important;   /* Shrinks the width to fit the text perfectly */
    min-width: 0 !important;         /* Overrides the 200px global minimum */
    padding: 10px 25px !important;   /* Gives it nice breathing room on the sides */
    margin: 0 auto !important;       /* Keeps it perfectly centered */
}

.contact-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.contact-row img {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain;
    border-radius: 12px;
}

/* ======================================================
    4. FEEDBACK FORM STYLING (READABILITY & ALIGNMENT FIX)
   ====================================================== */
.contact-form-wrapper {
    background: rgba(0,0,0,0.6);
    border-radius: 20px;
    color: white;
    margin: 20px auto;
    max-width: 600px;
    padding: 25px;
    text-align: left;
}

.contact-title { color: white; font-size: 1.8em; margin-bottom: 20px; text-align: center; }

.form-row { margin-bottom: 15px; width: 100%; }

/* Aligning the icons and fields perfectly */
.contact-form label, 
.form-field { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    width: 100%; 
    color: white; 
}

.form-icon {
    width: 30px; /* Fixed width ensures all icons line up vertically */
    text-align: center;
    flex-shrink: 0;
}

.contact-form input, 
.contact-form select, 
.contact-form textarea,
.select-selected {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 10px;
    color: white !important;
    padding: 10px;
    font-size: 1em;
    width: 100%;
    box-sizing: border-box;
}

.contact-form input::placeholder, .contact-form textarea::placeholder {
    color: rgba(255,255,255,0.5);
}

.send-btn {
    background: #E88312;
    border: none;
    border-radius: 12px;
    color: black;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    padding: 12px;
    transition: 0.2s;
    width: 100%;
}
.send-btn:hover { background: #ff9a2c; }

/* Custom Select Dropdown logic */
.custom-select { 
    position: relative; 
    flex: 1; /* This forces the dropdown to fill the same width as name/email */
    width: 100%; 
    cursor: pointer; 
}

.select-items {
    background: #222;
    border: 1px solid #444;
    border-radius: 10px;
    color: white;
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 99;
}
.select-items div { padding: 10px; border-bottom: 1px solid #333; }
.select-items div:hover { background: #E88312; color: black; }
.select-hide { display: none; }

/* ======================================================
   5. STORIES PAGE & INDIVIDUAL INTRO PAGES
   ====================================================== */

/* --- MAIN LIST PAGE (stories.html) --- */
.new-story-box {
    background-color: #ffffff;
    border-radius: 15px;
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* Aligns cover and title to the top */
    gap: 20px;
    margin: 20px auto;
    max-width: 750px;
    padding: 20px;
    text-align: left;
}

.new-story-left { flex: 0 0 200px; display: flex; align-items: flex-start; }
.new-story-left img { width: 100%; border-radius: 8px; height: auto; }

.new-story-right h2 {
    margin-top: 0; 
    margin-bottom: 10px;
    line-height: 1.1; 
}

/* --- INDIVIDUAL STORY PAGES (theschool.html, etc.) --- */
@media (min-width: 768px) {
    .intro-page-box {
        display: grid !important; /* Switch to Grid to align separate DIVs */
grid-template-columns: 300px 1fr; /* Matches cover width + content */
        grid-template-areas: 
            "cover title"
            "cover content"
            "footer footer";
        column-gap: 30px;
        width: 90%;
        max-width: 1000px;
        padding: 25px;
        text-align: left;
    }

    /* Assigning the HTML elements to Grid areas */
    .intro-title-row { 
        grid-area: title; 
        border-bottom: none; 
        margin-bottom: 5px; 
    }
    
    .intro-title-row h2 { 
    margin-top: 0 !important; 
    line-height: 1; 
}
    
    .intro-content-wrapper { 
        display: contents !important; /* "Flattens" wrapper to allow side-by-side layout */
    }

    .intro-column-left { grid-area: cover; }
    .intro-column-right { grid-area: content; }
    
    .intro-footer-row { 
        grid-area: footer; 
        text-align: center !important; /* Forces centering of all footer content */
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }
}

/* Base styles for intro page elements */
.intro-cover-large { width: 100%; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.intro-column-right { color: #000; }

/* Centering the Stats and Downloads */
.stats-grid, .download-grid {
    display: flex;
    justify-content: center !important; /* Ensures items are centered horizontally */
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    color: #333;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom: 20px;
}

.download-section { text-align: center; width: 100%; margin-top: 20px; }

/* --- TITLE COLORS --- */
.green-title h2 { color: #00390D !important; }
.dark-blue-title h2 { color: #3C6398 !important; }
.red-title h2 { color: #C2185B !important; }
.orange-title h2 { color: #E88312 !important; }
.black-title h2 { color: #000000 !important; }

/* --- BASE BUTTON STYLE (Restored) --- */
.read-btn {
    background: #E88312; /* Your default orange */
    border-radius: 8px;
    color: black;
    font-size: 1.1em;
    font-weight: bold;
    padding: 10px 20px;
    text-decoration: none;
    transition: 0.2s;
    display: inline-block;
    border: none;
    cursor: pointer;
}

.read-btn:hover { 
    background: #ff9a2c; 
}


/* ======================================================
   6. MAGAZINE RACK (HOME)
   ====================================================== */
.rack-wrapper { width: 100%; max-width: 600px; margin: 10px auto; perspective: 1000px; overflow: hidden; }
.rack-container { display: flex; justify-content: center; align-items: center; height: 300px; position: relative; transform-style: preserve-3d; }
.rack-item { position: absolute; width: 160px; transition: all 0.3s ease; opacity: 0; pointer-events: none; }
.rack-item img { width: 100%; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.6); height: auto !important;}

.rack-item.active { opacity: 1; pointer-events: auto; z-index: 10; transform: translate3d(0, 0, 0) scale(1.1); }
.rack-item.prev { opacity: 0.5; transform: translate3d(-120px, 0, -150px) rotateY(30deg); z-index: 5; }
.rack-item.next { opacity: 0.5; transform: translate3d(120px, 0, -150px) rotateY(-30deg); z-index: 5; }

.rack-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); color: white;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 15px; text-align: center; opacity: 0; transition: opacity 0.3s ease; border-radius: 8px; pointer-events: none;
}
.rack-overlay p { font-size: 0.65em; line-height: 1.3; margin: 0; }
@media (min-width: 768px) { .rack-item.active:hover .rack-overlay { opacity: 1; } }

.mobile-info-box { display: none; margin: 15px auto; padding: 10px; max-width: 450px; color: white; font-style: italic; font-size: 1.1em; border-top: 1px solid rgba(255,255,255,0.1); }

/* --- RESTORED CAROUSEL NAVIGATION --- */
.carousel-nav-bottom { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 20px; /* This creates the small space between the buttons */
    margin-top: 15px; 
}

.nav-btn { 
    background: rgba(0,0,0,0.4); 
    border: 1px solid white; 
    color: white; 
    border-radius: 50%; 
    width: 36px; 
    height: 36px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: 0.2s;
}

.nav-btn:hover {
    background: #E88312; /* Adds a nice orange hover effect */
    color: black;
}

/* ======================================================
   7. MOBILE OVERRIDES
   ====================================================== */
@media (max-width: 767px) {
    
    /* 1. "Ghost" the navbar container so the children are freed */
    .navbar {
        display: contents;
    }

    /* 2. Set up the two-row sandbox */
    .header-nav-wrapper {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0px 30px;
        align-items: center;
        padding: 10px 20px;
    }

    /* 3. Keep the hamburger icon up top in Row 1 */
    .menu-toggle { 
        display: block !important; 
        order: 2; 
    }
    
    /* 4. Force the menu to Row 2 (100% width) */
    .menu { 
        display: none; 
        flex-direction: column; 
        background: transparent !important; 
        width: 80%; 
        order: 3;    
        margin: 0px 0 0px 0 !important; 
        border-radius: 10px; 
        padding: 10px 0;
        border: none !important; 
        outline: none !important; 
        box-shadow: none !important;
    }
    
    .menu.active { 
        display: flex !important; 
    }
    
/* Make menu text larger and buttons full-width on mobile */
    .menu li {
        width: 100%; /* Forces the list item to stretch */
    }

    .menu li a {
        display: block;       /* CHANGED: Forces the button to take up the full width */
        width: 100%;          
        font-size: 1.3em;    
        padding: 12px 10px;  
        text-align: center;   /* Keeps the text perfectly centered inside the big button */
        box-sizing: border-box; /* Ensures padding doesn't break the width */
    }
    
    .rack-wrapper { 
        margin-top: 10px;    
        margin-bottom: 20px; 
    } 
    .rack-item { width: 130px; }
    .mobile-info-box { display: block; }
    
    .new-story-box { flex-direction: column; align-items: center; text-align: center; }
    .new-story-left { 
        flex: 0 0 auto; 
        margin-bottom: 15px; 
        width: 100%;
        justify-content: center;
    }
    
    .new-story-left img {
        margin: 0 auto;        
        display: block;        
    }
    
    .intro-content-wrapper { flex-direction: column; align-items: center; }
    .intro-column-left { flex: 0 0 auto; width: 220px; }
    
    .buy-me {
        width: 80% !important; 
    }
}