/* ===== CHRISTMAS THEME (core, shared by all four sites) =====
   Pure CSS, no images, no scripts: a string of lights across the top, hanging baubles in the corners, candy-cane edges and a holly garland along the
   bottom. Everything is drawn on <html>/<body> pseudo-elements and ignores the mouse. Remove with restore-original.mjs. */
:root {
  --xm-red: #c8102e; --xm-red-2: #e11d3f; --xm-red-dark: #8f0b20;
  --xm-green: #14683a; --xm-green-2: #1f8f52; --xm-green-dark: #0b3d27;
  --xm-gold: #f2c14e; --xm-gold-dark: #b8860b; --xm-cream: #fff8ec;
}

/* 1. lights across the top (bulbs every 40px: red, gold, green, blue) + baubles hanging in the corners on wide screens */
html {
  --xm-lights:
    radial-gradient(circle at 20px 12px, #fff 0 1.2px, #ff3355 1.4px 4px, rgba(255, 51, 85, .38) 4.2px 5.2px, transparent 9px) 0 0 / 160px 24px repeat-x,
    radial-gradient(circle at 60px 12px, #fff 0 1.2px, #ffd24a 1.4px 4px, rgba(255, 210, 74, .38) 4.2px 5.2px, transparent 9px) 0 0 / 160px 24px repeat-x,
    radial-gradient(circle at 100px 12px, #fff 0 1.2px, #2fd16f 1.4px 4px, rgba(47, 209, 111, .38) 4.2px 5.2px, transparent 9px) 0 0 / 160px 24px repeat-x,
    radial-gradient(circle at 140px 12px, #fff 0 1.2px, #3fa0ff 1.4px 4px, rgba(63, 160, 255, .38) 4.2px 5.2px, transparent 9px) 0 0 / 160px 24px repeat-x,
    linear-gradient(90deg, transparent 18px, #20382c 18px 22px, transparent 22px 58px, #20382c 58px 62px, transparent 62px 98px, #20382c 98px 102px, transparent 102px 138px, #20382c 138px 142px, transparent 142px) 0 2px / 160px 6px repeat-x,
    linear-gradient(#20382c, #20382c) 0 1px / 100% 2px no-repeat;
  --xm-baubles:
    linear-gradient(#c9ad5f, #c9ad5f) 28px 0 / 1px 49px no-repeat,
    linear-gradient(#f2c14e, #f2c14e) 24.5px 49px / 8px 5px no-repeat,
    radial-gradient(circle at 23px 64px, rgba(255, 255, 255, .9) 0 2.4px, transparent 3px),
    radial-gradient(circle at 28px 68px, #e11d3f 0 12px, #7d0a1c 12.8px, transparent 13.6px),
    linear-gradient(#c9ad5f, #c9ad5f) 62px 0 / 1px 33px no-repeat,
    linear-gradient(#f2c14e, #f2c14e) 58.5px 33px / 8px 5px no-repeat,
    radial-gradient(circle at 58px 46px, rgba(255, 255, 255, .9) 0 2px, transparent 2.6px),
    radial-gradient(circle at 62px 49px, #1f8f52 0 9px, #0b3d27 9.8px, transparent 10.6px),
    linear-gradient(#c9ad5f, #c9ad5f) calc(100% - 28px) 0 / 1px 49px no-repeat,
    linear-gradient(#f2c14e, #f2c14e) calc(100% - 32px) 49px / 8px 5px no-repeat,
    radial-gradient(circle at calc(100% - 33px) 64px, rgba(255, 255, 255, .9) 0 2.4px, transparent 3px),
    radial-gradient(circle at calc(100% - 28px) 68px, #f2c14e 0 12px, #a8790a 12.8px, transparent 13.6px),
    linear-gradient(#c9ad5f, #c9ad5f) calc(100% - 62px) 0 / 1px 33px no-repeat,
    linear-gradient(#f2c14e, #f2c14e) calc(100% - 66px) 33px / 8px 5px no-repeat,
    radial-gradient(circle at calc(100% - 67px) 46px, rgba(255, 255, 255, .9) 0 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 62px) 49px, #e11d3f 0 9px, #7d0a1c 9.8px, transparent 10.6px);
}
html::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: 24px; z-index: 2147483000; pointer-events: none;
  background: var(--xm-lights); animation: xm-twinkle 2.6s ease-in-out infinite alternate;
}
@media (min-width: 1400px) { html::before { height: 96px; background: var(--xm-lights), var(--xm-baubles); } }
@keyframes xm-twinkle { from { filter: brightness(.88) saturate(.95); } to { filter: brightness(1.3) saturate(1.2); } }

/* 2. candy-cane edges down both sides and a holly garland (green scallops, red berries, gold beads) along the bottom */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 2147482998; pointer-events: none;
  background:
    radial-gradient(circle at 9px 8px, #e11d3f 0 2.6px, transparent 3.2px) 0 100% / 72px 16px repeat-x,
    radial-gradient(circle at 45px 7px, #f2c14e 0 2.3px, transparent 2.9px) 0 100% / 72px 16px repeat-x,
    radial-gradient(circle at 18px 20px, #1f8f52 0 17px, #0b3d27 17px 18.4px, transparent 18.8px) 0 100% / 36px 16px repeat-x,
    repeating-linear-gradient(45deg, #c8102e 0 7px, #fff 7px 14px) 0 0 / 5px 100% no-repeat,
    repeating-linear-gradient(-45deg, #14683a 0 7px, #fff 7px 14px) 100% 0 / 5px 100% no-repeat;
}

@media (prefers-reduced-motion: reduce) { html::before { animation: none; } }
@media print { html::before, body::after { display: none !important; } }

/* shared pieces the site files reuse */
.xm-candy { background: repeating-linear-gradient(135deg, #c8102e 0 12px, #fff 12px 24px, #14683a 24px 36px, #fff 36px 48px); }

/* ===== MB (Microbanking public pages): pine green + holly red replace navy + royal blue through the site's own colour variables ===== */
:root { --navy: #0d3b2a; --navy-deep: #072a1d; --navy-soft: #14523a; --royal: #c8102e; --royal-dark: #9b0b22; --green: #14683a; }
:root:not([data-theme='dark']) { --royal-soft: #fde7ea; --bg: #f2f8f2; --paper: #fbfdf9; --surface-2: #f5faf4; --line: #d5e3d7; --line-2: #e5efe6; }
[data-theme='dark'] { --royal: #ff6b7d; --royal-dark: #ff97a4; --royal-soft: #3a1219; --green: #4ADE80; --navy: #0a2a1e; --navy-deep: #06180f; --navy-soft: #103a2a; }
[data-theme='dark'] body::before { background:
  radial-gradient(900px 560px at 6% 4%, rgba(200, 16, 46, .14), transparent 62%),
  radial-gradient(820px 600px at 98% 18%, rgba(20, 104, 58, .20), transparent 60%); }
body::before { background:
  radial-gradient(900px 560px at 6% 4%, rgba(200, 16, 46, .16), transparent 62%),
  radial-gradient(820px 600px at 98% 18%, rgba(20, 104, 58, .22), transparent 60%),
  radial-gradient(900px 640px at 55% 104%, rgba(242, 193, 78, .20), transparent 60%); }
.section.alt { border-block-color: rgba(20, 104, 58, .18); }

.rule-top { height: 6px; background: repeating-linear-gradient(135deg, #c8102e 0 12px, #fff 12px 24px, #14683a 24px 36px, #fff 36px 48px); }
.site-header { border-bottom: 2px solid var(--xm-gold); }
.hero { background: radial-gradient(1200px 500px at 85% -10%, #1f7a4d 0%, transparent 60%), linear-gradient(165deg, #0f4a33, #06241a); }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 18px; pointer-events: none; background: radial-gradient(circle at 18px 18px, #f6faf6 0 15px, transparent 15.6px) 0 100% / 36px 18px repeat-x; }
.eyebrow::before { content: '\2744\00a0'; }

/* buttons: holly-red with a gold rim and a little green bauble on the corner; green on hover */
.btn.primary { position: relative; background: linear-gradient(180deg, #e11d3f, #a50d26); border-color: var(--xm-gold); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 4px 14px rgba(200, 16, 46, .35); }
.btn.primary:hover { background: linear-gradient(180deg, #22a15f, #0f6b3a); }
.btn.primary::after { content: ''; position: absolute; top: -5px; right: -5px; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 1.4px, #2fd16f 2px, #0f6b36 7px); box-shadow: 0 0 0 1px rgba(11, 61, 39, .55); pointer-events: none; }
.btn.ghost:not(.hero .btn.ghost):not(.site-cta .btn.ghost) { color: var(--xm-green); }

/* cards: a red or green ribbon on top, alternating */
.card, .feature, .tile { border-top: 3px solid var(--xm-red); }
.card:nth-child(even), .feature:nth-child(even), .tile:nth-child(even) { border-top-color: var(--xm-green); }
.site-footer { border-top: 5px solid transparent; border-image: repeating-linear-gradient(135deg, #c8102e 0 12px, #fff 12px 24px, #14683a 24px 36px, #fff 36px 48px) 5; }