/* Sinterklaas (config/themes/sinterklaas.yml): mitre red, gold and chocolate on pakjesavond. Every rule
   keys on body[data-app-theme="sinterklaas"], so this file does nothing on any other day. Most of the
   costume is the app's own tokens with new values; the rest styles the partials in
   app/views/themes/sinterklaas. docs/THEMES.md. */

body[data-app-theme="sinterklaas"] {
  --sint-mitre: #a3122a;
  --sint-mitre-deep: #7c0d20;
  --sint-gold: #e0b44f;
  --sint-gold-soft: #f6eac6;
  --sint-gold-ink: #6b4a00;
  --sint-choco: #4a2a17;
  --sint-choco-hi: #8a5a36;
  --sint-pepernoot: #b8743a;
  --sint-pepernoot-dark: #7d4a20;

  --rail: var(--sint-mitre);
  --rail-ink: #fff4e6;
  --rail-ink-2: #f0c9a0;
  --rail-hover: rgba(255, 255, 255, 0.1);
  --rail-active: rgba(255, 255, 255, 0.16);

  --chart-annotation: rgba(163, 18, 42, 0.08);
  --chart-annotation-ink: var(--sint-mitre);
  --chart-endpoint: var(--sint-pepernoot);
}

@media (prefers-color-scheme: dark) {
  body[data-app-theme="sinterklaas"] {
    --sint-mitre: #5c0a18;
    --sint-mitre-deep: #3e0610;
    --sint-gold-soft: #3a2f16;
    --sint-gold-ink: #f0d18a;
    --sint-choco: #7a4a2a;
    --sint-choco-hi: #b07a4f;
    --sint-pepernoot: #c88a4e;
    --sint-pepernoot-dark: #8a5527;

    --rail-ink: #ffeede;
    --rail-ink-2: #e3b98d;

    --chart-annotation: rgba(240, 120, 140, 0.12);
    --chart-annotation-ink: var(--sint-gold);
  }
}

/* The rail: mitre red with a gold edge. */
body[data-app-theme="sinterklaas"] .rail { box-shadow: inset -4px 0 0 var(--sint-gold); }
@media (max-width: 900px) {
  body[data-app-theme="sinterklaas"] .rail { box-shadow: inset 0 -4px 0 var(--sint-gold); }
}

/* The banner above every page. */
.sint-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--sint-gold) 55%, transparent); border-radius: var(--radius); background: var(--sint-gold-soft); color: var(--sint-gold-ink); }
.sint-banner p { flex: 1; min-width: 16ch; }
.sint-banner-mark { flex: none; }
.sint-banner .btn { flex: none; }

/* A chocolate letter in the corner of each dashboard card; the first one keeps its gold foil. */
body[data-app-theme="sinterklaas"] .card { position: relative; padding-right: 72px; }
.sint-letter {
  position: absolute; top: 12px; right: 14px;
  font: 700 2.6rem/1 Georgia, "Rockwell", serif;
  color: var(--sint-choco);
  text-shadow: -1px -1px 0 var(--sint-choco-hi), 1px 2px 0 color-mix(in srgb, var(--sint-choco) 60%, black), 2px 4px 6px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.card-list > .card:first-child .sint-letter { padding: 4px 7px 2px; border-radius: 3px; background: var(--sint-gold); box-shadow: inset 0 0 0 2px var(--sint-mitre); }

/* Pepernoten falling behind "Counting the figures". They rest at the bottom, where reduced motion
   (application.css) leaves them. */
body[data-app-theme="sinterklaas"] .empty:has(.sint-pepernoten) { position: relative; overflow: hidden; }
.sint-pepernoten { position: absolute; inset: 0; pointer-events: none; }
.sint-pepernoten i {
  position: absolute; bottom: 6px; left: calc(6% + var(--i) * 14%);
  width: 14px; height: 13px; border-radius: 50% 48% 52% 50%;
  background: radial-gradient(circle at 35% 30%, var(--sint-pepernoot) 0 45%, var(--sint-pepernoot-dark) 100%);
  opacity: 0.85;
  animation: sint-fall 3.4s linear infinite;
  animation-delay: var(--d, 0s);
}
.empty:has(.sint-pepernoten) > :not(.sint-pepernoten) { position: relative; }
@keyframes sint-fall {
  from { transform: translateY(-220px) rotate(0); }
  to { transform: translateY(0) rotate(220deg); }
}

/* The same pepernoten in a dashboard panel while its chart is computed (chart_controller.js sets
   is-computing on the panel body); hidden the rest of the time. */
.panel-body > .sint-pepernoten { display: none; }
body[data-app-theme="sinterklaas"] .panel-body.is-computing { overflow: hidden; }
.panel-body.is-computing > .sint-pepernoten { display: block; }

/* Strooien: pepernoten thrown out of a search box (themes/sinterklaas/strooien_controller.js), on a
   layer above the page that takes no clicks. */
.sint-strooien { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
.sint-strooi {
  position: absolute; width: 14px; height: 13px; margin: -7px 0 0 -7px; border-radius: 50% 48% 52% 50%;
  background: radial-gradient(circle at 35% 30%, var(--sint-pepernoot) 0 45%, var(--sint-pepernoot-dark) 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}