/*
 * holiday.css — the holiday string lights under the header (holiday.php, operator 2026-10-21): a strand
 * of tiny bulbs (holiday-lights.svg) and, under it, a soft glow on every other bulb (holiday-glow.svg)
 * that fades in and out. Only while <html> has the season's class (holiday.php's script). Decoration:
 * never clickable, below the menus and the side cart, still for anyone who asked for less motion.
 */
/* Room for the strand to hang (!important: the theme sets the header's margin itself). */
html.ncllc-holiday header[role="banner"] { position: relative; margin-bottom: 24px !important; }
html.ncllc-holiday header[role="banner"]::before,
html.ncllc-holiday header[role="banner"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -22px; height: 26px;
  background-repeat: repeat-x; background-position: 0 0; background-size: 160px 26px;
  pointer-events: none; z-index: 1;
}
html.ncllc-holiday header[role="banner"]::after { background-image: url("holiday-lights.svg"); }
html.ncllc-holiday header[role="banner"]::before {
  background-image: url("holiday-glow.svg");
  animation: ncllc-holiday-twinkle 2.6s ease-in-out infinite alternate;
}
@keyframes ncllc-holiday-twinkle { from { opacity: .15; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.ncllc-holiday header[role="banner"]::before { animation: none; opacity: .6; }
}
/* The phone menu is a layer over the page (header.css): no lights across it. */
html.ncllc-holiday body:has(#wpdevartmobilemenu ul.menu.open) header[role="banner"]::before,
html.ncllc-holiday body:has(#wpdevartmobilemenu ul.menu.open) header[role="banner"]::after { display: none; }