/* Seasonal themes. Each theme is one block of variables below (palette + its ten images); the layout rules after the
   blocks are written once and use the variables. Everything is scoped to html[data-theme="<key>"], which /assets/js/theme.js
   sets only inside a theme's window, so outside it no selector matches and no theme image is requested.
   Images: /assets/img/themes/<key>/<slot>.webp. Slots: mascot-wave, mascot-peek, mascot-sit, icon, friend, sky, flyer,
   corner (top-right), corner-mirror (top-left), hanger. The mascot, icon, friend, sky and flyer images are trimmed to their content,
   so sizes below are real sizes in px; --k-<slot> scales one slot for one theme (default 1). */

/* ---------- halloween ---------- */
html[data-theme="halloween"] {
  --mustard: #F28A1E; --asphalt: #1D1824; --seafoam: #A8E0A0;
  --th-tape: #F28A1E; --th-text: #F6B15E; --th-neon: #FFF1DE; --th-glow1: #ffa23c; --th-glow2: #ff7a1a; --th-glow3: #F28A1E;
  --im-wave: url("/assets/img/themes/halloween/mascot-wave.webp");
  --im-peek: url("/assets/img/themes/halloween/mascot-peek.webp");
  --im-sit: url("/assets/img/themes/halloween/mascot-sit.webp");
  --im-icon: url("/assets/img/themes/halloween/icon.webp");
  --im-friend: url("/assets/img/themes/halloween/friend.webp");
  --im-sky: url("/assets/img/themes/halloween/sky.webp");
  --im-flyer: url("/assets/img/themes/halloween/flyer.webp");
  --im-corner: url("/assets/img/themes/halloween/corner.webp");
  --im-mirror: url("/assets/img/themes/halloween/corner-mirror.webp");
  --im-hanger: url("/assets/img/themes/halloween/hanger.webp");
}

/* ---------- muertos ---------- */
html[data-theme="muertos"] {
  --mustard: #F5A623; --asphalt: #1B1030; --seafoam: #35C9B6;
  --th-tape: #D6336C; --th-text: #F8C77A; --th-neon: #FFF1DE; --th-glow1: #ffb347; --th-glow2: #F5A623; --th-glow3: #D6336C;
  --im-wave: url("/assets/img/themes/muertos/mascot-wave.webp");
  --im-peek: url("/assets/img/themes/muertos/mascot-peek.webp");
  --im-sit: url("/assets/img/themes/muertos/mascot-sit.webp");
  --im-icon: url("/assets/img/themes/muertos/icon.webp");
  --im-friend: url("/assets/img/themes/muertos/friend.webp");
  --im-sky: url("/assets/img/themes/muertos/sky.webp");
  --im-flyer: url("/assets/img/themes/muertos/flyer.webp");
  --im-corner: url("/assets/img/themes/muertos/corner.webp");
  --im-mirror: url("/assets/img/themes/muertos/corner-mirror.webp");
  --im-hanger: url("/assets/img/themes/muertos/hanger.webp");
}

/* ---------- natale ---------- */
html[data-theme="natale"] {
  --mustard: #F2C14E; --asphalt: #11241B; --seafoam: #9ADBA8;
  --th-tape: #C8232C; --th-text: #F6D58E; --th-neon: #FFF6E8; --th-glow1: #ff8a8a; --th-glow2: #ff3b47; --th-glow3: #C8232C;
  --im-wave: url("/assets/img/themes/natale/mascot-wave.webp");
  --im-peek: url("/assets/img/themes/natale/mascot-peek.webp");
  --im-sit: url("/assets/img/themes/natale/mascot-sit.webp");
  --im-icon: url("/assets/img/themes/natale/icon.webp");
  --im-friend: url("/assets/img/themes/natale/friend.webp");
  --im-sky: url("/assets/img/themes/natale/sky.webp");
  --im-flyer: url("/assets/img/themes/natale/flyer.webp");
  --im-corner: url("/assets/img/themes/natale/corner.webp");
  --im-mirror: url("/assets/img/themes/natale/corner-mirror.webp");
  --im-hanger: url("/assets/img/themes/natale/hanger.webp");
}

