/*
 Theme Name:   Astra Child - Unlock Paradise
 Template:     astra
 Description:  Child theme for Unlock Paradise
 Version:      1.0.0
*/

/* ------------------------------------------------------------
 * Site-wide theme tokens + base overrides
 * ------------------------------------------------------------ */
:root {
    --up-teal: #7BC4A8;
    --up-dark-slate: #4A6670;
    --up-sage: #6B7F73;
    --up-sand: #F0CFA0;
    --up-terracotta: #CC9966;
    --up-dark-forest: #2C3E3E;
    /* VIP accent — bright amber gold. Reuse for ALL VIP-related UI. */
    --upd-vip-gold: #d4a344;
    --upd-vip-gold-dark: #b8862f; /* hover/active shade */
}

body {
    background-color: var(--up-dark-forest);
    color: #E8E8E8;
}

/* VIP "Members only" banner — replaces a VIP-locked place name on feed cards
 * and the single-place gate. Reuses the --upd-vip-gold token. */
.upd-vip-banner {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #e6bb5c, var(--upd-vip-gold));
    color: #3a2a06;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 3px rgba(0, 0, 0, .18);
}
.upd-vip-banner svg { width: 15px; height: 15px; flex: 0 0 auto; }
.upd-vip-banner--lg { font-size: 15px; padding: 9px 16px; border-radius: 10px; }
.upd-vip-banner--lg svg { width: 19px; height: 19px; }

a {
    color: var(--up-teal);
}

a:hover {
    color: var(--up-terracotta);
}

h1, h2, h3, h4, h5, h6 {
    color: #FFFFFF;
}

.ast-container {
    background-color: transparent;
}

/* ------------------------------------------------------------
 * Header / logo
 * (migrated from wp_add_inline_style calls in functions.php —
 *  these are global and belong in the enqueued stylesheet)
 * ------------------------------------------------------------ */

/* Nav fix (#6): recolor the mobile menu toggle from the clashing brand
 * accent (#ffbc47) to the navy theme tone; keep the icon light for contrast. */
.menu-toggle.main-header-menu-toggle.ast-mobile-menu-trigger-fill {
    background-color: #11202a;
}
.ast-mobile-menu-trigger-fill .ast-mobile-svg,
.ast-mobile-menu-trigger-fill svg {
    color: #f5f7fa;
    /* Astra sets the icon fill via its own rule; only `fill` needs to win. */
    fill: #f5f7fa !important;
}

/* Brand logo is a solid-black PNG. The above-header row that carries the logo
 * has a dark background on every page (transparent over the dark hero map on the
 * home page, solid #11202a on inner pages), so invert it to white for contrast.
 * Astra's "different transparent logo" is Pro-only (unavailable here), so we recolor
 * the single logo with a CSS filter instead. (No !important needed — these
 * selectors already out-specify Astra's #ast-img-color-filter rule.) */
.ast-theme-transparent-header .custom-logo {
    filter: brightness(0) invert(1);
}
.ast-above-header .custom-logo {
    filter: brightness(0) invert(1);
}

/* ------------------------------------------------------------
 * Homepage hero (Elementor container fe47c56)
 * ------------------------------------------------------------ */
/* Hero now leads the page: drop the container top margin entirely so the
 * full-bleed photo hero sits flush at the top, under the transparent header.
 * (Previously this carried a 120/60/24px margin to offset the old text hero.) */
.elementor-element-fe47c56 {
    /* Elementor writes --margin-top as an inline element style, so only
     * !important on the var wins; the literal margin/gap props below follow it. */
    --margin-top: 0px !important;
    --margin-block-start: 0px;
    margin-top: 0px;
    /* kill the 40px flex row-gap so the hero photo flows straight into the
     * full-bleed map (and the map into the featured strip) with no dark band. */
    gap: 0;
    row-gap: 0;
}

/* ------------------------------------------------------------
 * Mobile off-canvas drawer (Reddit-style right slide-in)
 * ------------------------------------------------------------ */
