/* christmas.css — seasonal theme. Selected in Admin › Config › Active Theme.
   ---------------------------------------------------------------------------
   How themes work: base.html puts data-theme="<name>" on <html> and loads
   this file. Every brand color in the site (Tailwind bg-primary, text-secondary,
   the header glass, hero tint, footer…) reads the --c-* variables, so
   overriding them here recolors the whole site. Values are space-separated RGB.

   Selectors are html[data-theme=…] so they outrank the :root defaults in
   style.css regardless of load order.
   ------------------------------------------------------------------------- */
/* default.css is loaded separately by base.html (versioned), not @import-ed:
   an @import URL can't carry the cache-busting ?v= token. */

html[data-theme="christmas"] {
  --c-primary:   30 77 59;     /* evergreen  #1E4D3B */
  --c-secondary: 178 34 52;    /* cranberry  #B22234 */
  --c-accent:    212 165 55;   /* gold       #D4A537 */
  --c-nav-hover: 243 223 162;  /* pale gold  #F3DFA2 */
}

/* Home page feature icons are recolored with a filter (they're <img> SVGs). */
html[data-theme="christmas"] .icon-secondary {
  filter: invert(41%) sepia(11%) saturate(8895%) hue-rotate(326deg) brightness(67%) contrast(117%);
}

/* ---- Candy-cane ribbon along the top edge of the header ---- */
html[data-theme="christmas"] .site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 5px;
  z-index: -1;               /* stays under the logo */
  background: repeating-linear-gradient(
    -45deg,
    #B22234 0 10px, #ffffff 10px 20px,
    #1E4D3B 20px 30px, #ffffff 30px 40px
  );
  opacity: 0.9;
}

/* The ribbon takes the top 5px of the header, so start the logo just below it
   instead of letting the logo's top edge run under (and through) the ribbon.
   Same bottom overhang as normal; margin box still equals the header height. */
html[data-theme="christmas"] .header-logo {
  height: calc(var(--header-height) + 2px);
  margin-top: 6px;
  margin-bottom: -8px;
}

/* ---- Gentle snowfall over page banners ----
   Three layers of randomly placed flakes; nearer (bigger) flakes fall faster. */
html[data-theme="christmas"] .hero-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='373' height='373'%3E%3Cg fill='white' fill-opacity='0.95'%3E%3Ccircle cx='169' cy='209' r='3.1'/%3E%3Ccircle cx='174' cy='189' r='2.8'/%3E%3Ccircle cx='69' cy='191' r='2.8'/%3E%3Ccircle cx='296' cy='35' r='2.5'/%3E%3Ccircle cx='34' cy='302' r='2.9'/%3E%3Ccircle cx='16' cy='366' r='3.2'/%3E%3Ccircle cx='244' cy='230' r='2.4'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='281' height='281'%3E%3Cg fill='white' fill-opacity='0.8'%3E%3Ccircle cx='4' cy='148' r='1.4'/%3E%3Ccircle cx='53' cy='68' r='1.4'/%3E%3Ccircle cx='130' cy='124' r='2.1'/%3E%3Ccircle cx='146' cy='180' r='1.8'/%3E%3Ccircle cx='186' cy='129' r='1.6'/%3E%3Ccircle cx='280' cy='280' r='2.1'/%3E%3Ccircle cx='199' cy='89' r='1.6'/%3E%3Ccircle cx='81' cy='20' r='2.0'/%3E%3Ccircle cx='113' cy='238' r='1.7'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='197' height='197'%3E%3Cg fill='white' fill-opacity='0.6'%3E%3Ccircle cx='189' cy='167' r='0.8'/%3E%3Ccircle cx='41' cy='179' r='1.1'/%3E%3Ccircle cx='193' cy='78' r='0.8'/%3E%3Ccircle cx='124' cy='153' r='1.0'/%3E%3Ccircle cx='17' cy='66' r='1.4'/%3E%3Ccircle cx='149' cy='23' r='0.9'/%3E%3Ccircle cx='20' cy='12' r='1.3'/%3E%3Ccircle cx='35' cy='110' r='1.1'/%3E%3Ccircle cx='38' cy='144' r='0.9'/%3E%3Ccircle cx='127' cy='23' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 373px 373px, 281px 281px, 197px 197px;
  animation: mcm-snowfall 30s linear infinite;
}

/* Each layer moves a whole number of tiles, so the loop is seamless. */
@keyframes mcm-snowfall {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 373px 1119px, -281px 843px, 197px 591px; }
}

/* Gold underline on the hero heading */
html[data-theme="christmas"] .hero-overlay h1::after {
  content: "";
  display: block;
  width: 72px; height: 3px;
  margin: 0.6rem auto 0;
  border-radius: 3px;
  background: rgb(var(--c-accent));
}

