/*
Theme Name: Clarity
Theme URI: https://www.tondreole.com
Author: Tondré Olé
Author URI: https://www.tondreole.com
Description: An interactive website for Tondré Olé's book, From Chaos to Clarity.
Version: 1.0
Text Domain: clarity-compass
*/

/* --- Start of your provided CSS below this line --- */



/*
==================================================================
== START: Momo & Tools Section Effect (v28 - Blending Mist) ==
==================================================================
*/

/*
 * This targets the NEW wrapper div and makes it a container.
*/
.orb-wrapper {
    position: relative;
    overflow: hidden;
}

/*
 * This container holds the orbs AND the new sparkle effect.
 * It is now inside .orb-wrapper
*/
.momo-orb-background {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;

    /* --- FROSTING & LIGHTER BLUE TINT --- */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: rgba(0, 120, 180, 0.45); /* LIGHTER, MORE BLUE */
    box-shadow: inset 0 0 100px 40px rgba(26, 46, 64, 0.6); /* Blue vignette */


    /* --- SPARKLE/STARDUST EFFECT (LAYER 1: Small White) --- */
    background-image: radial-gradient(circle, rgba(255,255,255,0.7) 1px, transparent 1px);
    background-size: 100px 100px;
    background-position: 0 0;
    animation: sparklePath1 60s linear infinite;
}

/* --- SPARKLE LAYER 3 (Tiny Gold) --- */
.momo-orb-background::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(circle, rgba(255,215,0,0.5) 1px, transparent 1px);
    background-size: 80px 80px;
    background-position: 0 0;
    animation: sparklePath1 75s linear infinite reverse;
    z-index: -1;
}

/* --- "RANDOM" STAR ANIMATIONS --- */
@keyframes sparklePath1 {
    0% { background-position: 0 0; }
    50% { background-position: -300px 100px; }
    100% { background-position: 0 0; }
}

/*
 * NEW: This is the psychedelic "mist" effect.
 * It sits on top of the blue background (z-index: 1)
*/
.psychedelic-mist-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 250px; /* The height of the fade */
    z-index: 1; /* Sits on top of blue bg, below content */
    pointer-events: none; /* Lets you click through it */

    /* 1. Copy the body's psychedelic background */
    background: linear-gradient(45deg, var(--color-logo-dark-blue), var(--color-logo-bright-blue), var(--color-soft-pink), var(--color-logo-dark-blue));
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite; /* Use the same animation */

    /* 2. Fade it out to transparent at the bottom */
    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}


/*
 * This makes the #momo AND #tools content sit ON TOP of the mist.
 * z-index must be 2
*/
#momo .container,
#tools .container {
    position: relative;
    z-index: 2 !important; /* Must be higher than the mist (z-index: 1) */
}

/*
 * Make text white in Momo & Tools boxes
*/
#momo .max-w-2xl .bg-card-bg-translucent h3,
#momo .max-w-2xl .bg-card-bg-translucent p,
#tools .bg-card-bg-translucent h3,
#tools .bg-card-bg-translucent p {
    color: #FFFFFF !important;
}

/*
 * Keep input text dark
*/
#momo .bg-card-bg-translucent textarea,
#tools .bg-card-bg-translucent textarea {
    color: var(--color-deep-charcoal) !important; 
}

/*
 * Make ALL results boxes white with dark text
*/
#momo-output, #dream-output, #affirmation-output,
#clarity-output, #vibe-output, #mindful-output, #belief-output {
    background-color: #FFFFFF !important;
    color: var(--color-deep-charcoal) !important;
    padding: 1rem;
    border-radius: 0.75rem;
}


/*
 * Style for the scrolling quote cards
 * Removed the gold glow box-shadow
*/
#momo .momo-scroll-wrapper .bg-card-bg-translucent {
    background-color: #FFFFFF !important; /* Make card white */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15) !important; /* Back to a simple shadow */
}

/*
 * Set text color for scrolling cards back to dark
*/
#momo .momo-scroll-wrapper .bg-card-bg-translucent p {
    color: var(--color-deep-charcoal) !important;
}


/*
 * Remove glow from #tools meditation image
 * (Replaced with a standard shadow)
*/
#tools .flex.justify-center.my-8 > img {
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05) !important;
}

/*
 * Add static gold glow to all 6 tool windows
*/
#tools .bg-card-bg-translucent {
    box-shadow: 0 0 20px 8px rgba(255, 215, 0, 0.5) !important;
}


/* Base style for all 7 orbs */
.momo-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(15px);
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.3); /* Soft white */
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* --- Define the 7 orbs (with new animations) --- */

/* Orb 1: Large. */
.momo-orb:nth-child(1) {
    width: 250px; height: 250px;
    top: 10%; left: 10%;
    animation-name: randomExplore1;
    animation-duration: 25s;
}

/* Orb 2: Medium. */
.momo-orb:nth-child(2) {
    width: 180px; height: 180px;
    top: 10%; left: 5%;
    animation-name: randomExplore2;
    animation-duration: 30s;
    animation-delay: -5s;
}

/* Orb 3: Small. */
.momo-orb:nth-child(3) {
    width: 80px; height: 80px;
    top: 80%; left: 80%;
    animation-name: randomExplore3;
    animation-duration: 20s;
}

/* Orb 4: Medium. */
.momo-orb:nth-child(4) {
    width: 150px; height: 150px;
    top: 70%; left: 10%;
    animation-name: randomExplore2;
    animation-duration: 35s;
    animation-delay: -3s;
}

/* Orb 5: Large. */
.momo-orb:nth-child(5) {
    width: 220px; height: 220px;
    top: 60%; left: 70%;
    animation-name: randomExplore1;
    animation-duration: 28s;
    animation-delay: -10s;
}

/* Orb 6: Small. */
.momo-orb:nth-child(6) {
    width: 100px; height: 100px;
    top: 85%; left: 40%;
    animation-name: randomExplore3;
    animation-duration: 18s;
    animation-delay: -7s;
}

/* Orb 7: Medium. */
.momo-orb:nth-child(7) {
    width: 120px; height: 120px;
    top: -10%; left: 30%;
    animation-name: randomExplore2;
    animation-duration: 22s;
}


/* --- NEW Animation Keyframes (Random Explore Paths) --- */
@keyframes randomExplore1 {
    0% { transform: translate(0, 0); }
    20% { transform: translate(100px, -150px); }
    40% { transform: translate(-50px, 100px); }
    60% { transform: translate(120px, 200px); }
    80% { transform: translate(50px, -100px); }
    100% { transform: translate(0, 0); }
}

@keyframes randomExplore2 {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-150px, 80px); }
    40% { transform: translate(100px, -100px); }
    60% { transform: translate(-100px, 150px); }
    80% { transform: translate(50px, -50px); }
    100% { transform: translate(0, 0); }
}

@keyframes randomExplore3 {
    0% { transform: translate(0, 0); }
    20% { transform: translate(80px, 180px); }
    40% { transform: translate(-100px, -50px); }
    60% { transform: translate(120px, 100px); }
    80% { transform: translate(-150px, -200px); }
    100% { transform: translate(0, 0); }
}


/*
 * Keyframe for the "Ask Momo" box
*/
@keyframes oracleGlow {
    0% {
        border-color: var(--color-gold-accent);
        box-shadow: 0 0 20px 5px rgba(255, 215, 0, 0.3);
    }
    50% {
        border-color: #FFEC8B; /* Lighter gold */
        box-shadow: 0 0 40px 15px rgba(255, 215, 0, 0.7); /* Brighter glow */
    }
    100% {
        border-color: var(--color-gold-accent);
        box-shadow: 0 0 20px 5px rgba(255, 215, 0, 0.3);
    }
}

/*
==================================================================
== END: Momo & Tools Section Effect (v28) ==
==================================================================
*/




:root {
    /* Psychedelic Palette - Inspired by Logo Blues */
    --color-logo-dark-blue: #1A2E40;
    --color-logo-bright-blue: #00BFFF;
    --color-deep-charcoal: #36454F;
    --color-gold-accent: #FFD700;
    --color-warm-yellow: #FFC107;
    --color-soft-pink: #FFB6C1;
    --color-card-bg-translucent: rgba(255, 255, 255, 0.20);
    --color-header-footer-bg: rgba(26, 46, 64, 0.95);
    --color-main-text-on-gradient: #F0F8FF;
    --color-dark-text-on-light: #36454F;
}

/*
==================================================================
== BLOCK 1: Normal Windows (Hero, Journey, Principles) ==
==================================================================
*/
#hero,
#journey,
#principles {
    background-color: var(--color-card-bg-translucent);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
    border-radius: 1.5rem;
    margin: 3rem 1.5rem;
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    #hero,
    #journey,
    #principles {
        margin: 1.5rem 0.5rem;
        padding: 1rem;
    }
}
/*
==================================================================
== END: Normal Windows ==
==================================================================
*/

/*
==================================================================
== START: Momo Section Code (SEPARATE) (v51 - Rotating Orbs) ==
==================================================================
*/

/* 1. Momo Container Window */
#momo {
    margin: 3rem 1.5rem;
    border-radius: 1.5rem;
    position: relative;
    z-index: 1;
    background-color: transparent;
    padding: 0 !important;
    overflow: hidden;
}

