/* The Vernors Store: seasonal overlays, shared rules (Fresh pour look).
   Load this file plus ONE holiday file (christmas/christmas.css or thanksgiving/thanksgiving.css).
   Nothing shows unless an ancestor (normally <body>) has a class starting with "vs-season-",
   e.g. vs-season-christmas. No edits to header 521 are needed beyond the hook classes listed in SEASONAL.md.

   Hook classes (map to header 521's real selectors, the way vernors-heritage-header.php does):
     .vs-utility      the dark-green utility bar
     .vs-util-default its normal left-hand text ("Shipping Michigan favorites nationwide since 1997")
     .vs-mast         the masthead (Fresh pour background area)
     .vs-nav          the green menu bar;  .vs-cap = each bottle-cap link inside it
     .vs-gnome        a wrapper around the gnome image (position: relative is added here)
     .vs-footer__pour the footer's ale band (already in footer.html)
   Injected markup (server-side, like the Heritage header):
     <p class="vs-season-deadline">…</p>   inside .vs-utility, next to .vs-util-default
     <a class="vs-season-badge" href="…">…</a>   inside .vs-mast
*/

/* Hidden unless a season is active */
.vs-season-deadline, .vs-season-badge { display: none; }

/* 1. Pattern over the masthead (snow / leaves). Sits above the bubbles, below logo + text (z-index 2). */
[class*="vs-season-"] .vs-mast { position: relative; }
[class*="vs-season-"] .vs-mast::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-repeat: repeat; background-position: 0 0; background-size: 260px 260px;
}

/* 2. Garland hanging from the bottom of the menu bar, behind the bottle caps. */
[class*="vs-season-"] .vs-nav::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 2px); height: 40px; z-index: 0; pointer-events: none;
  background-repeat: repeat-x; background-position: 0 0; background-size: 120px 40px;
}
[class*="vs-season-"] .vs-nav .vs-cap { position: relative; z-index: 1; }

/* 3. Prop at the gnome's feet (gift box / pumpkin). Sized from the gnome, so it scales with him. */
[class*="vs-season-"] .vs-gnome { position: relative; display: inline-block; line-height: 0; }
[class*="vs-season-"] .vs-gnome::after {
  content: ""; position: absolute; left: -30%; bottom: -2%; width: 46%; aspect-ratio: 1; z-index: 3; pointer-events: none;
  background-repeat: no-repeat; background-position: center bottom; background-size: contain;
}

/* 4. Promo seal in the masthead. Live text on a scalloped SVG seal. */
[class*="vs-season-"] .vs-season-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  position: absolute; left: var(--vs-badge-left, 63.5%); top: 14px; z-index: 3;
  width: 112px; height: 112px; padding-top: 14px; box-sizing: border-box;
  background: center / contain no-repeat; color: #fff8e6; text-decoration: none;
  transform: rotate(-8deg); transition: transform .15s;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.25));
}
[class*="vs-season-"] .vs-season-badge:hover,
[class*="vs-season-"] .vs-season-badge:focus-visible { transform: rotate(-3deg) scale(1.05); color: #fff8e6; }
.vs-season-badge__kicker { font: 700 10px/1.1 "Source Sans 3", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.vs-season-badge__main { font: 400 19px/1 "Lilita One", sans-serif; margin-top: 3px; max-width: 72px; }

/* 5. Shipping deadline replaces the utility bar's normal text. */
[class*="vs-season-"] .vs-util-default { display: none; }
[class*="vs-season-"] .vs-season-deadline { display: block; margin: 0; }
.vs-season-deadline b { color: #ffd84a; }

/* 6. Same pattern over the footer's ale band. */
[class*="vs-season-"] .vs-footer__pour::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-repeat: repeat; background-position: 0 0; background-size: 260px 260px;
}

/* Phones: the seal and garland are dropped; the deadline line stays (it matters most). */
@media (max-width: 767px) {
  [class*="vs-season-"] .vs-season-badge { display: none; }
  [class*="vs-season-"] .vs-nav::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [class*="vs-season-"] .vs-season-badge { transition: none; }
}