/* Nano Solar Clean: Christmas light page. Loaded after city.css. The page stays up all year;
   the only holiday-switch rules here are the ones that reserve header space for the strand. */

/* ---------- Space for the header strand (only while the theme is on) ---------- */
html.holiday { scroll-padding-top: 92px; }
html.holiday header.site .wrap { padding-block: 22px 10px; }
html.holiday header.site.scrolled .wrap { padding-block: 21px 6px; }

/* Room in the header for the extra nav link on small laptops */
@media (min-width: 961px) and (max-width: 1120px) { nav.links a.nl[href="/#work"] { display: none; } }
nav.links a.nl[aria-current="page"] { color: var(--on-navy); }
nav.links a.nl[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- Hero: decorative photo under a dark overlay ---------- */
.xmas-hero { isolation: isolate; }
.xmas-hero-photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 30%;
}
.xmas-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(5,24,38,.95) 0%, rgba(8,35,54,.9) 45%, rgba(8,35,54,.82) 62%, rgba(8,35,54,.42) 100%);
}
@media (max-width: 1100px) {
  .xmas-hero::before { background: rgba(5,24,38,.84); }
}

/* ---------- Colour choice ---------- */
.choice { list-style: none; margin: clamp(28px, 4vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .choice { grid-template-columns: 1fr; } }
.choice li { background: var(--card); border: 1px solid var(--line-paper); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.choice h3 { font-size: 1.3rem; margin: 22px 24px 6px; }
.choice p { margin: 0 24px 24px; color: var(--ink-soft); }
.swatch { display: flex; justify-content: space-around; padding: 34px 16px 30px; background: var(--navy-deep); }
.swatch i {
  --c: #FFE2A8;
  position: relative; display: block; width: 18px; height: 30px;
  border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
  border-top: 6px solid #27343F;
  background: var(--c);
  box-shadow: 0 0 18px 5px color-mix(in srgb, var(--c) 55%, transparent);
}
.swatch.multi i:nth-child(5n+1) { --c: #FF6F52; }
.swatch.multi i:nth-child(5n+2) { --c: #58D2A6; }
.swatch.multi i:nth-child(5n+3) { --c: #F4C465; }
.swatch.multi i:nth-child(5n+4) { --c: #6DB8FF; }
.swatch.multi i:nth-child(5n)   { --c: #FF9F45; }

/* ---------- Three-step quoting ---------- */
.steps.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .steps.three { grid-template-columns: 1fr; } .steps.three::before { display: none; } }
.steps a { color: var(--amber-hi); font-weight: 600; white-space: nowrap; }

/* ---------- Businesses + cross-sell ---------- */
.also-do { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .also-do { grid-template-columns: 1fr; } }
.also-do > div { background: var(--card); border: 1px solid var(--line-paper); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 30px); box-shadow: var(--shadow-card); }
.also-do h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); }
.also-do p { margin: 12px 0 0; color: var(--ink-soft); }
.also-do a { color: var(--sea-text); font-weight: 600; }

/* ==========================================================================
   Extra Christmas for this page. Everything below follows the holiday switch:
   off-season, the extra markup is hidden and the page falls back to the styles above.
   Decoration sits in empty space or behind content and never takes clicks.
   ========================================================================== */
html:not(.holiday) .hol-only { display: none; }
html.holiday .hol-off { display: none; }
html.holiday .xmas-hl { color: var(--amber-hi); }

/* Let the lit-up house show through on the side away from the text */
@media (min-width: 1101px) {
  html.holiday .xmas-hero::before {
    background: linear-gradient(90deg, rgba(5,24,38,.95) 0%, rgba(8,35,54,.9) 45%, rgba(8,35,54,.82) 62%, rgba(8,35,54,.16) 100%);
  }
}

/* ---------- Big C9 garland hanging from the top of a section ---------- */
html.holiday .xmas-snow { isolation: isolate; }
html.holiday .xmas-garland {
  position: absolute; left: 0; right: 0; top: 0; height: 46px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='46'%3E%3Cpath d='M0 5Q22.5 15 45 5Q67.5 15 90 5Q112.5 15 135 5Q157.5 15 180 5' fill='none' stroke='%2327343F' stroke-width='1.6'/%3E%3Cg transform='translate(22.5 9)'%3E%3Cpath fill='%23FF6F52' d='M0 5c5.5 0 9 4.5 9 11 0 7-5 13-9 17-4-4-9-10-9-17 0-6.5 3.5-11 9-11Z'/%3E%3Crect x='-3.5' width='7' height='6' rx='1' fill='%2327343F'/%3E%3C/g%3E%3Cg transform='translate(67.5 9)'%3E%3Cpath fill='%2358D2A6' d='M0 5c5.5 0 9 4.5 9 11 0 7-5 13-9 17-4-4-9-10-9-17 0-6.5 3.5-11 9-11Z'/%3E%3Crect x='-3.5' width='7' height='6' rx='1' fill='%2327343F'/%3E%3C/g%3E%3Cg transform='translate(112.5 9)'%3E%3Cpath fill='%23F4C465' d='M0 5c5.5 0 9 4.5 9 11 0 7-5 13-9 17-4-4-9-10-9-17 0-6.5 3.5-11 9-11Z'/%3E%3Crect x='-3.5' width='7' height='6' rx='1' fill='%2327343F'/%3E%3C/g%3E%3Cg transform='translate(157.5 9)'%3E%3Cpath fill='%23FFF3D6' stroke='%23D8C79C' d='M0 5c5.5 0 9 4.5 9 11 0 7-5 13-9 17-4-4-9-10-9-17 0-6.5 3.5-11 9-11Z'/%3E%3Crect x='-3.5' width='7' height='6' rx='1' fill='%2327343F'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 180px 46px repeat-x;
}
html.holiday .xmas-snow .xmas-garland { top: clamp(10px, 2.2vw, 30px); z-index: -1; }
/* Two glow layers that trade places, so the garland twinkles without any repainting */
html.holiday .xmas-garland::before, html.holiday .xmas-garland::after {
  content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 70px; background-size: 180px 70px; background-repeat: repeat-x; opacity: .8;
}
html.holiday .xmas-garland::before {
  background-image:
    radial-gradient(circle 26px at 22.5px 35px, rgba(255,111,82,.6), transparent),
    radial-gradient(circle 26px at 112.5px 35px, rgba(244,196,101,.6), transparent);
}
html.holiday .xmas-garland::after {
  background-image:
    radial-gradient(circle 26px at 67.5px 35px, rgba(88,210,166,.6), transparent),
    radial-gradient(circle 26px at 157.5px 35px, rgba(255,243,214,.6), transparent);
}

/* ---------- Soft out-of-focus lights behind the navy sections ---------- */
html.holiday .xmas-bokeh {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle 90px at 8% 30%, rgba(232,93,61,.2), transparent),
    radial-gradient(circle 70px at 24% 82%, rgba(63,140,124,.28), transparent),
    radial-gradient(circle 110px at 46% 18%, rgba(232,169,59,.13), transparent),
    radial-gradient(circle 80px at 66% 76%, rgba(232,93,61,.17), transparent),
    radial-gradient(circle 100px at 88% 28%, rgba(63,140,124,.26), transparent),
    radial-gradient(circle 70px at 95% 84%, rgba(232,169,59,.17), transparent);
}

/* ---------- Hanging ornaments, in the empty space beside the headings ---------- */
html.holiday .xmas-baubles {
  display: none; position: absolute; top: 0; gap: 18px; pointer-events: none;
  right: max(var(--gutter), calc((100% - 1180px) / 2 + 48px));
}
@media (min-width: 900px) { html.holiday .xmas-baubles { display: flex; } }
@media (max-width: 1299px) { html.holiday .xmas-baubles.far { display: none; } }
html.holiday .xmas-baubles.far { right: 48px; }
html.holiday .xmas-baubles i {
  --c: var(--coral); --h: 66px;
  position: relative; display: block; width: 36px; height: calc(var(--h) + 38px); transform-origin: 50% 0;
}
html.holiday .xmas-baubles i:nth-child(2) { --c: var(--sea-deep); --h: 112px; }
html.holiday .xmas-baubles i:nth-child(3) { --c: var(--amber); --h: 40px; }
html.holiday .xmas-baubles i::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 1.5px; height: var(--h); margin-left: -.75px; background: rgba(14,35,54,.45);
}
html.holiday .xmas-baubles i::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.85) 0 7%, transparent 26%), var(--c);
  box-shadow: inset -5px -6px 10px rgba(5,24,38,.28), 0 8px 14px -6px rgba(5,24,38,.45);
}

