/*/* 2a7868
Theme Name: Twenty Twenty-Five Samye
Template: twentytwentyfive
Description: Child theme of Twenty Twenty-Five
Version: 1.0
*/
/* your custom CSS goes here */
/* mainly for What's on page */
/* ── Samye Ling WP-Native Mapping ────────────────────────────────────────── */


/* main */
html {
    scroll-behavior: smooth;
}
[id] {
    scroll-margin-top: 100px !important; 
}
footer {
    margin-top: 0 !important;
}
*:focus {
    outline: none !important;
    box-shadow: none !important;
}
/* soft page transitions */
/* 1. Ensure 'main' itself is a solid anchor */
main {
    opacity: 1 !important;
    transform: none !important;
    position: relative;
}
/* 2. Animate everything INSIDE main EXCEPT the nav and mala */
main > *:not(.header-nav-custom):not(#nav) {
    opacity: 0;
    animation: softReveal 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0.1s;
}
.wp-block-social-links svg{
    width: 40px !important;
    height: 40px !important;
}
.wp-block-social-links{
    margin-bottom: 3px !important;
}
.hide-overflow{
    overflow: hidden;
}
/* Container for the logo and background flourishes */
.imprint-header-bg {
    position: relative;
    background-color: var(--wp--preset--color--maroon); /* Your Maroon color */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height: 100%;
}

/* Creating the two mirrored imprints using pseudo-elements */
.imprint-header-bg::before,
.imprint-header-bg::after {
    content: "";
    position: absolute;
    width: 600px; /* Adjust based on your image size */
    height: 90%;
    background-image: url('/wp-content/themes/twentytwentyfive-samyeling/assets/images/header_bg.webp');
    background-size: contain;
    background-repeat: no-repeat;
    
    /* The "Subtle Imprint" Effect */
    opacity: 0.10; /* Keep it subtle; maybe increase to 0.3 if too faint */
    mix-blend-mode: color-dodge; /* Brightens the underlying maroon color where the lines are */
    filter: invert(1); /* Flip the lines from black to white first */
    pointer-events: none; /* Allows clicks to pass through to the logo */
}

/* Left side flourish */
.imprint-header-bg::before {
    left: 50%;
    margin-left: -50px; /* Distance from center */
    transform: translateY(-50%);
    top: 50%;
}

/* Right side flourish (Mirrored) */
.imprint-header-bg::after {
    right: 50%;
    margin-right: -50px; /* Distance from center */
    transform: translateY(-50%) scaleX(-1); /* Flips it horizontally */
    top: 50%;
}

/* Ensure the logo stays on top */
.imprint-header-bg > * {
    position: relative;
    z-index: 2;
}
.section-heading, .ar-heading, 
.dr-section-heading, .dr-section-heading__standalone, 
.wp-block-post-title:not(.news-card-title){
    text-align: center !important;
    color: var(--wp--preset--color--maroon);
    background-image: linear-gradient(
        to right, 
        transparent 0%, 
        var(--wp--preset--color--borders) 20%, 
        var(--wp--preset--color--borders) 80%, 
        transparent 100%
    ) !important;
    background-position: bottom center !important;
    background-size: 100% 1px !important;
    background-repeat: no-repeat !important;
    font-weight: 600 !important;
    
}
.section-heading, .ar-heading, 
.dr-section-heading, .dr-section-heading__standalone{
padding: var(--wp--preset--spacing--20) !important;
}
.section-heading.light-heading, .ar-heading--light{
    color: var(--wp--preset--color--cream) !important;
}
.whatson-heading{
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 1200px) {
    /* 1. Force Flexbox columns to stack */
    .stack-on-tablet {
        flex-direction: column !important;
        display: flex !important; /* Ensure it stays a flex container but vertical */
    }

    /* 2. Force CSS Grid columns to stack */
    .stack-on-tablet.wp-block-columns, /* Native WP */
    .stack-on-tablet, .stack-btns { 
        grid-template-columns: 1fr !important;
    }

    /* 3. Ensure the child columns take full width */
    .stack-on-tablet > .wp-block-column,
    .stack-on-tablet > div {
        flex-basis: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 30px; /* Space between stacked items */
    }

    /* 4. Remove margin from the last stacked item */
    .stack-on-tablet > *:last-child {
        margin-bottom: 0 !important;
    }
}

/* 3. The Animation Definition */
@keyframes softReveal {
    0% {
        opacity: 0;
        
    }
    100% {
        opacity: 1;
        
    }
}

@media (min-width: 768px) {
    .hide-on-wide{
        display: none !important;
    }
}
@media (max-width: 768px) {
    .hide-on-mobile{
        display: none !important;
    }
}
@media (max-width: 768px) {
    .reverse-columns{
        flex-direction: column-reverse;
    }
}


.custom-logo{
    width: clamp(120px, 20vw, 240px) !important;
    height: auto !important;
}
.custom-logo a, 
.custom-logo a:focus, 
.custom-logo a:active {
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.header-ksl{
    width: clamp(240px, 30vw, 400px) !important;
    height: auto !important;
}
.header-columns{
    width: 100% !important;
}
.current-menu-item{
    color: var(--wp--preset--color--saffron); 
}

.header-nav-custom{
    /* position: -webkit-sticky;
    position: sticky !important;
    top: 0; */
    z-index: 9999 !important;
    padding: 4px 0;
    
    border-top: 1px solid var(--wp--preset--color--maroon);
    
}
.header-nav-custom.wp-block-navigation:not(.wp-block-navigation__container){
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}


@media (max-width: 1024px) {
    /* 1. Reset the container so it doesn't clip the button */
    .header-nav-custom {
        position: static !important;
    }
    /* 1. Target the 1024px breakpoint */
    /* Force hide the desktop horizontal menu items */
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }
    /* 2. Transform the Hamburger into a Floating Action Button */
    .header-nav-custom .wp-block-navigation__responsive-container-open {
        position: fixed !important; /* Locks it to the screen, not the header */
        bottom: 3vh;    /* Distance from bottom */
        right: 2vh;     /* Distance from right */
        left: auto;      /* Overrides your previous left: 20px */
        top: auto;       /* Overrides your previous top: 20px */
        
        z-index: 99999;  /* Ensure it stays above the internal sticky nav */
        
        /* Visual Styling */
        background-color: var(--wp--preset--color--maroon); /* Samye Ling Maroon */
        border: 2px solid var(--wp--preset--color--cream); 
        border-radius: 32px; /* Rounded pill/circle shape */
        padding: 16px 24px;
        display: flex !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        transition: transform 0.2s ease;
    }
    
    /* Keep the icon white against the maroon background */
    .header-nav-custom .wp-block-navigation__responsive-container-open svg {
        fill: #ffffff !important;
        stroke: #ffffff !important;
    }
    
    /* 3. The Menu Overlay (Modal) */
    .header-nav-custom .wp-block-navigation__responsive-container-content {
        display: none !important;
    }
    
    /* Press effect for the floating button */
    .header-nav-custom .wp-block-navigation__responsive-container-open:active {
        transform: scale(0.9);
        background-color: var(--wp--preset--color--saffron); /* Saffron flicker on click */
    }
    
    .custom-logo {
    width: 120px !important;
    height: auto; 
}

}
.mala-mobile-panel {
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 100vw !important;
    height: 100vh;
    background-color: var(--wp--preset--color--maroon);
    z-index: 100000;
    padding: 20px 30px;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Ensure long menus scroll */
    
}
/* Remove all decorations for links in the panel */
.mala-mobile-panel a, 
.mala-mobile-panel a:visited, 
.mala-mobile-panel a:hover, 
.mala-mobile-panel a:active, 
.mala-mobile-panel a:focus {
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: inherit; /* Keeps your maroon/white/saffron colors consistent */
    -webkit-tap-highlight-color: transparent; /* Removes the grey flicker on mobile tap */
}
/* Remove the border/outline from the accordion wrapper and the header */
.mala-accordion,
.mala-accordion[open],
.mala-bead-head,
.mala-bead-head:focus,
.mala-bead-head:active,
summary::-webkit-details-marker {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* Specifically target the focus state that appears on tap */
.mala-bead-head:focus-visible {
    outline: none !important;
}

/* If WordPress is adding a border to the 'open' state specifically */
.mala-accordion[open] .mala-bead-head {
    border-bottom: none !important;
}
/* Subtle feedback for every clickable item in the panel */
.mala-bead-single:active,
.mala-link-part:active,
.sub-links-stack a:active,
.mala-panel-close:active {
    opacity: 0.6;
    transition: opacity 0.1s ease;
}
/* Make the plus/minus icon shrink slightly when tapped */
.mala-toggle-part:active {
    transform: scale(0.9);
    background-color: rgba(255, 255, 255, 0.1); /* Optional: slight glow */
}
.mala-mobile-panel.is-active { transform: translateX(0); }

/* Updated Bead Head to handle the split */
.mala-bead-head {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Stretch saffron box to full height */
    padding: 0 !important; /* Move padding to internal elements */
    color: vae(--wp--preset--color--cream);
    
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    list-style: none;
    cursor: pointer;
}


/* The Left Side: Clickable Text Link */
.mala-link-part {
    flex-grow: 1;
    font-size: var(--wp--preset--font-size--large);
    padding: 22px 0;
    color: var(--wp--preset--color--cream);
    text-decoration: none;
}

/* The Right Side: Saffron Toggle Box */
/* Update only this section in your CSS */
.mala-toggle-part {
    width: 60px;
    background-color: var(--wp--preset--color--saffron);
    display: flex;
    justify-content: center;
    align-items: center;
    /* The pertinent additions: */
    border-radius: 15px;
    margin: 8px 0 8px 10px; /* Adds space so the curves are visible */
}

/* Replace the old ::after with this one inside the saffron box */
.mala-toggle-part::after { 
    content: "+"; 
    color: white; 
    font-size: 1.6rem;
}

details[open] .mala-toggle-part::after { 
    content: "−"; 
}

/* Maintain single bead styling exactly as it was */
.mala-bead-single {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    color: var(--wp--preset--color--cream);
    font-size: var(--wp--preset--font-size--large);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

/* Sub-links indent */
.sub-links-stack {
    display: flex;
    flex-direction: column;
    padding: 10px 0 20px 10px;
}

.sub-links-stack a {
    color: var(--wp--preset--color--cream);
    padding: 12px 0;
    text-decoration: none;
    font-size: var(--wp--preset--font-size--large);
    opacity: 0.9;
}

.mala-panel-close {
    /* Visual Styling */
    border: 2px solid var(--wp--preset--color--cream); 
    border-radius: 32px; /* Rounded pill/circle shape */
    padding: 12px 16px;
    font-size: var(--wp--preset--font-size--large);
    display: flex !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    align-self: flex-end;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    cursor: pointer;
    margin-bottom: 16px; /* Gap before the logo */
    flex-shrink: 0; /* Keeps it from squishing */
}
/* Center the button block inside the mobile footer */
.mala-panel-footer {
    margin-top: auto;
    padding: 48px 0 0px; /* Large bottom padding to clear the FAB */
    display: flex;
    justify-content: center; /* Forces the WP block to center */
}

/* Override WordPress default button alignment and add vertical spacing */
.mala-panel-footer #donate-button {
    width: 100%;
    display: flex;
    justify-content: center;
}
/* Increase the internal padding of the donate button only in the mobile panel */
.mala-panel-footer #donate-button a {
    padding: 16px 32px !important; /* Adjust these values to your liking */
    display: inline-block; /* Ensures padding pushes the borders out */
    width: 100%; /* Makes the clickable area span the full 240px if the block allows */
    box-sizing: border-box;
    font-size: var(--wp--preset--font-size--large) !important;
}
/* Ensure the actual clickable link fills the space if needed */
.mala-panel-footer #donate-button a {
    width: 100%;
    text-align: center;
    /* Optional: If you want to force the maroon/saffron look here too */
    /* background-color: var(--wp--preset--color--saffron) !important; */
    /* color: var(--wp--preset--color--maroon) !important; */
}
.mala-panel-socials .wp-block-social-links {
    justify-content: center !important;
    display: flex !important;
    padding: 30px 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
/* Target the logo container inside the mobile sheet */
.mala-panel-logo {
    display: flex;
    justify-content: center; /* Centers the logo horizontally */
    width: 100%;
    margin-bottom: 30px; /* Space between logo and first menu item */
}
.mala-panel-logo a:active{
    text-decoration: none !important;
}

/* Target the actual logo image or svg */
.mala-panel-logo img,
.mala-panel-logo svg {
    width: 240px !important; /* Forces the specific width */
    height: auto !important; /* Maintains aspect ratio */
    display: block;
    margin: 0 auto; /* Extra insurance for centering */
}
/* Remove the focus outline on the logo link */
.mala-panel-logo a, 
.mala-panel-logo a:focus, 
.mala-panel-logo a:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    -webkit-tap-highlight-color: transparent; /* Removes the grey flicker on mobile taps */
}