/* ---------- capodanno ---------- */
html[data-theme="capodanno"] {
  --mustard: #F2C14E; --asphalt: #0F1A33; --seafoam: #B9C7E6;
  --th-tape: #F2C14E; --th-text: #F6D58E; --th-neon: #FFFBEA; --th-glow1: #ffe28a; --th-glow2: #F2C14E; --th-glow3: #c28b1a;
  --im-wave: url("/assets/img/themes/capodanno/mascot-wave.webp");
  --im-peek: url("/assets/img/themes/capodanno/mascot-peek.webp");
  --im-sit: url("/assets/img/themes/capodanno/mascot-sit.webp");
  --im-icon: url("/assets/img/themes/capodanno/icon.webp");
  --im-friend: url("/assets/img/themes/capodanno/friend.webp");
  --im-sky: url("/assets/img/themes/capodanno/sky.webp");
  --im-flyer: url("/assets/img/themes/capodanno/flyer.webp");
  --im-corner: url("/assets/img/themes/capodanno/corner.webp");
  --im-mirror: url("/assets/img/themes/capodanno/corner-mirror.webp");
  --im-hanger: url("/assets/img/themes/capodanno/hanger.webp");
}

/* ---------- valentino ---------- */
html[data-theme="valentino"] {
  --mustard: #F4A6B5; --asphalt: #2B1019; --seafoam: #F7C6D0;
  --th-tape: #C8232C; --th-text: #F8C9D3; --th-neon: #FFEFF2; --th-glow1: #ff9fb5; --th-glow2: #ff5c7f; --th-glow3: #C8232C;
  --im-wave: url("/assets/img/themes/valentino/mascot-wave.webp");
  --im-peek: url("/assets/img/themes/valentino/mascot-peek.webp");
  --im-sit: url("/assets/img/themes/valentino/mascot-sit.webp");
  --im-icon: url("/assets/img/themes/valentino/icon.webp");
  --im-friend: url("/assets/img/themes/valentino/friend.webp");
  --im-sky: url("/assets/img/themes/valentino/sky.webp");
  --im-flyer: url("/assets/img/themes/valentino/flyer.webp");
  --im-corner: url("/assets/img/themes/valentino/corner.webp");
  --im-mirror: url("/assets/img/themes/valentino/corner-mirror.webp");
  --im-hanger: url("/assets/img/themes/valentino/hanger.webp");
}

/* ---------- radioday ---------- */
html[data-theme="radioday"] {
  --mustard: #E8A92A; --asphalt: #1E1C1A; --seafoam: #7CC8B4;
  --th-tape: #C8232C; --th-text: #F3E6CC; --th-neon: #FFE9EA; --th-glow1: #ff4a55; --th-glow2: #ff2231; --th-glow3: #C8232C;
  --im-wave: url("/assets/img/themes/radioday/mascot-wave.webp");
  --im-peek: url("/assets/img/themes/radioday/mascot-peek.webp");
  --im-sit: url("/assets/img/themes/radioday/mascot-sit.webp");
  --im-icon: url("/assets/img/themes/radioday/icon.webp");
  --im-friend: url("/assets/img/themes/radioday/friend.webp");
  --im-sky: url("/assets/img/themes/radioday/sky.webp");
  --im-flyer: url("/assets/img/themes/radioday/flyer.webp");
  --im-corner: url("/assets/img/themes/radioday/corner.webp");
  --im-mirror: url("/assets/img/themes/radioday/corner-mirror.webp");
  --im-hanger: url("/assets/img/themes/radioday/hanger.webp");
}

