/* --- CSS Variables (Your New Color Palette) --- */
:root {
    --color-bg-dark: #212121;       /* Volcanic Dark (Outer Frame) */
    --color-bg-light: #303030;      /* Darker UI Elements (Header/Footer) */
    --color-bg-content: #FFFFFF;    /* NEW: White Content Background */
    --color-bg-card: #f9f9f9;       /* NEW: Light Gray for Cards */
    --color-text-light: #FDFBF5;    /* Parchment/Stucco (for dark bg) */
    --color-text-dark: #222222;     /* NEW: Dark Text (for white bg) */
    --color-text-muted: #555;       /* NEW: Muted Dark Text */
    --color-logo-red: #cb294f;     /* Maya Red (Reddish-Pink) */
    --color-accent-jade: #3A8A7B;  /* Jade Green */
    --color-border: #444;           /* Border for dark elements */
    --color-border-light: #ddd;     /* NEW: Border for light elements */
}

/* --- General Reset & Body --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--color-bg-dark); /* This is the outer "blackish" frame */
    color: var(--color-text-light);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center; /* <-- ADDED: Centers the whole page block if content is short */
}

main {
    flex-grow: 0; /* <-- CHANGED: Was 1. Main no longer expands. */
    display: grid;
    grid-template-areas: "content";
    justify-items: center;
    align-items: start; /* <-- CHANGED: Was 'center'. Aligns content to the top of main. */
    padding: 20px;
}

h1, h2, h3 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

p {
    font-size: 1.1rem;
    line-height: 1.6;
}

/* --- Header & Navigation (Stays Dark) --- */
.main-header {
    width: 100%;
    background-color: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border);
    padding: 1rem 2rem;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-text-light);
    font-size: 1.5rem;
    font-weight: bold;
}

.logo {
    width: 40px;
    height: 40px;
    margin-right: 0.75rem;

}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

.main-nav a {
    text-decoration: none;
    color: #aaa; /* Muted light text */
    font-weight: bold;
    font-size: 1rem;
    padding: 0.5rem 0;
    transition: color 0.3s ease;
    border-bottom: 2px solid transparent;
}

.main-nav a:hover {
    color: var(--color-text-light);
}

.main-nav a.active {
    color: var(--color-logo-red);
    border-bottom: 2px solid var(--color-logo-red);
}

/* --- Content Page (NEW: White Background) --- */
.content-page-container {
    background-color: var(--color-bg-content);
    color: var(--color-text-dark);
    padding: 2.5rem;
    border-radius: 12px;
    max-width: 900px;
    width: 100%;
    border: 1px solid var(--color-border-light);

    /* --- ADDED FOR TRANSITION --- */
    grid-area: content; /* ADDED: Assign to grid cell */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, visibility 0.6s;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}
.content-page-container h1 {
    color: var(--color-text-dark);
}
.content-page-container p {
    color: var(--color-text-muted);
    margin-bottom: 1.1rem; /* UPDATED: Adds space AFTER every paragraph */
}

/* --- Calculator Container (NEW: White Background) --- */
.calculator-container {
    background-color: var(--color-bg-content);
    color: var(--color-text-dark);
    padding: 2.5rem;
    border-radius: 12px;
    border: 1px solid var(--color-border-light);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: 600px;
    width: 100%;
    text-align: center;

    /* --- ADDED FOR TRANSITION --- */
    grid-area: content; /* ADDED: Assign to grid cell */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, visibility 0.6s;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.calculator-container h1 {
    color: var(--color-text-dark);
}
.calculator-container p {
    color: var(--color-text-muted);
}

.date-inputs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.date-inputs span {
    font-size: 1.5rem;
    color: #aaa;
}

input[type="text"] {
    padding: 12px;
    font-size: 1rem;
    border: 1px solid var(--color-border-light);
    background-color: var(--color-bg-content);
    color: var(--color-text-dark);
    border-radius: 8px;
    text-align: center;
    width: 70px;
}
input[type="text"]:focus {
    outline: 2px solid var(--color-logo-red);
    border-color: var(--color-logo-red);
}

#birthMonth, #birthDay {
    width: 45px;
}