/* ---------- Holly beside the section headings ---------- */
html.holiday #included h2::after, html.holiday #colors h2::after, html.holiday #quoting h2::after, html.holiday #faq h2::after, html.holiday .cta-band h2::after {
  content: ""; display: inline-block; width: .95em; height: .72em; margin-left: .35em; vertical-align: -.02em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath fill='%233F8C7C' d='M20 17C16 9 9 5 1 6c2 2 2 4 1 6 3 0 4 1 4 4 2-1 4 0 5 3 3-2 6-2 9-2Z'/%3E%3Cpath fill='%232E6E61' d='M20 17c4-8 11-12 19-11-2 2-2 4-1 6-3 0-4 1-4 4-2-1-4 0-5 3-3-2-6-2-9-2Z'/%3E%3Ccircle cx='20' cy='19' r='4.6' fill='%23E85D3D'/%3E%3Ccircle cx='14.5' cy='24' r='4' fill='%23E85D3D'/%3E%3Ccircle cx='25.5' cy='24' r='4' fill='%23E85D3D'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- What's included: candy-cane top and C9 bulbs for bullets ---------- */
html.holiday .price-card { position: relative; overflow: hidden; }
html.holiday .price-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px;
  background: repeating-linear-gradient(-45deg, var(--coral) 0 11px, var(--paper) 11px 22px);
}
html.holiday .check-list li::before {
  -webkit-mask: none; mask: none; width: 12px; height: 18px; margin: 4px 3px 0;
  border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%; border-top: 4px solid #27343F; background: var(--coral);
}
html.holiday .check-list li:nth-child(3n+2)::before { background: var(--sea-deep); }
html.holiday .check-list li:nth-child(3n)::before { background: var(--amber); }

