/* =====================================================================
   Učiteľský Šuflík – vzhľad „Zima / Vianoce“
   Načítava sa LEN pri dizajne Zima, po system.css a zosit.css: rozloženie (strana zošita,
   krúžky, linajky) ostáva, mení sa nálada – zimná noc / zasnežený papier, vianočná červená,
   zlatá hviezda, ihličie. Kresby: stromček so svetielkami, gule, darček, snehuliak, padajúci sneh.
   Zatiaľ ho zapína len admin (Admin panel → Vzhľad webu).
   ===================================================================== */

:root {
    --zs-desk: #050a17;
    --zs-page: #0f1d3a;
    --zs-page-2: #0a152d;
    --zs-rule: rgba(186, 230, 253, 0.08);
    --zs-margin: rgba(239, 68, 68, 0.5);
    --zs-glow-1: rgba(56, 189, 248, 0.1);
    --zs-glow-2: rgba(239, 68, 68, 0.07);
    --zs-glow-3: rgba(250, 204, 21, 0.05);
    --zs-page-edge: rgba(186, 230, 253, 0.12);
    --zs-nav: rgba(13, 25, 50, 0.88);
    --zs-nav-border: rgba(186, 230, 253, 0.16);
    --zs-footer: rgba(5, 10, 23, 0.94);

    --m-bg: #0a152d;
    --m-surface: #12223f;
    --m-surface-2: #172a4b;
    --m-input: #0b1731;
    --m-border: rgba(150, 190, 240, 0.18);
    --m-border-strong: rgba(150, 190, 240, 0.3);
    --color-ink: #0b1731;
    --color-slate-950: #0b1731;
    --color-slate-900: #12223f;
    --color-slate-800: #1d3157;
    --color-slate-700: #2c4370;
    --color-slate-600: #48618f;
    --color-slate-500: #94a9c9;
    --color-slate-400: #b5c6de;
    --color-slate-300: #d3dfee;
    --color-slate-200: #e7eef7;
    --color-slate-100: #f4f8fc;

    /* Akcenty: vianočná červená (namiesto ružovej), zlatá hviezda (namiesto ceruzky), mätová = ihličie */
    --color-pink: #f87171;
    --color-pink-dark: #ef4444;
    --color-pencil: #fcd34d;
    --color-mint: #86efac;
    --color-mint-dark: #4ade80;
    --su-pink: #f87171;
    --su-pencil: #fcd34d;
    --su-pink-solid: #dc2626;          /* biely text 4,8 : 1 */
    --su-pink-solid-hover: #b91c1c;
}

[data-theme="light"] {
    --zs-desk: #d7e3f1;
    --zs-page: #fbfdff;
    --zs-page-2: #f3f8fd;
    --zs-rule: rgba(59, 130, 246, 0.14);
    --zs-margin: rgba(220, 38, 38, 0.4);
    --zs-glow-1: rgba(56, 189, 248, 0.07);
    --zs-glow-2: rgba(239, 68, 68, 0.04);
    --zs-glow-3: rgba(250, 204, 21, 0.05);
    --zs-page-edge: rgba(30, 60, 110, 0.1);
    --zs-nav: rgba(251, 253, 255, 0.92);
    --zs-nav-border: rgba(30, 60, 110, 0.12);
    --zs-footer: #eaf1f9;

    --m-bg: #f3f8fd;
    --m-surface: #ffffff;
    --m-surface-2: #f8fbff;
    --m-input: #f5f9fe;
    --m-border: rgba(30, 60, 110, 0.11);
    --m-border-strong: rgba(30, 60, 110, 0.19);
    --color-white: #0f1b33;
    --color-ink: #fbfdff;
    --color-slate-950: #f1f6fc;
    --color-slate-900: #ffffff;
    --color-slate-800: #dfe8f3;
    --color-slate-700: #cbd8e8;
    --color-slate-600: #9aabc2;
    --color-slate-500: #556580;      /* 5,9 : 1 */
    --color-slate-400: #44536c;
    --color-slate-300: #33415a;
    --color-slate-200: #243048;
    --color-slate-100: #172238;
    --color-slate-50: #0f1b33;

    --color-pink: #b91c1c;           /* biely text 6,5 : 1 */
    --color-pink-dark: #991b1b;
    --color-pencil: #855d00;
    --color-mint: #15703a;
    --color-mint-dark: #115e30;
    --su-pink: #b91c1c;
    --su-pencil: #855d00;
    --su-pink-solid: var(--color-pink);
    --su-pink-solid-hover: var(--color-pink-dark);
}

/* Krúžky väzby: strieborné ako mráz (ostávajú zo zošita), v tmavom režime jemne modrasté */
.bg-notebook::before { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.5)) hue-rotate(-10deg) saturate(1.2); }

@media (max-width: 1023px) {
    .bg-notebook::after {
        background-image:
            radial-gradient(700px 420px at 50% -8%, var(--zs-glow-1), transparent 62%),
            radial-gradient(600px 500px at 110% 40%, var(--zs-glow-2), transparent 60%),
            repeating-linear-gradient(to bottom, transparent 0, transparent 33px, var(--zs-rule) 33px, var(--zs-rule) 34px),
            linear-gradient(180deg, var(--zs-page) 0%, var(--zs-page-2) 100%);
    }
}

