/* ============================================================================
 * Event Themes — ONE reusable decorative-skin layer for the whole event page.
 *
 * A theme = a token block ([data-theme="x"]) + a few CC0 SVG assets. The page
 * root (#event-content) gets data-theme="<event.theme>" from event-showcase.js.
 * Sections opt in via three reusable hooks — they are NO-OPs until a theme is
 * present, so Default events render exactly as before:
 *     .thm-frame     → wood board + rope border-image + inset depth
 *     .thm-corners   → wraps .thm-corner spans (iron brackets in each corner)
 *     .thm-motif     → the theme emblem (skull) before a heading
 *
 * The countdown reads the SAME tokens (see countdown.css .cd-theme-treasure),
 * so there is one source of truth for "treasure" — no parallel styling.
 *
 * TO ADD A THEME: add one [data-theme="name"] token block below (point it at
 * that theme's assets) + set the event's `theme` field. Nothing else changes.
 * ========================================================================== */

/* ===== Theme registry (tokens) ===== */
/* Treasure — also applied to .cd-theme-treasure so the countdown is self-sufficient. */
[data-theme="treasure"],
.cd-theme-treasure{
  --thm-accent:#e6c486;
  --thm-accent-deep:#b8863c;
  --thm-parch:#f3e2bd;
  --thm-ink:#2c1c0d;
  --thm-wood-dark:#3a2613;
  --thm-text-dim:#b59b6f;
  --thm-head-font:'Pirata One','IM Fell English',Georgia,serif;
  --thm-body-font:'IM Fell English',Georgia,serif;
  --thm-board:url("../images/countdown/wood.svg");
  --thm-frame:url("../images/countdown/rope-frame.svg");
  --thm-corner:url("../images/countdown/corner-iron.svg");
  --thm-motif:url("../images/countdown/skull.svg");
  --thm-compass:url("../images/countdown/compass.svg");
}

/* ===== Reusable decoration hooks (inert until an ancestor has data-theme) ===== */
.thm-frame{position:relative;}
[data-theme] .thm-frame{
  padding:clamp(1.4rem,3.2vw,2.6rem);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.42)),var(--thm-board);
  background-size:cover,320px 320px;
  border:20px solid transparent;
  border-image:var(--thm-frame) 30 round;
  box-shadow:0 18px 50px rgba(0,0,0,.55),inset 0 0 60px rgba(0,0,0,.5);
}
.thm-corner{display:none;}
[data-theme] .thm-corners > .thm-corner{
  display:block;position:absolute;z-index:3;
  width:clamp(38px,5vw,52px);height:clamp(38px,5vw,52px);
  background:var(--thm-corner) center/contain no-repeat;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.7));
}
.thm-corner.tl{top:-15px;left:-15px;}
.thm-corner.tr{top:-15px;right:-15px;transform:rotate(90deg);}
.thm-corner.br{bottom:-15px;right:-15px;transform:rotate(180deg);}
.thm-corner.bl{bottom:-15px;left:-15px;transform:rotate(270deg);}
.thm-motif{display:none;}
[data-theme] .thm-motif{
  display:inline-block;vertical-align:middle;
  width:clamp(38px,5vw,50px);height:clamp(38px,5vw,50px);
  background:var(--thm-motif) center/contain no-repeat;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.6));
  animation:thm-sway 5s ease-in-out infinite;
}
@keyframes thm-sway{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg);}}

/* ===== Lineup dressed by the theme — SURFACE only; layout/logic untouched ===== */
[data-theme="treasure"] .schedule h2{
  font-family:var(--thm-head-font);font-weight:400;color:var(--thm-accent);
  letter-spacing:.02em;text-shadow:2px 2px 0 var(--thm-wood-dark),0 0 10px rgba(230,196,134,.4);
  display:flex;align-items:center;justify-content:center;gap:14px;
}
[data-theme="treasure"] .schedule h2 .lineup-accent{color:var(--thm-parch);}
[data-theme="treasure"] .fest-tab{color:var(--thm-text-dim);}
[data-theme="treasure"] .fest-tab.active{background:var(--thm-accent);color:var(--thm-ink);box-shadow:0 6px 18px rgba(230,196,134,.3);}
[data-theme="treasure"] .fest-tabs{background:rgba(0,0,0,.28);border-color:rgba(230,196,134,.22);}
/* stage columns become planks on the board; coral/teal stage accents are kept as-is */
[data-theme="treasure"] .fest-stage{background:rgba(0,0,0,.3);border-color:rgba(230,196,134,.24);}
/* No full-width header rectangle — the stage name sits in its own rounded pill
   (matches the hours chip), bigger + higher-contrast so the Pirata reads clean. */
[data-theme="treasure"] .fest-stage-head{background:none;flex-wrap:wrap;row-gap:8px;}
[data-theme="treasure"] .fest-stage-head .fs-name{
  font-family:var(--thm-head-font);font-weight:400;letter-spacing:.02em;
  font-size:clamp(18px,2.4vw,23px);          /* bigger on desktop, still fits narrow columns */
  white-space:nowrap;flex-shrink:0;           /* never squeeze the name into a skinny multi-line pill */
  color:var(--thm-parch);
  background:rgba(18,9,3,.62);border:1px solid rgba(230,196,134,.32);
  padding:5px 15px;border-radius:999px;
  text-shadow:1px 1px 0 rgba(0,0,0,.55);
}
[data-theme="treasure"] .fest-stage-head .fs-hours{margin-left:0;}   /* when it wraps below, sit left */
[data-theme="treasure"] .fest-stage-head .fs-hours{color:var(--thm-text-dim);background:rgba(0,0,0,.3);border-color:rgba(230,196,134,.22);}
[data-theme="treasure"] .fest-act{border-top-color:rgba(230,196,134,.12);}
[data-theme="treasure"] .fest-act .fa-title{color:#e9dcc3;}

/* ===== Mobile: thin the rope + tighten the frame (matches the countdown) ===== */
@media(max-width:560px){
  [data-theme] .thm-frame{border-width:13px;padding:16px 13px;}
  [data-theme] .thm-corners > .thm-corner{width:30px;height:30px;top:auto;bottom:auto;}
  [data-theme] .thm-corner.tl{top:-11px;left:-11px;} [data-theme] .thm-corner.tr{top:-11px;right:-11px;}
  [data-theme] .thm-corner.br{bottom:-11px;right:-11px;} [data-theme] .thm-corner.bl{bottom:-11px;left:-11px;}
}

/* ===== Accessibility ===== */
@media (prefers-reduced-motion: reduce){
  [data-theme] .thm-motif{animation:none !important;}
}