/*
 * Theme Name: Divi Child
 * Theme URI: https://www.elegantthemes.com/gallery/divi/
 * Description: Divi Child Theme
 * Author: Elegant Themes
 * Author URI: https://www.elegantthemes.com
 * Template: Divi
 * Version: 1.0.0
 */

/* =Theme customization starts here
 -*------------------------------------------------------ */
/* Reserves the vertical scrollbar's width whether or not it's actually
 * needed, so content whose height changes dynamically (e.g. play.php's
 * pagination showing fewer cards on the last page) never causes the
 * whole page to shift left/right as the scrollbar appears/disappears.
 * Safe progressive enhancement — browsers that don't support this
 * property simply ignore it, no fallback needed. */
html {
    scrollbar-gutter: stable;
}
body {
    text-align: center;
}

.et_pb_section {
    background-color: unset !important;
}

.et_pb_text_0 {
    text-align: center !important;
}

.wpml-ls-flag {
    height:10px;
}


#et-secondary-nav.menu > li:nth-child(4) {
margin-left: 50px; /* adjust to taste */
}

.img-wrap .copyright {
    display: block;
    text-align: center;
}
.img-wrap img{
    height:300px;
}

.et_boxed_layout #page-container {
    box-shadow: unset;
}


:root {
    --primary: #02e2c1;
    --primary-dark: #01bba1;
    --primary-glow: rgba(2, 226, 193, 0.4);
    --bg: #050f18;
    --card-bg: rgba(5, 20, 30, 0.7);
    --text: #ffffff;
    --text-secondary: #80fce7;
    --accent: #ff5e7d;
    --accent-glow: rgba(255, 94, 125, 0.4);
    --our-pick: #9c4dff;
    --our-pick-glow: rgba(156, 77, 255, 0.4);
    --border: rgba(2, 226, 193, 0.2);
    --frost: rgba(255, 255, 255, 0.05);
    /* NOTE: --panel-* tokens (the shared dark-panel palette used by the
     * commitment/products/features/adoption/forest content modules) used
     * to live here too. They've moved to chymir_print_panel_tokens() in
     * functions/shared-styles.php, printed inline only on pages that
     * actually render one of those modules — see that file's doc comment
     * for the full reasoning (this is the per-module CSS split). */
}

.hero-stage {
    position: relative;
    width: 100vw;
    height: 100vh;      /* or 100% if a parent already sets the height */
    overflow: hidden;
    background-color: #050f18;
}
.hero-canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    aspect-ratio: 16 / 9;
    min-width: 100%;
    min-height: 100%;
    opacity:0.5;
    transform: translate(-50%, -50%);
    overflow: hidden;
    container-type: size;      /* makes cqw/cqh resolve against .hero-canvas */
    container-name: hero;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background-color: #121212;
    opacity: 0;
    z-index: 10;
}
.hero-description {
    position: absolute;
    bottom:5%;
    right:4%;
    font-size: clamp(9px, 0.5vw + 7px, 12px);
    white-space: nowrap;
    z-index: 6;
    color: #ffffff;
    opacity:0.5;
    text-align:right;
}
.hero-text {
    position:absolute;
    top: 0 ;
    right: 0 ;
    bottom: 0 ;
    left: 0 ;

    width: 100%;
    height 100%;

    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    z-index: 5;
}

.hero-text p:has(.hero-title) {
    order: 1;
    margin-bottom: 1.5rem;
}

.hero-text p:has(.hero-intro) {
    order: 2;
    margin-bottom: 0.5rem;
}

.hero-text p:has(.hero-slogan) {
    order: 3;
}


.hero-title {
    font-weight:bold;
    font-size: clamp(2rem, 5vw, 3.5rem);
    text-transform: capitalize;
    color: #ffffff;
}

.hero-intro {
    font-weight:500;
    font-size: clamp(1.1rem, 2.5vw, 1.75rem);
}

.hero-slogan {
    font-style: italic;
    font-weight: 400;
    font-size: clamp(0.85rem, 1.5vw, 1.1rem);
    opacity:0.7;

}