button {
    background-color: var(--color-logo-red);
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 14px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 1.5rem;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #a52240; /* Darker red */
}

/* --- NEW Sign Summary (Upfront Signs) --- */

.sign-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    background-color: var(--color-bg-card); /* Light gray card */
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 1px solid var(--color-border-light);
}

.summary-item h4 {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* NEW: Container for compact icon + text */
.summary-sign-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap; /* <-- THIS IS THE FIX */
}

/* NEW: Compact image placeholder */
.summary-img {
    width: 40px; 
    height: 40px;
    flex-shrink: 0;
}
.summary-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.summary-sign-display p {
    color: var(--color-accent-jade);
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0; /* Override default p margin */
}


/* --- NEW Report Section Title --- */
.report-title {
    color: var(--color-text-dark);
    font-size: 1.5rem;
    border-bottom: 2px solid var(--color-logo-red);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

/* === NEW RULE FOR SUB-HEADINGS === */
.result-card > h3 {
    /* This targets h3s that are direct children of a result-card */
    font-size: 1.4rem;
    color: var(--color-text-dark);
    /* The h3 default rule (line 41) already adds margin-top: 2rem */
    margin-bottom: 1rem; /* Give more space before the text */
}

/* --- Results Report (NEW: Light Style) --- */
.result-card {
    background-color: var(--color-bg-card); /* Light gray card */
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.result-card p {
    color: var(--color-text-muted);
}
.result-card h3 {
    color: var(--color-text-dark);
}

.sign-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: 1rem; /* <-- CHANGED: Was 1rem */
    margin-bottom: 1rem;  /* <-- CHANGED: Was 1rem */
}

.sign-image-placeholder {
    width: 40px;
    height: 40px;
    background-color: #eee;
    border: 1px dashed var(--color-border-light);
    border-radius: 6px;
    flex-shrink: 0;
}

/* NEW: Larger image size for report cards */
.report-image {
    width: 100px;  /* 40px * 2.5 = 100px */
    height: 100px;
    border-radius: 8px;
}

.sign-image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sign-title h3 {
    margin-bottom: 0.25rem;
    color: var(--color-text-dark);
}

/* OLD span replaced by new specific spans */
.sign-title span {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-accent-jade);
}

/* NEW: Glyph/Month Name Style */
.sign-name-glyph {
    color: var(--color-accent-jade);
    font-size: 1.75rem; /* Make glyph name bigger */
    font-weight: bold;
    margin-right: 0.5rem;
}
/* NEW: Number/Day Style */
.sign-name-number {
    color: var(--color-text-muted);
    font-size: 1.5rem; /* Make number slightly smaller */
    font-weight: bold; 
}


.sign-desc p {
    color: var(--color-text-muted);
    margin-bottom: 1rem; /* Increase spacing between paragraphs */
}

.sign-desc p:last-child {
    margin-bottom: 0;
}

.coming-soon {
    font-style: italic;
    font-size: 0.9rem;
    color: #999;
}

/* --- NEW: Sacred Birthday Card Styles --- */
.birthday-stat {
    font-size: 1.1rem;
    color: var(--color-text-dark);
}
.birthday-stat span {
    font-weight: bold;
    color: var(--color-accent-jade);
}

.blood-donor-link {
    display: inline-block;
    background-color: var(--color-logo-red);
    color: white;
    font-weight: bold;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 8px;
    margin-top: 1rem;
    transition: background-color 0.3s ease;
}
.blood-donor-link:hover {
    background-color: #a52240;
}

.locked-content {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border-light);
}
.locked-content p {
    font-size: 1.1rem;
    color: var(--color-text-dark);
    margin-bottom: 1rem;
}

