/* ==========================================================================
   WW Business Priority — Woodland Playscape Stylesheet
   Loaded only on pages where ww_bp_is_woodland_page() returns true.
   Requires body class: .ww-woodland
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Woodland Custom Properties
   -------------------------------------------------------------------------- */
.ww-woodland {
    --wl-sky-top: #87CEEB;
    --wl-sky-mid: #a8d8ea;
    --wl-sky-warm: #c4e4f0;
    --wl-meadow: #a8c97a;
    --wl-leaf-green: #4a7c3f;
    --wl-leaf-light: #6db356;
    --wl-leaf-spring: #8dc63f;
    --wl-forest-deep: #1a2e1a;
    --wl-forest-mid: #2d4a2d;
    --wl-bark-brown: #5a3e2b;
    --wl-firefly: #f0e68c;
    --wl-stomp-orange: #f58220;
    --wl-footer-green: #2d5a22;
    --wl-mushroom-red: #c84040;
    --wl-flower-pink: #e8a0bf;
    --wl-flower-purple: #9b7ec8;

    /* Override theme font vars for woodland pages */
    --ww-font-menu: 'Fredoka', 'Optima', 'Segoe UI', sans-serif;
    --ww-font-subheading: 'Quicksand', 'Roboto Condensed', Arial, sans-serif;
    --ww-font-body: 'Quicksand', 'Roboto', Arial, sans-serif;

    /* Override footer to woodland green */
    --ww-footer-bg: var(--wl-footer-green);
}

/* --------------------------------------------------------------------------
   2. Sky Background (only when sky and hills enabled)
   -------------------------------------------------------------------------- */
.ww-has-sky {
    background: linear-gradient(180deg,
        var(--wl-sky-top)  0%,
        var(--wl-sky-mid)  25%,
        var(--wl-sky-warm) 50%,
        var(--wl-sky-mid)  75%,
        var(--wl-sky-top)  100%
    );
    background-attachment: fixed;
}

/* --------------------------------------------------------------------------
   3. Ambient Clouds (fixed behind everything)
   -------------------------------------------------------------------------- */
.ww-sky-clouds {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.ww-cloud {
    position: absolute;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    filter: blur(12px);
}

.ww-cloud--1 { width: 280px; height: 70px; top: 8%;  left: 5%;  animation: wwCloudDrift 40s ease-in-out infinite; }
.ww-cloud--2 { width: 200px; height: 55px; top: 18%; left: 55%; animation: wwCloudDrift 32s ease-in-out infinite reverse; }
.ww-cloud--3 { width: 340px; height: 85px; top: 4%;  left: 30%; animation: wwCloudDrift 50s ease-in-out infinite; opacity: 0.4; }
.ww-cloud--4 { width: 160px; height: 45px; top: 25%; left: 75%; animation: wwCloudDrift 28s ease-in-out infinite; opacity: 0.35; }
.ww-cloud--5 { width: 220px; height: 60px; top: 12%; left: -5%; animation: wwCloudDrift 36s ease-in-out infinite reverse; opacity: 0.45; }

@keyframes wwCloudDrift {
    0%   { transform: translateX(-60px); }
    50%  { transform: translateX(60px); }
    100% { transform: translateX(-60px); }
}

/* --------------------------------------------------------------------------
   4. Viewport Entrance Section
   -------------------------------------------------------------------------- */
.ww-arch-section {
    position: relative;
    height: 125vh; /* 25vh of scroll — text fades in, then unsticks immediately */
    z-index: 2;
    margin-top: -10px; /* tuck tree tops slightly under the header */
}

.ww-arch-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* When WP admin bar is present, offset the sticky top */
.admin-bar .ww-arch-sticky {
    top: 32px;
    height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
    .admin-bar .ww-arch-sticky {
        top: 46px;
        height: calc(100vh - 46px);
    }
}

/* SVG container */
.ww-arch-svg-container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
}

.ww-arch-svg-container svg {
    width: 100%;
    height: 100%;
    transform-origin: center 60%;
    will-change: transform;
}

/* Portal content overlay — starts small and faded, JS zooms in */
.ww-arch-portal-content {
    position: absolute;
    z-index: 20;
    text-align: center;
    pointer-events: none;
    will-change: opacity, transform;
    max-width: 800px;
    width: 90%;
    padding: 0 20px;
    opacity: 0.3;
    transform: scale(0.6);
}