/* Also target the image inside just in case */
.mala-panel-logo img {
    outline: none !important;
    border: none !important;
}

/* Hide default browser arrows */
.mala-bead-head::-webkit-details-marker { display: none; }
/* Main Navigation Link Styling */
/* 1. Base State - Clean & Relative for the Underline */
.header-nav-custom a {
    
    text-decoration: none !important;
    transition: color 0.25s ease-in-out;
    position: relative;
    outline: none !important; /* Kills the default square border on click */
}

/* 2. Hover & Active Glow */
.header-nav-custom a:hover,
.header-nav-custom a:focus,
.header-nav-custom a:active {
    color: var(--wp--preset--color--saffron) !important;
    text-shadow: 0px 0px 8px rgba(241, 184, 45, 0.3);
    outline: none !important;
    box-shadow: none !important; /* Removes the glow box entirely */
}
.header-nav-custom a:hover {
    transform: translateY(-1px); /* Just a tiny hint of life */
    transition: transform 0.2s ease;
}

/* 3. Physical 'Press' effect on Click */
.header-nav-custom a:active {
    transform: scale(0.96);
    transition: transform 0.1s;
}

/* 4. The Active Page State (Persistent Saffron) */
.header-nav-custom .current-menu-item > a,
.header-nav-custom .current_page_item > a {
    color: var(--wp--preset--color--saffron) !important;
}

/* 5. The Saffron Underscore Indicator */
/* This appears only for the current active page */
.header-nav-custom .current-menu-item > a::after,
.header-nav-custom .current_page_item > a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px; /* Space between text and line */
    left: 0;
    background-color: var(--wp--preset--color--saffron);
    opacity: 0.8;
    border-radius: 2px;
}

/* ============================================================
1. DESKTOP FULL-WIDTH HORIZON MALA (DROPDOWN)
============================================================ */

@media (min-width: 601px) {

    .header-nav-custom .has-child {
        position: relative !important;
    }

    .header-nav-custom .wp-block-navigation__submenu-container {
        position: absolute;
        top: calc(100% + 4px) !important;
        left: -16px !important;
        right: auto !important;
        transform: none !important;

        /* Width: natural, grows with content */
        width: auto !important;
        min-width: 250px;
        white-space: nowrap;

        /* Visual Styling */
        padding: 12px 0 !important;
        background-color: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(5px);
        border: 1px solid rgba(128, 0, 0, 0.1) !important;
        border-radius: 32px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

        /* Interaction */
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 9999;
    }

    .header-nav-custom .has-child:hover > .wp-block-navigation__submenu-container {
        opacity: 1;
        visibility: visible;
    }

    /* Bridge */
    .header-nav-custom .has-child::after {
        content: "";
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 150%;
        height: 20px;
    }

    /* Page List: vertical stack */
    .header-nav-custom .wp-block-navigation__submenu-container .wp-block-page-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .header-nav-custom .wp-block-navigation__submenu-container .wp-block-navigation-item,
    .header-nav-custom .wp-block-navigation__submenu-container .wp-block-page-list li {
        display: block;
        background: transparent !important;
    }
    .wp-block-navigation .wp-block-navigation-item__label:not(.header-nav-custom .wp-block-navigation__submenu-container *) {
    font-size: var(--wp--preset--font-size--large);
}
    /* Links */
     .header-nav-custom .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
    .header-nav-custom .wp-block-navigation__submenu-container .wp-block-page-list li a {
        display: block;
        background-color: transparent !important;
        color: var(--wp--preset--color--maroon) !important;
        text-transform: uppercase !important;
        font-size: var(--wp--preset--font-size--small) !important;
        font-weight: 400 !important;
        letter-spacing: 0.08em !important;
        padding: 15px 24px !important;
        margin: 4px 8px !important;        /* ← gives the pill space from the container edges */
        border-radius: 30px !important;    /* ← restores the pill on hover */
        border: none !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        box-shadow: none !important;
    }

    /* Hover */
    .header-nav-custom .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
    .header-nav-custom .wp-block-navigation__submenu-container .wp-block-page-list li a:hover {
        color: var(--wp--preset--color--saffron) !important;
        background-color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
        transform: translateY(-2px);
    }
    .header-nav-custom .wp-block-navigation__submenu-container .wp-block-navigation-item__content:active,
    .header-nav-custom .wp-block-navigation__submenu-container .wp-block-page-list li a:active {
        transform: scale(0.99) translateY(1px) !important; /* Compresses and nudges down */
    opacity: 0.8;
    transition: transform 0.2s ease; /* Fast response for the click */
    }

    /* Bead separators — now horizontal dividers between rows */
    .header-nav-custom .wp-block-navigation__submenu-container .wp-block-navigation-item:not(:last-child)::after,
    .header-nav-custom .wp-block-navigation__submenu-container .wp-block-page-list li:not(:last-child)::after {
        content: "";
        display: block;
        height: 1px;
        background-color: rgba(128, 0, 0, 0.08);
        margin: 0 16px;
        pointer-events: none;
    }
    
    

/* 2. Ensure the Current Page stays totally static */
.mala-nav .current-menu-item .wp-block-navigation-item__content {
    pointer-events: none; /* No clicking, no moving, no changing */
    cursor: default;
}

/* 3. Keep the transition smooth when you let go */
.mala-nav .wp-block-navigation-item__content {
    transition: transform 0.2s ease, color 0.2s ease;
    display: inline-block; /* Required for 'transform' to work properly */
}
}

/* button hover/active state */
/* --- GLOBAL BUTTON HOVER LOGIC --- */

/* 1. Base State for all WP Buttons */
.wp-block-button__link, .subscribe-btn {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    top: 0;
    outline: none;
}

/* 2. Global Hover Action */
.wp-block-button__link:hover, .subscribe-btn:hover, .homepage-stack:hover .wp-block-button__link, .cta-horizontal:hover .wp-block-button__link {
    /* Subtle darkening works on any background color */
    filter: brightness(90%) contrast(108%);
    
    /* A slight lift and shadow to make the button feel 'pressed' toward the user */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important;
    
    cursor: pointer;
    text-decoration: none !important;
}
.donate-button .wp-block-button__link:hover{
    filter: none !important;
}
.donate-button .wp-block-button__link{
    padding: 4px 16px !important;
}

/* 3. The 'Click' State (The Active State) */
.wp-block-button__link:active, .subscribe-btn:active, .homepage-stack:hover .wp-block-button__link {
    /* Pushes the button 'into' the page when clicked */
    transform: translateY(1px);
    filter: brightness(85%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* 4. Focus State (For Accessibility/Keyboard Users) */
.wp-block-button__link:focus, .subscribe-btn:focus {
    box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.4) !important; /* A subtle Maroon halo */
}
/* slider on homepage */
/* 1. THE STAGE: Centered & Full Width */
.drone-hero-container {
    position: relative !important;
    
    /* 1. Force the width to exactly the window size */
    width: 100vw !important;
    max-width: 100vw !important;
    
    /* 2. THE BREAKOUT: This overrides the 30px theme padding 
       by pulling the block back to the left edge exactly */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    
    /* 3. SHAPE: Cinematic look */
    aspect-ratio: 21 / 9; 
    max-height: 80vh !important; 
    
    /* 4. CLEANUP: Ensure no theme interference */
    left: 0 !important;
    transform: none !important; /* Removes the 50% shift causing the 'middle' issue */
    padding: 0 !important;
    overflow: hidden !important;
    background: #000;
}

/* 2. THE IMAGES: Stacked & Animated */
.drone-hero-container .wp-block-cover {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: 0;
    animation: droneFade 25s infinite;
}

.drone-hero-container .wp-block-cover img {
    width: 100% !important;
    height: 100% !important;
    /* 'cover' is still best, but since the container is now shorter, 
       it won't need to zoom in nearly as much to fit. */
    object-fit: cover !important;
    object-position: center !important;

    /* 1. Hardware Acceleration: This is the 'Secret Sauce' */
    will-change: transform;
    transform: translateZ(0); 
    backface-visibility: hidden;
    perspective: 1000px;

    /* 2. Smoothing the Animation */
    /* 'Linear' is often smoother for slow zooms than 'Ease' */
    animation: droneZoom 35s linear infinite alternate !important;

}

/* 3. THE TEXT: Static & Centered */
.drone-hero-container > *:last-child {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10;
    
    /* 1. REMOVE THE BOX */
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    
    /* 2. THE TEXT POP: High-end drop shadow */
    /* This creates a soft 'glow' of darkness behind the letters only */
    text-shadow: 0px 4px 15px rgba(0, 0, 0, 0.8), 
                 0px 2px 5px rgba(0, 0, 0, 0.9) !important;
    
    /* 3. LAYOUT */
    width: 80% !important;
    max-width: 1100px !important;
    text-align: center !important;
    color: #ffffff !important;
}

/* 4. THE VIGNETTE: This subtly darkens the middle of the screen 
   ONLY where the text sits, so the edges of your drone shot stay bright. */
.drone-hero-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 70%);
    pointer-events: none;
    z-index: 5;
}


