/* ─────────────────────────────────────────────
   PumpItDown — Seasonal Themes
   Activated via body.theme-{name} class.
   To add a new theme:
     1. Add entry in SeasonalThemeService.cs
     2. Add a CSS block here following the pattern
   ───────────────────────────────────────────── */

/* ── Centered decor row (shows on all screen sizes) ── */
.seasonal-decor {
    font-size: 1rem;
    letter-spacing: 0.3em;
    opacity: 0.7;
    margin: 0.1rem 0 0.1rem;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

/* ─────────────────────────────────────────────
   EASTER / SPRING BANK HOLIDAYS
   Soft pastels, spring blossom, light eggs
   ───────────────────────────────────────────── */
body.theme-easter,
body.theme-mayday,
body.theme-spring {
    background: #f5f0ee;
    background-image:
        radial-gradient(ellipse 60% 40% at 10% 30%,  rgba(240,180,200,0.22) 0%, transparent 60%),
        radial-gradient(ellipse 50% 35% at 85% 20%,  rgba(180,220,140,0.18) 0%, transparent 55%),
        radial-gradient(ellipse 45% 30% at 50% 85%,  rgba(255,230,140,0.16) 0%, transparent 55%),
        radial-gradient(ellipse 40% 25% at 70% 60%,  rgba(200,180,240,0.12) 0%, transparent 50%);
}

/* Header */
body.theme-easter header,
body.theme-mayday header,
body.theme-spring header {
    background: linear-gradient(135deg, rgba(255,240,250,0.96) 0%, rgba(240,255,235,0.96) 100%);
    border-bottom: 1px solid rgba(180,210,160,0.5);
    position: relative;
}

/* Decorative eggs & blossoms — left side of header */
body.theme-easter header::before,
body.theme-mayday header::before,
body.theme-spring header::before {
    content: "🥚  🌸  🥚";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    opacity: 0.55;
    pointer-events: none;
    letter-spacing: 0.1em;
}

/* Decorative — right side of header */
body.theme-easter header::after,
body.theme-mayday header::after,
body.theme-spring header::after {
    content: "🌷  🐣  🌷";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    opacity: 0.55;
    pointer-events: none;
    letter-spacing: 0.1em;
}

/* Footer */
body.theme-easter footer,
body.theme-mayday footer,
body.theme-spring footer {
    background: linear-gradient(135deg, rgba(245,255,238,0.97) 0%, rgba(255,245,255,0.97) 100%);
    border-top: 1px solid rgba(180,210,160,0.5);
    position: relative;
}

body.theme-easter footer::before,
body.theme-mayday footer::before,
body.theme-spring footer::before {
    content: "🌸  🥚  🌸  🥚  🌸";
    position: absolute;
    left: 50%;
    top: -0.85rem;
    transform: translateX(-50%);
    font-size: 0.85rem;
    opacity: 0.45;
    pointer-events: none;
    letter-spacing: 0.15em;
    white-space: nowrap;
}

/* Side pseudo-elements hidden on small screens — decor row handles mobile */
@media (max-width: 700px) {
    body.theme-easter header::before,  body.theme-easter header::after,
    body.theme-mayday header::before,  body.theme-mayday header::after,
    body.theme-spring header::before,  body.theme-spring header::after,
    body.theme-summer header::before,  body.theme-summer header::after,
    body.theme-halloween header::before, body.theme-halloween header::after,
    body.theme-bonfire header::before,   body.theme-bonfire header::after,
    body.theme-christmas header::before, body.theme-christmas header::after,
    body.theme-newyear header::before,   body.theme-newyear header::after  { display: none; }
}


/* ─────────────────────────────────────────────
   SUMMER HOLIDAYS
   Warm golden sky, road trip energy
   ───────────────────────────────────────────── */
body.theme-summer {
    background: #f5f0e4;
    background-image:
        radial-gradient(ellipse 60% 40% at 15% 25%,  rgba(255,210,60,0.2)  0%, transparent 60%),
        radial-gradient(ellipse 50% 35% at 80% 30%,  rgba(255,160,40,0.16) 0%, transparent 55%),
        radial-gradient(ellipse 45% 30% at 45% 85%,  rgba(255,200,80,0.14) 0%, transparent 55%);
}
body.theme-summer header {
    background: linear-gradient(135deg, rgba(255,252,230,0.96) 0%, rgba(255,244,210,0.96) 100%);
    border-bottom: 1px solid rgba(210,170,40,0.4);
    position: relative;
}
body.theme-summer header::before {
    content: "☀️  🚗  ☀️";
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    font-size: 1rem; opacity: 0.5; pointer-events: none; letter-spacing: 0.1em;
}
body.theme-summer header::after {
    content: "🏖️  ⛽  🏖️";
    position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
    font-size: 1rem; opacity: 0.5; pointer-events: none; letter-spacing: 0.1em;
}
body.theme-summer footer {
    background: linear-gradient(135deg, rgba(255,252,225,0.97) 0%, rgba(255,246,210,0.97) 100%);
    border-top: 1px solid rgba(210,170,40,0.4);
    position: relative;
}
body.theme-summer footer::before {
    content: "☀️  🌊  ☀️  🌊  ☀️";
    position: absolute; left: 50%; top: -0.85rem; transform: translateX(-50%);
    font-size: 0.85rem; opacity: 0.4; pointer-events: none; letter-spacing: 0.15em; white-space: nowrap;
}


/* ─────────────────────────────────────────────
   HALLOWEEN
   Dark amber tones, keep header readable
   ───────────────────────────────────────────── */
body.theme-halloween {
    background: #f0ebe0;
    background-image:
        radial-gradient(ellipse 60% 40% at 15% 30%,  rgba(200,90,10,0.16)  0%, transparent 60%),
        radial-gradient(ellipse 50% 35% at 80% 25%,  rgba(160,60,0,0.13)   0%, transparent 55%),
        radial-gradient(ellipse 45% 30% at 50% 85%,  rgba(180,80,0,0.11)   0%, transparent 55%);
}
body.theme-halloween header {
    background: linear-gradient(135deg, rgba(40,18,0,0.97) 0%, rgba(55,22,0,0.97) 100%);
    border-bottom: 1px solid rgba(200,90,0,0.5);
    position: relative;
}
/* Invert text colours so they're readable on dark header */
body.theme-halloween header .logo-text           { color: #ff9030; }
body.theme-halloween header .logo-text span      { color: #ffcc60; }
body.theme-halloween header .tagline             { color: #ff7020; }
body.theme-halloween header .nav-links a         { color: rgba(255,180,80,0.7); }
body.theme-halloween header .nav-links a:hover,
body.theme-halloween header .nav-links a.active  { color: #ffcc60; }
body.theme-halloween header .data-badge          { color: #ff9030; border-color: rgba(200,90,0,0.4); background: rgba(200,90,0,0.1); }
body.theme-halloween header::before {
    content: "🎃  🕷️  🎃";
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    font-size: 1rem; opacity: 0.6; pointer-events: none; letter-spacing: 0.1em;
}
body.theme-halloween header::after {
    content: "🦇  👻  🦇";
    position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
    font-size: 1rem; opacity: 0.6; pointer-events: none; letter-spacing: 0.1em;
}
body.theme-halloween footer {
    background: linear-gradient(135deg, rgba(35,15,0,0.97) 0%, rgba(50,20,0,0.97) 100%);
    border-top: 1px solid rgba(200,90,0,0.5);
    color: rgba(255,160,60,0.8);
    position: relative;
}
body.theme-halloween footer a { color: #ff9030; }
body.theme-halloween footer::before {
    content: "🎃  🕸️  🎃  🕸️  🎃";
    position: absolute; left: 50%; top: -0.85rem; transform: translateX(-50%);
    font-size: 0.85rem; opacity: 0.5; pointer-events: none; letter-spacing: 0.15em; white-space: nowrap;
}


/* ─────────────────────────────────────────────
   BONFIRE NIGHT
   Warm red-orange glow
   ───────────────────────────────────────────── */
body.theme-bonfire {
    background: #f2ebe0;
    background-image:
        radial-gradient(ellipse 60% 40% at 15% 30%,  rgba(220,60,10,0.15)  0%, transparent 60%),
        radial-gradient(ellipse 50% 35% at 80% 25%,  rgba(200,80,0,0.12)   0%, transparent 55%),
        radial-gradient(ellipse 45% 30% at 50% 85%,  rgba(210,50,10,0.1)   0%, transparent 55%);
}
body.theme-bonfire header {
    background: linear-gradient(135deg, rgba(25,8,0,0.97) 0%, rgba(40,12,0,0.97) 100%);
    border-bottom: 1px solid rgba(210,70,0,0.55);
    position: relative;
}
body.theme-bonfire header .logo-text           { color: #ff6010; }
body.theme-bonfire header .logo-text span      { color: #ffa040; }
body.theme-bonfire header .tagline             { color: #ff4010; }
body.theme-bonfire header .nav-links a         { color: rgba(255,140,60,0.7); }
body.theme-bonfire header .nav-links a:hover,
body.theme-bonfire header .nav-links a.active  { color: #ffa040; }
body.theme-bonfire header::before {
    content: "🎆  🔥  🎆";
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    font-size: 1rem; opacity: 0.6; pointer-events: none; letter-spacing: 0.1em;
}
body.theme-bonfire header::after {
    content: "✨  🎇  ✨";
    position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
    font-size: 1rem; opacity: 0.6; pointer-events: none; letter-spacing: 0.1em;
}
body.theme-bonfire footer {
    background: linear-gradient(135deg, rgba(20,6,0,0.97) 0%, rgba(35,10,0,0.97) 100%);
    border-top: 1px solid rgba(210,70,0,0.55);
    color: rgba(255,120,40,0.8);
    position: relative;
}
body.theme-bonfire footer a { color: #ff6010; }
body.theme-bonfire footer::before {
    content: "🎆  🎇  🔥  🎇  🎆";
    position: absolute; left: 50%; top: -0.85rem; transform: translateX(-50%);
    font-size: 0.85rem; opacity: 0.5; pointer-events: none; letter-spacing: 0.15em; white-space: nowrap;
}


/* ─────────────────────────────────────────────
   CHRISTMAS
   Deep forest green header, elegant festive
   ───────────────────────────────────────────── */
body.theme-christmas {
    background: #f0f2ec;
    background-image:
        radial-gradient(ellipse 60% 40% at 15% 30%,  rgba(20,120,40,0.16)  0%, transparent 60%),
        radial-gradient(ellipse 50% 35% at 80% 25%,  rgba(160,20,20,0.10)  0%, transparent 55%),
        radial-gradient(ellipse 45% 30% at 50% 85%,  rgba(20,100,30,0.1)   0%, transparent 55%);
}
body.theme-christmas header {
    background: linear-gradient(135deg, rgba(6,28,10,0.97) 0%, rgba(14,40,16,0.97) 100%);
    border-bottom: 1px solid rgba(20,120,40,0.55);
    position: relative;
}
body.theme-christmas header .logo-text           { color: #90d870; }
body.theme-christmas header .logo-text span      { color: #ffd040; }
body.theme-christmas header .tagline             { color: #e84040; }
body.theme-christmas header .nav-links a         { color: rgba(180,230,160,0.7); }
body.theme-christmas header .nav-links a:hover,
body.theme-christmas header .nav-links a.active  { color: #ffd040; }
body.theme-christmas header .data-badge          { color: #90d870; border-color: rgba(20,180,60,0.4); background: rgba(20,120,40,0.12); }
body.theme-christmas header::before {
    content: "🎄  ⭐  🎄";
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    font-size: 1rem; opacity: 0.65; pointer-events: none; letter-spacing: 0.1em;
}
body.theme-christmas header::after {
    content: "🦌  🎅  🦌";
    position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
    font-size: 1rem; opacity: 0.65; pointer-events: none; letter-spacing: 0.1em;
}
body.theme-christmas footer {
    background: linear-gradient(135deg, rgba(5,22,8,0.97) 0%, rgba(12,34,14,0.97) 100%);
    border-top: 1px solid rgba(20,120,40,0.55);
    color: rgba(160,220,140,0.85);
    position: relative;
}
body.theme-christmas footer a { color: #ffd040; }
body.theme-christmas footer::before {
    content: "🎄  ❄️  ⭐  ❄️  🎄";
    position: absolute; left: 50%; top: -0.85rem; transform: translateX(-50%);
    font-size: 0.85rem; opacity: 0.55; pointer-events: none; letter-spacing: 0.15em; white-space: nowrap;
}


/* ─────────────────────────────────────────────
   NEW YEAR
   Midnight blue, gold accents, celebratory
   ───────────────────────────────────────────── */
body.theme-newyear {
    background: #eeeef4;
    background-image:
        radial-gradient(ellipse 60% 40% at 15% 30%,  rgba(60,60,200,0.12)  0%, transparent 60%),
        radial-gradient(ellipse 50% 35% at 80% 25%,  rgba(180,160,10,0.12) 0%, transparent 55%),
        radial-gradient(ellipse 45% 30% at 50% 85%,  rgba(50,50,180,0.10)  0%, transparent 55%);
}
body.theme-newyear header {
    background: linear-gradient(135deg, rgba(4,4,24,0.97) 0%, rgba(10,8,36,0.97) 100%);
    border-bottom: 1px solid rgba(180,160,10,0.5);
    position: relative;
}
body.theme-newyear header .logo-text           { color: #e8d040; }
body.theme-newyear header .logo-text span      { color: #ffe878; }
body.theme-newyear header .tagline             { color: #e03030; }
body.theme-newyear header .nav-links a         { color: rgba(200,185,80,0.7); }
body.theme-newyear header .nav-links a:hover,
body.theme-newyear header .nav-links a.active  { color: #ffe878; }
body.theme-newyear header .data-badge          { color: #e8d040; border-color: rgba(180,160,10,0.4); background: rgba(180,160,10,0.08); }
body.theme-newyear header::before {
    content: "🎉  🥂  🎉";
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    font-size: 1rem; opacity: 0.65; pointer-events: none; letter-spacing: 0.1em;
}
body.theme-newyear header::after {
    content: "✨  🎊  ✨";
    position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
    font-size: 1rem; opacity: 0.65; pointer-events: none; letter-spacing: 0.1em;
}
body.theme-newyear footer {
    background: linear-gradient(135deg, rgba(3,3,20,0.97) 0%, rgba(8,6,30,0.97) 100%);
    border-top: 1px solid rgba(180,160,10,0.5);
    color: rgba(200,185,80,0.85);
    position: relative;
}
body.theme-newyear footer a { color: #e8d040; }
body.theme-newyear footer::before {
    content: "🎆  🎉  ✨  🎉  🎆";
    position: absolute; left: 50%; top: -0.85rem; transform: translateX(-50%);
    font-size: 0.85rem; opacity: 0.55; pointer-events: none; letter-spacing: 0.15em; white-space: nowrap;
}