/* ---------- carnevale ---------- */
html[data-theme="carnevale"] {
  --mustard: #F6C945; --asphalt: #241335; --seafoam: #5FD3CF;
  --th-tape: #D6336C; --th-text: #F9D77E; --th-neon: #FFF0F7; --th-glow1: #ff7ab8; --th-glow2: #D6336C; --th-glow3: #6B3FA0;
  --im-wave: url("/assets/img/themes/carnevale/mascot-wave.webp");
  --im-peek: url("/assets/img/themes/carnevale/mascot-peek.webp");
  --im-sit: url("/assets/img/themes/carnevale/mascot-sit.webp");
  --im-icon: url("/assets/img/themes/carnevale/icon.webp");
  --im-friend: url("/assets/img/themes/carnevale/friend.webp");
  --im-sky: url("/assets/img/themes/carnevale/sky.webp");
  --im-flyer: url("/assets/img/themes/carnevale/flyer.webp");
  --im-corner: url("/assets/img/themes/carnevale/corner.webp");
  --im-mirror: url("/assets/img/themes/carnevale/corner-mirror.webp");
  --im-hanger: url("/assets/img/themes/carnevale/hanger.webp");
}

/* ---------- sanpatrizio ---------- */
html[data-theme="sanpatrizio"] {
  --mustard: #7FD18B; --asphalt: #0F2A1A; --seafoam: #A8E0A0;
  --th-tape: #E8A92A; --th-text: #BFE8B8; --th-neon: #F2FFF2; --th-glow1: #8dff9f; --th-glow2: #2fd36b; --th-glow3: #1E7A45;
  --im-wave: url("/assets/img/themes/sanpatrizio/mascot-wave.webp");
  --im-peek: url("/assets/img/themes/sanpatrizio/mascot-peek.webp");
  --im-sit: url("/assets/img/themes/sanpatrizio/mascot-sit.webp");
  --im-icon: url("/assets/img/themes/sanpatrizio/icon.webp");
  --im-friend: url("/assets/img/themes/sanpatrizio/friend.webp");
  --im-sky: url("/assets/img/themes/sanpatrizio/sky.webp");
  --im-flyer: url("/assets/img/themes/sanpatrizio/flyer.webp");
  --im-corner: url("/assets/img/themes/sanpatrizio/corner.webp");
  --im-mirror: url("/assets/img/themes/sanpatrizio/corner-mirror.webp");
  --im-hanger: url("/assets/img/themes/sanpatrizio/hanger.webp");
}

/* ---------- pasqua ---------- */
html[data-theme="pasqua"] {
  --mustard: #F6D35B; --asphalt: #1E2A26; --seafoam: #A8E0A0;
  --th-tape: #C8A8E0; --th-text: #F6E7A0; --th-neon: #FFFBEA; --th-glow1: #ffe98a; --th-glow2: #F6D35B; --th-glow3: #C8A8E0;
  --im-wave: url("/assets/img/themes/pasqua/mascot-wave.webp");
  --im-peek: url("/assets/img/themes/pasqua/mascot-peek.webp");
  --im-sit: url("/assets/img/themes/pasqua/mascot-sit.webp");
  --im-icon: url("/assets/img/themes/pasqua/icon.webp");
  --im-friend: url("/assets/img/themes/pasqua/friend.webp");
  --im-sky: url("/assets/img/themes/pasqua/sky.webp");
  --im-flyer: url("/assets/img/themes/pasqua/flyer.webp");
  --im-corner: url("/assets/img/themes/pasqua/corner.webp");
  --im-mirror: url("/assets/img/themes/pasqua/corner-mirror.webp");
  --im-hanger: url("/assets/img/themes/pasqua/hanger.webp");
}