.hero-mountain {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 2;
}
.hero-moon-container {
    position: absolute;
    width: 10.67%;   /* 200px / 1200px design width */
    aspect-ratio: 1 / 1;
    top: 10%;
    left: 20%;
    z-index: 0;
}
.hero-moon {
    position: absolute;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 2.75rem rgb(255, 255, 255));
}
.hero-cloud {
    position: absolute;
    width: 50%;   /* 600px / 1200px design width */
    height: auto;
    opacity: 0.95;
    top: 8.5%;
    left: 0%;
    z-index: 3;
}
.hero-aurora {
    position: absolute;
    width: 200%;
    height: 33.3%;
    will-change: transform;
    transform: translateZ(0);
    opacity: 0.25;
    border-radius: 50%;
    filter: blur(40px);
    z-index: 1;
    animation: hero-aurora-move 20s infinite alternate;
}
.hero-aurora-1 {
    top: 0;
    left: -50%;
    background: linear-gradient(45deg, var(--our-pick-glow), var(--primary-glow), var(--primary-glow));
}
.hero-aurora-2 {
    top: -7%;
    right: -50%;
    background: linear-gradient(45deg, var(--primary-glow), var(--primary-glow), var(--accent-glow));
}
.hero-stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
}

/* ==========================================================
 *  TABLET
 *  ========================================================== */
@media (max-width: 1024px) {
    .hero-canvas {
        aspect-ratio: 4 / 3;
    }

    .hero-title {
        font-size: clamp(1.7rem, 5.5cqw, 3.4rem);
    }

    .hero-intro {
        font-size: clamp(1rem, 3.2cqw, 1.8rem);
    }

    .hero-slogan {
        font-size: clamp(0.9rem, 2.6cqw, 1.2rem);
    }

    .hero-moon-container {
        width: 16%;
        bottom: 62%;
        left: 48%;
    }
    .hero-cloud {
        width: 62%;
        bottom: 39%;
        left: 16%;
    }
}

/* ==========================================================
 *  PHONE
 *  ========================================================== */
@media (max-width: 600px) {
    .hero-canvas {
        aspect-ratio: 3 / 4;
    }

    /* Centered text stack. Using a fixed container instead of individual
     *    left/width per element, so title/slogan/intro share one text-align
     *    center context and the slogan can sit tight beneath the title. */
    .hero-title,
    .hero-slogan,
    .hero-intro {
        transform: translateX(-50%);
        width: 88cqw;
        text-align: center;
    }

    .hero-title {
        font-size: clamp(1.6rem, 8cqw, 2.3rem);
    }
    .hero-slogan {   /* tight gap directly under the title */
        font-size: clamp(0.8rem, 3.6cqw, 1rem);
    }
    .hero-intro {;  /* separated a bit further, own paragraph */
        font-size: clamp(0.95rem, 4.5cqw, 1.4rem);
    }

    .hero-moon-container {
        width: 22%;
        bottom: 80%;
        left: 55%;
    }
    .hero-cloud {
        width: 75%;
        bottom: 60%;
        left: 12%;
    }

    .hero-description {
        font-size: clamp(9px, 2.5cqw, 12px);
        bottom: 3%;
        right: 4%;
    }
}


/* Header, nav, footer, language switcher */
html.signage-mode #et-info,
html.signage-mode .et_pb_menu,
html.signage-mode #main-header,
html.signage-mode .et-l--header,
html.signage-mode #et-secondary-nav,
html.signage-mode .wpml-ls,
html.signage-mode .et-social-icons,
html.signage-mode footer,
html.signage-mode #main-footer,
html.signage-mode .et-l--footer {
    display: none !important;
}

/* Kill Divi's own top offset for a fixed header */
html.signage-mode #main-content,
html.signage-mode #page-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
    /* The hard safety net every signage page needs: this TV can't
     * scroll, so nothing should ever be able to render past its edge.
     * html.signage-mode already sets overflow:hidden, but that alone
     * does nothing on an element whose height is auto — the box just
     * grows to fit whatever content it holds, same as any normal page.
     * Pinning the actual root content wrapper to the viewport height
     * is what makes overflow:hidden below actually clip anything. */
    height: 100vh !important;
    overflow: hidden !important;
}

