/* Section vertical rhythm + optional decorative doodle accents (no viewport height lock) */

.app-shell > .app-section:not(.hero-section) {
    position: relative;
    box-sizing: border-box;
    padding-top: clamp(1.5rem, 3.5vw, 2.5rem);
    padding-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}

.app-shell > .app-section[hidden] {
    display: none !important;
}

/* Slightly tighter when two tinted sections stack */
.app-shell > .app-section.section-alt + .app-section.section-alt {
    padding-top: clamp(1.25rem, 3vw, 2rem);
}

.app-shell > .app-section:not(.hero-section) > .container,
.app-shell > .app-section:not(.hero-section) > .section-fit-body {
    position: relative;
    z-index: 2;
    width: 100%;
}

.app-section.is-fit-tight {
    --section-gap: 8px;
}
.app-section.is-fit-tight .section-head {
    margin-bottom: 12px;
}
.app-section.is-fit-tight .section-sub {
    margin-bottom: 0;
}
.app-section.is-fit-tight .h-scroll-wrap,
.app-section.is-fit-tight .media-feed-grid,
.app-section.is-fit-tight .seo-why-home,
.app-section.is-fit-tight .why-us-carousel,
.app-section.is-fit-tight .seo-home-faq,
.app-section.is-fit-tight .contact-visit-grid,
.app-section.is-fit-tight .social-embeds-grid {
    margin-top: var(--section-gap, 8px);
}

/* —— Doodle layer —— */
.section-doodles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.45s ease;
}
.app-section.has-doodles .section-doodles {
    opacity: 1;
}

.section-doodle {
    position: absolute;
    color: var(--primary, #154b34);
    opacity: 0.14;
    line-height: 0;
}
.section-doodle svg {
    display: block;
    width: 100%;
    height: 100%;
}
.section-doodle--spark {
    width: clamp(28px, 4vw, 44px);
    height: clamp(28px, 4vw, 44px);
    opacity: 0.18;
}
.section-doodle--swirl {
    width: clamp(72px, 12vw, 140px);
    height: clamp(72px, 12vw, 140px);
    opacity: 0.12;
}
.section-doodle--leaf {
    width: clamp(40px, 7vw, 72px);
    height: clamp(40px, 7vw, 72px);
    opacity: 0.16;
}
.section-doodle--drop {
    width: clamp(22px, 3.5vw, 36px);
    height: clamp(28px, 4.5vw, 48px);
    opacity: 0.15;
}
.section-doodle--ring {
    width: clamp(48px, 8vw, 88px);
    height: clamp(48px, 8vw, 88px);
    opacity: 0.1;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-style: dashed;
}

/* Positions filled by JS via CSS vars */
.section-doodle[data-slot="1"] { top: var(--d1-t, 6%); left: var(--d1-l, 4%); }
.section-doodle[data-slot="2"] { top: var(--d2-t, 8%); right: var(--d2-r, 5%); }
.section-doodle[data-slot="3"] { bottom: var(--d3-b, 8%); left: var(--d3-l, 7%); }
.section-doodle[data-slot="4"] { bottom: var(--d4-b, 10%); right: var(--d4-r, 6%); }
.section-doodle[data-slot="5"] { top: var(--d5-t, 42%); left: var(--d5-l, 2%); }
.section-doodle[data-slot="6"] { top: var(--d6-t, 48%); right: var(--d6-r, 3%); }

@media (prefers-reduced-motion: no-preference) {
    .app-section.has-doodles .section-doodle--spark {
        animation: doodleFloat 5.5s ease-in-out infinite;
    }
    .app-section.has-doodles .section-doodle--swirl {
        animation: doodleSpin 28s linear infinite;
    }
    .app-section.has-doodles .section-doodle--leaf {
        animation: doodleFloat 7s ease-in-out infinite reverse;
    }
    .app-section.has-doodles .section-doodle--drop {
        animation: doodleFloat 6.2s ease-in-out 0.4s infinite;
    }
    .app-section.has-doodles .section-doodle--ring {
        animation: doodlePulse 8s ease-in-out infinite;
    }
}

@keyframes doodleFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(6deg); }
}
@keyframes doodleSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes doodlePulse {
    0%, 100% { transform: scale(1); opacity: 0.1; }
    50% { transform: scale(1.08); opacity: 0.16; }
}

@media (prefers-reduced-motion: reduce) {
    .section-doodle { animation: none !important; }
}

/* Alternate section tint keeps doodles readable */
.app-section.section-alt .section-doodle {
    opacity: 0.18;
}