/* ---------- musica ---------- */
html[data-theme="musica"] {
  --mustard: #F27BAE; --asphalt: #1B1230; --seafoam: #B79BFF;
  --th-tape: #F6C945; --th-text: #F6C0DA; --th-neon: #FFF0F8; --th-glow1: #ff8cc6; --th-glow2: #E8458B; --th-glow3: #6B3FA0;
  --im-wave: url("/assets/img/themes/musica/mascot-wave.webp");
  --im-peek: url("/assets/img/themes/musica/mascot-peek.webp");
  --im-sit: url("/assets/img/themes/musica/mascot-sit.webp");
  --im-icon: url("/assets/img/themes/musica/icon.webp");
  --im-friend: url("/assets/img/themes/musica/friend.webp");
  --im-sky: url("/assets/img/themes/musica/sky.webp");
  --im-flyer: url("/assets/img/themes/musica/flyer.webp");
  --im-corner: url("/assets/img/themes/musica/corner.webp");
  --im-mirror: url("/assets/img/themes/musica/corner-mirror.webp");
  --im-hanger: url("/assets/img/themes/musica/hanger.webp");
}

/* ---------- estate ---------- */
html[data-theme="estate"] {
  --mustard: #F6C945; --asphalt: #0E2A3A; --seafoam: #5FD3CF;
  --th-tape: #FF6F59; --th-text: #FFD9A0; --th-neon: #FFFBEA; --th-glow1: #7ff0ff; --th-glow2: #3ABAB4; --th-glow3: #F6C945;
  --im-wave: url("/assets/img/themes/estate/mascot-wave.webp");
  --im-peek: url("/assets/img/themes/estate/mascot-peek.webp");
  --im-sit: url("/assets/img/themes/estate/mascot-sit.webp");
  --im-icon: url("/assets/img/themes/estate/icon.webp");
  --im-friend: url("/assets/img/themes/estate/friend.webp");
  --im-sky: url("/assets/img/themes/estate/sky.webp");
  --im-flyer: url("/assets/img/themes/estate/flyer.webp");
  --im-corner: url("/assets/img/themes/estate/corner.webp");
  --im-mirror: url("/assets/img/themes/estate/corner-mirror.webp");
  --im-hanger: url("/assets/img/themes/estate/hanger.webp");
}

/* ---------- compleanno ---------- */
html[data-theme="compleanno"] {
  --mustard: #E8A92A; --asphalt: #1E1C1A; --seafoam: #7CC8B4;
  --th-tape: #C8232C; --th-text: #F6D58E; --th-neon: #FFF1DE; --th-glow1: #ffd27a; --th-glow2: #E8A92A; --th-glow3: #C8232C;
  --im-wave: url("/assets/img/themes/compleanno/mascot-wave.webp");
  --im-peek: url("/assets/img/themes/compleanno/mascot-peek.webp");
  --im-sit: url("/assets/img/themes/compleanno/mascot-sit.webp");
  --im-icon: url("/assets/img/themes/compleanno/icon.webp");
  --im-friend: url("/assets/img/themes/compleanno/friend.webp");
  --im-sky: url("/assets/img/themes/compleanno/sky.webp");
  --im-flyer: url("/assets/img/themes/compleanno/flyer.webp");
  --im-corner: url("/assets/img/themes/compleanno/corner.webp");
  --im-mirror: url("/assets/img/themes/compleanno/corner-mirror.webp");
  --im-hanger: url("/assets/img/themes/compleanno/hanger.webp");
}


/* ---------- Layout (all themes) ---------- */
html[data-theme] .neon { color: var(--th-neon); text-shadow: 0 0 6px var(--th-glow1), 0 0 18px var(--th-glow2), 0 0 38px var(--th-glow3); }
html[data-theme] .checker { background: repeating-conic-gradient(var(--asphalt) 0% 25%, var(--th-tape) 0% 50%) 0 0 / 22px 22px; }