/* 4. THE FADE TIMING (5 Images) */
.drone-hero-container .wp-block-cover:nth-child(1) { animation-delay: 0s; }
.drone-hero-container .wp-block-cover:nth-child(2) { animation-delay: 5s; }
.drone-hero-container .wp-block-cover:nth-child(3) { animation-delay: 10s; }
.drone-hero-container .wp-block-cover:nth-child(4) { animation-delay: 15s; }
.drone-hero-container .wp-block-cover:nth-child(5) { animation-delay: 20s; }

@keyframes droneZoom {
    0% { 
        transform: scale(1) translateZ(0); 
    }
    100% { 
        /* Keep the zoom very small; anything over 1.1 often causes 'jitter' */
        transform: scale(1.15) translateZ(0); 
    }
}

/* 3. OPTIONAL: Smoother Fades */
/* Update your existing droneFade to be a bit more 'gentle' */
@keyframes droneFade {
    0% { opacity: 0; }
    10% { opacity: 1; } /* Fully visible at 10% of the cycle */
    20% { opacity: 1; } /* Stays visible until 20% */
    30% { opacity: 0; } /* Fades out by 30% */
    100% { opacity: 0; }
}
/* This is all you need if you use the Editor's Font Settings */
.drone-hero-container .wp-block-cover__inner-container {
    width: 100% !important;
    max-width: 100% !important; /* Unlocks the 'Smack Big' width */
}

@media (max-width: 768px) {
    /* 1. THE CONTAINER: We kill the 'Min-Height' completely */
    .drone-hero-container {
        display: none !important;
    }
}


/* --- THE SNAPSHOT CARD STYLE --- */
.snap-card {
    position: relative;
    padding: 16px;
    z-index: 1; 
}

/* ============================================================
   SNAP CARDS — BASE STYLES
   ============================================================ */
.snap-card img {
    border: 6px solid #ffffff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
}

.snap-caption {
    text-align: center;
    padding: 15px;
    line-height: 1.5;
    color: #333;
    transition: opacity 0.3s ease;
}


/* ============================================================
   DESKTOP — TILTS, HOVER, CAPTIONS
   ============================================================ */
@media (min-width: 782px) {

    .snap-cards-container {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto !important;
        padding: 0 20px;
    }

    .tilt-left  img { transform: rotate(-3deg); }
    .tilt-right img { transform: rotate(3deg); }

    .snap-card { margin-bottom: 80px !important; }
    .snap-card:hover { z-index: 999 !important; }

    .snap-card:hover img {
        transform: rotate(0deg) scale(1.1) translateY(-15px);
        box-shadow: 0 40px 80px rgba(0,0,0,0.25);
        cursor: default;
    }

    .snap-caption {
        opacity: 0;
        position: absolute;
        top: 90%;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        transition: all 0.5s ease;
        pointer-events: none;
        z-index: -1;
    }

    .snap-card:hover .snap-caption          { opacity: 1; top: 95%; }
    .wp-block-column .snap-card             { margin-bottom: 50px; }

    .snap-cards-container.snap-cards-narrow .snap-card:hover .snap-caption,
    .snap-card-narrow.snap-card:hover .snap-caption { opacity: 1; top: 90%; }
}


/* ============================================================
   MOBILE — SNAP CARDS
   ============================================================ */
@media (max-width: 781px) {

    /* Clip the bleed on the parent group — overflow-x:clip
       doesn't create a scroll context (unlike hidden) so it
       won't trap the child's scroll */
    .wp-block-group:has(> .wp-block-columns.snap-cards-container) {
        overflow-x: clip !important;
    }

    .wp-block-columns.snap-cards-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px !important;
        /* No left padding on the container itself */
        padding: 12px 0 24px 0 !important;
        /* This tells snap where cards should land, accounting for the visual inset */
        scroll-padding-left: 20px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
                mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
    }

    .wp-block-columns.snap-cards-container::-webkit-scrollbar { display: none; }

    .wp-block-columns.snap-cards-container > .wp-block-column {
        display: contents !important;
    }

    .wp-block-columns.snap-cards-container .snap-card {
        flex: 0 0 94vw !important;
        width: 94vw !important;
        max-width: 94vw !important;
        min-width: 0 !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        margin-bottom: 0 !important;
    }

    /* Visual left inset lives on the first card only, not the container */
    .wp-block-columns.snap-cards-container .snap-card:first-child {
        margin-left: var(--wp--preset--spacing--10) !important;
    }

    .snap-card img    { transform: none !important; border-width: 4px; }
    .snap-caption     { opacity: 1 !important; position: static; margin-top: 10px; }
    .snap-card        { margin-top: 0 !important;padding-top: 0 !important; padding-bottom: 0 !important; }
}


/* ============================================================
   REUSABLE — .swipe-on-mobile
   ============================================================ */
@media (max-width: 781px) {

    /* Clip bleed on direct parents */
    *:has(> .swipe-on-mobile),
    .wp-block-group:has(.swipe-on-mobile) {
        overflow-x: clip !important;
    }

    .swipe-on-mobile {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        grid-template-columns: unset !important;
        overflow-x: scroll !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch;
        gap: 16px !important;
        padding: 12px 0 24px 24px !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
        list-style: none !important;
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
                mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
    }

    .swipe-on-mobile::-webkit-scrollbar { display: none; }

    .swipe-on-mobile > * {
        flex: 0 0 var(--swipe-card-width, 82vw) !important;
        width: var(--swipe-card-width, 82vw) !important;
        max-width: var(--swipe-card-width, 82vw) !important;
        min-width: 0 !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
    }
    .swipe-on-mobile .news-card:first-child {
        margin-left: 20px !important;
    }
    
}

/* What we do cards */
.card-grid {
    align-items: stretch;
}

/* ==========================================================================
   INTERACTIVE CARDS (Universal Physics)
   Apply 'hover-card' to any Block (Cover or Group)
   ========================================================================== */

.hover-card {
    position: relative;
    overflow: hidden !important;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4), 0 0 1px rgba(255,255,255,0.1) !important;
    will-change: transform; /* Smooths out movement */
}

/* The Lift & Glow on Hover */
.hover-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 10px 15px rgba(0,0,0,0.2) !important;
    z-index: 10;
}

/* The Click/Pressed State */
.hover-card:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition: transform 0.1s ease;
}

/* Internal Image Zoom (Covers Only) */
.wp-block-cover.hover-card .wp-block-cover__image-background,
.wp-block-cover.hover-card img {
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.wp-block-cover.hover-card:hover .wp-block-cover__image-background {
    transform: scale(1.1);
}

/* Button Highlight on Card Hover */
.about-invitation-cover:hover .wp-block-button__link {
    background-color: var(--wp--preset--color--saffron) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}


/* ==========================================================================
   HOMEPAGE SPECIFIC LAYOUT (Vertical Stack)
   Apply 'homepage-stack' ONLY to the homepage card groups
   ========================================================================== */

.homepage-stack {
    display: flex !important;
    flex-direction: column;
    height: 100%;
}

.homepage-stack .hover-card-text {
    border-radius: 0px 0px 12px 12px !important;
    flex-grow: 1;
}

.homepage-stack .wp-block-buttons {
    margin-top: auto !important; /* Pushes button to bottom of text area */
}

.homepage-stack .wp-block-image:first-child img {
    border-radius: 12px 12px 0 0 !important;
}

/* Mobile Safety */
@media (max-width: 768px) {
    .hover-card:hover { transform: translateY(-5px); }
    .hover-card:active { transform: translateY(-2px) scale(0.98) !important; }
}

@media (max-width: 768px) {
    .hover-card:hover {
        transform: translateY(-5px);
    }
    .hover-card:active {
    transform: 
        translate(5px)
        scale(0.95); /* Now scale is added to the end of the chain */
    
    transition: transform 0.1s ease;
}
}
.mala-breadcrumbs {
    padding: auto 0 !important;
    font-size: var(--wp--preset--font-size--small) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wp--preset--color--maroon);
    opacity: 0.8;
}

.mala-breadcrumbs a {
    font-size: var(--wp--preset--font-size--small) !important;
    text-decoration: none;
    color: var(--wp--preset--color--maroon);
    transition: color 0.3s ease;
}

.mala-breadcrumbs a:hover {
    color: var(--wp--preset--color--saffron);
}

.mala-breadcrumbs .sep {
    margin: 0 8px;
    color: var(--wp--preset--color--saffron);
    font-weight: bold;
}

.mala-breadcrumbs .current {
    font-weight: 600;
    opacity: 0.6; /* Current page is a bit more subtle */
}
/* --- MALA NAVIGATION --- */

.mala-nav.wp-block-buttons {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 10px 5px; 
    
    /* Sticky Logic */

    
}
/* Create a 'Double Bead' after the Guru Button to separate it from the rest */


/* The 'Disappear' State triggered by JS */
.sticky-mala-wrapper.is-hidden {
    transform: translateY(-60px); /* Moves it up and away */
    opacity: 0;
    pointer-events: none;
}

/* --- MALA NAVIGATION (PAGE LIST VERSION) --- */

/* --- MALA NAVIGATION (SINGLE LEVEL + FLOATING PILL) --- */

/* 1. Alignment Fix for the Container */
.mala-nav .wp-block-page-list {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

/* RESTRICT TO 1 LEVEL: Hide any nested ULs within the Page List */
.mala-nav .wp-block-page-list li ul {
    display: none !important;
}

/* 2. Individual List Item */
.mala-nav .wp-block-page-list li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* 3. The Link styling (The "Pill" anchor) */
.mala-nav .wp-block-page-list li a {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--wp--preset--color--maroon) !important;
    text-transform: uppercase;
    font-size: var(--wp--preset--font-size--small) !important;
    font-weight: 400 !important;
    letter-spacing: 0.08em; 
    padding: 15px 12px !important;
    border: none !important;
    white-space: nowrap; 
    transition: color 0.3s ease, transform 0.3s ease; /* Added transform here */
    text-decoration: none !important;
    z-index: 1;
}

/* 4. THE FLOATING PILL (White + Shadow) */
.mala-nav .wp-block-page-list li a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 80%; /* Slightly shorter than the link area for a sleek look */
    background-color: #ffffff;
    border-radius: 30px;
    padding: 4px 0 !important;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    z-index: -1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hover & Active Pill State */
.mala-nav .wp-block-page-list li a:hover,
.mala-nav .wp-block-page-list li.current_page_item a {
    color: var(--wp--preset--color--saffron) !important;
    transform: translateY(-2px); /* Lifts the text and pill 2px up */
}

.mala-nav .wp-block-page-list li a:hover::before,
.mala-nav .wp-block-page-list li.current_page_item a::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* 5. The Bead */
.mala-nav .wp-block-page-list li:not(:last-child)::after {
    content: "\2022";
    color: var(--wp--preset--color--saffron);
    font-size: 1.2rem;
    margin: 0;
    pointer-events: none;
    line-height: 0;
    display: flex;
    align-items: center;
    transform: translateY(-1px);
}
.mala-nav .current-menu-item .wp-block-navigation-item__content {
    color: var(--wp--preset--color--saffron) !important;
    /* We keep font-weight normal to ensure the layout doesn't "jump" when moving between pages */
    font-weight: inherit !important;
    pointer-events: none;
}
/* 1. Target only beads that ARE NOT the current page */
.mala-nav .wp-block-navigation-item:not(.current-menu-item) .wp-block-navigation-item__content:active {
    transform: scale(0.99) translateY(1px) !important; /* Compresses and nudges down */
    opacity: 0.8;
    transition: transform 0.1s ease; /* Fast response for the click */
}