/* 2. Momo's Inner Background (frost, stars, vignette, blue) */
#momo .momo-orb-background {
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: rgba(0, 120, 180, 0.45);
    box-shadow: inset 0 0 100px 40px rgba(26, 46, 64, 0.6);

    /* --- Sporadic Star Cluster (Layer 1) --- */
    background-image: 
        radial-gradient(circle, rgba(255,255,255,0.7) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,0.5) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,0.7) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,0.6) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,0.4) 2px, transparent 2px),
        radial-gradient(circle, rgba(255,255,255,0.5) 2px, transparent 2px);
    
    background-size: 
        300px 300px, 
        400px 400px, 
        250px 250px, 
        500px 500px,
        350px 350px,
        450px 450px;

    background-position: 
        10px 30px, 
        150px 80px, 
        220px 180px, 
        300px 280px, 
        100px 250px, 
        380px 120px;

    animation: sparklePath1 60s linear infinite;
}

#momo .momo-orb-background::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    
    /* --- Sporadic Star Cluster (Layer 2 - Gold) --- */
    background-image: 
        radial-gradient(circle, rgba(255,215,0,0.5) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,215,0,0.4) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,215,0,0.5) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,215,0,0.3) 2px, transparent 2px);
    
    background-size: 
        200px 200px, 
        300px 300px, 
        150px 150px, 
        400px 400px;
        
    background-position: 
        50px 100px, 
        120px 200px, 
        200px 30px, 
        280px 140px;
        
    animation: sparklePath1 75s linear infinite reverse;
}

/* 3. Momo's Content Layer */
#momo .container {
    position: relative;
    z-index: 2 !important;
}

/* 4. Styles for content *inside* Momo */
#momo .max-w-2xl .bg-card-bg-translucent h3,
#momo .max-w-2xl .bg-card-bg-translucent p {
    color: #FFFFFF !important;
}
#momo .bg-card-bg-translucent textarea {
    color: var(--color-deep-charcoal) !important; 
}
#momo-output {
    background-color: #FFFFFF !important;
    color: var(--color-deep-charcoal) !important;
    padding: 1rem;
    border-radius: 0.75rem;
}
#momo .momo-scroll-wrapper .bg-card-bg-translucent {
    background-color: #FFFFFF !important;
    /* NEW: This 'inset' shadow creates the inner vignette/ancestral look */
    box-shadow: inset 0 0 40px rgba(139, 69, 19, 0.15), 0 8px 32px 0 rgba(0, 0, 0, 0.15) !important; 
    border: 1px solid rgba(212, 175, 55, 0.4); /* Adds a thin antique gold border */
    color: var(--color-deep-charcoal) !important;
    transition: all 0.3s ease-in-out;
}

/* --- FIX: Stop the pulsating light on the Ask Momo box --- */
#momo .max-w-2xl .bg-card-bg-translucent {
    animation: none !important; /* Stops the movement */
    box-shadow: 0 0 20px 8px rgba(255, 215, 0, 0.5) !important; /* Keeps a steady, static light */
    border-color: var(--color-gold-accent) !important;
}

/* 5. Orb Definitions (MOMO ONLY) - NEW ANIMATIONS */
#momo .momo-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(15px);
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.3);
    animation-iteration-count: infinite;
    animation-timing-function: linear; /* Changed for smooth rotation */
    /* animation-direction: alternate; <--- REMOVED for continuous loop */
}
/* Orb 1: Large. (Stand Still) */
#momo .momo-orb:nth-child(1) { width: 250px; height: 250px; top: 10%; left: 10%; animation-name: none; }

/* Orb 2: Medium. (Clockwise) */
#momo .momo-orb:nth-child(2) { width: 180px; height: 180px; top: 10%; left: 5%; animation-name: rotateClockwise; animation-duration: 30s; animation-delay: -5s; }

/* Orb 3: Small. (Counter-Clockwise) */
#momo .momo-orb:nth-child(3) { width: 80px; height: 80px; top: 80%; left: 80%; animation-name: rotateCounterClockwise; animation-duration: 25s; }

/* Orb 4: Medium. (Stand Still) */
#momo .momo-orb:nth-child(4) { width: 150px; height: 150px; top: 70%; left: 10%; animation-name: none; }

/* Orb 5: Large. (Counter-Clockwise) */
#momo .momo-orb:nth-child(5) { width: 220px; height: 220px; top: 60%; left: 70%; animation-name: rotateCounterClockwise; animation-duration: 40s; animation-delay: -10s; }

/* Orb 6: Small. (Clockwise) */
#momo .momo-orb:nth-child(6) { width: 100px; height: 100px; top: 85%; left: 40%; animation-name: rotateClockwise; animation-duration: 22s; animation-delay: -7s; }

/* Orb 7: Medium. (Counter-Clockwise) */
#momo .momo-orb:nth-child(7) { width: 120px; height: 120px; top: -10%; left: 30%; animation-name: rotateCounterClockwise; animation-duration: 35s; }


/* 6. Momo Mobile Adjustments */
@media (max-width: 768px) {
    #momo {
        margin: 1.5rem 0.5rem;
        padding: 0 !important;
    }
}

/* --- 7. NEW Animation Keyframes --- */
/* (This block should be at the end of the Momo section) */

@keyframes sparklePath1 {
    0% { background-position: 0 0; }
    50% { background-position: -300px 100px; }
    100% { background-position: 0 0; }
}

@keyframes oracleGlow {
    0% {
        border-color: var(--color-gold-accent);
        box-shadow: 0 0 20px 5px rgba(255, 215, 0, 0.3);
    }
    50% {
        border-color: #FFEC8B;
        box-shadow: 0 0 40px 15px rgba(255, 215, 0, 0.7);
    }
    100% {
        border-color: var(--color-gold-accent);
        box-shadow: 0 0 20px 5px rgba(255, 215, 0, 0.3);
    }
}

/* NEW: Clockwise "orbit" */
@keyframes rotateClockwise {
    0% { transform: translate(0, 0); }
    25% { transform: translate(150px, 50px); }
    50% { transform: translate(0, 150px); }
    75% { transform: translate(-150px, 50px); }
    100% { transform: translate(0, 0); }
}

/* NEW: Counter-Clockwise "orbit" */
@keyframes rotateCounterClockwise {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-150px, 50px); }
    50% { transform: translate(0, 150px); }
    75% { transform: translate(150px, 50px); }
    100% { transform: translate(0, 0); }
}

/*
==================================================================
== END: Momo Section Code ==
==================================================================
*/

/*
==================================================================
== START: Tools Section Code (SEPARATE) (v51 - Slower Drift) ==
==================================================================
*/

/* 1. Tools Container Window */
#tools {
    margin: 3rem 1.5rem;
    border-radius: 1.5rem;
    position: relative;
    z-index: 1;
    background-color: transparent;
    padding: 0 !important;
    overflow: hidden;
}

/* 2. Tool's Inner Background (vignette, blue, orbs) */
#tools .momo-orb-background {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    
    /* --- Blue tint and vignette ONLY --- */
    background-color: rgba(0, 120, 180, 0.45);
    box-shadow: inset 0 0 100px 40px rgba(26, 46, 64, 0.6);

    /* --- FORCE REMOVE STARS --- */
    background-image: none !important; 
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* --- FORCE REMOVE 2ND STAR LAYER --- */
#tools .momo-orb-background::after {
    content: 'none' !important;
    display: none !important;
}


/* 3. Tools Content Layer */
#tools .container {
    position: relative;
    z-index: 2 !important;
}

/* 4. Styles for content *inside* Tools */
#tools .text-center h2,
#tools .text-center p {
    color: #FFFFFF !important;
}
#tools .bg-card-bg-translucent h3,
#tools .bg-card-bg-translucent p {
     color: #FFFFFF !important;
}
#tools .bg-card-bg-translucent textarea {
    color: var(--color-deep-charcoal) !important; 
}
#dream-output, #affirmation-output,
#clarity-output, #vibe-output, #mindful-output, #belief-output {
    background-color: #FFFFFF !important;
    color: var(--color-deep-charcoal) !important;
    padding: 1rem;
    border-radius: 0.75rem;
}
#tools .bg-card-bg-translucent {
    box-shadow: 0 0 20px 8px rgba(255, 215, 0, 0.5) !important;
}
#tools .flex.justify-center.my-8 > img {
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05) !important;
}

/* 5. Orb Definitions (TOOLS ONLY) */
#tools .momo-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(15px);
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.3);
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out; /* Smoother easing */
    animation-direction: alternate; /* Makes movement seamless */
}
/* --- NEW SLOWER DURATIONS --- */
#tools .momo-orb:nth-child(1) { width: 250px; height: 250px; top: 10%; left: 10%; animation-name: wideDrift1; animation-duration: 45s; }
#tools .momo-orb:nth-child(2) { width: 180px; height: 180px; top: 10%; left: 5%; animation-name: wideDrift2; animation-duration: 50s; animation-delay: -5s; }
#tools .momo-orb:nth-child(3) { width: 80px; height: 80px; top: 80%; left: 80%; animation-name: wideDrift3; animation-duration: 35s; }
#tools .momo-orb:nth-child(4) { width: 150px; height: 150px; top: 70%; left: 10%; animation-name: wideDrift2; animation-duration: 60s; animation-delay: -3s; }
#tools .momo-orb:nth-child(5) { width: 220px; height: 220px; top: 60%; left: 70%; animation-name: wideDrift1; animation-duration: 48s; animation-delay: -10s; }
#tools .momo-orb:nth-child(6) { width: 100px; height: 100px; top: 85%; left: 40%; animation-name: wideDrift3; animation-duration: 40s; animation-delay: -7s; }
#tools .momo-orb:nth-child(7) { width: 120px; height: 120px; top: -10%; left: 30%; animation-name: wideDrift2; animation-duration: 55s; }

/* 6. Tools Mobile Adjustments */
@media (max-width: 768px) {
    #tools {
        margin: 1.5rem 0.5rem;
        padding: 0 !important;
    }
}