/* Smoother slide easing than Astra's default quick ease-in.
 * Reduced-motion users get an instant snap. */
#ast-mobile-popup .ast-mobile-popup-inner {
    transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1), opacity .3s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    #ast-mobile-popup .ast-mobile-popup-inner {
        transition: none;
    }
}

/* ------------------------------------------------------------
 * Mapbox: hide the "use two fingers" cooperative-gestures hint overlay.
 * The behavior (one-finger scroll / two-finger pan) still works; the
 * on-screen hint felt awkward.
 * ------------------------------------------------------------ */
.mapboxgl-touch-pan-blocker,
.mapboxgl-scroll-zoom-blocker {
    /* Mapbox sets display:flex inline on these overlays; !important to hide. */
    display: none !important;
}

/* ------------------------------------------------------------
 * Header bar — single horizontal row (desktop ≥ 922px)
 * Astra renders two stacked bands (above-header = logo+title,
 * primary-header = nav). Flatten #ast-desktop-header into ONE flex
 * bar: branding band = left zone, nav band = right zone.
 * "Acquire Paradise" button styling handled in a later rule.
 * ------------------------------------------------------------ */
@media (min-width: 922px) {
    #ast-desktop-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 24px;
        min-height: 64px;
        padding: 6px 32px;
    }
    /* left zone: branding band, sized to content */
    #ast-desktop-header > .ast-above-header-wrap {
        flex: 0 0 auto;
        width: auto;
        border: 0;
    }
    /* right zone: nav band, fills the rest and right-aligns its content */
    #ast-desktop-header > .ast-main-header-wrap {
        flex: 1 1 auto;
        width: auto;
    }
    /* strip the inner bands' own padding/min-height/background/borders so they
       don't add vertical bulk or a competing background */
    #ast-desktop-header .site-above-header-bar,
    #ast-desktop-header .site-above-header-wrap,
    #ast-desktop-header .ast-primary-header-bar,
    #ast-desktop-header .site-primary-header-wrap {
        padding: 0;
        min-height: 0;
        background: transparent;
        /* Astra paints a bottom border on .ast-primary-header-bar; only this
         * border reset needs !important — the rest win on specificity. */
        border: 0 !important;
    }
    /* the inner grid rows: kill the centered-stack layout */
    #ast-desktop-header .ast-above-header-wrap .ast-builder-grid-row {
        display: block;
        padding: 0;
        min-height: 0;
    }
    #ast-desktop-header .ast-main-header-wrap .ast-builder-grid-row {
        display: flex;
        justify-content: flex-end;
        padding: 0;
        min-height: 0;
    }
    /* Astra wraps the nav in a single full-width "center" section that
       centers its content — which left the menu floating mid-bar with a
       gap on both sides instead of hugging the right. Right-align the
       center section's content so the nav sits flush against the bar's
       right padding. */
    #ast-desktop-header .ast-main-header-wrap .ast-grid-section-center {
        justify-content: flex-end;
    }
    /* branding inline: logo + wordmark */
    .site-branding.ast-site-identity {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        margin: 0;
        text-align: left;
    }
    .site-branding .custom-logo {
        width: 40px;
        height: auto;
        max-width: 40px;
    }
    .ast-site-title-wrap { margin: 0; padding: 0; }
    .ast-site-title-wrap .site-title {
        font-size: 18px;
        font-weight: 500;
        line-height: 1;
        margin: 0;
        white-space: nowrap;
    }
    .ast-site-title-wrap .site-title a { color: #FFFFFF; }
    /* collapse Astra's tall menu line-height/min-height so the nav band
       matches the ~64px bar height instead of forcing 96px */
    #ast-desktop-header .ast-main-header-bar-alignment,
    #ast-desktop-header .main-header-bar-navigation,
    #ast-desktop-header #primary-site-navigation-desktop,
    #ast-desktop-header .main-navigation,
    #ast-desktop-header #ast-hf-menu-1,
    #ast-desktop-header #ast-hf-menu-1 > .menu-item {
        height: auto;
        min-height: 0;
        line-height: normal;
    }
    #ast-desktop-header #ast-hf-menu-1 {
        align-items: center;
    }
    /* inline menu spacing */
    #ast-hf-menu-1 > .menu-item > .menu-link {
        /* Astra sets nav-link padding via a higher-specificity generated rule. */
        padding: 8px 14px !important;
        line-height: 1.2;
        height: auto;
        min-height: 0;
    }
}