/* ---- Footer: faint seasonal artwork behind the content + matching ribbon ---- */
html[data-theme="christmas"] .site-footer { position: relative; isolation: isolate; }
html[data-theme="christmas"] .site-footer > .container-mcm { position: relative; z-index: 1; }
html[data-theme="christmas"] .site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='170' viewBox='0 0 640 170'%3E%3Cg fill='white' fill-opacity='0.075'%3E%3Cpath d='M40 125L68 159H12Z'/%3E%3Cpath d='M40 104L62 144H18Z'/%3E%3Cpath d='M40 85L56 130H24Z'/%3E%3Crect x='36' y='158' width='9' height='12'/%3E%3Cpath d='M95 100L138 153H52Z'/%3E%3Cpath d='M95 67L130 129H60Z'/%3E%3Cpath d='M95 38L120 108H70Z'/%3E%3Crect x='88' y='152' width='14' height='18'/%3E%3Cpath d='M95.0 24.1L96.9 28.6L101.7 29.0L98.0 32.1L99.1 36.8L95.0 34.3L90.9 36.8L92.0 32.1L88.3 29.0L93.1 28.6Z'/%3E%3Cpath d='M150 135L172 162H128Z'/%3E%3Cpath d='M150 118L167 149H133Z'/%3E%3Cpath d='M150 104L163 139H137Z'/%3E%3Crect x='146' y='161' width='7' height='9'/%3E%3Cpath d='M250 115L284 157H216Z'/%3E%3Cpath d='M250 89L277 138H223Z'/%3E%3Cpath d='M250 66L270 121H230Z'/%3E%3Crect x='244' y='156' width='11' height='14'/%3E%3Cpath d='M300 140L319 163H281Z'/%3E%3Cpath d='M300 126L315 152H285Z'/%3E%3Cpath d='M300 113L311 143H289Z'/%3E%3Crect x='297' y='162' width='6' height='8'/%3E%3Cpath d='M390 95L436 152H344Z'/%3E%3Cpath d='M390 59L427 126H353Z'/%3E%3Cpath d='M390 29L417 104H363Z'/%3E%3Crect x='382' y='150' width='15' height='20'/%3E%3Cpath d='M455 128L481 160H429Z'/%3E%3Cpath d='M455 107L476 145H434Z'/%3E%3Cpath d='M455 90L470 132H440Z'/%3E%3Crect x='451' y='159' width='8' height='11'/%3E%3Cpath d='M560 110L597 156H523Z'/%3E%3Cpath d='M560 81L590 135H530Z'/%3E%3Cpath d='M560 57L582 117H538Z'/%3E%3Crect x='554' y='154' width='12' height='16'/%3E%3Cpath d='M560.0 43.0L561.9 47.4L566.7 47.8L563.0 50.9L564.1 55.6L560.0 53.1L555.9 55.6L557.0 50.9L553.3 47.8L558.1 47.4Z'/%3E%3Cpath d='M610 138L630 162H590Z'/%3E%3Cpath d='M610 122L626 151H594Z'/%3E%3Cpath d='M610 109L622 141H598Z'/%3E%3Crect x='607' y='162' width='6' height='8'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='220' viewBox='0 0 340 220'%3E%3Cg stroke='white' stroke-opacity='0.12' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M81.0 30.6L90.1 30.6'/%3E%3Cpath d='M83.2 26.7L87.8 34.6'/%3E%3Cpath d='M87.8 26.7L83.2 34.6'/%3E%3Cpath d='M55.0 23.3L64.2 23.3'/%3E%3Cpath d='M57.3 19.3L61.9 27.3'/%3E%3Cpath d='M61.9 19.3L57.3 27.3'/%3E%3Cpath d='M297.7 170.1L309.8 170.1'/%3E%3Cpath d='M300.7 164.8L306.8 175.3'/%3E%3Cpath d='M306.8 164.8L300.7 175.3'/%3E%3Cpath d='M76.9 117.3L85.1 117.3'/%3E%3Cpath d='M79.0 113.8L83.1 120.9'/%3E%3Cpath d='M83.1 113.8L79.0 120.9'/%3E%3Cpath d='M61.4 31.2L69.1 31.2'/%3E%3Cpath d='M63.3 27.9L67.2 34.6'/%3E%3Cpath d='M67.2 27.9L63.3 34.6'/%3E%3Cpath d='M300.6 175.8L313.0 175.8'/%3E%3Cpath d='M303.7 170.4L309.9 181.2'/%3E%3Cpath d='M309.9 170.4L303.7 181.2'/%3E%3Cpath d='M261.9 48.7L270.4 48.7'/%3E%3Cpath d='M264.0 45.0L268.3 52.4'/%3E%3Cpath d='M268.3 45.0L264.0 52.4'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x, repeat;
  background-position: left bottom, 0 0;
  background-size: 640px 170px, 340px 220px;
}
html[data-theme="christmas"] .site-footer::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  pointer-events: none;
  background: repeating-linear-gradient(-45deg, #B22234 0 10px, #ffffff 10px 20px, #1E4D3B 20px 30px, #ffffff 30px 40px);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="christmas"] .hero-band::after { animation: none; }
}