/* --- 7. Animation Keyframes for Tools Orbs --- */
/* These are now part of the Tools block */

@keyframes wideDrift1 {
    0% { transform: translate(0, 0); }
    25% { transform: translate(40vw, -30vh); }
    50% { transform: translate(-20vw, 40vh); }
    75% { transform: translate(30vw, -10vh); }
    100% { transform: translate(0, 0); }
}

@keyframes wideDrift2 {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-30vw, 20vh); }
    50% { transform: translate(10vw, -40vh); }
    75% { transform: translate(-25vw, 10vh); }
    100% { transform: translate(0, 0); }
}

@keyframes wideDrift3 {
    0% { transform: translate(0, 0); }
    25% { transform: translate(10vw, 50vh); }
    50% { transform: translate(-40vw, -30vh); }
    75% { transform: translate(20vw, 20vh); }
    100% { transform: translate(0, 0); }
}

/*
==================================================================
== END: Tools Section Code ==
==================================================================
*/


/*
==================================================================
== BLOCK 4: Shared Keyframes ==
==================================================================
*/

/* Star animation (MOMO ONLY) */
@keyframes sparklePath1 {
    0% { background-position: 0 0; }
    50% { background-position: -300px 100px; }
    100% { background-position: 0 0; }
}

/* Orb animations (MOMO & TOOLS) */
@keyframes randomExplore1 {
    0% { transform: translate(0, 0); }
    20% { transform: translate(100px, -150px); }
    40% { transform: translate(-50px, 100px); }
    60% { transform: translate(120px, 200px); }
    80% { transform: translate(50px, -100px); }
    100% { transform: translate(0, 0); }
}
@keyframes randomExplore2 {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-150px, 80px); }
    40% { transform: translate(100px, -100px); }
    60% { transform: translate(-100px, 150px); }
    80% { transform: translate(50px, -50px); }
    100% { transform: translate(0, 0); }
}
@keyframes randomExplore3 {
    0% { transform: translate(0, 0); }
    20% { transform: translate(80px, 180px); }
    40% { transform: translate(-100px, -50px); }
    60% { transform: translate(120px, 100px); }
    80% { transform: translate(-150px, -200px); }
    100% { transform: translate(0, 0); }
}

/* Momo's glow box animation (MOMO ONLY) */
@keyframes oracleGlow {
    0% {
        border-color: var(--color-gold-accent);
        box-shadow: 0 0 20px 5px rgba(255, 215, 0, 0.3);
    }
    50% {
        border-color: #FFEC8B;
        box-shadow: 0 0 40px 15px rgba(255, 215, 0, 0.7);
    }
    100% {
        border-color: var(--color-gold-accent);
        box-shadow: 0 0 20px 5px rgba(255, 215, 0, 0.3);
    }
}
/*
==================================================================
== END: Shared Keyframes ==
==================================================================
*/

body {
    font-family: 'Inter', sans-serif;
    color: var(--color-main-text-on-gradient);
    background: linear-gradient(45deg, var(--color-logo-dark-blue), var(--color-logo-bright-blue), var(--color-soft-pink), var(--color-logo-dark-blue));
    background-size: 400% 400%;
    -webkit-animation: gradientShift 15s ease infinite; 
    animation: gradientShift 15s ease infinite;
    background-attachment: fixed; /* <--- ADD THIS LINE --- */
}


h1, h2, h3 {
    font-family: 'Bubblegum Sans', cursive;
    color: var(--color-main-text-on-gradient);
}
/* Override for the main hero title */
#hero h1 {
    font-family: 'Montserrat', sans-serif;
}
/* Utility classes for new palette */
.text-logo-dark-blue { color: var(--color-logo-dark-blue); }
.bg-logo-dark-blue { background-color: var(--color-logo-dark-blue); }
.text-logo-bright-blue { color: var(--color-logo-bright-blue); }
.bg-logo-bright-blue { background-color: var(--color-logo-bright-blue); }
.text-deep-charcoal { color: var(--color-deep-charcoal); }
.bg-deep-charcoal { background-color: var(--color-deep-charcoal); }
.text-gold-accent { color: var(--color-gold-accent); }
.bg-gold-accent { background-color: var(--color-gold-accent); }
.hover\:bg-gold-accent:hover { background-color: var(--color-gold-accent); }
.hover\:text-gold-accent:hover { color: var(--color-gold-accent); }
.text-warm-yellow { color: var(--color-warm-yellow); }
.bg-warm-yellow { background-color: var(--color-warm-yellow); }
.hover\:bg-warm-yellow:hover { background-color: var(--color-warm-yellow); }
.hover\:text-warm-yellow:hover { color: var(--color-warm-yellow); }
.text-soft-pink { color: var(--color-soft-pink); }
.bg-soft-pink { background-color: var(--color-soft-pink); }
.bg-card-bg-translucent {
    background-color: var(--color-card-bg-translucent); /* Uses the new 0.20 opacity */
    
    /* These are the magic lines from your .content-window style */
    -webkit-backdrop-filter: blur(12px); 
    backdrop-filter: blur(12px);

    /* A subtle border to define the "glass" edge */
    border: 1px solid rgba(255, 255, 255, 0.25);
    
    /* A softer shadow to lift it off the page */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
}
.bg-header-footer-bg { background-color: var(--color-header-footer-bg); }
.text-main-text-on-gradient { color: var(--color-main-text-on-gradient); }
.text-dark-text-on-light { color: var(--color-dark-text-on-light); }
/* Overrides and animations */
.active-nav {
    color: var(--color-gold-accent) !important;
    font-weight: 700;
}
.principle-card, .bg-card-bg-translucent {
    border-radius: 1.5rem;
    transition: all 0.3s ease-in-out;
}
.principle-card.active {
    background-color: var(--color-gold-accent);
    color: var(--color-dark-text-on-light);
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 25px -5px rgba(0,0,0,0.2), 0 6px 10px -6px rgba(0,0,0,0.1);
}
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.loading-dots span {
    animation: bounce 1s infinite;
}
.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}
.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes bounce {
    0%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
}
/* New psychedelic gradient animation for fluctuation */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* Momo's Wisdom Auto-Scroll Animation */
.momo-scroll-wrapper {
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -ms-overflow-style: none;  /* for IE and Edge */
    scrollbar-width: none;  /* for Firefox */
}
.momo-scroll-wrapper::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}
.momo-card-container {
    /* IMPROVEMENT: Increased animation duration for a slower, more graceful scroll */
    -webkit-animation: scrollAnimation 15s linear infinite; /* Added for WebKit browsers */
    animation: scrollAnimation 15s linear infinite;
}
.momo-scroll-wrapper:hover .momo-card-container {
    -webkit-animation-play-state: paused; /* Added for WebKit browsers */
    animation-play-state: paused;
}
@keyframes scrollAnimation {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-50%);
    }
}

/* == Custom Account Page Styling == */

/* Main container for the account page */
.professional-account-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 30px;
    max-width: 800px;
    margin: 40px auto; /* Centers the container on the page */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}

/* Header section styling */
.account-header {
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 20px;
    margin-bottom: 25px;
}

.account-header h2 {
    color: #1a202c;
    font-size: 28px;
    margin-bottom: 8px;
}

.account-header p {
    color: #718096;
    font-size: 16px;
    margin: 0;
}

/* This targets the content generated by the [pms-account] shortcode */
.account-content {
    line-height: 1.6;
    color: #4a5568;
}

/* Style the headings within the shortcode content */
.account-content h3 {
    font-size: 22px;
    color: #2d3748;
    margin-top: 20px;
    border-bottom: 2px solid #cbd5e0;
    padding-bottom: 10px;
}

/* Style the links and buttons for a modern feel */
.account-content a, .account-content button, .account-content .pms-form-submit input[type="submit"] {
    color: #ffffff;
    background-color: #4299e1; /* A nice blue color */
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    display: inline-block;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 15px;
}

/* Add a hover effect for interactivity */
.account-content a:hover, .account-content button:hover, .account-content .pms-form-submit input[type="submit"]:hover {
    background-color: #2b6cb0; /* A darker blue on hover */
}

/* == End Custom Account Page Styling == */

/* == Styling for Input Fields to Make Them Visible == */

/* This targets the text, email, and password fields within your account form */
.account-content input[type="text"],
.account-content input[type="email"],
.account-content input[type="password"],
.account-content input[type="number"],
.account-content textarea,
.account-content select {
    background-color: #f7fafc;  /* This is the slightly darker background */
    border: 1px solid #cbd5e0;   /* This is the visible gray border */
    padding: 10px 12px;         /* Adds comfortable spacing inside the fields */
    border-radius: 5px;         /* Rounds the corners to match your container */
    width: 100%;                /* Ensures fields are full-width */
    box-sizing: border-box;     /* Important for proper sizing */
}

/* This adds a nice blue highlight when you click into a field */
.account-content input[type="text"]:focus,
.account-content input[type="email"]:focus,
.account-content input[type="password"]:focus,
.account-content input[type="number"]:focus,
.account-content textarea:focus,
.account-content select:focus {
    border-color: #4299e1;       /* Highlights the border in blue */
    outline: none;               /* Removes the default browser outline */
}

/* == Mobile View Adjustments for Horizontal Button Flow == */

@media (max-width: 768px) {

    /* This adds a small amount of space around each button */
    .account-content a,
    .account-content button,
    .account-content .pms-form-submit input[type="submit"] {
       margin: 5px;
    }
}

/* == Highlight the "Edit Profile" Button with a Deeper Blue == */