/* ------------------------------------------------------------
 * Header bar — desktop nav link legibility + CTA menu item
 * (≥ 922px). Menu links were near-black (#11202a) on the dark bar
 * on inner pages; force a light color with a teal hover. Then turn
 * the .upd-cta item (the logged-out "Sign in" link) into a teal button.
 * Prefixed with #ast-desktop-header to beat Astra's generated
 * per-element color selector.
 * ------------------------------------------------------------ */
@media (min-width: 922px) {
    /* legible nav links on the dark bar (all pages) */
    #ast-desktop-header #ast-hf-menu-1 > .menu-item > .menu-link {
        /* beats Astra's generated per-link color rule */
        color: #E8E8E8 !important;
    }
    #ast-desktop-header #ast-hf-menu-1 > .menu-item > .menu-link:hover,
    #ast-desktop-header #ast-hf-menu-1 > .menu-item.current-menu-item > .menu-link {
        color: var(--up-teal) !important;
    }
    /* .upd-cta menu item as a teal CTA button */
    #ast-desktop-header #ast-hf-menu-1 > li.upd-cta > .menu-link {
        background: var(--up-teal);
        /* color + padding beat Astra's generated per-link rules */
        color: #16242c !important;
        font-weight: 600;
        border-radius: 6px;
        padding: 8px 18px !important;
        transition: background .15s ease;
    }
    #ast-desktop-header #ast-hf-menu-1 > li.upd-cta > .menu-link:hover {
        background: var(--up-sand) !important;
        color: #16242c !important;
    }
}

/* ------------------------------------------------------------
 * Header bar — sticky + scroll behavior (desktop ≥ 922px)
 * Pin the bar to the very top (removes the big empty band above
 * the home overlay header). Home: transparent over hero, turns
 * solid once scrolled (class .upd-scrolled toggled by JS). Inner
 * pages: solid from the top.
 * ------------------------------------------------------------ */
@media (min-width: 922px) {
    #ast-desktop-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 99;
        transition: background-color .25s ease, box-shadow .25s ease;
    }
    /* inner pages: solid from the top */
    body:not(.ast-theme-transparent-header) #ast-desktop-header {
        background-color: #11202a;
    }
    /* home (transparent header): clear over hero, solid once scrolled */
    body.ast-theme-transparent-header #ast-desktop-header {
        background-color: transparent;
    }
    body.ast-theme-transparent-header.upd-scrolled #ast-desktop-header {
        background-color: #11202a;
        box-shadow: 0 2px 12px rgba(0,0,0,.35);
    }
    /* the bar is now fixed/overlay; push page content down so the first
       content isn't hidden behind it. Offset applied on the shared #page
       wrapper (see the template-agnostic block below) so every template
       — including single-place — is pushed uniformly. */
}

/* ------------------------------------------------------------
 * Header bar — mobile (≤ 921px): logo + "Unlock Paradise" wordmark
 * left, hamburger right. Sticky like desktop; home transparent over
 * hero → solid on scroll (shares the body.upd-scrolled class). The
 * off-canvas drawer is unchanged.
 * ------------------------------------------------------------ */