/* 2. Ensure the Current Page stays totally static */
.mala-nav .current-menu-item .wp-block-navigation-item__content {
    pointer-events: none; /* No clicking, no moving, no changing */
    cursor: default;
}

/* 3. Keep the transition smooth when you let go */
.mala-nav .wp-block-navigation-item__content {
    transition: transform 0.2s ease, color 0.2s ease;
    display: inline-block; /* Required for 'transform' to work properly */
}
/* 6. Vertical Alignment with Breadcrumbs Shortcode */
.mala-breadcrumbs {
    display: flex;
    align-items: center;
    line-height: 1;
    letter-spacing: 0.1em;
}

.sticky-mala-wrapper {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    position: sticky;
    height: 66px !important;
    top: 0px;
    z-index: 9000 !important;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    border-bottom: 1px solid rgba(128, 0, 0, 0.1);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    will-change: transform;
    opacity: 1;
}

.mala-breadcrumbs::after {
    content: "\2022\2022";
    color: var(--wp--preset--color--saffron);
    margin-left: 10px;
    margin-right: 5px;
    letter-spacing: -2px;
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    transform: translateY(-1px);
}
.home-icon-link {
    margin-top: 2px;
    margin-right: 4px;
}

/* MOBILE CORRECTIONS */
/* Touch devices (phones, tablets) - scrollable nav */
@media (max-width: 1400px) and (pointer: coarse) {
    .sticky-mala-wrapper {
        /* Force a clean start from the left */
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;

        /* Enable scrolling */
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;

        /* Spacing */
        padding: 5px 30px !important;
        gap: 0;

        /* Hide Scrollbars */
        scrollbar-width: none;
    }

    .sticky-mala-wrapper::-webkit-scrollbar {
        display: none;
    }

    /* Ensure the shortcode outputs (nav/ul) don't have their own centering/margins */
    .sticky-mala-wrapper .mala-breadcrumbs,
    .sticky-mala-wrapper .wp-block-page-list {
        display: flex !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    /* Standardize the beads */
    .mala-nav .wp-block-navigation-item__content,
    .mala-nav .wp-block-button__link,
    .mala-breadcrumbs a,
    .mala-breadcrumbs span {
        padding: 10px 0 !important;
        white-space: nowrap !important;
    }

    .mala-nav .wp-block-page-list li a {
        padding: 15px 6px !important;
    }
}

/* Mac/laptop/desktop at mid-width - compress instead of scroll */
@media (max-width: 1400px) and (pointer: fine) {
    .sticky-mala-wrapper {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow-x: visible;
        gap: clamp(0.25rem, 0.8vw, 0.75rem);
        padding: 5px 15px !important;
    }

    .sticky-mala-wrapper .mala-breadcrumbs,
    .sticky-mala-wrapper .wp-block-page-list {
        display: flex !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .mala-nav .wp-block-navigation-item__content,
    .mala-nav .wp-block-button__link,
    .mala-breadcrumbs a,
    .mala-breadcrumbs span {
        padding: 10px 0 !important;
        white-space: nowrap !important;
        font-size: var(--wp--preset--font-size--small) !important;
        font-weight: 400 !important;
    }

    .mala-nav .wp-block-page-list li a {
        padding: 15px clamp(0.25rem, 0.6vw, 0.6rem) !important;
    }
}

/* Hover & Active Effect */
.mala-nav .wp-block-button__link:hover,
.mala-nav .wp-block-button__link:active {
    color: var(--wp--preset--color--saffron) !important;
}

.clickable-profile {
    position: relative;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.clickable-profile h3 {
    font-size: calc(var(--wp--preset--font-size--x-large) * 0.8) !important;
}

.mandala-link .wp-block-button__link::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 7000;
}

.clickable-profile img {
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out, border-color 0.4s ease-in-out;
    backface-visibility: hidden;
    transform: scale(1);
    border-radius: 50%;
    object-fit: cover;
    margin-top: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.clickable-profile:hover img {
    transform: scale(1.08);
    box-shadow: 0 10px 30px rgba(241, 184, 45, 0.3);
}

.clickable-profile:hover .mandala-link,
.clickable-profile:hover .mandala-link * {
    background-color: var(--wp--preset--color--saffron) !important;
    color: #ffffff !important;
    border-radius: 32px;
    border-color: var(--wp--preset--color--saffron) !important;
}

.clickable-profile:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

.golden-rules-box ul {
    list-style: none !important;
}

.golden-rules-box li {
    color: var(--wp--preset--color--cream) !important;
    display: flex;
    align-items: flex-start;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Helps text pop against photo textures */
}

/* 4. The Saffron "Bullet" Jewel */
.golden-rules-box li::before {
    content: "◈"; /* Spiritual Diamond */
    color: var(--wp--preset--color--saffron); /* Saffron */
    font-size: 1.4rem;
    margin-right: 15px;
    line-height: 1.2;
    flex-shrink: 0;
}
.community-text{
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);

}
/* Desktop spacing adjustment */
@media (max-width: 768px) {
    .golden-rules-box {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}
.email-button a{
    text-shadow: none !important;
}

/* Hover Effect */
/* .volunteer-email .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--cream) !important;
} */

@media (max-width: 1024px) {
    .wp-block-columns.force-tablet-stack {
        flex-direction: column !important;
    }

    /* Optional: Add some space between the newly stacked columns */
    .wp-block-columns.force-tablet-stack .wp-block-column {
        margin-bottom: 20px;
        flex-basis: 100% !important;
    }
    .stupa-cover {
    min-height: 600px !important;
}
}

.invite-container{
    max-width: 1600px !important;}

.invite-container p, .invite-container h2{
    text-shadow: 0px 4px 15px rgba(0, 0, 0, 0.8), 
                 0px 2px 5px rgba(0, 0, 0, 0.9) !important;
}

/* Pagination */
.wp-block-query-pagination {
    margin-top: 3rem !important;
    display: flex;
    justify-content: center;
    gap: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.wp-block-query-pagination a,
.wp-block-query-pagination-numbers {
    color: var(--wp--preset--color--maroon) !important;
    text-decoration: none !important;
    padding: 8px 12px;
    transition: all 0.3s ease;
}

.wp-block-query-pagination a:hover {
    color: var(--wp--preset--color--saffron) !important;
}

.wp-block-query-pagination-numbers .current {
    border-bottom: 2px solid var(--wp--preset--color--saffron);
    color: var(--wp--preset--color--saffron) !important;
}
/* History page */
.karmapa-history-section{
    box-shadow: 0 15px 40px rgba(241, 184, 45, 0.3);
    
}
.karmapa-history-section img{
    overflow: hidden !important;
    
}

.legal-container{
    line-height: 1.7;
}

.legal-container .wp-block-details:last-child {
    border-bottom: none !important;
    padding-bottom: 0;
}

.wp-block-details summary {
    font-weight: 600;
    color: var(--wp--preset--color--maroon);
    cursor: pointer;
    list-style: none; /* Hides default arrow */
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Custom indicator: a small saffron dot that turns into a dash */
.wp-block-details summary::after {
    content: "+";
    color: var(--wp--preset--color--saffron);
    font-size: 2.4rem;
    transition: transform 0.3s ease;
}

.wp-block-details[open] summary::after {
    content: "−";
    transform: rotate(180deg);
}
/* This targets the yana containers with the 32px borders */
body{
    --yana-accent: currentColor; /* Default Maroon */
    --yana-accent-contrast: currentColor;
}
.yana-card-container {
line-height: 1.7;
background-color: #fcf8f5; /* Your Cream color */
border-left: 32px solid var(--yana-accent);
border-right: 32px solid var(--yana-accent);
/* This adds a subtle 'shading' to the borders so they aren't flat */
box-shadow: 
    inset 15px 0 15px -15px rgba(0,0,0,0.2), 
    inset -15px 0 15px -15px rgba(0,0,0,0.2),
    0 10px 30px rgba(0,0,0,0.1); /* The soft outer shadow */
transition: border-color 0.5s ease; /* Smooth color change between Yanas */
}
/* yana colors */
.is-hinayana {
    --yana-accent: var(--wp--preset--color--saffron);
    --yana-accent-contrast: color-mix(in oklch, var(--wp--preset--color--saffron) 60%, rgb(48, 30, 18));
}
.is-mahayana {
    --yana-accent: var(--wp--preset--color--indigo);
    --yana-accent-contrast: color-mix(in oklch, var(--wp--preset--color--indigo) 85%, black);
}
.is-vajrayana {
    --yana-accent: var(--wp--preset--color--maroon);
    --yana-accent-contrast: color-mix(in oklch, var(--wp--preset--color--maroon) 85%, black);
}
.is-meditation {
    --yana-accent: var(--wp--preset--color--turquoise);
    --yana-accent-contrast: color-mix(in oklch, var(--wp--preset--color--turquoise) 75%, black);
}

.yana-card-container h2, .yana-card-container h1{
    color: var(--yana-accent-contrast) !important;
    padding-bottom: var(--wp--preset--spacing--40);
}
.yana-card-container p{
   font-size:var(--wp--preset--font-size--large);
}
@media (max-width: 1024px) {
    .yana-card-container {
        border-left-width: 16px;
        border-right-width: 16px;
    }
}

@media (max-width: 600px) {
    .yana-card-container {
        border-left-width: 8px;
        border-right-width: 8px;
        border-radius: 4px;
    }
    .yana-svg-seal {
        width: 60px;
        margin-top: -30px; 
    }
}

/* --- Chapter Transitions --- */
.yana-chapter {
    display: none;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}
.yana-chapter h2, h3{
    color: var(--yana-accent-contrast) !important;
}

.yana-chapter.is-active {
    display: block;
    opacity: 1;
}

/* --- Pagination Structure --- */
.yana-pagination {
    margin-top: var(--wp--preset--spacing--60) !important;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    border-top: 1px solid var(--yana-accent-contrast);
    overflow: hidden;
}

.pagination-side a {
    text-decoration: none;
    color: var(--yana-accent-contrast);
}
.pagination-side:last-child {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: right;
}
.pagination-side .label {
    font-size: var(--wp--preset--font-size--small);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 5px;
    opacity: 0.5;
    color: var(--wp--preset--color--grey) !important;
}

.pagination-side .title { 
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.3;
    max-width: 200px;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* --- The Central Hub --- */
.pagination-center {
    color: var(--yana-accent) !important;
    text-align: center;
    padding: 0 20px;
}
.pagination-side a:hover .title {
    transform: translateY(-2px);
    opacity: 0.8;
}
.hub-link {
    text-decoration: none;
    color: var(--yana-accent) !important;
    opacity: 0.7;
}

.hub-link .label{
    font-size: var(--wp--preset--font-size--medium) !important;
    color: var(--yana-accent-contrast) !important;
}
.hub-icon {
    display: block;
    color: var(--wp--preset--color--grey) !important;
    font-size: var(--wp--preset--font-size--medium);
}

.next-link { text-align: right; }
.next-link .title { margin-left: auto; }

@media (max-width: 600px) {
    .yana-pagination {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 1rem;
        padding: 1rem 0;
        text-align: center;
    }

    .pagination-side:first-child { grid-row: 2; }
    .pagination-center            { grid-row: 3; }
    .pagination-side:last-child   { grid-row: 1; }

    .pagination-side:last-child {
        justify-content: flex-start;
        text-align: center;
    }
    .next-link { text-align: left; }
    .next-link .title { margin-left: 0; }

    .pagination-center {
        text-align: center;
        padding: 0.5rem 0;
    }

    .pagination-side .title {
        max-width: 100%;
    }
    .yana-toc {
        padding: 20px !important;
    }
}

.yana-toc {
    margin: 40px 0;
    padding: 30px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid color-mix(in srgb, var(--yana-accent-contrast), transparent 90%);
}

.toc-heading {
    font-size: var(--wp--preset--font-size--medium) !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--yana-accent-contrast);
    opacity: 0.7;
    margin-bottom: 20px !important;
}

#dynamic-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#dynamic-toc-list li {
    margin-bottom: 12px;
}

#dynamic-toc-list a {
    display: flex;
    align-items: baseline;
    text-decoration: none;
    color: var(--wp--preset--color--grey);
    transition: opacity 0.3s ease;
}

#dynamic-toc-list a:hover {
    opacity: 0.6;
}

.toc-number {
    font-size: var(--wp--preset--font-size--medium);
    font-family: monospace;
    margin-right: 15px;
    opacity: 0.4;
}

.toc-title {
    font-size: var(--wp--preset--font-size--large);
}

.yana-icon{
    color: var(--yana-accent);
    text-align: center;
}
.yana-icon svg{
    width: clamp(120px, 20vw, 240px);
    opacity: 0.7;
}
.shakyamuni-cover-mobile {
  display: none;
}

@media (max-width: 768px) {
  .shakyamuni-cover {
    display: none;
  }
  .shakyamuni-cover-mobile {
    display: block;
    aspect-ratio: 4/5 !important;
    min-height: unset !important;
  }
}

/* --- Yana Resume Prompt: Themed Styling --- */

#yana-resume-banner {
    display: block;
    margin: 20px 0 40px 0;
    padding: 1.5rem;
    background-color: rgba(var(--yana-accent-rgb, 212, 175, 55), 0.07); 
    border-left: 3px solid var(--yana-accent-contrast, #b38b00);
    border-radius: 0;
    animation: yanaFadeIn 0.8s ease-out;
}

#yana-resume-banner p {
    margin: 0;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.6;
    color: var(--wp--preset--color--contrast, #333);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

#yana-resume-banner strong {
    color: var(--wp--preset--color--dark, #111);
    font-weight: 600;
}

.resume-link {
    background: transparent;
    color: var(--yana-accent-contrast, #b38b00);
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 2px solid var(--yana-accent-contrast, #b38b00);
    transition: all 0.3s ease;
    margin-left: auto;
}

.resume-link:hover {
    color: var(--wp--preset--color--dark, #111);
    border-bottom-color: var(--wp--preset--color--dark, #111);
    letter-spacing: 0.2em;
}

@keyframes yanaFadeIn {
    from {
        opacity: 0;
        transform: translateX(-5px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    #yana-resume-banner p {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .resume-link {
        margin-left: 0;
        margin-top: 5px;
    }
}

/* --- Yana Master Quote Block --- */

/* Add the class 'yana-master-quote' to the block in the 'Advanced' sidebar in Gutenberg */
.wp-block-quote.yana-master-quote {
    border-left: none; /* Remove default WP border */
    padding: 2rem 1rem;
    margin: 2rem auto;
    text-align: center;
    position: relative;
    max-width: 650px;
}

/* The Decorative Quotation Mark Accent */
.wp-block-quote.yana-master-quote::before {
    content: "“";
    display: block;
    font-size: 4rem;
    height: 30px;
    line-height: 1;
    color: var(--yana-accent);
    opacity: 0.3;
    font-family: serif;
    margin-bottom: 10px;
}

/* The Quote Text */
.wp-block-quote.yana-master-quote p {
    font-family: var(--wp--preset--font-family--serif, "Playfair Display", serif);
    font-style: italic;
    font-size: calc(var(--wp--preset--font-size--large)*1.3) !important; 
    line-height: 1.5;
    color: var(--wp--preset--color--contrast, #333);
    margin-bottom: 15px;
}

/* The Author (Citation) */
.wp-block-quote.yana-master-quote cite {
    display: block;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: var(--wp--preset--font-size--small);
    color: var(--yana-accent-contrast); /* Uses your darker contrast variable */
}

/* Optional: Small decorative line under the citation */
.wp-block-quote.yana-master-quote cite::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background-color: var(--yana-accent);
    margin: 15px auto 0 auto;
    opacity: 0.6;
}

/* Entrance Animation to match the Folio feel */
.wp-block-quote.yana-master-quote {
    animation: yanaQuoteFade 1.2s ease-out;
}

@keyframes yanaQuoteFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* Dharma study and practice in KSL */
/* regular schedule */
/* 1. DESKTOP: Vertical Dividers positioned between columns */
.regular-schedule-column svg{
        height: 150px !important;
        width: auto;
    }
@media (min-width: 782px) {
    .regular-schedule-column {
        position: relative;
        padding: 0 30px;
    }

    /* Create the vertical saffron line */
    .regular-schedule-column:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 0px;
        right: 0;
        bottom: 0px; /* Keeps the line from hitting the bottom of the maroon box */
        width: 3px;
        background-color: color-mix(in oklch, var(--wp--preset--color--maroon) 92%, black); /* Saffron */
    }
}

/* 2. MOBILE: Horizontal Dividers centered between icons */
@media (max-width: 781px) {
    .regular-schedule-column {
        padding: 40px 0;
    }

    .regular-schedule-column:not(:first-child)::before {
        content: "";
        display: block;
        width: 100%; /* Short horizontal line */
        height: 2px;
        background-color: #D4A35BB0;
        margin: 0 auto 80px auto; /* Centers the line between stacked sections */
    }
}
.auspicious-symbol-large{
    width: 140%;
    display: block;
    margin: 0 auto !important;
    opacity: 0.07;
}
.auspicious-symbol{
    color: var(--wp--preset--color--maroon);
    opacity: 0.6;
    display: flex;
    justify-content: center;
}

.overflow-column{
    overflow: visible;
}
@media (max-width: 781px) {
    .auspicious-symbol-large{
    width: 40% !important;
    opacity: 0.4 !important;
}
.auspicious-symbol{
    width: 180px !important;
}
.overflow-column{
    overflow: hidden;
    height: auto !important;
}
}
.bg-quote{
    background-color: #fcf8f5b8; /* The "opacity" layer */
  background-blend-mode: overlay; /* Or try 'lighten' or 'multiply' */
  background-size: contain !important;
  background-position: center;
  background-repeat: no-repeat;
}
.buddhism-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr); /* 2 columns for desktop */
}

/* Mobile Breakpoint (typically 768px or 480px) */

@media (max-width: 1200px) {
    .buddhism-grid  {
        grid-template-columns: repeat(2, 1fr) !important; /* Force 1 column on mobile */
    }
}
@media (max-width: 768px) {
    .buddhism-grid  {
        grid-template-columns: 1fr !important; /* Force 1 column on mobile */
    }
}
.yana-icon-overview{
    text-align: center;
    color: var(--yana-accent) !important;
}
.yana-icon-overview svg{
    
    width: clamp(120px, 20vw, 180px) !important;
    height: clamp(120px, 20vw, 180px) !important;
    height: auto;
    opacity: 0.7;
}
.buddhism-card{
    border-radius: 32px;
    outline: 2px solid color-mix(in srgb, var(--yana-accent), transparent 50%);
    outline-offset: -12px;
    /* This ensures the outline follows the curve in modern browsers */
    border: 1px solid transparent;
}
.buddhism-card .wp-block-button__link{
    background-color: var(--yana-accent);
    color: #fff;
}
.buddhism-card h2{
    color: var(--yana-accent-contrast);
}
.card-resume-badge {
    position: absolute;
    top: 15px; /* Adjust based on your -18px offset to align nicely */
    right: 0;
    background: var(--yana-accent); /* Saffron background for high visibility */
    color: white;
    padding: 5px 12px;
    font-size: var(--wp--preset--font-size--small) !important;
    border-radius: 4px;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.badge-content {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.cta-horizontal{
    outline: 2px solid var(--wp--preset--color--borders);
    outline-offset: -12px;
    position: relative;
    z-index: 1;
}
.cta-horizontal-image .wp-block-cover{
    z-index: -1;
}

@media (max-width: 768px) {
    /* .cta-horizontal-image {
        flex-basis: 100% !important;
} */
.cta-horizontal-image .wp-block-cover{
        aspect-ratio: 1 / 1 !important;
}
}

/* map */

.map-controls {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 100; /* Must be above the map */
}
/* Container styling */
.monastery-map-wrapper {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
    border: 2px solid var(--wp--preset--color--saffron); 
    background: var(--wp--preset--color--cream); 
    border-radius: 12px;
}

/* Zoom buttons styled like mini-cards */
.map-controls button {
    width: 40px;
    height: 40px;
    background: var(--wp--preset--color--cream);
    border: 1px solid var(--wp--preset--color--saffron);
    border-radius: 4px;
    color: var(--wp--preset--color--maroon); 
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.map-controls button:hover {
    background: var(--wp--preset--color--saffron);
    color: var(--wp--preset--color--cream);
}
.legend-floating-card {
    position: absolute;
    top: 80px; /* Below the zoom controls */
    left: 20px;
    width: 220px; /* Smaller than the info panel */
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    z-index: 1100;
    
    /* Animation: Subtle fade and slide from left */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-20px);
    transition: all 0.3s ease;
}

.legend-floating-card.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.legend-inner h4 {
    margin-top: 0;
    color: var(--wp--preset--color--saffron);
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    font-size: 1rem;
}

/* Ensure the legend items look organized */
#legend-content {
    font-size: 0.9rem;
    line-height: 1.4;
}

.map-data-storage {
    display: none !important; /* Admins see it in the editor, visitors don't */
}
#map-viewport { width: 100%; height: 100%; cursor: grab; }

#map-pan-layer { position: relative; display: inline-block; transform-origin: 0 0; }

.base-map-img { display: block; max-width: none; height: auto; }

/* The Hover Effect */
.hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    transition: transform 0.4s ease-in-out;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}
.hotspot:hover {
    transform: translate(-50%, -50%) scale(1.3); /* ENLARGE ON HOVER */
    z-index: 99;
}

/* Photo markers (circular) */
.photo-point img { 
    width: 130px; 
    height: 130px; 
    border-radius: 50%; 
    border: 3px solid var(--wp--preset--color--cream);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); 
}

/* The glow when a building is selected */
.hotspot.is-active img {
    border: 4px solid var(--wp--preset--color--saffron) !important;
    /* We use a raw color here for the alpha transparency of the glow */
    box-shadow: 0 0 20px rgba(212, 164, 92, 0.8); 
    transform: scale(1.2);
}
.hotspot.is-active:hover {
   transform: scale(1) translate(-50%, -50%)!important;
}
.utility-point img { border-radius: 50%; width: 60px; height: 60px; }

.info-card {
    position: absolute;
    top: 20px; right: 20px; bottom: 20px;
    width: 350px;
    background: var(--wp--preset--color--cream);
    box-shadow: -10px 0 30px rgba(26, 0, 8, 0.2);
    transform: translateX(120%);
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1000;
    border-radius: 15px;
    box-sizing: border-box;

    /* Outline lives here — on the non-scrolling shell */
    outline: 2px solid var(--wp--preset--color--borders);
    outline-offset: -8px;
    padding: 10px 0; /* padding moves here */
    /* Clips the inner scroller so content never bleeds past the outline */
    overflow: hidden !important;
    scrollbar-gutter: stable both-edges; /* ← reserves scrollbar lane always */
}

.info-card__inner {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 30px 20px 30px 20px;
    box-sizing: border-box;
    overscroll-behavior: contain; /* ← stops scroll chaining to the page behind */
    scroll-behavior: smooth;
}

.info-card.active { transform: translateX(0); }
@media (max-width: 768px) {
    .info-card {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        height: 60%;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        outline-offset: -6px;
        overflow: hidden; /* keep the outline fix working */
    }

    .info-card.active {
        transform: translateY(0);
    }

    .close-card {
        position: sticky;
        top: 0;
        float: right;
        z-index: 1001;
    }
}
/* Card Typography */
#card-content h3 {
    color: var(--wp--preset--color--maroon) !important;
    text-align: center;
    font-weight: 600;
    font-size: calc(var(--wp--preset--font-size--large)*1.3);
    margin-bottom: 10px;
}

#card-content p {
    color: var(--wp--preset--color--grey);
    line-height: 1.6;
}
/* Apply this to the headers and paragraphs inside your info-card */
#card-title, 
.info-card p,
.info-card img, 
.info-card ul {
    animation: mapFadeIn 0.4s ease-out;
}

@keyframes mapFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
#card-icon-header {
    text-align: center;
    padding-bottom: 10px;
}

.card-top-icon.utility {
    width: 100px;
    height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
    margin: 0 auto;
}
/* Close button - matching Saffron */
.close-card {
    position: absolute;
    top: 25px;
    right: 25px;
    
    /* Colors from your WordPress variables */
    color: var(--wp--preset--color--cream);
    background-color: var(--wp--preset--color--saffron);
    
    width: 45px;
    height: 45px;
    font-size: var(--wp--preset--font-size--x-large);
    border-radius: 8px; /* Matches the card radius */
    border: none;
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1001;
    transition: all 0.2s ease;
}
.close-card:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

.no-click { cursor: default; pointer-events: none; }
#card-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
}
#sticky-map-notice {
    /* 1. DEFINE THE SIZE VARIABLE */
    --notice-size: 90px; /* Default size for tablets/small laptops */
    
    position: absolute;
    top: clamp(10px, 5vh, 20px); 
    right: 20px;
    
    /* 2. APPLY THE VARIABLE */
    width: var(--notice-size);
    height: var(--notice-size);
    
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
}

