/* Holiday Season themes (holiday.js, Vale Admin: Holiday Season).
 * Paint only: colour, small decorations and one promo card. Nothing here moves the menu, the logo,
 * a button or the Prices bar. Decorations never take a tap (pointer-events: none) and sit behind the
 * text of the top section. Colours come from holiday.js as --hol-a, --hol-b, --hol-bar, --hol-soft, --hol-fx1..3.
 * Source: ~/Projects/vale-admin/site-integration/holiday.css (copied byte for byte into the site folder). */

/* ---------- Level 1: top bar (in the page, like a notice; the floating menu moves down with it) */
.hol-bar{position:relative;z-index:79;display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:8px 16px;padding-top:calc(8px + env(safe-area-inset-top,0px));background:var(--hol-bar);color:#fff;font-family:var(--body,Inter,system-ui,sans-serif);font-size:14.5px;font-weight:600;line-height:1.35;text-align:center;letter-spacing:.01em}
.hol-bar[hidden]{display:none}
.hol-bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--hol-a),var(--hol-b),var(--hol-a))}
.hol-bar-ico{width:18px;height:18px;flex:none;color:#fff;color:color-mix(in srgb,var(--hol-a) 55%,#fff)}
@media (max-width:600px){.hol-bar{font-size:13.5px;justify-content:flex-start;text-align:left;padding-left:16px;padding-right:16px}}

/* ---------- Level 1: small mark hanging under the logo, from the bottom edge of the menu pill */
.hol-accent{position:absolute;top:calc(100% - 7px);left:20px;width:14px;height:14px;display:block;color:var(--hol-a);pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.hol-accent svg{display:block;width:14px;height:14px}

/* ---------- Level 1: a thin seasonal ring round the main buttons (same button, same size, same place) */
html.hol-e-buttons .btn-primary,html.hol-e-buttons .island-cta{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--hol-a),0 10px 24px rgba(0,60,60,.18)}

/* ---------- Level 2 and 3: decorations inside the top section, behind its text */
.hol-layer{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hol-wash{position:absolute;inset:0;background:radial-gradient(70% 60% at 100% 0%,color-mix(in srgb,var(--hol-a) 16%,transparent),transparent 70%),radial-gradient(60% 55% at 0% 100%,color-mix(in srgb,var(--hol-b) 10%,transparent),transparent 70%)}
@supports not (background:color-mix(in srgb,red 10%,transparent)){.hol-wash{background:var(--hol-soft);opacity:.55}}
.hol-corner{position:absolute;width:clamp(64px,9vw,120px);height:clamp(64px,9vw,120px);color:var(--hol-a);opacity:.22}
.hol-corner svg{display:block;width:100%;height:100%}
.hol-c1{top:calc(var(--island-space,86px) + 4px);right:clamp(10px,3vw,40px);transform:rotate(12deg)}
.hol-c2{bottom:14px;left:clamp(6px,2vw,28px);transform:rotate(-14deg) scale(.8);color:var(--hol-b)}
/* phones: the top section is narrow and full of text, so the corner decorations stay out of it */
@media (max-width:767px){.hol-corner{display:none}}

/* ---------- Level 2: section dividers (a short seasonal line on the top edge of each section) */
html.hol-e-dividers .sec{position:relative}
html.hol-e-dividers .sec+.sec::before,html.hol-e-dividers .hol-promo+.sec::before{content:"";position:absolute;top:0;left:50%;width:min(200px,46%);height:3px;transform:translate(-50%,-50%);border-radius:3px;background:linear-gradient(90deg,transparent,var(--hol-a) 25%,var(--hol-b) 50%,var(--hol-a) 75%,transparent);pointer-events:none}

/* ---------- Level 2: one promo card under the top section */
.hol-promo{padding:clamp(18px,3vw,28px) 0}
.hol-promo-card{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:18px;background:var(--hol-soft);border:1px solid color-mix(in srgb,var(--hol-a) 28%,transparent);box-shadow:0 8px 24px rgba(0,40,40,.06)}
.hol-promo-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--hol-a);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.hol-promo-ico svg{width:24px;height:24px}
.hol-promo-body{flex:1;min-width:0}
.hol-promo-title{display:block;font-family:var(--display,inherit);font-size:1.08rem;line-height:1.3;color:#1a1a1a}
.hol-promo-text{margin:4px 0 0;font-size:.95rem;line-height:1.5;color:#3d3d3d}
.hol-promo-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;background:#006767;color:#fff;font-weight:600;text-decoration:none;white-space:nowrap}
.hol-promo-btn:hover{background:#004f4f}
.hol-promo-btn:focus-visible{outline:2px solid #006767;outline-offset:3px}
@media (max-width:640px){.hol-promo-card{flex-wrap:wrap;align-items:flex-start}.hol-promo-ico{width:40px;height:40px}.hol-promo-body{flex:1 1 calc(100% - 60px)}.hol-promo-btn{width:100%}}

/* ---------- Level 3: particles, few and slow, behind the text of the top section */
.hol-fx{position:absolute;inset:0}
.hol-fx i{position:absolute;top:-24px;display:block;width:var(--s);height:var(--s);color:var(--c);opacity:0;animation:hol-fall var(--d) linear var(--delay) infinite;will-change:transform}
.hol-fx i svg{display:block;width:100%;height:100%}
.hol-fx-snow i{border-radius:50%;background:var(--c);box-shadow:0 0 6px rgba(255,255,255,.6)}
.hol-fx-confetti i{width:calc(var(--s) * .55);height:var(--s);border-radius:2px;background:var(--c)}
.hol-fx-spark i{top:auto;bottom:-12px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);animation-name:hol-rise}
@keyframes hol-fall{
  0%{transform:translate3d(0,0,0) rotate(0);opacity:0}
  10%{opacity:.85}
  85%{opacity:.75}
  100%{transform:translate3d(var(--x),110vh,0) rotate(var(--r));opacity:0}
}
@keyframes hol-rise{
  0%{transform:translate3d(0,0,0);opacity:0}
  15%{opacity:.9}
  70%{opacity:.5}
  100%{transform:translate3d(var(--x),-70vh,0);opacity:0}
}
html.hol-paused .hol-fx i,html.motion-paused .hol-fx i{animation-play-state:paused}

/* ---------- Level 3: heading underlines, Prices bar and footer tints */
html.hol-e-headings .kicker{text-decoration:underline;text-decoration-color:var(--hol-a);text-decoration-thickness:2px;text-underline-offset:6px}
html.hol-e-pricebar .qs-handle .qs-grab{background:linear-gradient(90deg,var(--hol-a),var(--hol-b))}
html.hol-e-pricebar .qs-handle{background-image:linear-gradient(90deg,var(--hol-a),var(--hol-b),var(--hol-a));background-size:100% 3px;background-repeat:no-repeat;background-position:top}
@media (min-width:900px){html.hol-e-pricebar .qs-handle{background-image:none;box-shadow:0 0 0 2px var(--hol-a),0 16px 40px rgba(26,26,26,.28)}}
html.hol-e-footer .foot{box-shadow:inset 0 4px 0 var(--hol-a);background-image:radial-gradient(60% 80% at 100% 0%,color-mix(in srgb,var(--hol-a) 18%,transparent),transparent 70%)}

/* ---------- people who ask for less motion: no particles at all */
@media (prefers-reduced-motion:reduce){.hol-fx{display:none}}