@media (max-width: 921px) {
    #ast-mobile-header {
        position: fixed;
        top: 0; left: 0; right: 0;
        width: 100%;
        z-index: 99;
        transition: background-color .25s ease, box-shadow .25s ease;
    }
    body:not(.ast-theme-transparent-header) #ast-mobile-header {
        background-color: #11202a;
    }
    body.ast-theme-transparent-header #ast-mobile-header {
        background-color: transparent;
    }
    body.ast-theme-transparent-header.upd-scrolled #ast-mobile-header {
        background-color: #11202a;
        box-shadow: 0 2px 12px rgba(0,0,0,.35);
    }
    /* one tidy row: branding left, hamburger right */
    #ast-mobile-header .ast-builder-grid-row-has-sides {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 56px;
        padding: 6px 16px;
    }
    #ast-mobile-header .site-header-primary-section-left {
        display: flex;
        align-items: center;
        gap: 8px;
        position: static;  /* undo the old absolute-centering hack */
    }
    #ast-mobile-header .site-branding {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
    }
    #ast-mobile-header .custom-logo {
        width: 30px;
        max-width: 30px;
        height: auto;
    }
    #ast-mobile-header .site-title {
        font-size: 16px;
        font-weight: 500;
        line-height: 1;
        margin: 0;
        white-space: nowrap;
    }
    #ast-mobile-header .site-title a { color: #FFFFFF; }
    #ast-mobile-header .site-header-primary-section-right {
        position: static;
        margin: 0;
    }
    /* The mobile bar is always dark (transparent-over-hero on home,
     * solid #11202a on inner pages). On inner pages Astra applies its
     * SVG color filter (url("#ast-img-color-filter")) to the logo, which
     * renders it dark/green and nearly invisible. Force the white-invert
     * on EVERY page so the mobile logo stays white, matching home. */
    #ast-mobile-header .custom-logo {
        filter: brightness(0) invert(1);
    }
    /* keep the wordmark visibly white on inner mobile too */
    #ast-mobile-header .site-title,
    #ast-mobile-header .site-title a {
        color: #FFFFFF;
        display: inline-block;
        visibility: visible;
    }
    /* ROOT CAUSE: on inner pages Astra paints the mobile primary-header-bar
     * solid WHITE, so the white logo + white wordmark become invisible
     * (white-on-white). The #ast-mobile-header wrapper is already dark
     * (#11202a), so make this inner bar transparent to let it show through. */
    #ast-mobile-header .ast-primary-header-bar,
    #ast-mobile-header .main-header-bar {
        background: transparent;
        background-color: transparent;
    }
}

/* ------------------------------------------------------------
 * Fixed-header content offset — TEMPLATE-AGNOSTIC (inner pages only)
 * The header (#masthead) is position:fixed and a child of #page, so it's
 * out of flow. Adding padding-top to the shared #page wrapper pushes ALL
 * in-flow content down by the header height on EVERY template (pages,
 * single posts, and the single-place template alike) while the fixed
 * header stays pinned to the top. Home keeps NO offset (its body has
 * .ast-theme-transparent-header and the hero intentionally sits under the
 * transparent bar). Heights match the rendered bars: ~64px desktop,
 * ~86px mobile (90px for safe clearance of the eyebrow + H1).
 * Replaces the older #content/.site-content offsets, which under-shot the
 * 86px mobile bar (only 56px) and hid the single-place eyebrow.
 * ------------------------------------------------------------ */
@media (min-width: 922px) {
    body:not(.ast-theme-transparent-header) #page {
        padding-top: 64px;
    }
}
@media (max-width: 921px) {
    body:not(.ast-theme-transparent-header) #page {
        padding-top: 90px;
    }
}
/* Home (transparent header): neutralize Astra's fixed-header body offset
 * (~100px) so the full-bleed photo hero sits flush at the very top, with the
 * transparent header floating over the sky. The hero supplies its own height. */
body.ast-theme-transparent-header {
    padding-top: 0;
}
/* Home only: hide the header branding entirely — both the "Unlock Paradise"
 * wordmark AND the logo icon. The hero now carries the logo + title, so the
 * home header is just the nav. Inner pages keep the logo + wordmark. */
body.home .ast-site-title-wrap,
body.home .custom-logo-link,
body.home .custom-logo {
    display: none;
}