.spoiler-block {
    background-color: #eee;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    filter: blur(4px); /* Blur the content */
    transition: filter 0.3s ease;
}

/* Un-blur on hover, just for effect */
.locked-content:hover .spoiler-block {
    filter: blur(2px);
}

.spoiler-block p {
    color: #333;
    font-weight: bold;
    margin-bottom: 1rem !important; /* Override default */
}

/* Style the button inside the spoiler */
#cta-button-link {
    background-color: var(--color-accent-jade);
    font-size: 1.1rem;
}
#cta-button-link:hover {
    background-color: #2e6b5f;
}


/* --- Premium CTA (Light Style) --- */
.premium-cta {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-accent-jade);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
}

.premium-cta h3 {
    color: var(--color-accent-jade);
    font-size: 1.4rem;
}

.premium-cta p {
    color: var(--color-text-muted);
}

.premium-cta button {
    background-color: var(--color-accent-jade);
    margin-top: 1rem;
}

.premium-cta button:hover {
    background-color: #2e6b5f; /* Darker Jade */
}

button:disabled {
    background-color: #aaa;
    color: #f1f1f1;
    cursor: not-allowed;
}


/* --- Contact Page Email Style --- */
.contact-email {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-text-dark);
}

.contact-email a {
    color: var(--color-accent-jade);
    text-decoration: none;
    border-bottom: 2px solid var(--color-accent-jade);
    transition: color 0.3s ease;
}

.contact-email a:hover {
    color: var(--color-logo-red);
    border-bottom-color: var(--color-logo-red);
}

/* --- NEW: Glyph List for Tzolkin Page --- */
.glyph-list {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Changed to 4 columns */
    gap: 1rem; /* Space between items */
    color: var(--color-text-muted);
}

.glyph-list li {
    display: flex;
    flex-direction: column; /* Stack image and text vertically */
    align-items: center;     /* Center-align items */
    gap: 0.3rem;             /* Reduced gap for compact look */
    padding: 0.25rem;
    font-size: 0.95rem;      /* Slightly smaller font to fit */
    text-align: center;
}

.glyph-list li img {
    width: 30px; 
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Style for the span inside the list item */
.glyph-list li span {
    line-height: 1.3;
}

/* --- NEW: Restore default bulleted list style --- */
/* === THIS IS THE FIX === */
/* We added .calculator-container to this selector */
.content-page-container ul:not(.glyph-list),
.calculator-container ul:not(.glyph-list) {
    list-style: disc;     /* Show the default bullet point */
    padding-left: 40px;   /* Add the indentation (the "tab") */
    margin-top: 1rem;     /* Add space above the list */
    margin-bottom: 1rem;  /* Add space below the list */
    color: var(--color-text-muted); /* Match paragraph text color */
}

/* Style for the list items inside this default list */
.content-page-container ul:not(.glyph-list) li,
.calculator-container ul:not(.glyph-list) li {
    margin-bottom: 0.5rem; /* Add a little space between list items */
}

.error-text {
    color: var(--color-logo-red);
    font-weight: bold;
    margin-top: 1rem;
    font-size: 1.1rem;
    /* This prevents the layout from "jumping" when text appears */
    min-height: 1.2em; 
}

/* --- NEW: Orbital Diagram Styles --- */
.orbital-diagram-container {
    /* UPDATED: Removed spacing/border */
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    text-align: center;
}

#venus-orbit-canvas {
    background-color: #eee;
    border-radius: 8px;
    border: 1px solid var(--color-border-light);
    max-width: 100%;
    height: auto;
    /* Your animation script will draw on this */
}

.orbital-controls {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.orbital-controls label {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--color-text-muted);
}

input[type="range"] {
    width: 80%;
    cursor: pointer;
}