/* Jemný sneh na hornom okraji strany */
.bg-notebook::after { background-image:
        radial-gradient(1.6px 1.6px at 12% 6%, rgba(255, 255, 255, .5), transparent 60%),
        radial-gradient(1.4px 1.4px at 28% 12%, rgba(255, 255, 255, .35), transparent 60%),
        radial-gradient(1.8px 1.8px at 46% 4%, rgba(255, 255, 255, .45), transparent 60%),
        radial-gradient(1.3px 1.3px at 63% 10%, rgba(255, 255, 255, .35), transparent 60%),
        radial-gradient(1.7px 1.7px at 81% 5%, rgba(255, 255, 255, .45), transparent 60%),
        radial-gradient(1100px 520px at 50% -8%, var(--zs-glow-1), transparent 62%),
        radial-gradient(900px 600px at 105% 30%, var(--zs-glow-2), transparent 60%),
        radial-gradient(800px 500px at -5% 85%, var(--zs-glow-3), transparent 60%),
        linear-gradient(90deg, transparent 72px, var(--zs-margin) 72px, var(--zs-margin) 73.5px, transparent 73.5px),
        repeating-linear-gradient(to bottom, transparent 0, transparent 33px, var(--zs-rule) 33px, var(--zs-rule) 34px),
        linear-gradient(180deg, var(--zs-page) 0%, var(--zs-page-2) 100%); }
[data-theme="light"] .bg-notebook::after { box-shadow: 0 0 0 1px var(--zs-page-edge), 0 18px 50px -24px rgba(30, 60, 110, 0.3); }

/* Nadpis „to najlepšie“: ľadová → vianočná červená */
.text-gradient { background-image: linear-gradient(120deg, #e0f2fe 0%, #bae6fd 30%, #fca5a5 65%, #ef4444 100%); }
[data-theme="light"] .text-gradient { background-image: linear-gradient(120deg, #0369a1 0%, #b91c1c 70%, #991b1b 100%); }

/* Karta materiálu: pri prejdení myšou teplá červená žiara, páska ako zlatá stužka */
.material-card:hover {
    border-color: color-mix(in srgb, var(--color-pink) 45%, transparent);
    box-shadow: var(--m-shadow), 0 26px 50px -26px color-mix(in srgb, var(--color-pink) 55%, transparent);
}
.material-card .tape { background: color-mix(in srgb, var(--color-pencil) 32%, transparent); }

.zs-chalk { color: rgba(224, 242, 254, 0.7); text-shadow: 0 0 12px rgba(56, 189, 248, 0.45); }
[data-theme="light"] .zs-chalk { color: rgba(30, 64, 120, 0.5); text-shadow: none; }

/* ---------------------------------------------------------------------
   Kresby
   --------------------------------------------------------------------- */
.wz-glow-gold { filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.7)); }
[data-theme="light"] .zs-layer { opacity: 0.8; }
[data-theme="light"] .zs-layer [fill="#f8fafc"] { fill: #ffffff; }
[data-theme="light"] .zs-layer [stroke="#f8fafc"] { stroke: #e2e8f0; }

/* Sneh: obal padá dolu, vločka sa kolíše a otáča */
.wz-flake { position: absolute; top: -40px; color: #e0f2fe; will-change: transform; animation: wz-fall var(--d, 24s) linear infinite; animation-delay: var(--delay, 0s); filter: drop-shadow(0 0 4px rgba(186, 230, 253, .6)); }
.wz-flake > svg { display: block; will-change: transform; animation: wz-sway var(--s, 4s) ease-in-out infinite alternate; }
[data-theme="light"] .wz-flake { color: #7fb4e6; filter: none; }
@keyframes wz-fall {
    0% { transform: translate3d(0, 0, 0); opacity: 0; }
    6% { opacity: 1; }
    92% { opacity: 1; }
    100% { transform: translate3d(14px, calc(100vh + 80px), 0); opacity: 0; }
}
@keyframes wz-sway { 0% { transform: translateX(-10px) rotate(-30deg); } 100% { transform: translateX(10px) rotate(60deg); } }

/* Vianočné gule sa hojdajú na stužke */
.wz-swing { transform-origin: var(--o, 50% 0%); animation: wz-swing 5s ease-in-out infinite; }
.wz-swing-2 { animation-duration: 6.5s; animation-delay: -2s; }
@keyframes wz-swing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

/* Svetielka na stromčeku blikajú, hviezda žiari */
.wz-blink { animation: wz-blink 2.8s ease-in-out infinite; }
@keyframes wz-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.wz-star { transform-box: fill-box; transform-origin: center; animation: wz-star 3.4s ease-in-out infinite; }
@keyframes wz-star { 0%, 100% { transform: scale(1) rotate(0); filter: drop-shadow(0 0 2px #fde68a); } 50% { transform: scale(1.12) rotate(8deg); filter: drop-shadow(0 0 7px #fde68a); } }

@media (prefers-reduced-motion: reduce) {
    .wz-flake { display: none; }
    .wz-swing, .wz-blink, .wz-star { animation: none !important; }
}