/* ============================================================
   FRONT PAGE – BitsyBows Theme
   Purpose: Front-page-specific layout, images, decorations,
   hero section, intro content, feature blocks
============================================================ */

/* Ensure header stays transparent on home */
.home .site-header,
.home .header-inner {
    background: transparent !important;
}

/* --- Hero Illustration Section --- */
.home-hero {
    width: 100%;
    text-align: center;
    padding: 40px 0 20px;
}

.home-hero img.hero-image {
    width: 100%;
    max-width: 1800px;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* --- Welcome Intro Text --- */
.home-welcome {
    max-width: 800px;
    margin: 30px auto;
    padding: 0 20px;
    text-align: center;
    font-size: 1.2rem;
}

.home-welcome p:last-child {
    margin-bottom: 0;
}

/* --- Feature Panels / Sections --- */
.home-panels {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 40px 0;
}

.home-panel {
    text-align: center;
    padding: 20px;
}

.home-panel h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.home-panel p {
    font-size: 1rem;
    margin: 0 auto;
    max-width: 600px;
}

/* --- Decorative Horizontal Divider (optional) --- */
.home-divider {
    width: 60%;
    max-width: 500px;
    margin: 20px auto;
    opacity: 0.6;
}

.home-divider img {
    width: 100%;
    height: auto;
}

/* --- Responsive Layout --- */
@media (min-width: 800px) {
    .home-panels {
        flex-direction: row;
        justify-content: center;
        gap: 60px;
    }
    .home-panel {
        width: 33%;
    }
}

/* --- Optional content blocks (images, full-width banners) --- */
.home-banner {
    width: 100%;
    margin: 40px 0;
}

.home-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Call-to-action (if used) --- */
.home-cta {
    margin: 50px auto;
    text-align: center;
}

.home-cta a {
    display: inline-block;
    padding: 12px 26px;
    border: 1px solid #5d7030;
    border-radius: 5px;
    font-size: 1.1rem;
    transition: opacity 0.3s;
}

.home-cta a:hover {
    opacity: 0.7;
}

/* ---------- Forest Background Layer ---------- */
#forest-bg-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* allows clicking through */
    z-index: -2;
}

.forest-static-svg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    opacity: 0.87;
    z-index: -2;
    pointer-events: none;
}

.forest-bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}