/* --- NEW: Venus Tracker Summary Styles --- */
#venus-tracker-summary {
    /* This is the sign-summary box under the diagram */
    margin-top: 0; /* Removed top margin */
    margin-bottom: 1.5rem; /* Add space between summary and diagram */
}

#venus-tracker-summary p {
    /* Make text slightly smaller than the default 1.25rem */
    font-size: 1.1rem;
    color: var(--color-accent-jade); /* <-- ADD THIS LINE */
    font-weight: bold;             /* <-- ADD THIS LINE */
}

#venus-tracker-summary #venus-cycle-note {
    /* Style for the (Day X of Y) text */
    font-size: 1.1rem;
    font-style: normal;
    font-weight: bold;
    color: var(--color-accent-jade); /* <-- UPDATED TO GREEN */
}

/* --- NEW: Venus Energy Card Style --- */
.venus-energy-card {
    background-color: #fdf2f2; /* A light, soft red/pink */
    border-color: #f8d7da; /* A slightly darker border */
}

.venus-energy-card h3 {
    color: var(--color-logo-red); /* Make the heading match the logo red */
    margin-top: 0.5rem; /* Reduce top margin for this card */
}

.venus-energy-card p {
    color: #5c2121; /* Darker, slightly reddish text for good contrast */
}

.venus-energy-card strong {
    color: #3d1616; /* Even darker for strong text */
}


/* --- Footer (Stays Dark) --- */
.main-footer {
    width: 100%;
    text-align: center;
    padding: 2rem;
    background-color: var(--color-bg-light);
    border-top: 1px solid var(--color-border);
    color: #aaa;
    margin-top: auto; /* This is the sticky footer fix */
}

/* --- UPDATED: .hidden class for transition --- */
.hidden {
    opacity: 0;
    transform: translateY(-20px);
    visibility: hidden; /* Use visibility to hide from layout */
    pointer-events: none; /* Prevent clicks */
    /* REMOVED all the max-height/padding/margin/border rules */
}

/* === NEW RULE FOR TODAY PAGE === */
/* This re-centers the h1 and direct <p> child on the Today page */
.today-page h1,
.today-page > p {
    text-align: center;
}

/* === NEW: Recalculate Button Styles === */
.recalculate-section {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border-light);
}

#recalculateButton {
    background-color: var(--color-accent-jade); /* Use Jade */
    font-size: 1.1rem;
}

#recalculateButton:hover {
    background-color: #2e6b5f; /* Darker Jade */
}

#recalculateButton:hover {
    background-color: #2e6b5f; /* Darker Jade */
}

.initial-hide {
    display: none;
}

/* --- NEW: Mobile Navigation Styles --- */

/* 1. Style the hamburger button itself */
.mobile-menu-toggle-btn {
    display: none; /* Hide on desktop */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001; /* Make sure it's on top */
}

/* FIX: Override the general button:hover for the hamburger */
.mobile-menu-toggle-btn:hover {
    background-color: transparent;
}

/* Find this existing rule */
.mobile-menu-toggle-btn span {
    width: 30px;
    height: 3px;
    background-color: var(--color-text-light); /* White bars */
    border-radius: 2px;
    
    /* === ADD THIS LINE === */
    transition: all 0.3s ease-in-out;
}

/* --- THIS IS THE CORRECT, FINAL CODE --- */

/* This rule styles the TOP bar when open */
.mobile-menu-toggle-btn.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

/* This rule HIDES the MIDDLE bar when open */
.mobile-menu-toggle-btn.is-open span:nth-child(2) {
    opacity: 0;
}