/* WP Bakery hero row once moved into the portal */
.ww-arch-portal-content .ww-viewport-hero {
    pointer-events: auto;
}

/* Hide fallback when WPB hero is present */
.ww-arch-portal-content .ww-viewport-hero ~ .ww-viewport-hero-fallback {
    display: none;
}

.ww-arch-portal-content h2 {
    font-family: var(--ww-font-menu);
    font-size: clamp(1.5rem, 4vw, 2.8rem);
    color: var(--wl-forest-deep);
    text-shadow: 0 2px 15px rgba(255,255,255,0.6);
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

.ww-arch-portal-content p {
    font-size: clamp(0.85rem, 1.8vw, 1.1rem);
    color: var(--wl-forest-mid);
    margin-top: 0.5rem;
    text-shadow: 0 1px 8px rgba(255,255,255,0.4);
    font-weight: 500;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   5. Fireflies & Falling Leaves
   -------------------------------------------------------------------------- */
.ww-firefly {
    position: absolute;
    width: 6px; height: 6px;
    background: var(--wl-firefly);
    border-radius: 50%;
    box-shadow: 0 0 12px 4px rgba(240,230,140,0.6);
    opacity: 0;
    z-index: 15;
    pointer-events: none;
}

.ww-firefly--1 { top: 30%; left: 20%; animation: wwFireflyFloat 6s 0.0s ease-in-out infinite; }
.ww-firefly--2 { top: 50%; left: 75%; animation: wwFireflyFloat 8s 1.0s ease-in-out infinite; }
.ww-firefly--3 { top: 65%; left: 30%; animation: wwFireflyFloat 7s 2.0s ease-in-out infinite; }
.ww-firefly--4 { top: 40%; left: 60%; animation: wwFireflyFloat 9s 0.5s ease-in-out infinite; }
.ww-firefly--5 { top: 55%; left: 45%; animation: wwFireflyFloat 5s 3.0s ease-in-out infinite; }

@keyframes wwFireflyFloat {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    20%      { opacity: 0.8; }
    50%      { opacity: 0.3; transform: translate(20px, -15px); }
    80%      { opacity: 0.7; transform: translate(-10px, -25px); }
}

.ww-falling-leaf {
    position: absolute;
    z-index: 16;
    pointer-events: none;
    opacity: 0;
}

.ww-falling-leaf--1 { top: -5%; left: 15%; animation: wwLeafDrift 10s 0s linear infinite; }
.ww-falling-leaf--2 { top: -5%; left: 45%; animation: wwLeafDrift 12s 2s linear infinite; }
.ww-falling-leaf--3 { top: -5%; left: 70%; animation: wwLeafDrift  9s 4s linear infinite; }

@keyframes wwLeafDrift {
    0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    10%  { opacity: 0.6; }
    90%  { opacity: 0.4; }
    100% { opacity: 0; transform: translate(-60px, 110vh) rotate(360deg); }
}

/* --------------------------------------------------------------------------
   6. Content Area Override (transparent when sky is active)
   -------------------------------------------------------------------------- */
.ww-has-sky .ww-content-area {
    background-color: transparent;
    box-shadow: none;
    position: relative;
    z-index: 3;
}

.ww-has-sky .ww-content-area--has-bp-bar {
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   7. Woodland Content Cards (WP Bakery rows use .ww-woodland-card)
   --------------------------------------------------------------------------
   Usage in WP Bakery:
   Add CSS class "ww-woodland-card" to any vc_row's "Extra class name" field.
   -------------------------------------------------------------------------- */
.ww-woodland .ww-woodland-card {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px 50px;
    margin-bottom: 40px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 1px 4px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

/* Reset the column-inner inside a card — no double glass */
.ww-woodland .ww-woodland-card > .vc_column_container > .vc_column-inner {
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
    border: none;
}

/* Inner rows inside a card — let WPB handle spacing */

.ww-woodland .ww-woodland-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.1),
        0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Ensure WPB full-width rows with card class stay within container */
.ww-woodland .ww-woodland-card.vc_row[data-vc-full-width] {
    border-radius: 20px;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: var(--ww-content-max-width);
}

/* Card typography */
.ww-woodland .ww-woodland-card h2 {
    color: var(--wl-forest-deep);
}

.ww-woodland .ww-woodland-card h3 {
    color: var(--wl-leaf-green);
}

/* --------------------------------------------------------------------------
   8. Woodland Buttons (WP Bakery vc_btn3 overrides)
   --------------------------------------------------------------------------
   In WP Bakery:
   - Use "Custom" color and add class "ww-btn-woodland-orange" or
     "ww-btn-woodland-green" to the Extra Class Name field.
   - Or use the "Flat" style with "Primary" color — the overrides below
     will apply the woodland palette.
   -------------------------------------------------------------------------- */
.ww-woodland .ww-btn-woodland-orange,
.ww-woodland .ww-btn-woodland-orange.vc_btn3 {
    background-color: var(--wl-stomp-orange) !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 14px 36px !important;
    font-family: var(--ww-font-menu) !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    box-shadow: 0 4px 20px rgba(245,130,32,0.35);
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.2s;
    border: none !important;
    display: inline-block;
    white-space: nowrap;
    text-decoration: none;
    margin: 6px;
}

.ww-woodland .ww-btn-woodland-orange:hover {
    background-color: #e06f10 !important;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 30px rgba(245,130,32,0.45);
}

.ww-woodland .ww-btn-woodland-green,
.ww-woodland .ww-btn-woodland-green.vc_btn3 {
    background-color: var(--wl-leaf-green) !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 14px 36px !important;
    font-family: var(--ww-font-menu) !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    box-shadow: 0 4px 20px rgba(109,179,86,0.35);
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.2s;
    border: none !important;
    display: inline-block;
    white-space: nowrap;
    text-decoration: none;
    margin: 6px;
}

.ww-woodland .ww-btn-woodland-green:hover {
    background-color: var(--wl-leaf-spring) !important;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 30px rgba(109,179,86,0.45);
}

/* Also remap the standard WPB button colors for woodland pages */
.ww-woodland .vc_btn3-color-primary {
    background-color: var(--wl-stomp-orange) !important;
    border-radius: 50px !important;
}

.ww-woodland .vc_btn3-color-primary:hover {
    background-color: #e06f10 !important;
}

.ww-woodland .vc_btn3-color-success {
    background-color: var(--wl-leaf-green) !important;
    border-radius: 50px !important;
}

.ww-woodland .vc_btn3-color-success:hover {
    background-color: var(--wl-leaf-spring) !important;
}

/* --------------------------------------------------------------------------
   9. Activity Grid (WP Bakery inner columns with .ww-woodland-activity)
   --------------------------------------------------------------------------
   Usage: Apply "ww-woodland-activity" class to vc_column_inner elements
   inside a nested (inner) row within a ww-woodland-card row.
   -------------------------------------------------------------------------- */
.ww-woodland .ww-woodland-activity {
    background: transparent !important;
    border: none;
    padding: 0;
}

/* Visual styling lives on the column-inner — gap comes from the outer column padding */
.ww-woodland .ww-woodland-activity > .vc_column-inner {
    background: rgba(255,255,255,0.7) !important;
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    border: 1px solid rgba(109,179,86,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Spacing between activity tiles — padding-based so WPB grid stays intact */
.ww-woodland .vc_inner .ww-woodland-activity.wpb_column {
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-bottom: 16px;
}

.ww-woodland .ww-woodland-activity:hover > .vc_column-inner {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(74,124,63,0.15);
}

/* --------------------------------------------------------------------------
   10. Pre-Footer Hero Section
   -------------------------------------------------------------------------- */
.ww-woodland-pre-footer {
    position: relative;
    z-index: 3;
    padding: 80px 0 0;
    text-align: center;
    overflow: hidden;
}

.ww-woodland-pre-footer .ww-container {
    position: relative;
    z-index: 2;
    padding-bottom: 120px;
}

.ww-woodland-pre-footer h2 {
    font-family: var(--ww-font-menu);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--wl-forest-deep);
    text-shadow: 0 2px 10px rgba(255,255,255,0.4);
    margin-bottom: 0.75rem;
}

.ww-woodland-pre-footer p {
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    color: var(--wl-forest-mid);
    max-width: 550px;
    margin: 0 auto 2rem;
    line-height: 1.6;
    text-shadow: 0 1px 6px rgba(255,255,255,0.3);
}

/* --------------------------------------------------------------------------
   11. Hills Transition (above footer)
   -------------------------------------------------------------------------- */
.ww-woodland-hills {
    position: relative;
    z-index: 3;
    margin-top: -80px;
    pointer-events: none;
}

.ww-woodland-hills svg {
    display: block;
    width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   12. Footer Overrides for Woodland
   -------------------------------------------------------------------------- */
.ww-has-sky .ww-site-footer {
    position: relative;
    z-index: 3;
    margin-top: -2px; /* seal gap with hills SVG */
}

.ww-woodland .ww-footer-widgets .widget-title {
    color: var(--wl-leaf-spring);
}

/* Footer fireflies */
.ww-woodland .ww-footer-firefly {
    position: absolute;
    width: 4px; height: 4px;
    background: var(--wl-firefly);
    border-radius: 50%;
    box-shadow: 0 0 8px 3px rgba(240,230,140,0.4);
    pointer-events: none;
}

.ww-footer-firefly--1 { top: 15%; left: 10%; animation: wwFireflyFloat 8s 0s ease-in-out infinite; }
.ww-footer-firefly--2 { top: 30%; left: 85%; animation: wwFireflyFloat 6s 2s ease-in-out infinite; }
.ww-footer-firefly--3 { top: 50%; left: 50%; animation: wwFireflyFloat 10s 1s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   13. Responsive Adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .ww-woodland .ww-woodland-card {
        padding: 30px 28px;
    }
}

@media (max-width: 600px) {
    .ww-woodland .ww-woodland-card {
        padding: 24px 20px;
        border-radius: 14px;
    }

    .ww-woodland .ww-woodland-activity {
        margin-bottom: 16px;
    }

    .ww-woodland-pre-footer .ww-container {
        padding-bottom: 80px;
    }
}

/* --------------------------------------------------------------------------
   14. Activity Left-Align Option (Customizer toggle)
   --------------------------------------------------------------------------
   When enabled via Customizer → Page Background → "Left-align Woodland
   Activity content", body gets .ww-activity-left and all activity tiles
   align content to the left instead of centered.
   -------------------------------------------------------------------------- */
.ww-activity-left .ww-woodland-activity > .vc_column-inner {
    text-align: left;
}

.ww-activity-left .ww-woodland-activity > .vc_column-inner .wpb_text_column,
.ww-activity-left .ww-woodland-activity > .vc_column-inner .wpb_wrapper {
    text-align: left;
}

/* --------------------------------------------------------------------------
   15. Gravity Forms — Woodland Button Match
   --------------------------------------------------------------------------
   On woodland pages, Gravity Forms submit buttons inherit the woodland
   CTA style (stomp orange palette).
   -------------------------------------------------------------------------- */
.ww-woodland .gform_wrapper .gform_footer input[type="submit"],
.ww-woodland .gform_wrapper .gform_footer button,
.ww-woodland .gform_wrapper .gform_page_footer input[type="submit"],
.ww-woodland .gform_wrapper .gform_page_footer button {
    background-color: var(--wl-stomp-orange) !important;
    color: #ffffff !important;
    font-family: var(--ww-font-menu) !important;
    box-shadow: 0 4px 20px rgba(245, 130, 32, 0.35);
}

.ww-woodland .gform_wrapper .gform_footer input[type="submit"]:hover,
.ww-woodland .gform_wrapper .gform_footer button:hover,
.ww-woodland .gform_wrapper .gform_page_footer input[type="submit"]:hover,
.ww-woodland .gform_wrapper .gform_page_footer button:hover {
    background-color: #e06f10 !important;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 30px rgba(245, 130, 32, 0.45);
}

/* ==========================================================================
   Non-Stomp&Play sites — hide playful decorations when woodland fonts off
   Applied via body class .ww-woodland-clean (added by enqueue.php)
   ========================================================================== */
.ww-woodland-clean .ww-falling-leaves,
.ww-woodland-clean .ww-firefly,
.ww-woodland-clean .ww-footer-firefly {
    display: none !important;
}