/* Hazard-tape banner above the header (theme.js inserts it only with a theme). */
.theme-banner { margin: 0; padding: 8px var(--gutter) 6px; background: var(--asphalt); color: var(--th-text); font-family: var(--f-label); font-size: 14px; line-height: 1.35; text-align: center; border-bottom: 6px solid var(--th-tape); border-image: repeating-linear-gradient(-45deg, var(--asphalt) 0 10px, var(--th-tape) 10px 20px) 6; }
/* Pinned: the banner and, right under it, the header stay on screen while scrolling (theme.js sets --banner-h). */
.theme-banner { position: sticky; top: 0; z-index: 61; }
html[data-theme] .site-header { top: var(--banner-h, 0px); }
html[data-theme] { scroll-padding-top: calc(130px + var(--banner-h, 0px)); }
@media (min-width: 960px) {
  html[data-theme] { scroll-padding-top: calc(150px + var(--banner-h, 0px)); }
  html[data-theme] .wire-stick { top: calc(var(--docked) + var(--banner-h, 0px)); }
}
@media (max-width: 480px) { .theme-banner { padding: 6px var(--gutter) 4px; font-size: 13px; } }
html[data-theme] .theme-banner::before { content: ""; display: inline-block; width: 24px; height: 22px; margin-right: 8px; vertical-align: -5px; background: var(--im-icon) center / contain no-repeat; }

/* Header: corner in the top-right (not on phones: it would sit on the Download button); a hanging object on wide screens. */
html[data-theme] .site-header::before { content: ""; position: absolute; top: 0; right: 0; width: 72px; height: 72px; background: var(--im-corner) top right / contain no-repeat; opacity: .45; pointer-events: none; }
@media (max-width: 599px) { html[data-theme] .site-header::before { display: none; } }
@media (min-width: 960px) {
  html[data-theme] .site-header::after { content: ""; position: absolute; top: 0; left: 38%; width: calc(100px * var(--k-hanger, 1)); margin-left: calc(-50px * var(--k-hanger, 1)); height: calc(150px * var(--k-hanger, 1)); background: var(--im-hanger) top center / contain no-repeat; pointer-events: none; }
}

/* Footer: three characters on the top edge (standing, peeking, sitting), a corner at the bottom-left, the icon by the sign. */
html[data-theme] .site-footer { position: relative; }
html[data-theme] .site-footer::before { content: ""; position: absolute; left: 0; bottom: 0; width: 96px; height: 96px; background: var(--im-corner) top right / contain no-repeat; transform: rotate(180deg); opacity: .4; pointer-events: none; }
html[data-theme] .site-footer::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 40px); height: 175px; pointer-events: none; background:
  var(--im-wave) left 5% bottom 59px / auto calc(95px * var(--k-wave, 1)) no-repeat,
  var(--im-peek) left 47% bottom 59px / auto calc(35px * var(--k-peek, 1)) no-repeat,
  var(--im-sit) right 6% bottom 24px / auto calc(83px * var(--k-sit, 1)) no-repeat; }
@media (min-width: 900px) { html[data-theme] .site-footer::after { height: 235px; background:
  var(--im-wave) left 9% bottom 59px / auto calc(132px * var(--k-wave, 1)) no-repeat,
  var(--im-peek) left 46% bottom 59px / auto calc(46px * var(--k-peek, 1)) no-repeat,
  var(--im-sit) right 12% bottom 12px / auto calc(107px * var(--k-sit, 1)) no-repeat; } }
html[data-theme] .footer-sign::before { content: ""; display: inline-block; width: 38px; height: 38px; margin-right: 10px; vertical-align: -10px; background: var(--im-icon) center / contain no-repeat; }

/* Home hero: corner (left), sky object (right) and three flyers along the top; three icons on the bottom edge. */
html[data-theme] .hero { position: relative; overflow: hidden; padding-top: 72px; padding-bottom: 60px; }
html[data-theme] .hero > * { position: relative; z-index: 1; }
html[data-theme] .hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 100px; pointer-events: none; background:
  var(--im-mirror) left top / 78px 78px no-repeat,
  var(--im-sky) right 18px top 12px / auto calc(52px * var(--k-sky, 1)) no-repeat,
  var(--im-flyer) 96px 20px / auto calc(22px * var(--k-flyer, 1)) no-repeat,
  var(--im-flyer) 150px 8px / auto calc(29px * var(--k-flyer, 1)) no-repeat,
  var(--im-flyer) 214px 26px / auto calc(18px * var(--k-flyer, 1)) no-repeat; }