/* This targets ONLY the submit button that has the text "Edit Profile" */
.account-content input[type="submit"][value="Edit Profile"] {
    background-color: #3182ce; /* A richer, deeper blue */
    border-color: #3182ce;
    box-shadow: 0 4px 14px 0 rgba(49, 130, 206, 0.39);
    color: #ffffff;           /* This new line makes the text white */
    border-radius: 5px;        /* This new line curves the edges */
}

/* A slightly darker blue for the hover effect */
.account-content input[type="submit"][value="Edit Profile"]:hover {
    background-color: #2c5282;
    border-color: #2c5282;
}

/* START PASTING HERE */

/* == Zen Welcome Hero Section == */

/* --- 1. The Main Background --- */
.zen-hero-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* This makes it take up the full screen height */
    padding: 20px;
    background-image: url('https://tondreole.org/wp-content/uploads/2025/10/zen_path.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* THIS NEW LINE CREATES THE EFFECT */
    box-sizing: border-box;
}

/* --- 2. The Frosted-Glass Window --- */
.content-window {
    background: rgba(20, 20, 35, 0.25); /* Semi-transparent dark background */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* For Safari compatibility */
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    padding: 40px;
    max-width: 650px;
    text-align: center;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

/* --- 3. Input Box and Button Styling --- */
.zen-hero-section #user-name-input {
    background: rgba(0, 0, 0, 0.2); /* Overrides old background for the new look */
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
    border-radius: 50px; /* Makes it pill-shaped */
}
.zen-hero-section #user-name-input::placeholder {
    color: #cccccc;
}

.zen-hero-section #set-name-button {
    background: #3182ce; /* A nice, welcoming blue */
    border-radius: 50px; /* Matches the input box */
    border: none;
}
.zen-hero-section #set-name-button:hover {
    background: #2c5282; /* A darker blue on hover */
}

/* --- 4. Mobile Adjustments --- */
@media (max-width: 768px) {
    
    .content-window {
        padding: 30px;
        margin: 0 10px; /* Prevents window from touching screen edges */
    }
    .zen-hero-section h2 {
        font-size: 2rem; /* Slightly smaller text on mobile */
    }
}

#user-name-display {
    white-space: pre-line;
}

/* == End Zen Welcome Hero Section == */

/* STOP PASTING HERE */

/* START PASTING HERE */

/* == Adjust Height of the Support Window == */

.support-window-background {
  /* This overrides the tall padding from the registration form */
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

/* STOP PASTING HERE */

/*
==============================================
== Custom Styling for The A.R.C. Page ==
==============================================
*/

/* --- Styling for the Community Hearth (Comments Section) --- */

/* Main comments container */
.comments-area {
    background-color: var(--color-card-bg-translucent);
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

/* Title like "One thought on..." */
.comments-title {
    color: var(--color-dark-text-on-light);
    font-family: 'Bubblegum Sans', cursive;
    margin-bottom: 2rem;
    text-align: center;
    font-size: 2rem;
}

/* List of comments */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Individual comment item */
.comment-list .comment {
    border-bottom: 1px solid rgba(54, 69, 79, 0.2);
    padding: 1.5rem 0;
}
.comment-list .comment:last-child {
    border-bottom: none;
}
.comment-author .avatar {
    border-radius: 50%;
    margin-right: 1rem;
}
.comment-author .fn { /* author name */
    color: var(--color-dark-text-on-light);
    font-weight: bold;
    font-style: normal;
}
.comment-meta a { /* date link */
    color: var(--color-deep-charcoal);
    text-decoration: none;
    font-size: 0.85rem;
}
.comment-content {
    color: var(--color-dark-text-on-light);
    margin-top: 0.5rem;
}
.reply a {
    background-color: var(--color-gold-accent);
    color: var(--color-dark-text-on-light);
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.reply a:hover {
    background-color: var(--color-warm-yellow);
}

/* Comment Form Styling */
.comment-respond .comment-reply-title {
    color: var(--color-dark-text-on-light);
    text-align: center;
    font-family: 'Bubblegum Sans', cursive;
}

#commentform {
    margin-top: 1.5rem;
}

#commentform p {
    margin-bottom: 1rem;
}

#commentform label {
    display: block;
    margin-bottom: .5rem;
    font-weight: bold;
    color: var(--color-dark-text-on-light);
}

#commentform input[type="text"],
#commentform input[type="email"],
#commentform textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(54, 69, 79, 0.3);
    background-color: #FFFFFF; /* New: Solid white background */
    color: var(--color-deep-charcoal); /* New: Dark charcoal text */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus,
#commentform textarea:focus {
    outline: none;
    border-color: var(--color-gold-accent);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.4);
}

/* --- START: Upgraded Styling for the "Post Reflection" Button --- */
#commentform .submit {
    display: block;
    width: 100%;
    background-color: var(--color-gold-accent);
    color: var(--color-dark-text-on-light);
    border: none;
    padding: 0.85rem 1.5rem;
    border-radius: 9999px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);

    /* --- NEW CODE FOR ORB EFFECT --- */
    position: relative;
    overflow: hidden;
    z-index: 1; /* Ensure button content is above the orb */
}

#commentform .submit:hover {
    background-color: var(--color-warm-yellow);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* This is the orb itself */
#commentform .submit::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%, -50%);
    transform-origin: 50% 50%;
    z-index: -1; /* Place orb behind the text */
}

/* This makes the orb expand on hover */
#commentform .submit:hover::after {
    transition: all 0.8s ease-out;
    transform: scale(200, 200) translate(-50%, -50%);
    opacity: 1;
}
/* --- END: Upgraded Styling for the "Post Reflection" Button --- */

/* --- Styling for Giveaway Form (WPForms Example) --- */
#giveaways .wpforms-container .wpforms-field-label {
    color: var(--color-dark-text-on-light);
    font-weight: bold;
}

#giveaways .wpforms-container .wpforms-field input[type=text],
#giveaways .wpforms-container .wpforms-field input[type=email] {
    border-radius: 0.75rem;
    border: 1px solid rgba(54, 69, 79, 0.3);
    background-color: rgba(255, 255, 255, 0.5);
    padding: 0.75rem 1rem;
}

#giveaways .wpforms-container .wpforms-submit {
    display: block !important;
    width: 100% !important;
    background-color: var(--color-gold-accent) !important;
    color: var(--color-dark-text-on-light) !important;
    border: none !important;
    padding: 0.85rem 1.5rem !important;
    border-radius: 9999px !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
}

#giveaways .wpforms-container .wpforms-submit:hover {
    background-color: var(--color-warm-yellow) !important;
}

/*
==================================================================
== A.R.C. & Soul Spark Visuals (Consolidated & Final Code) ==
==================================================================
*/

/* --- 1. The Multi-Layered Cosmic Background --- */
body {
    background: linear-gradient(45deg, var(--color-logo-dark-blue), var(--color-logo-bright-blue), var(--color-soft-pink), var(--color-logo-dark-blue));
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;stroke:rgba(255,215,0,0.1);stroke-width:0.5px;%7D%3C/style%3E%3C/defs%3E%3Ccircle class='a' cx='50' cy='50' r='16.67'/%3E%3Ccircle class='a' cx='50' cy='50' r='33.33'/%3E%3Cpath class='a' d='M50,16.67A33.33,33.33,0,0,0,16.67,50,33.33,33.33,0,0,0,50,83.33'/%3E%3Cpath class='a' d='M50,16.67A33.33,33.33,0,0,1,83.33,50,33.33,33.33,0,0,1,50,83.33'/%3E%3Cpath class='a' d='M16.67,50a33.33,33.33,0,0,0,66.66,0'/%3E%3Cpath class='a' d='M33.33,25A33.33,33.33,0,0,1,66.67,75'/%3E%3Cpath class='a' d='M66.67,25A33.33,33.33,0,0,0,33.33,75'/%3E%3Cpath class='a' d='M33.33,75a33.33,33.33,0,0,0,33.34-50'/%3E%3Cpath class='a' d='M66.67,75a33.33,33.33,0,0,1-33.34-50'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1' fill='rgba(255,255,255,0.5)'/%3E%3Ccircle cx='50' cy='80' r='1' fill='rgba(255,255,255,0.5)'/%3E%3Ccircle cx='85' cy='30' r='1' fill='rgba(255,255,255,0.5)'/%3E%3C/svg%3E");
    animation: 
        starfieldDrift 150s linear infinite,
        geometryFade 20s ease-in-out infinite alternate;
}
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes starfieldDrift { from { background-position: 0 0, 0 0; } to { background-position: 500px 500px, 0 0; } }
@keyframes geometryFade { from { background-size: auto, auto; } 50%  { background-size: 0, auto; } to { background-size: auto, auto; } }

/* --- 2. The Floating Crystalline Panes --- */
.luminous-pane {
    background-color: var(--color-card-bg-translucent);
    border-radius: 1.5rem;
    box-shadow:
        inset 0 2px 4px 0 rgba(255, 255, 255, 0.1),
        0 0 20px 5px rgba(255, 215, 0, 0.1),
        0 8px 32px 0 rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.5s ease-out; /* This transition is for the parallax, not hover */
}

/* This allows the hero window to have the smooth parallax effect */
.content-window {
    transition: transform 0.5s ease-out;
}