/* 3. BIGGER ON WIDESCREEN (Desktops) */
@media (min-width: 1200px) {
    #sticky-map-notice {
        --notice-size: 90px; /* Scales up automatically */
        right: 20px;
    }
}

/* 4. SMALLER ON MOBILE */
@media (max-width: 768px) {
    #sticky-map-notice {
        --notice-size: 70px; /* Scales down automatically */
        top: 15px;
        right: 15px;
    }
}

/* --- THE CENTERING LOGIC (The Reset) --- */

#sticky-map-notice .hotspot {
    transform: none !important; /* Kills the -50% map-marker shift */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#sticky-map-notice .hotspot img {
    opacity: 0.9;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Keeps the seal from stretching */
    display: block;
}

#sticky-map-notice:hover {
    transform: scale(1.1);
}
.hotspot[data-loc="visitor-rules"]{
transform: translate(none) !important;
}
.hotspot[data-loc="visitor-rules"]:hover{
transform: translate(none) scale(1.2)!important;
}
.hotspot[data-loc="visitor-rules"] img {
    
    width: clamp(60px, 15vw, 100px);
    height: clamp(60px, 15vw, 100px);
    
}
.hotspot[data-loc="parking"] img {
    width: 180px;
    height: 180px;
}
.hotspot[data-loc="jh-tearoom"] img, 
.hotspot[data-loc="tea-room"] img, 
.hotspot[data-loc="shop"] img, 
.hotspot[data-loc="reception"] img {
    width: 82px !important;
    height: 82px !important;
    border: 2px solid var(--wp--preset--color--cream)
} 