html[data-theme] .hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 66px; pointer-events: none; background:
  var(--im-icon) right 20px bottom 0 / auto calc(46px * var(--k-icon, 1)) no-repeat,
  var(--im-icon) right 84px bottom 0 / auto calc(31px * var(--k-icon, 1)) no-repeat,
  var(--im-icon) right 130px bottom 0 / auto calc(37px * var(--k-icon, 1)) no-repeat; }
@media (min-width: 1100px) {
  html[data-theme] .hero { padding-top: 92px; padding-bottom: 76px; }
  html[data-theme] .hero::before { height: 130px; background:
    var(--im-mirror) left top / 120px 120px no-repeat,
    var(--im-sky) right 80px top 18px / auto calc(84px * var(--k-sky, 1)) no-repeat,
    var(--im-flyer) 48% 34px / auto calc(33px * var(--k-flyer, 1)) no-repeat,
    var(--im-flyer) calc(48% + 90px) 12px / auto calc(44px * var(--k-flyer, 1)) no-repeat,
    var(--im-flyer) calc(48% + 196px) 42px / auto calc(28px * var(--k-flyer, 1)) no-repeat; }
  html[data-theme] .hero::after { height: 96px; background:
    var(--im-icon) right 60px bottom 0 / auto calc(70px * var(--k-icon, 1)) no-repeat,
    var(--im-icon) right 160px bottom 0 / auto calc(45px * var(--k-icon, 1)) no-repeat,
    var(--im-icon) right 232px bottom 0 / auto calc(55px * var(--k-icon, 1)) no-repeat; }
}

/* Inner pages (tool cards, Support, About...): corner, a friendly character, flyers and an icon in the dark band. */
html[data-theme] .stub-hero { position: relative; overflow: hidden; }
html[data-theme] .stub-hero > * { position: relative; z-index: 1; }
html[data-theme] .stub-hero::before { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; pointer-events: none; background:
  var(--im-corner) right top / 84px 84px no-repeat; }
@media (min-width: 700px) {
  html[data-theme] .stub-hero::before { background:
    var(--im-corner) right top / 120px 120px no-repeat,
    var(--im-friend) right 60px bottom 20px / auto calc(40px * var(--k-friend, 1)) no-repeat,
    var(--im-flyer) right 170px top 26px / auto calc(22px * var(--k-flyer, 1)) no-repeat,
    var(--im-flyer) right 236px top 50px / auto calc(15px * var(--k-flyer, 1)) no-repeat; }
}
@media (min-width: 1100px) {
  html[data-theme] .stub-hero::before { background:
    var(--im-corner) right top / 150px 150px no-repeat,
    var(--im-friend) right 94px bottom 22px / auto calc(56px * var(--k-friend, 1)) no-repeat,
    var(--im-flyer) right 250px top 30px / auto calc(27px * var(--k-flyer, 1)) no-repeat,
    var(--im-flyer) right 330px top 60px / auto calc(18px * var(--k-flyer, 1)) no-repeat,
    var(--im-icon) right 190px bottom 0 / auto calc(45px * var(--k-icon, 1)) no-repeat; }
}


/* the spider and the marigold garland read small at the same size as the baubles: a little bigger */
html[data-theme="halloween"] { --k-hanger: 1.2; }
html[data-theme="muertos"] { --k-hanger: 1.15; }
/* on mid-width screens the nav and the hero title leave no room under the header: the hanging object sits in the free gap between the logo and the nav and stays inside the header */
@media (min-width: 960px) and (max-width: 1199px) { html[data-theme] .site-header::after { left: 21%; width: 70px; margin-left: -35px; height: 92px; } }