/* --- 3. The Energetic Pulse Interaction (Site-Wide) --- */
button, input[type="submit"], a, .principle-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
button:hover, input[type="submit"]:hover, a:hover, .principle-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px 8px rgba(255, 215, 0, 0.5);
}
button::after, input[type="submit"]::after, a::after, .principle-card::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 5px; height: 5px;
    background: rgba(255, 215, 0, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%, -50%);
    transform-origin: 50% 50%;
}
button:hover::after, input[type="submit"]:hover::after, a:hover::after, .principle-card:hover::after {
    animation: ripple 1s ease-out;
}
@keyframes ripple { 0% { transform: scale(0, 0) translate(-50%, -50%); opacity: 1; } 100% { transform: scale(20, 20) translate(-50%, -50%); opacity: 0; } }

/* --- 4. The Soul Spark Custom Cursor --- */


#soul-spark-cursor {
    position: fixed;
    z-index: 10001;
    pointer-events: none;
    top: 0; left: 0;
    transition: transform 0.2s ease-out;
}
#soul-spark-cursor .spark {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,215,0,0.8) 0%, rgba(255,215,0,0) 60%);
    box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.7), 0 0 10px 5px rgba(255, 215, 0, 0.5), 0 0 20px 10px rgba(0, 191, 255, 0.3);
    animation: pulse 2s infinite ease-in-out;
}
@keyframes pulse { 0% { transform: scale(0.9); } 70% { transform: scale(1.1); box-shadow: 0 0 8px 4px rgba(255, 255, 255, 0.9), 0 0 15px 8px rgba(255, 215, 0, 0.7), 0 0 30px 15px rgba(0, 191, 255, 0.4); } 100% { transform: scale(0.9); } }
#soul-spark-cursor.clicked { transform: scale(0.8); }
#soul-spark-cursor.clicked .spark { background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,215,0,0) 60%); }


/*
==================================================================
== Orb Hover Effect for Buttons ==
==================================================================
*/
.btn-orb-effect {
    z-index: 1;
}
.btn-orb-effect::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: var(--x, 50%);
    top: var(--y, 50%);
    width: 0;
    height: 0;
    background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.4), transparent);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
    pointer-events: none;
}
.btn-orb-effect:hover::before {
    width: 250%;
    height: 250%;
}

/*
==================================================================
== PARALLAX & SPACING CONTROLS (Your Control Panel) ==
==================================================================
*/

/* --- Controls for "Weekly Resonance" Video Section --- */
#featured-wisdom {
    padding-top: 0;
    padding-bottom: 5rem;
}
#featured-wisdom .text-center {
    z-index: 10;
    position: relative;
}
#featured-wisdom .luminous-pane {
    max-width: 42rem; /* TO MAKE THE VIDEO SMALLER: Decrease this number (e.g., to 32rem). Default was 56rem. */
    margin-left: auto;   /* This keeps the smaller video centered */
    margin-right: auto;  /* This keeps the smaller video centered */
    margin-top: 3rem; 
    position: relative;
    z-index: 5;
}

/* --- Controls for "Collective Reflections" Section --- */
#reflections {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
#reflections .text-center {
    z-index: 10;
    position: relative;
    margin-top: 3rem; 
}
#reflections .grid {
    margin-top: 3rem; 
    position: relative;
    z-index: 5;
}

/* --- Controls for "Energetic Exchange Giveaways" Section --- */
#giveaways {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
#giveaways .text-center {
    z-index: 10;
    position: relative;
}
#giveaways .luminous-pane {
    margin-top: 3rem; 
    position: relative;
    z-index: 5;
}

/* --- Controls for "The Convergence Point" Section --- */
#community-hearth {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
#community-hearth .text-center {
    z-index: 10;
    position: relative;
}
#community-hearth .luminous-pane {
    margin-top: 3rem; 
    position: relative;
    z-index: 5;
}

/*
==================================================================
== Giveaway Pop-up Modal Styles ==
==================================================================
*/
.giveaway-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: flex-start; /* This line tells it to stick to the top */
    padding-top: 10vh;       /* This is the magic number! */
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.giveaway-modal-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

.giveaway-modal {
    position: relative;
    max-width: 600px;
    width: 90%;
    transform: scale(0.9);
    transition: transform 0.4s ease;
    
    /* --- FIX: Prevents cut-off on smaller desktop screens --- */
    max-height: 85vh;  /* Limit height to 85% of the viewport */
    overflow-y: auto;  /* Enable vertical scrolling if content overflows */
}

.giveaway-modal-overlay:not(.hidden) .giveaway-modal {
    transform: scale(1);
}

.giveaway-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: var(--color-dark-text-on-light);
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.giveaway-close-btn:hover {
    opacity: 1;
}

.giveaway-hide-link {
    color: var(--color-deep-charcoal);
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.giveaway-hide-link:hover {
    opacity: 1;
}

/* --- Styling for Reflection Category Dropdown --- */

.comment-form-category {
    /* This ensures the dropdown appears before the main text box */
    order: -1; 
}

.comment-form-category label {
    color: #C6AD8F; /* A softer gold accent */
    margin-bottom: 0.5rem;
    display: block;
}

.comment-form-category select {
    /* Remove default browser appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Custom Styling */
    background-color: #FFFFFF;
    border: 1px solid rgba(54, 69, 79, 0.3);
    border-radius: 0.5rem;
    color: var(--color-deep-charcoal);
    padding: 0.75rem 1rem;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box; /* THIS FIXES THE DIMENSION/OVERFLOW ISSUE */

    /* Custom dropdown arrow using SVG (darker charcoal arrow) */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2336454F%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: .8em;
}

.comment-form-category select:focus {
    outline: none;
    border-color: #D4AF37; /* gold-accent color */
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

/* Fix for dark options in some browsers */
.comment-form-category option {
    background: #FFFFFF;
    color: var(--color-deep-charcoal);
}

/* --- Styling for the displayed Reflection Category tag (V2) --- */
.reflection-category-display {
	/* Remove the old boxy style */
	background-color: transparent;
	border-left: none;
	padding: 0;
	box-shadow: none; /* Remove box shadow */

	/* New styling to match the comment metadata */
	margin-top: 0.25rem; /* Adds a little space below the author name */
	margin-bottom: 1rem; /* Space above the reflection text */
	font-size: 0.85rem; /* Matches the date font size */
	font-weight: bold; /* Make it bold */
	/* The color itself is now set by the PHP function */
}

.reflection-category-display span {
	/* This rule is no longer needed */
	font-weight: inherit;
	color: inherit;
}

/* ================================================================== */
/* == START: High-Priority Override for Reflections Page Appearance == */
/* ================================================================== */

/* --- 1. Style the Form Fields (Textarea, Name, Email) --- */
#share-reflection .luminous-pane #commentform textarea,
#share-reflection .luminous-pane #commentform input[type="text"],
#share-reflection .luminous-pane #commentform input[type="email"] {
    background-color: #FFFFFF !important;
    color: var(--color-deep-charcoal) !important;
}

/* --- 2. Style the Displayed Reflections ("Our Collective Wisdom") --- */
#reflection-list .luminous-pane .comment-list > .comment {
    background-color: #FFFFFF !important;
    color: var(--color-deep-charcoal) !important; /* Set default text color for the box */
    padding: 1.5rem !important; /* Add padding for visual space */
    border-radius: 0.75rem !important; /* Round the corners */
    margin-bottom: 1.5rem !important; /* Add space between reflections */
    border-bottom: none !important; /* Remove the old dividing line */
}

/* --- 3. Adjust Text Colors INSIDE the new white background --- */
/* This ensures the author name, comment text, and date are all dark */
#reflection-list .luminous-pane .comment-list .comment .comment-author .fn,
#reflection-list .luminous-pane .comment-list .comment .comment-content,
#reflection-list .luminous-pane .comment-list .comment .comment-metadata a {
	color: var(--color-deep-charcoal) !important;
}

/* This styles the category tag to also be dark */
#reflection-list .luminous-pane .comment-list .comment .reflection-category-display,
#reflection-list .luminous-pane .comment-list .comment .reflection-category-display span {
	/* Color is now set by the PHP function */
}

/* --- END: High-Priority Override --- */

/* ================================================================== */
/* == START: High-Priority Fix for ARC Page Grid Alignment == */
/* ================================================================== */

/* This overrides the parallax JavaScript's inline style */
#reflections .grid .luminous-pane {
    transform: none !important;
}

/* --- END: High-Priority Fix --- */

/* ================================================================== */
/* == START: Final Styling for Featured Reflections Lists == */
/* ================================================================== */

/* This targets the list itself (ul) inside the featured discussions section */
#featured-discussions .featured-reflections-list {
    list-style-type: none;
    padding-left: 0;
    margin-top: 1rem; /* Adds space below the paragraph text */
}

/* This targets each individual item (li) in the list */
#featured-discussions .featured-reflection-item {
    border-top: 1px solid rgba(54, 69, 79, 0.15);
    padding: 0.75rem 0;
    font-size: 0.9rem;
    color: var(--color-deep-charcoal); /* This is the key fix for the text color */
}

/* Removes the top border from the first item in the list */
#featured-discussions .featured-reflection-item:first-child {
    border-top: none;
    padding-top: 0;
}

/* Removes the bottom padding from the last item for a cleaner look */
#featured-discussions .featured-reflection-item:last-child {
    padding-bottom: 0;
}

/* Ensures the author's name (the bold part) is also dark */
#featured-discussions .featured-reflection-item strong {
    color: var(--color-dark-text-on-light);
}

/* Also fixes the color of the "No reflections on this topic yet" message */
#featured-discussions .luminous-pane p.italic {
     color: var(--color-deep-charcoal);
}

/* --- END: Final Styling for Featured Reflections Lists --- */

/* ================================================================== */
/* == START: Styling for Threaded (Nested) Replies == */
/* ================================================================== */

