/* SEASONAL: holiday accents, scoped so the rest of the site stays year-round neutral.
   Applied to the /christmas-lights page wrapper (.christmas-lights-page) and the home holiday section (.holiday-section). */

.holiday-section, .christmas-lights-page {
    --holly: #2E8B57;
    --berry: #D64550;
}

/* Warm string-light strip: a row of tiny glowing bulbs that gently twinkle. */
.lights-strip {
    position: relative; height: 14px; margin: 0 0 1.5rem;
    background-image: radial-gradient(circle at 6px 7px, #FFD166 0 3px, rgba(255,209,102,.35) 4px, transparent 6px);
    background-size: 28px 14px; background-repeat: repeat-x;
    filter: drop-shadow(0 0 6px rgba(255,184,0,.6));
    animation: twinkle 2.4s ease-in-out infinite alternate;
    border-top: 1px solid rgba(246,243,236,.12);
}
.lights-strip::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(circle at 20px 7px, var(--berry) 0 3px, rgba(214,69,80,.3) 4px, transparent 6px),
                      radial-gradient(circle at 34px 7px, var(--holly) 0 3px, rgba(46,139,87,.3) 4px, transparent 6px);
    background-size: 28px 14px, 28px 14px; background-repeat: repeat-x;
    animation: twinkle 3.1s ease-in-out infinite alternate-reverse;
}
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }

.holiday-section .pill-tag, .christmas-lights-page .pill-tag { background: rgba(214,69,80,.16); color: #FFB7BC; }
.holiday-section .eyebrow, .christmas-lights-page .eyebrow { color: var(--gold-300); }
.christmas-lights-page .card-x .list li::before { background: var(--berry); box-shadow: 0 0 10px rgba(214,69,80,.5); }
.christmas-lights-page .card-x:nth-child(even) .list li::before { background: var(--holly); box-shadow: 0 0 10px rgba(46,139,87,.5); }

@media (prefers-reduced-motion: reduce) { .lights-strip, .lights-strip::after { animation: none; } }

/* =====================================================================
   /christmas-lights page theme: evergreen canvas, cranberry and holly
   accents, gold kept for the lights themselves and the main CTA.
   Everything below is scoped to .christmas-lights-page (or to a body that
   contains it), so the home page, which also loads this file for its
   holiday section, is untouched.
   ===================================================================== */
.christmas-lights-page {
    --pine-950: #03140D;
    --pine-900: #062319;
    --pine-800: #0B3526;
    --holly-300: #7FD6A4;
    --berry-300: #FF8F98;
    --cranberry: #8E1B2C;
    --sky: #7A1728; /* phones: solid hero colour (site.css swaps the photo for var(--sky)) */
    --page-bg: #062319; /* the hero scrim fades into this, so it meets the evergreen canvas below */
    --panel-dark: rgba(3, 20, 13, 0.62);
    --line-strong: rgba(127, 214, 164, 0.18);
}

/* Canvas and page chrome outside the wrapper */
body:has(.christmas-lights-page) { --bs-body-bg: #062319; background: #062319; }
body:has(.christmas-lights-page) .ambient {
    background:
        radial-gradient(55% 40% at 12% 18%, rgba(142,27,44,.32), transparent 62%),
        radial-gradient(50% 40% at 90% 55%, rgba(46,139,87,.22), transparent 62%),
        radial-gradient(60% 40% at 50% 110%, rgba(255,184,0,.10), transparent 60%);
}
body:has(.christmas-lights-page) .site-header.is-scrolled { background: rgba(3, 20, 13, 0.82); }
body:has(.christmas-lights-page) .mobile-cta-bar { background: rgba(3, 20, 13, 0.94); }
body:has(.christmas-lights-page) .site-footer { background: linear-gradient(180deg, rgba(3,20,13,0), rgba(3,20,13,.92)); }

/* Hero: evergreen strip, alternating berry / holly / gold icons */
.christmas-lights-page .hero-strip { background: rgba(6, 35, 25, 0.62); border-color: rgba(127,214,164,.22); }
.christmas-lights-page .hero-strip > :nth-child(1) i { color: var(--holly-300); }
.christmas-lights-page .hero-strip > :nth-child(2) i { color: var(--berry-300); }
@media (max-width: 767.98px), (pointer: coarse) and (max-height: 500px) {
    .christmas-lights-page .page-hero { background: linear-gradient(180deg, var(--sky) 0%, #5A0F1D 100%); }
}

/* Secondary buttons in evergreen instead of navy */
.christmas-lights-page .btn-ghost { background: rgba(3, 20, 13, 0.78); }
.christmas-lights-page .btn-ghost:hover { background: rgba(3, 20, 13, 0.92); }

/* Marquee stars alternate red and green */
.christmas-lights-page .marquee { background: rgba(3, 20, 13, 0.6); border-color: rgba(127,214,164,.14); }
.christmas-lights-page .marquee span:nth-child(odd)::after { color: var(--berry); }
.christmas-lights-page .marquee span:nth-child(even)::after { color: var(--holly); }

/* Eyebrow rules in berry, section text stays gold */
.christmas-lights-page .eyebrow::before, .christmas-lights-page .eyebrow.center::after { background: var(--berry); opacity: 1; }

/* Cards */
.christmas-lights-page .card-dark { background: linear-gradient(160deg, rgba(11,53,38,.85), rgba(3,20,13,.92)); }
.christmas-lights-page .row > :nth-child(odd) .card-flat h4 i { color: var(--berry-300); }
.christmas-lights-page .row > :nth-child(even) .card-flat h4 i { color: var(--holly-300); }
.christmas-lights-page .card-dark h2 i { color: var(--berry-300) !important; }
.christmas-lights-page .feature-list li:nth-child(odd)::before { color: var(--holly-300); }
.christmas-lights-page .feature-list li:nth-child(even)::before { color: var(--berry-300); }

/* Steps: numerals outlined alternately in cranberry and holly */
.christmas-lights-page .step:nth-child(odd) .n { -webkit-text-stroke-color: rgba(255,143,152,.8); }
.christmas-lights-page .step:nth-child(even) .n { -webkit-text-stroke-color: rgba(127,214,164,.8); }
.christmas-lights-page .step:nth-child(odd) { border-top: 2px solid rgba(214,69,80,.55); }
.christmas-lights-page .step:nth-child(even) { border-top: 2px solid rgba(46,139,87,.65); }

/* Estimate form: evergreen shell with a candy-cane edge */
.christmas-lights-page .form-shell {
    position: relative;
    background: linear-gradient(180deg, rgba(11,53,38,.62), rgba(3,20,13,.82));
}
.christmas-lights-page .form-shell::before {
    content: ""; position: absolute; top: -1px; left: 1.6rem; right: 1.6rem; height: 6px; border-radius: 0 0 6px 6px;
    background: repeating-linear-gradient(-45deg, var(--berry) 0 10px, #F6F3EC 10px 20px);
}
.christmas-lights-page .form-fieldset legend { color: var(--holly-300); }
.christmas-lights-page .form-check-input:checked { background-color: var(--berry); border-color: var(--berry); }
.christmas-lights-page .form-control[type="file"]::file-selector-button { background: rgba(214,69,80,.2); color: var(--berry-300); }

/* FAQ */
.christmas-lights-page .faq .accordion-button:not(.collapsed) { background: rgba(214,69,80,.12); color: var(--berry-300); }

/* Closing CTA: cranberry into evergreen, lights along the top */
.christmas-lights-page .cta-band {
    background: radial-gradient(70% 120% at 0% 0%, rgba(255,184,0,.18), transparent 55%), linear-gradient(135deg, rgba(142,27,44,.92), rgba(11,53,38,.95));
    border-color: rgba(255,143,152,.3);
}
.christmas-lights-page .cta-band .lights-strip { margin: -.5rem 0 1.6rem; border-top: 0; }

/* The hero's padding and scrim now come from the shared .hero-bright
   component in site.css. The page-scoped overrides that used to live here
   out-ranked it (.christmas-lights-page .page-hero beats .hero-bright), which
   kept this page on the older, darker two-layer scrim and swallowed its
   --hero-pad-top. Don't reintroduce them. */