/* 1. The Container */
.visiting-hero-container {
    position: relative;
    padding: 80px 0;
    overflow: hidden; 
    display: flex;
    align-items: center;
    min-height: 400px;
    max-height: 800px;
    margin: 0px auto !important;/* Ensures the flower has a minimum "stage" to sit on */
}

/* 2. Forcing the Text Left */
.visiting-text-wrapper {
    position: relative;
    z-index: 2;
    width: 100% !important;
    max-width: 100% !important;
    /* This is the key: move the text 10% from the left edge */
    pointer-events: none; /* Lets you click the map below easily */
}

.visiting-text-wrapper > * {
    max-width: 800px; /* Keeps lines from being too long to read */
    pointer-events: auto; /* Re-enables clicking on text/links */
}

/* 3. The Flower (The Background Element) */
.auspicious-background {
    position: absolute;
    top: -10%;
    bottom: 0;
    right: 0; /* Adjust this to control the "encroachment" */
    height: 115%; /* Ties size to the height of the parent group */
    width: auto;  /* Maintains aspect ratio */
    z-index: 1;
    opacity: 0.15;
    color: var(--wp--preset--color--saffron);
    display: flex;
    align-items: center; /* Keeps the SVG vertically centered if it's smaller than the box */
}
@media (max-width: 768px) {
    /* 1. Reset Container Spacing & Fix Width */
    .visiting-hero-container {
        min-height: auto;
        width: 100% !important;
        max-width: 100% !important;
        padding: 60px 0 !important;
        display: block; /* Stack elements vertically on mobile */
        overflow: hidden;
    }

    /* 2. Squish Fix: Force text wrapper to use full width */
    .visiting-text-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        position: relative;
        z-index: 2;
    }

    /* Target WP internal constraints to stop the left-squish */
    .visiting-text-wrapper.is-layout-constrained > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* 3. Reposition the Lotus (Your updated specs) */
    .auspicious-background {
        width: 100%; 
        height: auto; 
        top: 2%;   
        bottom: 0;   
        right: 0;
        right: auto;
        transform: none; 
        opacity: 0.1; 
        position: absolute;
        z-index: 1;
        pointer-events: none;
    }

    .auspicious-background svg {
        height: auto;
        width: 100%;
        display: block;
    }
}
.visiting-pillars-container{
    width: 100% !important;
}
.visiting-pillar{
    position:relative;
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1), 
        0 20px 40px -10px rgba(0, 0, 0, 0.25),
        0 0 20px rgba(184, 134, 11, 0.05); /* Very faint gold glow */
}
.pillar-image-wrapper{
    position: absolute;
    width: calc(100% - 180px) !important;
    top: 0;
    left: 50%;
    transform: translate(-50%, -40%); /* Moves it up by half its own height */
    z-index: 10;
}
.pillar-image-wrapper img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@media (max-width: 1400px) {
    .visiting-pillars-container {
        padding-top: 100px;
        /* Switch to 1 column for tablets and phones */
        grid-template-columns: 1fr; 
        row-gap: 100px;
    }

    .visiting-pillar {
        padding-top: 160px !important;
        padding-bottom: 36px !important;
        /* Ensure cards don't get too wide on large phones */
        max-width: 500px; 
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100%;
    }
    .pillar-image-wrapper{
    width: 240px !important;
}
}
.centered-content{
    margin-left: auto !important;
    margin-right: auto !important;
}
/* STAY WITH US PAGE */
.wide-section{
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.highlight-icon p:first-child{
    font-size: calc(var(--wp--preset--font-size--xx-large) * 2.5) !important;
}
.visiting-golden-rules ul {
    list-style: none !important;
}
.visiting-golden-rules li {
    display: flex;
    align-items: flex-start;
}

/* 4. The Saffron "Bullet" Jewel */
.visiting-golden-rules li::before {
    content: "◈"; /* Spiritual Diamond */
    color: var(--wp--preset--color--saffron); /* Saffron */
    font-size: 1.4rem;
    margin-right: 15px;
    line-height: 1.2;
    flex-shrink: 0;
}

/* THE CENTERED SEAL */
.abbot-seal-center {
    position: relative;
    z-index: 20;
    margin: 0 auto -280px auto !important; /* Pulls the card up halfway through the image */
    display: block;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    width: 450px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

/* THE 960px CENTERED CARD */
.seal-card-centered {
    padding-top: 260px !important
}

/* ALIGNING THE DIAMOND LIST */
/* Since centered lists can look messy, we center the container but left-align the text */
.seal-card-centered ul {
    display: inline-block;
    text-align: left; /* Keeps diamonds neatly lined up */
    margin-top: 30px;
}

@media (max-width: 768px) {
    .abbot-seal-center {
    margin: 0 auto -160px auto !important; /* Pulls the card up halfway through the image */
    width: 260px;
}
    .seal-card-centered {
        padding: 140px 30px 60px 30px !important;
    }
    .visiting-golden-rules{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
.visiting-cta-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.7;
}

.visiting-cta-icon svg{
    height: 200px !important;
}
@media (max-width: 1200px) {
.visiting-cta-icon svg{
    height: 150px !important;
}
}

.accommodation-accordion .wp-block-details summary {
    background-color: var(--wp--preset--color--turquoise) !important;
    color: var(--wp--preset--color--cream) !important;
    cursor: pointer;
    list-style: none; /* Hides default arrow */
    display: flex;
    justify-content: space-around;
    border-radius: 20px !important;
    align-items: center;
    text-transform: none;
    letter-spacing: 0.05em;
}

/* Custom indicator: a small saffron dot that turns into a dash */
.wp-block-details summary::after {
    content: "+";
    color: var(--wp--preset--color--saffron);
    font-size: 2.4rem;
    transition: transform 0.3s ease;
}

.wp-block-details[open] summary::after {
    content: "−";
    transform: rotate(180deg);
}

.room-list-item {
    padding: 1.5rem 0;
    line-height: 1.8;
    color: #444;
    border-top: 1px solid #eee;
    
}
.room-list-item:last-child {
    border-bottom: 1px solid #eee;
}
.heading-room{
    font-size: calc(var(--wp--preset--font-size--x-large) * 0.8) !important;
}

.booking-hint a {
    font-size: var(--wp--preset--font-size--medium) !important;
    text-decoration: none !important; /* Removes the underline */             /* Bold enough to look like a button, but no "growth" */
    display: inline-block;            /* Keeps it stable */
    transition: color 0.2s ease;     /* Smooth color change only */
}
.hint-green a{
    color: var(--wp--preset--color--turquoise) !important;
}
.hint-blue a{
    color: var(--wp--preset--color--indigo) !important;
}
/* Optional: Slight color change on hover without moving the text */
.booking-hint a:hover {
    color: var(--wp--preset--color--saffron) !important;        /* Saffron on hover */
    text-decoration: none !important; /* Ensures underline doesn't come back */
}
/* freetobook widget */
/* 1. The Main Container - Clean and Centered */
.ftb-bookingWidget__inner {
    background-color: transparent !important; /* Let the white card handle the background */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    padding: 20px 0;
}

/* 2. Titles (Check-in/Check-out) */
.ftb-bookingWidget__dateSearch__title {
    font-family: inherit;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: #444 !important;
    margin-bottom: 8px;
    display: block;
}

/* 3. Date Inputs - Softening the "Boxy" look */
.ftb-bookingWidget__dateSearchButton {
    background-color: #f9f9f9 !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important; /* Matching site's rounded vibe */
    padding: 10px 15px !important;
    font-family: inherit;
    color: #555 !important;
    transition: border-color 0.3s ease;
}

.ftb-bookingWidget__dateSearchButton:focus {
    border-color: var(--wp--preset--color--turquoise) !important; /* Turquoise focus */
    outline: none;
}

/* 4. The "Check Availability" Button - The Saffron Pivot */
.ftb-bookingWidget__checkAvailability {
    background-color: var(--wp--preset--color--saffron) !important; /* Your Saffron/Orange */
    color: #fff !important; /* White text for better contrast */
    border-radius: 8px !important;
    border: none !important;
    font-family: inherit;
    font-weight: 700 !important;
    /* text-transform: uppercase;
    letter-spacing: 1px; */
    padding: 12px 25px !important;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.ftb-bookingWidget__checkAvailability:hover {
    background-color: var(--wp--preset--color--borders) !important; /* Slightly deeper saffron on hover */
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* 5. Mobile Responsiveness */
@media (max-width: 768px) {
    .ftb-bookingWidget__inner {
        flex-direction: column;
        align-items: stretch;
    }
    
    .ftb-bookingWidget__dateSearchContainer {
        display: flex;
        gap: 10px;
    }
    
    .ftb-bookingWidget__dateSearch {
        flex: 1;
    }
}

/* Participate section */
.participate-hero-container {
    position: relative;
    padding: 80px 0; 
    display: flex;
    align-items: center;
    min-height: 400px;
    max-height: 800px;
    max-width: 1600px;
    margin: 0px auto !important;/* Ensures the flower has a minimum "stage" to sit on */
}
.highlight-text p{
    font-size: calc(var(--wp--preset--font-size--large) * 1.2) !important;
}
.highlight-heading h2{
    font-size: calc(var(--wp--preset--font-size--x-large) * 1.1) !important;
}
.vase-background{
    margin-top: 72px !important;
    z-index: 0;
}
.inline-link-custom{
    font-family: inherit !important;
    font-size: inherit !important;
    color: var(--wp--preset--color--indigo) !important;
}

.ar-wrapper{
    padding-top: var(--wp--preset--spacing--60);
    padding-bottom: var(--wp--preset--spacing--60);
}

.blend-mandala img{
    mix-blend-mode: multiply;
    filter: contrast(110%); /* Optional: sharpens the lines against the off-white */
}
.blend-conche img{
    mix-blend-mode: multiply;
    opacity: 0.4;
    filter: contrast(110%); /* Optional: sharpens the lines against the off-white */
}
/* Apply this to the Card Container */
.support-card-container {
    
    position: relative;
    padding-top: 20%; /* Creates that 'opening' space */
}

.support-card-container::before {
    content: "";
    position: absolute;
    top: -80px; /* Position it in that top padding */
    left: 0;
    right: 0;
    height: 40%; /* Size of the icon area */
    background-image: url('/wp-content/themes/twentytwentyfive-samyeling/assets/images/seedling.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.4; /* Only the icon is faded! */
    z-index: 0;
}
/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .support-card-container {
        padding-top: 180px; /* Give the seedling its own dedicated space */
    }
    .support-card-container::before {
        top: -10px;
        height: 120px; /* Keep it small and elegant at the top */
        opacity: 0.6;   /* Make it a bit more visible since it's not behind text */
    }

    /* Remove the 'stem' line on mobile as it cuts through stacked text */
    .support-card-container::after {
        display: none;
    }
    .support-columns{
        padding-left: var(--wp--preset--spacing--40) !important;
        padding-right: var(--wp--preset--spacing--40) !important;
    
    }
    .entry-content{
        padding-left: var(--wp--preset--spacing--20) !important;
        padding-right: var(--wp--preset--spacing--20) !important;
    }
    .make-card-readable-mobile{
        border-radius: 20px !important;
        padding-left: var(--wp--preset--spacing--30) !important;
        padding-right: var(--wp--preset--spacing--30) !important;
    }
}

.butterlamp-card img{
    width: 102% !important;
}
.butterlamp-card-content {
    position: relative;
    display: flex; /* Assuming your 2-column layout */
    gap: 40px;
    z-index: 1; /* Keeps text above the watermark */
}

.butterlamp-card-content::before {
    content: "";
    position: absolute;
    top: 47%;
    left: 85%;
    transform: translate(-50%, -50%); /* Perfectly centered */
    width: 500px; /* Large enough to bridge the gap */
    height: 500px;
    background-image: url('/wp-content/themes/twentytwentyfive-samyeling/assets/images/lamp.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    
    /* Using your maroon variable for the 'ink' */
    opacity: 0.1; 
    filter: sepia(1) saturate(2); /* Gives it a slightly warmer, brassy tone */
    
    z-index: -1; /* Place it behind the text */
}

html {
    overflow-x: hidden;
}

body {
    overflow-x: clip; /* clip on body preserves sticky */
}

main {
    overflow-x: clip;
    position: relative;
}
.radiant-prayer{
    
    background: radial-gradient(
        circle, 
        rgb(255, 253, 253) 0%, 
        rgba(255,255,255,0.8) 40%, 
        rgba(255,255,255,0) 70%
        );
    }

.contact-page-header {
    position: relative;
}

.contact-page-header::before {
    content: "";
    position: absolute;
    top: 3%;
    right: 0; /* Offset it off the screen */
    aspect-ratio: 1 / 1;  /* Make it significantly larger than the header logo */
    height: 98%;
    background-image: url('/wp-content/themes/twentytwentyfive-samyeling/assets/images/SamyeLingLogo.webp');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.2; /* Very subtle */
    pointer-events: none; /* User can still click things under it */
    z-index: 0;
}
.page-not-found.contact-page-header::before{
    filter: grayscale(100%) !important;
    left: 10% !important;
    top: 0 !important;
}
@media (max-width: 768px) {
    .contact-page-header {
    overflow:hidden;
}
.contact-page-header::before{
    right: -80%;
    height: 93%;
}

}
.contact-link{
    margin-left: -28px !important;
}
    /* Container */
/* The Outer Accordion Item */
.aff-accordion-item {
    border: 0.5px solid #D4A35B73;
    border-radius: 20px;
    /* margin-bottom: var(--wp--preset--spacing--20); */
    overflow: hidden;
    background: var(--wp--preset--color--card);
}

/* The Header (Maroon Background, White/Card Text) */
.aff-accordion-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 18px 24px;
    border: 0.5px solid #D4A35B73;
    background: var(--wp--preset--color--maroon);
    color: var(--wp--preset--color--cream);
    font-size: var(--wp--preset--font-size--large);
    border: none;
    cursor: pointer;
    font-weight: 500;
    text-align: left;
    transition: filter 0.2s ease;
}

.aff-accordion-header:hover {
    filter: brightness(1.1); /* Subtle hover without changing the base color */
}

/* Flag/Thumbnail icons in Header */
.aff-accordion-header img {
    width: auto;
    flex-shrink: 0;
    border-radius: 4px;
}

/* Arrow - Set to Saffron */
.aff-accordion-arrow {
    margin-left: auto;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 3px solid var(--wp--preset--color--saffron);
    border-bottom: 3px solid var(--wp--preset--color--saffron);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
}

.aff-accordion-item.is-open .aff-accordion-arrow {
    transform: rotate(-135deg);
}

/* The Panel inside the Accordion */
.aff-accordion-panel {
    padding: var(--wp--preset--spacing--40);
    background: var(--wp--preset--color--card);
}

/* Grid Layout */
.aff-centres-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--preset--spacing--40);
}

/* Individual Centre Cards */
.aff-centre-card {
    padding: var(--wp--preset--spacing--50);
    border: 0.5px solid #D4A35B73;
    border-radius: 32px;
    max-width: 100%;
    box-shadow: var(--wp--preset--shadow--natural);
    background: var(--wp--preset--color--card);
    font-size: var(--wp--preset--font-size--medium);
    word-break: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}

/* Text Colors */
.aff-centre-name {
    margin: 0 0 var(--wp--preset--spacing--30);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 700;
    line-height: 1.2;
    color: var(--wp--preset--color--maroon) !important;
}

.aff-centre-address {
    font-style: normal;
    color: #3f3f3f; /* Your specific soft black */
    margin: 0 0 var(--wp--preset--spacing--30);
}

/* Links and Icons */
.aff-contact-link {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: var(--wp--preset--color--grey); /* Preset grey for links */
    text-decoration: none;
    margin-bottom: 8px;
}

.aff-contact-link:hover {
    color: var(--wp--preset--color--maroon);
    text-decoration: underline;
}

.aff-contact-link .contact-icon {
    flex-shrink: 0;
    color: var(--wp--preset--color--saffron); /* Saffron icons */
}

/* Responsive */
@media (max-width: 768px) {
    .aff-centres-grid {
        grid-template-columns: 1fr;
    }
    .aff-accordion-header {
        padding: 14px 18px;
    }
    .aff-accordion-panel {
    padding: var(--wp--preset--spacing--40) 0 !important;
}
}
/* cafe and shop opening times */
.opening-times__heading{
    text-align: center;
    margin: 0 !important;
}
.opening-times__session{
    text-align: center;
    font-weight: 600;
    margin: var(--wp--preset--spacing--20) 0 !important;
}

.travel-icon{
    height: 60px;
    color: var(--wp--preset--color--grey);
    opacity: 0.3;
}
/* Remove bullets from the main list and all nested lists */
.travel-list, 
.travel-list ul {
    list-style-type: none !important;
    padding-left: 0 !important;
}

.travel-list li {
    position: relative;
    padding-left: 1.5rem; /* Space for the chevron */
}

/* Create the Chevron */
.travel-list li::before {
    content: '›';
    position: absolute;
    left: 0;
    
    /* Manual Vertical Alignment */
    /* Since your line-height is 1.7, 0.2rem usually hits the 'visual center' */
    top: 0.2rem; 
    
    color: var(--wp--preset--color--saffron);
    font-weight: bold;
    font-size: var(--wp--preset--font-size--large);
    line-height: 1; /* Keep the icon box small so it doesn't push text */
}

/* Indent nested items so they look like sub-points */
.travel-list li ul {
    margin-top: 0.5rem;
    margin-left: 1rem; 
}
.timetable-row{
    font-weight: 600;
    
    color: #252525;
    
    margin-top: var(--wp--preset--spacing--30) !important;
}
.timetable-row > p:first-child{
    font-size: var(--wp--preset--font-size--large);
    font-weight: 700;
    color: var(--wp--preset--color--maroon);
    width: 250px;
}
.timetable-row.timetable-row-first{
    margin-top: 0 !important;
}
@media (max-width: 768px) {
    .timetable-row{
        flex-direction: column !important;
        align-items: flex-start !important ;
        justify-content: center !important;
        gap: var(--wp--preset--spacing--10) !important;
        margin-top: var(--wp--preset--spacing--40) !important;
    }
}

/* stretchy cards */
.stretch-card {
  display: flex;
  flex-direction: column;
}

.stretch-card-header {
  flex-shrink: 0 !important;
  width: 100%;  /* fixed, never squishes */
}

.stretch-card-body {
  flex: 1;         /* takes whatever space is left */
  overflow: hidden;
  width: 100%; /* or auto if content can scroll */
}

.stretch-card-footer {
  flex-shrink: 0;
  width: 100%;  /* fixed, always pinned to bottom */
}
/* 1. THE RESET - Stripping global accordion styles */
.newsletter-reveal summary {
    list-style: none !important;      /* Removes default arrow */
    display: flex !important;
    justify-content: center; /* Forces it to behave like a button, not a block */
    background: none;                 /* Removes any global background */
    padding: 0;                       /* Reset padding for the button look below */
    position: relative;
}

/* Kills common global pseudo-elements (like + or arrows) */
.newsletter-reveal summary::after, 
.newsletter-reveal summary::before {
    content: none !important;
    display: none !important;
}

/* Hide the Safari-specific marker */
.newsletter-reveal summary::-webkit-details-marker {
    display: none !important;
}

/* 2. THE STYLING - Building the Saffron Button */
.newsletter-reveal summary {
    padding: 15px 35px !important;
    border: 2px solid var(--wp--preset--color--saffron) !important;
    color: var(--wp--preset--color--indigo) !important;
    background-color: var(--wp--preset--color--cream);
    border-radius: 32px;
    font-weight: 600;
    font-family: var(--wp--preset--font-family--jost) !important;
    text-transform: capitalize !important;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: var(--wp--preset--font-size--medium);
    box-shadow: var(--wp--preset--shadow--natural);
}

.newsletter-reveal summary:hover, .footer-donate-btn .wp-block-button__link:hover {
    background: var(--wp--preset--color--saffron) !important;
    color: var(--wp--preset--color--cream) !important;
}

/* 3. THE FORM - Stacked on Dark Background */
.newsletter-reveal[open] .newsletter-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 25px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    animation: samyeFade 0.4s ease-out;
}

/* Making inputs look sharp on Maroon */
.samye-newsletter-form input {
    background: #ffffff !important;
    border: 1px solid var(--wp--preset--color--borders) !important;
    border-radius: 32px !important;
    padding: 14px 20px !important;
    color: #333 !important;
}

.subscribe-btn {
    background: var(--wp--preset--color--maroon) !important;
    color: var(--wp--preset--color--cream) !important;
    border-radius: 32px !important;
    padding: 14px !important;
    font-weight: 700;
    
    font-size: var(--wp--preset--font-size--medium);
    border: none;
    cursor: pointer;
}

@keyframes samyeFade {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
.page-id-1250 img, .radius-img img{
    border-radius: 16px !important;
}
.page-id-1250 .wp-block-image .wp-element-caption{
     border-radius: 16px !important;
}
.history-photo-img img{
    border-radius: 16px !important;
    border: 8px solid var(--wp--preset--color--card);
    box-shadow: var(--wp--preset--shadow--natural);
    width: calc(100% - 20px);
}
/* Ensure the group behaves as a flex container */
.flex-stack {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%; /* Ensures the group fills its parent */
}

/* Push the specific element to the bottom */
.push-to-bottom {
    margin-top: auto !important;
}
.inline-block h1, .inline-block p{
    display: inline;
}
/* Hide mobile cover on desktop */
.cover-mobile {
    display: none;
}

/* Hide desktop cover on tablet/mobile, show mobile version */
@media (max-width: 1024px) {
    .cover-desktop {
        display: none;
    }
    .cover-mobile {
        display: block;
    }
    .cover-mobile .wp-block-cover__inner-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    min-height: 855px;
    padding-bottom: 2rem;
}
}

/* Base */
.mantra-syllable {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mantra-syllable::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 200%;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.mantra-syllable svg {
    position: relative;
    z-index: 1;
    width: 300px;
}
.wp-block-columns:has(.mantra-col) {
        align-items: stretch !important;
    }

    .mantra-col {
        align-self: stretch !important;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }
/* OM — white */
.om::before {
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.80) 0%,
        rgba(255, 255, 255, 0.62) 25%,
        rgba(255, 255, 255, 0.45) 55%,
        rgba(255, 255, 255, 0.21) 75%,
        transparent 100%
    );
}

.ah::before {
    background: radial-gradient(
        circle,
        rgba(77, 4, 20, 0.60) 0%,
        rgba(77, 4, 20, 0.35) 25%,
        rgba(77, 4, 20, 0.15) 50%,
        rgba(77, 4, 20, 0) 70%,
        transparent 100%
    );
}

.hung::before {
    background: radial-gradient(
        circle,
        rgba(30, 82, 128, 0.60) 0%,
        rgba(30, 82, 128, 0.35) 25%,
        rgba(30, 82, 128, 0.15) 50%,
        rgba(30, 82, 128, 0) 70%,
        transparent 100%
    );
}
.om  {
    color: var(--wp--preset--color--card);
}
.om svg path { stroke: var(--wp--preset--color--dark);}
.ah {
    color: var(--wp--preset--color--maroon);
}
.hung {
    color: var(--wp--preset--color--indigo);
}
@media (max-width: 768px) {
    .mantra-syllable {
    width: 240px !important;
        
}

}

.thank-you-container{
    text-align: center;
    color: var(--wp--preset--color--maroon);
}
.thank-you-container svg{
    width: 80%;
    opacity: 0.3;
}

/* ── Layout shell ── */
.staggered-layout {
  display: grid;
  grid-template-columns: 1fr minmax(0, 720px) 1fr;
  gap: 0 24px;
  align-items: start;    /* critical: lets columns be independent heights */
  width: 100%;
  position: relative;


background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1704' preserveAspectRatio='none'><path d='M 50,0 C 50,142 96,142 92,284 C 92,426 4,426 8,568 C 4,710 96,710 92,852 C 92,994 4,994 8,1136 C 4,1278 96,1278 92,1420 C 92,1562 4,1562 8,1704' stroke='%23caac78' stroke-width='3' fill='none' stroke-linecap='round' stroke-dasharray='2 38' vector-effect='non-scaling-stroke'/><path d='M 50,0 C 50,142 96,142 92,284 C 92,426 4,426 8,568 C 4,710 96,710 92,852 C 92,994 4,994 8,1136 C 4,1278 96,1278 92,1420 C 92,1562 4,1562 8,1704' stroke='%23caac78' stroke-width='3' fill='none' stroke-linecap='round' stroke-dashoffset='19' stroke-dasharray='2 38' vector-effect='non-scaling-stroke'/></svg>");background-repeat: no-repeat;
background-size: 80% 1900px;
background-position: center 130px;
/* offset right column by half a slot */


}

/* ── Shared side column styles ── */
.side-col {
  display: flex;
  flex-direction: column;
  gap: 275px;             /* space between images — match this in the offset calc */
}
.staggered-layout .wp-element-caption{
    text-align: center;
    color: var(--wp--preset--color--saffron);
}

.side-col .wp-block-image {
  margin: 0 !important; /* kill Gutenberg's default image margins */
}

.side-col img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;   /* optional */
}