/* 1. This styles the container for the replies */
#reflection-list .comment-list .children {
    list-style: none;
    padding: 0; /* Remove old padding */
    /* Use negative margins to "break" out of the parent's white box padding */
    margin: 1.5rem -1.5rem -1.5rem -1.5rem; 
    border-top: 1px solid rgba(54, 69, 79, 0.15); /* Separator line from main comment */
    width: auto; /* Allow it to fill the new space */
}

/* 2. This styles the individual reply items */
#reflection-list .comment-list .children .comment {
    background-color: transparent !important; /* No white window */
    color: var(--color-deep-charcoal) !important;
    padding: 1.5rem 1.5rem 1.5rem 3rem !important; /* Add padding, with 3rem left-indent */
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px dashed rgba(54, 69, 79, 0.2) !important; /* Separator between replies */
    animation: none !important;
    transform: none !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 3. Clean up the last reply in a thread */
#reflection-list .comment-list .children .comment:last-child {
    border-bottom: none !important;
}

/* 4. Position the reply button to the right */
#reflection-list .comment-list .reply {
    text-align: right;
    margin-top: 0.5rem;
}

/* 5. Style for "X more reflection replies" link (Desktop & Mobile) */
.view-more-reflections-link {
    display: block;
    
    /* CHANGED: Deeper Gold for contrast + Shadow for pop */
    color: #C5A000 !important; 
    text-shadow: 0 1px 1px rgba(0,0,0,0.15); 
    
    font-weight: bold;
    cursor: pointer;
    padding: 1rem 1.5rem 1rem 3rem; /* Match reply indent */
    border-bottom: 1px dashed rgba(54, 69, 79, 0.2); /* Separator line */
    transition: color 0.3s ease;
}

.view-more-reflections-link:hover {
    /* CHANGED: Even deeper on hover */
    color: #B8860B !important; 
    text-decoration: underline;
}
.reflection-replies-hidden {
    display: none; /* This class hides the replies by default */
}

/* --- END: Styling for Threaded (Nested) Replies --- */

/* --- START: Improved Styling for "Cancel reply" Link --- */

/* This targets the specific "Cancel reply" link */
#cancel-comment-reply-link {
    display: block; /* Moves the link to its own line */
    margin-top: 0.5rem; /* Adds space below the main title */
    font-size: 0.9rem; /* Makes it slightly smaller than the title */
    font-weight: normal; /* Removes any bolding */
    text-decoration: underline;
    font-family: 'Inter', sans-serif; /* Use the body font, not the header font */
    color: var(--color-deep-charcoal);
}

/* --- END: Improved Styling for "Cancel reply" Link --- */


/* ================================================================== */
/* == START: Styling for Comment Pagination Links (Final Version) == */
/* ================================================================== */

/* This styles the container for the links */
#reflection-list .navigation.comment-navigation {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(54, 69, 79, 0.15);
}

/* This uses flexbox to center the links and add space between them */
#reflection-list .comment-navigation .nav-links {
    display: flex;
    justify-content: center; /* This centers the links horizontally */
    align-items: center;
    gap: 1.5rem; /* This adds space between the two links */
}

/* This styles the "Next" and "Previous" links with high specificity */
#reflection-list .comment-navigation .nav-links a {
    color: var(--color-deep-charcoal) !important;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-deep-charcoal);
    border-radius: 9999px; /* pill shape */
    transition: all 0.3s ease;
    font-weight: bold;
}

#reflection-list .comment-navigation .nav-links a:hover {
    background-color: var(--color-gold-accent);
    border-color: var(--color-gold-accent);
    color: var(--color-dark-text-on-light) !important;
}
/* --- END: Styling for Comment Pagination Links --- */

/* ================================================================== */
/* == START: High-Priority Fix for ARC Page "Read More" Link Color == */
/* ================================================================== */

/* This rule specifically targets the "Read More" links on the ARC page's reflection cards. */
/* It is more specific, so it will override the general link styles. */

#reflections .grid .luminous-pane a {
    color: var(--color-gold-accent) !important;
}

#reflections .grid .luminous-pane a:hover {
    color: var(--color-warm-yellow) !important;
}

/* --- END: High-Priority Fix for ARC Page "Read More" Link Color --- */

/* ================================================================== */
/* == START: Mobile View Fix for Giveaway Pop-up Modal == */
/* ================================================================== */

/* This media query targets screens 768px wide or smaller (most tablets and phones) */
@media (max-width: 768px) {

    /* This reduces the push from the top of the screen */
    .giveaway-modal-overlay {
        padding-top: 5vh; 
    }

    /* This is the main fix for the modal window itself */
    .giveaway-modal {
        max-height: 85vh; 
        overflow-y: auto; 
        padding: 1.5rem; 
    }

    /* Reduces the font size of the header on small screens */
    .giveaway-modal h2 {
        font-size: 1.75rem; 
    }
    .giveaway-modal h3 {
        font-size: 1.25rem;
    }

    /* --- THIS IS THE MISSING PIECE. PASTE THIS HERE: --- */
    .giveaway-modal .wpforms-field-label {
        color: #FFFFFF !important;
    }
    /* -------------------------------------------------- */

}

/* --- FIX: Force WPForms Labels to be White inside the Giveaway Modal --- */

/* 1. The Main Labels (Name, Email, etc.) */
.giveaway-modal .wpforms-field-label {
    color: #FFFFFF !important;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* Adds readability */
}

/* 2. The Sub-Labels (First, Last, etc.) */
.giveaway-modal .wpforms-field-sublabel {
    color: #E0E0E0 !important; /* Slightly softer white */
}

/* 3. The Input Description Text (if any) */
.giveaway-modal .wpforms-field-description {
    color: #E0E0E0 !important;
}

/* 4. Ensure the input boxes themselves look good */
.giveaway-modal input[type="text"],
.giveaway-modal input[type="email"] {
    background-color: rgba(255, 255, 255, 0.9) !important; /* Almost opaque white for contrast */
    color: #333333 !important; /* Keep the text typed inside DARK so it's readable */
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* --- END: Mobile View Fix for Giveaway Pop-up Modal --- */



/*
============================================================
== START: ARC Interactive Modal Styling ==
============================================================
*/

/* --- 1. The Darkened Background Overlay --- */
.arc-modal-overlay {
    position: fixed; /* Sits on top of the entire page */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex; /* Centers the content pane inside it */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensures it's on top of everything */

    /* Animation properties for smooth fade-in/out */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* This class will be added by our script to show the modal */
.arc-modal-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
}


/* --- 2. The Luminous Content Pane --- */
.arc-modal-content {
    position: relative;
    max-width: 600px; /* Adjust for wider/narrower modals */
    width: 90%;
    max-height: 85vh; /* Prevents modal from being too tall on mobile */
    overflow-y: auto; /* Adds a scrollbar if content is too long */

    /* Animation for the "spring-in" effect */
    transform: scale(0.9);
    transition: transform 0.4s ease;
}

/* When the overlay is visible, the content pane springs into place */
.arc-modal-overlay:not(.hidden) .arc-modal-content {
    transform: scale(1);
}


/* --- 3. The Close Button --- */
.arc-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: var(--color-dark-text-on-light);
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.arc-modal-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}


/*
==================================================================
== START: REVISED STYLES FOR REFLECTIONS PAGE VIDEO BACKGROUND ==
==================================================================
*/

/* This class is added by WordPress to the body tag on our specific page template */
body.page-template-template-reflections-php {
    position: relative; /* Creates a stacking context */
}

/* This is the new container for the fixed video */
.section-video-bg {
    position: fixed;    /* Sticks to the viewport, ignoring scroll */
    top: 0;
    left: 0;
    width: 100vw;       /* Covers 100% of the viewport width */
    height: 100vh;      /* Covers 100% of the viewport height */
    z-index: -1;        /* Sits behind the main content but ON TOP of the body gradient */
    overflow: hidden;   /* Prevents scrollbars if video dimensions are odd */
}

.section-video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Ensures the video covers the entire area without distortion */
    object-position: center;
}

/* This ensures the <main> content area sits above the video background */
.page-template-template-reflections-php main {
    position: relative;
    z-index: 1;
    background-color: transparent; /* Makes the main area see-through to the video below */
}


/*
==================================================================
== FINAL CONSOLIDATED CODE v2: All New Features (Desktop & Mobile) ==
==================================================================
*/

/* --- 1. ARC PAGE: Interactive Modal Styling --- */
/* This section is already defined above, so it remains unchanged */


/* --- 2. REFLECTIONS PAGE: Dynamic Design --- */
/* (This section contains all the perfected desktop styles for the Reflections page) */

/* Wave Header */
#reflection-list .wisdom-flow-header { position: relative; overflow: hidden; }
#reflection-list .wisdom-flow-header h2 { position: relative; z-index: 1; }