/* Hide every top-level content block except the one containing the hero —
 * homepage only. Den/Play/Pillars each define their own signage-specific
 * rules below, scoped to their own module root, rather than this blanket
 * "only the hero survives" rule — that rule is specific to how the
 * homepage's hero is built (a single full-bleed block sitting among other
 * Divi sections) and would otherwise hide every other page's content
 * entirely, since none of them have a .hero-stage. */
html.signage-mode body.home #main-content > *:not(:has(.hero-stage)) {
    display: none !important;
}

/* Signage mode is never rendered on anything but one known, fixed-size
 * screen (a 55" 4K TV at an expo stand) — there's no smaller viewport to
 * keep the normal 1080px content column safe for, so every page is free
 * to use the full width of the screen rather than Divi's usual
 * container/row/column constraints. This replaces what used to be a
 * hero-only full-bleed rule (:has(.hero-stage)) with a general one that
 * covers Den/Play/Pillars too — each of those modules still applies its
 * own internal padding (see their own signage CSS) for breathing room
 * from the screen edges; this rule only removes Divi's own wrapper
 * constraints around them.
 *
 * The targeted rules below (.container, .et_pb_row, etc.) cover every
 * wrapper class Divi is known to use for the 1080px content column, but
 * Divi 5's builder can add its own numbered per-instance wrapper classes
 * (.et_pb_row_0, .et_pb_section_0, and similar) that aren't predictable
 * ahead of time. The final catch-all rule below — every descendant of
 * #main-content loses its max-width — exists specifically to close that
 * gap: it can't widen anything past what its own width already allows,
 * so it's safe alongside the targeted width:100% rules rather than a
 * replacement for them.
 *
 * #page-container gets its own explicit override below because of
 * Divi's "Boxed Layout" theme setting (visible as .et_boxed_layout on
 * <body>) — that setting's own CSS caps #page-container itself, the
 * outermost wrapper sitting above #main-content, at width:90%/
 * max-width:1200px. Without this, none of the rules widening things
 * INSIDE #page-container had any visible effect: 100% of a 1200px-wide
 * parent is still 1200px. This was the actual reason earlier passes at
 * this fix looked like they'd done nothing. */
html.signage-mode #page-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
html.signage-mode .container,
html.signage-mode .et_pb_row:not([class*=et_flex_column]) {
    width: 100% !important;
    max-width: none !important;
}
html.signage-mode .et_pb_section,
html.signage-mode .et_pb_row,
html.signage-mode .et_pb_column,
html.signage-mode .et_pb_code {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
}
html.signage-mode #main-content,
html.signage-mode #main-content * {
    max-width: none !important;
}

/* Make sure the hero itself is the only visible full-bleed layer */
html.signage-mode .hero-stage {
    width: 100vw !important;
    height: 100vh !important;
}

html.signage-mode {
    margin: 0 !important;
    overflow: hidden !important;
}


/* WCAG 2.2.2 (Pause, Stop, Hide) — auto-starting animations that run
 * longer than 5 seconds need a way to stop. Rather than hunting down
 * every individual transition/animation declaration across every module
 * (hero aurora glow, card hover lifts, etc.), this is the standard,
 * comprehensive approach: for anyone with the OS-level "reduce motion"
 * preference set, collapse every animation/transition sitewide to
 * near-zero duration and a single iteration. A looping animation like
 * .hero-aurora's then plays through once almost instantly and holds its
 * end state, rather than looping indefinitely. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Fixes the header vanishing sitewide — something (Divi's own sticky-
 * header script, most likely) was setting an inline
 * transform: translateY(-111px) directly on #top-header and
 * #main-header, shifting both entirely off-screen above the viewport.
 * An inline style beats a normal CSS rule in specificity regardless of
 * how specific the selector is, so !important is required here to
 * actually override it — a plain rule without !important would lose to
 * the inline style and have no effect. */
#top-header,
#main-header {
    transform: unset !important;
}