/* ── THE KEY: offset right column by half one image-slot ──
   image-slot = image height + gap
   If your images are ~260px tall with 24px gap → slot = 284px → offset = 142px
   Adjust the value to match your actual image height.            */
.side-right {
  margin-top: 280px;
}
.side-left{
  margin-top: 600px !important;
}


/* ── Content column ── */
.content-col {
  min-width: 0;          /* prevents grid blowout */
}

/* ── 1400px: narrower content column ── */
@media (max-width: 1400px) {
  .staggered-layout {
    grid-template-columns: 1fr minmax(0, 620px) 1fr;
  }
}

@media (max-width: 1024px) {
  .staggered-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-image: none;
    gap: 18px;
  }

  .content-col {
   grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .side-left {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0 !important;
  }

  .side-right {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0 !important;
  }
  .side-col{
    gap: 24px !important;
  }
  .side-col img {
    
    width: 100%;
    
    object-fit: cover;
    height: auto; /* overrides any fixed desktop height */
  }
}
@media (max-width: 768px) {
    .side-col .wp-block-image img{
    border-radius: 32px !important;
  }
}

.email-button a {
    display: inline-flex !important;
    align-items: center;
    gap: 10px; /* Space between icon and text */
}

.email-button a::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: currentColor; /* The icon will match your text color! */
    transform: translateY(1px);
    /* Your specific SVG as a mask */
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>') no-repeat center;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>') no-repeat center;
    
    /* Scale the mask to fit the 18px container */
    mask-size: contain;
    -webkit-mask-size: contain;
}

#sjc-turnstile-host {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 999999;
    transition: opacity 0.2s, transform 0.2s;
    /* Visible by default — hidden only when not needed */
    opacity: 0;
    transform: scale(0);
    pointer-events: none;
}

#sjc-turnstile-host.sjc-turnstile--visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

@media (max-width: 768px) {
    body.sjc-modal-open #sjc-turnstile-host {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
        bottom: 5rem;
        right: 0.75rem;
    }

    /* Hide again once token is obtained — handled via JS class */
    body.sjc-modal-open #sjc-turnstile-host.sjc-turnstile--resolved {
        opacity: 0;
        transform: scale(0);
        pointer-events: none;
    }
}
.acdt-meta p:empty,
.acdt-meta > p {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}



/* Style the button as a transparent icon wrapper */
.wp-block-button.btn-icon-png .wp-block-button__link {
    background-image: url('/wp-content/themes/twentytwentyfive-samyeling/assets/images/icon192.webp') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-color: transparent !important;
    aspect-ratio: 1 / 1;
    height: 100% !important; /* Icon click area height */
    border: none !important;
    border-radius: 8px !important;
    min-width: unset !important;
}