/* Comment Layout & Animations */
#reflection-list .comment-list { list-style: none; padding: 0; display: flex; flex-direction: column; align-items: center; }
#reflection-list .comment-list > .comment { width: 80%; max-width: 768px; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); animation: cascadeIn 0.6s ease-out forwards; position: relative; overflow: hidden; }
#reflection-list .comment-list > .comment:nth-child(even) { transform: translateX(10%); }
#reflection-list .comment-list > .comment:nth-child(odd) { transform: translateX(-10%); }
#reflection-list .comment-list > .comment:hover { transform: translateX(0) translateY(-8px); z-index: 20; animation: pulsate-glow 2s infinite ease-in-out; }
@keyframes cascadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulsate-glow { 0% { box-shadow: 0 0 10px rgba(6,147,227,0.3), 0 0 20px rgba(6,147,227,0.2); } 50% { box-shadow: 0 0 25px rgba(6,147,227,0.6), 0 0 40px rgba(6,147,227,0.4); } 100% { box-shadow: 0 0 10px rgba(6,147,227,0.3), 0 0 20px rgba(6,147,227,0.2); } }
#reflection-list .comment-list > .comment:nth-child(1) { animation-delay: 0.1s; } #reflection-list .comment-list > .comment:nth-child(2) { animation-delay: 0.2s; } #reflection-list .comment-list > .comment:nth-child(3) { animation-delay: 0.3s; } #reflection-list .comment-list > .comment:nth-child(4) { animation-delay: 0.4s; } #reflection-list .comment-list > .comment:nth-child(5) { animation-delay: 0.5s; } #reflection-list .comment-list > .comment:nth-child(6) { animation-delay: 0.6s; }
#reflection-list .comment-list > .comment::before { content: ''; position: absolute; top: 0; left: -150%; width: 75%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%); transform: skewX(-25deg); transition: left 0.85s cubic-bezier(0.23, 1, 0.32, 1); }
#reflection-list .comment-list > .comment:hover::before { left: 150%; }

/* Sticky Footer & Back-to-Top Button */
body.page-template-template-reflections-php { padding-bottom: 100px; }
.page-template-template-reflections-php footer { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; }
#back-to-top-btn { position: fixed; bottom: 30px; right: 30px; z-index: 9999; background-color: var(--color-gold-accent); color: var(--color-dark-text-on-light); border-radius: 50%; width: 50px; height: 50px; font-size: 24px; font-weight: bold; text-align: center; line-height: 50px; cursor: pointer; text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,0.2); opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease; overflow: hidden; }
#back-to-top-btn.show { opacity: 1; visibility: visible; transform: translateY(0); }
#back-to-top-btn:hover { animation: pulsate-glow 2s infinite ease-in-out; }
#back-to-top-btn::before { content: ''; position: absolute; top: 0; left: -150%; width: 75%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%); transform: skewX(-25deg); transition: left 0.85s cubic-bezier(0.23, 1, 0.32, 1); }
#back-to-top-btn:hover::before { left: 150%; }

/* --- MOBILE OPTIMIZATIONS (For screens 767px wide or less) --- */
@media (max-width: 767px) {
    
    /* Reflections Page: Layout and Text Color */
		#reflection-list .luminous-pane .comment-list > .comment {
			background-color: transparent !important; /* NO white box */
			color: var(--color-deep-charcoal) !important; /* Default text is charcoal */
			padding: 1.5rem 0 !important;
			border-radius: 0 !important;
			border-bottom: 1px solid rgba(54, 69, 79, 0.2) !important; /* DARK separator */
			margin-bottom: 0 !important;
			box-shadow: none !important;
			animation: none !important;
			transform: none !important;
			width: 100% !important;
			max-width: 100% !important;
		}

		#reflection-list .luminous-pane .comment-list > .comment:last-child {
			border-bottom: none !important; /* No line on the last comment */
		}

/* --- START: FIX FOR MOBILE WINDOW OPACITY --- */
		/* This targets the panes on the ARC page and Reflection pages */
		#reflections .luminous-pane,
		#featured-discussions .luminous-pane {
			/* Was var(--color-card-bg-translucent) which is 20% opacity */
			background-color: rgba(255, 255, 255, 0.9) !important; /* Now 90% opacity */
		}
		/* --- END: FIX FOR MOBILE WINDOW OPACITY --- */

		/* --- FORCE ALL TEXT ELEMENTS DARK (Username, Date, Content) --- */
		/* Using high specificity to override defaults */
		body.page-template-template-reflections-php #reflection-list .luminous-pane .comment-list .comment .comment-author .fn,
		body.page-template-template-reflections-php #reflection-list .luminous-pane .comment-list .comment .comment-content,
		body.page-template-template-reflections-php #reflection-list .luminous-pane .comment-list .comment .comment-metadata a {
			color: var(--color-deep-charcoal) !important;
		}

		/* --- ALLOW CATEGORY TEXT COLOR FROM PHP --- */
		/* Remove any color override */
		body.page-template-template-reflections-php #reflection-list .luminous-pane .comment-list .comment .reflection-category-display,
		body.page-template-template-reflections-php #reflection-list .luminous-pane .comment-list .comment .reflection-category-display span {
			/* No color rule here - allows inline style from PHP */
		}

		/* --- NESTED REPLIES TEXT COLOR --- */
		#reflection-list .comment-list .children .comment {
			border-bottom-color: rgba(54, 69, 79, 0.2) !important; /* DARK separator */
			color: var(--color-deep-charcoal) !important; /* Default reply text */
		}
		/* Using high specificity for nested replies */
		body.page-template-template-reflections-php #reflection-list .comment-list .children .comment .comment-author .fn,
		body.page-template-template-reflections-php #reflection-list .comment-list .children .comment .comment-content,
		body.page-template-template-reflections-php #reflection-list .comment-list .children .comment .comment-metadata a {
			color: var(--color-deep-charcoal) !important;
		}

		/* --- Style for "View more reflections" link (Mobile) --- */
		.view-more-reflections-link {
			display: block;
			
			/* CHANGED: Updated to Deep Gold + Shadow for legibility */
			color: #C5A000 !important; 
			text-shadow: 0 1px 1px rgba(0,0,0,0.15);
			
			font-weight: bold;
			cursor: pointer;
			padding: 0.5rem 0 0.5rem 1.5rem; /* Indent like a reply */
			margin-top: 1rem;
		}
		.view-more-reflections-link:hover {
			text-decoration: underline;
		}
		.reflection-replies-hidden {
			display: none; /* This class hides the replies by default */
		}

		/* --- Style for Emoji Reactions --- */
		.reflection-reactions {
			display: flex;
			gap: 0.5rem; /* Space between buttons */
			margin-top: 1rem;
		}

		.reaction-btn {
			background: rgba(54, 69, 79, 0.1); /* Darker background for contrast */
			border: 1px solid rgba(54, 69, 79, 0.2); /* Darker border */
			border-radius: 20px;
			padding: 0.25rem 0.75rem;
			cursor: pointer;
			transition: all 0.2s ease;
			color: var(--color-deep-charcoal); /* Dark text for emojis/counts */
		}
		.reaction-btn:hover {
			background: rgba(54, 69, 79, 0.2);
		}
		.reaction-btn.clicked,
		.reaction-btn:disabled {
			background: var(--color-gold-accent);
			color: var(--color-dark-text-on-light);
			opacity: 1;
			cursor: default;
			border-color: var(--color-gold-accent); /* Match background */
		}
		.reaction-count {
			margin-left: 0.35rem;
			font-weight: bold;
			font-size: 0.9em;
		}

		#reflection-list .comment-list > .comment:hover {
			animation: none; transform: none; /* Keep mobile hover simple */
		}
    
    
    /* Reflections Page: Footer */
    body.page-template-template-reflections-php { padding-bottom: 0; }
    .page-template-template-reflections-php footer { position: static; }

    /* THE DEFINITIVE FIX FOR ARC MODALS ON MOBILE */
    /* This rule forces the modal to behave as a floating window on all screen sizes, overriding any conflicts. */
    .arc-modal-overlay {
        align-items: center !important;
        padding-top: 0 !important;
    }
    
/* --- Dynamic Mobile Menu Button Color --- */

/* --- DEFAULT COLOR (Medium Gray) for all pages EXCEPT homepage --- */
#mobile-menu-button {
    color: #A0AEC0 !important; /* Medium Gray (Tailwind's gray-500) */
    /* Alternative Light Gray: #E2E8F0 (Tailwind's gray-300) */
    /* Alternative Darker Gray: #718096 (Tailwind's gray-600) */
}

/* Targets common ways bars are made (spans or divs inside the button) */
#mobile-menu-button span,
#mobile-menu-button div {
    background-color: #A0AEC0 !important; /* Medium Gray */
}

/* Targets common ways bars are made (SVG paths inside the button) */
#mobile-menu-button svg path {
    stroke: #A0AEC0 !important; /* Medium Gray for outlines */
    fill: #A0AEC0 !important;   /* Medium Gray for solid shapes */
}


/* --- HOMEPAGE OVERRIDE (White) --- */
/* Apply white color ONLY when the body has the 'home' or 'front-page' class */
body.home #mobile-menu-button,
body.front-page #mobile-menu-button {
    color: #FFFFFF !important; /* White */
}

body.home #mobile-menu-button span,
body.home #mobile-menu-button div,
body.front-page #mobile-menu-button span,
body.front-page #mobile-menu-button div {
    background-color: #FFFFFF !important; /* White */
}

body.home #mobile-menu-button svg path,
body.front-page #mobile-menu-button svg path {
    stroke: #FFFFFF !important; /* White for outlines */
    fill: #FFFFFF !important;   /* White for solid shapes */
}

/* --- End Mobile Menu Button Color --- */

/* --- Disable Parallax on Reflections Page --- */
body.page-template-template-reflections-php .zen-hero-section {
    background-attachment: scroll; /* Overrides 'fixed' */
}
/* --- Reflections Page: Fix Pane Overlap --- */
#featured-discussions .luminous-pane {
    margin-bottom: 2rem; /* 32px */
}

/* ================================================================== */
/* == START: Reflection Category Color-Coding (v4 - Threads Only) == */
/* ================================================================== */