/* ---------- Colour swatches: bulbs on a wire, with a snowdrift underneath ---------- */
html.holiday .swatch {
  position: relative; padding: 24px 0 42px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0 8Q50 40 100 8' fill='none' stroke='%23F5F1E8' stroke-opacity='.45' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 20% 30px repeat-x,
    var(--navy-deep);
}
html.holiday .swatch::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='15' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFDF8' d='M0 15V9Q20 0 40 7T80 9V15Z'/%3E%3C/svg%3E") 0 0 / 80px 15px repeat-x;
}

/* ---------- Snow caps on the quoting cards ---------- */
html.holiday .steps li::before { z-index: 1; }
html.holiday .steps li::after {
  content: ""; position: absolute; left: 72px; right: 22px; top: -7px; height: 12px; pointer-events: none; border-radius: 0 0 8px 8px; opacity: .92;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='13'%3E%3Cpath fill='%23F5F1E8' d='M0 13C0 8 6 7 10 7 14 1 26 1 30 6 36 2 48 3 52 7 58 3 72 3 74 7 78 7 80 9 80 13Z'/%3E%3C/svg%3E") 0 0 / 80px 12px repeat-x;
}

/* ---------- Candy-cane line on top of the FAQ ---------- */
html.holiday .faq {
  border-top: 6px solid transparent;
  border-image: repeating-linear-gradient(-45deg, var(--coral) 0 10px, var(--paper) 10px 20px) 6;
}

/* ---------- Movement: skipped entirely with prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.holiday .xmas-garland::before { animation: xmasTwinkle 3.2s ease-in-out infinite; }
  html.holiday .xmas-garland::after { animation: xmasTwinkle 3.2s ease-in-out -1.6s infinite; }
  html.holiday .xmas-bokeh { animation: xmasBokeh 7s ease-in-out infinite; }
  html.holiday .swatch i { animation: xmasBulb 2.8s ease-in-out infinite; }
  html.holiday .swatch i:nth-child(2n) { animation-delay: -1.4s; }
  html.holiday .swatch i:nth-child(3n) { animation-delay: -.7s; }
  html.holiday .xmas-baubles i { animation: xmasSway 5.5s ease-in-out infinite; }
  html.holiday .xmas-baubles i:nth-child(2) { animation-delay: -1.8s; }
  html.holiday .xmas-baubles i:nth-child(3) { animation-delay: -3.4s; }
  @keyframes xmasTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
  @keyframes xmasBokeh { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
  @keyframes xmasBulb { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
  @keyframes xmasSway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
}