/* This rule styles the BOTTOM bar when open */
.mobile-menu-toggle-btn.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* --- NEW: Unified Mobile Styles (Replaces both @media blocks) --- */
@media (max-width: 768px) {

    /* --- Mobile Nav Rules --- */

    /* Show the hamburger button */
    .mobile-menu-toggle-btn {
        display: flex;
    }

    /* Hide the old nav and restyle it as a slide-out menu */
    .main-nav {
        position: fixed; /* Take it out of the page flow */
        z-index: 1000;
        top: 0;
        right: 0; /* Start it off-screen to the right */
        width: 280px; /* Menu width */
        height: 100vh; /* Full screen height */
        background-color: var(--color-bg-light); /* Dark menu background */
        
        /* This hides it off-screen */
        transform: translateX(100%); 
        transition: transform 0.3s ease-in-out;
    }
        
    /* Re-style the UL for vertical links */
    .main-nav ul {
        flex-direction: column;
        align-items: flex-start;
        padding: 5rem 2rem;
        width: 100%;
        gap: 1rem; /* This creates the space BETWEEN each link item */
    }
    
    /* Re-style the links for tapping */
    .main-nav a {
        display: block;
        font-size: 1.3rem;
        color: var(--color-text-light);
        padding: 1.2rem 0; 
        border-bottom: 2px solid var(--color-border);
        width: 100%;
    }
    
    .main-nav a.active {
        border-bottom-color: var(--color-logo-red);
    }
    
    /* This class will be added by JS to show the menu */
    .main-nav.is-open {
        transform: translateX(0); /* Slide it on-screen */
        box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    }
    
    /* This class will be added by JS to the <body> to stop scrolling */
    body.mobile-menu-open {
        overflow: hidden;
    }

    /* --- Mobile Padding & Layout Fixes --- */
    
    main {
        /* Reduce 'black border' padding */
        padding: 10px; 
    }

    .content-page-container,
    .calculator-container {
        /* Reduce 'white page' padding */
        padding: 1.5rem; 
    }
    
    /* Further reduce padding *only* for the index results */
    .content-page-container#results {
        padding: 1rem; 
    }

    /* Fixes large gap in report card headers */
    .sign-header {
        flex-wrap: wrap;
        justify-content: center; /* Centers the images */
        padding-bottom: 1.5rem;  /* Mobile-only space */
        margin-bottom: 1.5rem;   /* Mobile-only space */
        gap: 0; /* Kills the 1rem vertical gap */
    }

    /* This centers the text *within* its own block */
    .sign-header .sign-title {
        width: 100%;
        text-align: center;
        margin-top: 0.5rem; /* Adds back a small, controlled gap */
    }

    /* This removes the 2rem top margin from the h3 (e.g., "Your Trecana") */
    .sign-header .sign-title h3 {
        margin-top: 0; /* Set h3 margin to 0 */
    }

    /* This removes the large top-margin from the loaded Tzolkin report text */
    #tzolkin-full-desc > :first-child {
        margin-top: 0;
    }

    /* --- Summary Card Layout --- */

    /* Force text to new line, align left, and tighten up */
    .summary-sign-display p {
        width: 100%;          /* <-- FIX: Forces wrap */
        text-align: left;     /* <-- FIX: Aligns text left */
        margin-top: 0.1rem;   /* Tight margin */
        font-size: 1.1rem;    /* Smaller font */
        line-height: 1.3;     /* Tighter line height */
    }
}

/* --- Add this to the bottom of style.css --- */

/* 1. The Main Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Use your site's dark color with transparency */
    background-color: rgba(33, 33, 33, 0.95);
    z-index: 9998; /* On top of everything */

    /* Center the logo */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    
    /* Transition for fading in and out */
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

/* 2. The Active State (toggled by JS) */
.loading-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* 3. The Logo */
.loading-logo {
    width: 150px;
    height: 150px;
    
    /* Apply the animation */
    animation: pulse-glow 1.5s infinite ease-in-out;
}

/* 4. The Animation Keyframes */
@keyframes pulse-glow {
    0% {
        transform: scale(1);
        /* Use drop-shadow for SVGs/transparent PNGs */
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 15px rgba(255, 255, 255, 1)) 
                drop-shadow(0 0 15px var(--color-logo-red));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
    }
}