/* --- 1. Style the Reply Thread Lines --- */
.category-mastering-your-vibrational-frequency .children {
    border-left-color: #72bcd4 !important;
}
.category-mastering-your-vibrational-frequency .children .comment {
    border-bottom-color: rgba(114, 188, 212, 0.5) !important;
}
.category-the-power-of-belief .children {
    border-left-color: #B2A9DF !important;
}
.category-the-power-of-belief .children .comment {
    border-bottom-color: rgba(178, 169, 223, 0.5) !important;
}
.category-manifesting-101 .children {
    border-left-color: var(--color-gold-accent) !important;
}
.category-manifesting-101 .children .comment {
    border-bottom-color: rgba(255, 215, 0, 0.5) !important;
}

/*
==================================================================
== START: Featured Discussions Link Styling ==
==================================================================
*/

#featured-discussions .featured-reflection-item a {
    color: inherit; /* Makes the link inherit the dark color from its parent */
    text-decoration: none;
    transition: color 0.3s ease;
}

#featured-discussions .featured-reflection-item a:hover {
    color: var(--color-gold-accent); /* Changes to your gold color on hover */
    text-decoration: underline;
}

/* --- END: Featured Discussions Link Styling --- */

/*
==================================================================
== START: Reflection Author Label Styling (Simple, New Line) ==
==================================================================
*/

.reflection-author-label {
    /* We used a <div>, so 'display: block' is not needed. */
    font-size: 0.85em;
    font-style: italic;
    font-weight: normal;
    color: #718096;
    margin-top: 0.25rem; /* Space from the name */
    padding: 0.1rem 0.5rem;
    background-color: rgba(230, 230, 230, 0.7);
    border-radius: 4px;

    /* Make the background only wrap the text, not stretch full-width */
    width: fit-content; 
    width: -moz-fit-content; /* Firefox support */
}

/* --- END: Reflection Author Label Styling --- */

/*
==================================================================
== START: Author Font Size (Simple & Correct) ==
==================================================================
*/

/* This rule targets the default WordPress author name (e.g., "Tondré")
   which is inside a <cite> tag with the class "fn". */
#reflection-list .comment-list .comment-author cite.fn {
    font-size: 0.85rem !important; /* <--- FORCING THE STYLE */
    font-style: normal; /* Removes the default italic style from <cite> */
    font-weight: bold;  /* Keeps the name bold */
}

/* This rule updates your label to match the same size. */
.reflection-author-label {
    display: block;
    font-size: 0.85rem !important; /* <--- FORCING THE STYLE */
    font-style: italic;
    font-weight: normal;
    color: #718096;
    margin-top: 0.25rem;
    padding: 0.1rem 0.5rem;
    background-color: rgba(230, 230, 230, 0.7);
    border-radius: 4px;
    width: fit-content; 
    width: -moz-fit-content;
}

/* --- END: Author Font Size --- */

/*
==================================================================
== START: Mobile Opacity Fix for Individual Reflection Boxes ==
==================================================================
*/

@media (max-width: 767px) {
	/*
	 * This targets the individual comment boxes inside the #reflection-list
	 * and overrides the 'background-color: transparent' rule.
	*/
	body.page-template-template-reflections-php #reflection-list .luminous-pane .comment-list > .comment {
		background-color: rgba(255, 255, 255, 0.9) !important; /* Was transparent */
	}
}

/* --- END: Mobile Opacity Fix --- */
/*
==================================================================
== START: Desktop-Only Dictation Button ==
==================================================================
*/
/* --- START: Desktop-Only Dictation Button (Force Hide on Mobile) --- */
.desktop-only-mic {
    display: inline-flex !important;
}

@media (max-width: 1024px) { /* Increased width to catch tablets/large phones */
    .desktop-only-mic {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}
/* --- END: Desktop-Only Dictation Button --- */

/* Active Reaction Button (When user has clicked it) */
.reaction-btn.active {
    background-color: #FFD700 !important; /* Gold background */
    border-color: #D4AF37 !important;
    color: #36454F !important;
    transform: scale(1.05);
}

/* Hover state for the text link */
.view-reactions-link:hover {
    color: #D4AF37 !important;
}

/* Active Reaction Button */
.reaction-btn.active {
    background-color: #FFD700 !important;
    border-color: #D4AF37 !important;
    color: #36454F !important;
    transform: scale(1.05);
}

/* ================================================================== */
/* == GLOBAL TEXT FIX: Change "Says" to "Replied" (Nested Only) == */
/* ================================================================== */

/* 1. FORCE HIDE the word "says" inside nested replies */
body.page-template-template-reflections-php #reflection-list .children .comment-author .says {
    display: none !important;
    font-size: 0 !important;
    visibility: hidden !important;
}

/* 2. FORCE INSERT the word "replied" after the name */
body.page-template-template-reflections-php #reflection-list .children .comment-author .fn::after {
    content: " replied" !important;
    font-size: 0.85rem !important;
    font-weight: normal !important;
    color: #36454F !important;
    visibility: visible !important;
    display: inline-block !important;
}


/* ================================================================== */
/* == MOBILE: Final Layout (Black Title, Wide Replies, New Row) == */
/* ================================================================== */
@media (max-width: 768px) {

    /* --- 1. TITLE: Force Dark Charcoal/Black --- */
    /* High specificity to override any other settings */
    body.page-template-template-reflections-php #reflection-list .wisdom-flow-header h2 {
        color: #1a1a1a !important; /* Almost black */
        text-shadow: none !important;
    }

    /* --- 2. CONTAINER: Edge-to-Edge White Background --- */
    body.page-template-template-reflections-php #reflection-list .container {
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* Main White Pane */
    body.page-template-template-reflections-php #reflection-list .luminous-pane {
        background: #FFFFFF !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 2rem 0 !important; /* Zero side padding to let children stretch */
        width: 100% !important;
        border-radius: 0 !important;
    }

    /* Padding for the Main Reflection Text only (so it doesn't hit edge) */
    #reflection-list .comment-list > .comment > .comment-body {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* --- 3. REPLIES: Full Width & Darker Background --- */
    /* Remove indentation completely */
    #reflection-list .comment-list .children {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        width: 100% !important;
    }

    /* The Reply Container - Edge to Edge */
    #reflection-list .comment-list .children .comment {
        background-color: #f0f0f0 !important; /* Darker Gray */
        margin: 0 !important;
        padding: 1.5rem 0 !important; /* Vertical padding only */
        width: 100% !important;
        border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    }

    /* Internal padding for Reply Text (so it doesn't hit edge) */
    #reflection-list .comment-list .children .comment .comment-body {
        padding-left: 15px !important;
        padding-right: 15px !important;
        display: block !important;
    }
    
    /* --- FIX: Change "Says" to "Replied" for Nested Comments --- */
    
    /* 1. Hide the word "says" inside replies (Level 2+ comments) */
    body.page-template-template-reflections-php #reflection-list .children .comment-author .says {
        font-size: 0 !important;
        visibility: hidden !important;
    }
    
    /* 2. Inject the word "replied" after the name */
    body.page-template-template-reflections-php #reflection-list .children .comment-author .fn::after {
        content: " replied";  /* <--- UPDATED to "replied" */
        font-size: 0.85rem !important;
        font-weight: normal !important;
        color: #36454F !important;
        visibility: visible !important;
    }

    /* --- 4. NEW LAYOUT: Icons on Top, Reply & Count on Bottom --- */
    /* We use Flexbox 'column' on the container to stack them */
    .reflection-reactions-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-top: 10px !important;
        border-top: 1px solid rgba(0,0,0,0.05) !important;
        padding-top: 10px !important;
    }

    /* ROW 1: The Icons (Thumb, Heart, Bulb) */
    .buttons-left {
        width: 100% !important;
        display: flex !important;
        gap: 15px !important;
        margin-bottom: 10px !important; /* Space between icons and reply button */
    }

    /* Remove borders from icons */
    .reflection-reactions-container .reaction-btn {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 1.1rem !important;
        color: #555 !important;
    }
    .reflection-reactions-container .reaction-btn.active {
        color: #D4AF37 !important;
        font-weight: bold !important;
    }

    /* ROW 2: Wrapper for Reply Button & Count */
    /* We need to use a pseudo-element or CSS grid effectively here, 
       but since "Reply" is outside this div in WP, we handle it visually. */
    
    /* Make the count text sit on its own line */
    .buttons-right {
        order: 3 !important; /* Push to bottom */
        width: 100% !important;
        margin-top: 5px !important;
    }

    /* Position the Reply Link (generated by WP) to sit next to the count */
    .reply {
        margin-top: -30px !important; /* Pull it up next to the count */
        margin-left: auto !important; /* Push to right? Or keep left? */
        float: right !important;
        position: relative !important;
        z-index: 10 !important;
        padding-right: 15px;
    }
    
    .reply a {
        font-weight: bold !important;
        color: #36454F !important;
        text-decoration: underline !important;
        background: transparent !important; /* Remove gold pill background */
        padding: 0 !important;
    }

   
    

/* ================================================================== */
/* == LOGIC FIX: Hide "Select Category" in Replies == */
/* ================================================================== */

/* If the Reply Form (#respond) is nested inside a comment (li.comment),
   HIDE the category dropdown wrapper. It is not needed. */
li.comment #respond .comment-form-category-wrapper {
    display: none !important;
}

/* Also hide the label for it just in case */
li.comment #respond .comment-form-category {
    display: none !important;
}

/* --- Placeholder Text Styling (Dark Gray) --- */
#commentform textarea::placeholder {
    color: #666666 !important; /* Dark Gray */
    opacity: 1; /* Fix for Firefox */
    font-style: italic;
}

#commentform textarea::-webkit-input-placeholder {
    color: #666666 !important;
}

#commentform textarea::-moz-placeholder {
    color: #666666 !important;
}