/**
 * OTE Halloween Mode
 *
 * Loaded only when the ote_halloween_mode option is on (includes/halloween.php).
 * Every rule is scoped to body.ote-halloween so the normal site is untouched.
 * Asset credits: CREDITS-halloween.md.
 */

body.ote-halloween {
  --ote-hw-orange: #c2410c;      /* accents only (rules, outlines), not body text */
  --ote-hw-orange-soft: #fed7aa;
  --ote-hw-ink: #1c1917;
  --ote-hw-web-opacity: 0.32;
  --ote-hw-web-size: clamp(120px, 15vw, 260px);
}

html[data-theme="dark"] body.ote-halloween {
  --ote-hw-orange: #fb923c;
  --ote-hw-orange-soft: #7c2d12;
  --ote-hw-web-opacity: 0.26;
}

/* ---------- Accents (brand green stays the primary colour) ---------- */

body.ote-halloween ::selection {
  background: #fed7aa;
  color: #1c1917;
}

/* Thin candy-corn ribbon along the bottom of the sticky header */
body.ote-halloween header.wp-block-template-part::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: repeating-linear-gradient(
    -45deg,
    var(--ote-hw-orange) 0 10px,
    var(--ote-hw-ink) 10px 20px
  );
  pointer-events: none;
}

/* Small pumpkin tucked beside the logo (decorative, no layout change) */
body.ote-halloween header .ote-logo-link {
  position: relative;
}

body.ote-halloween header .ote-logo-link::after {
  content: "";
  position: absolute;
  top: -10px;
  right: -16px;
  width: 22px;
  height: 22px;
  background: url("../images/halloween/pumpkin.svg") center / contain no-repeat;
  transform: rotate(14deg);
  pointer-events: none;
}

body.ote-halloween main a:not(.wp-block-button__link):not(.wp-element-button):hover {
  text-decoration-color: var(--ote-hw-orange);
}

body.ote-halloween :focus-visible {
  outline-color: var(--ote-hw-orange);
}

body.ote-halloween .wp-block-button__link:hover,
body.ote-halloween .wp-element-button:hover {
  box-shadow: 0 0 0 2px var(--ote-hw-orange-soft), 0 6px 18px -6px var(--ote-hw-orange);
}

/* ---------- Corner cobwebs ----------
 * Painted behind page content (z-index -1 in the root stacking context), so
 * they can never sit on top of navigation, buttons or form controls.
 */
body.ote-halloween .ote-hw-webs {
  position: fixed;
  top: var(--ote-hw-top, 0px);
  right: 0;
  bottom: var(--ote-hw-bottom, 0px);
  left: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

body.ote-halloween .ote-hw-web {
  position: absolute;
  display: block;
  width: var(--ote-hw-web-size);
  max-width: none;
  height: auto;
  opacity: var(--ote-hw-web-opacity);
  pointer-events: none;
}

body.ote-halloween .ote-hw-web--tl { top: 0; left: 0; }
body.ote-halloween .ote-hw-web--tr { top: 0; right: 0; transform: scaleX(-1); }
body.ote-halloween .ote-hw-web--bl { bottom: 0; left: 0; transform: scaleY(-1); }
body.ote-halloween .ote-hw-web--br { bottom: 0; right: 0; transform: scale(-1, -1); }

html[data-theme="dark"] body.ote-halloween .ote-hw-web {
  filter: invert(1);
}

@media (max-width: 781px) {
  body.ote-halloween {
    --ote-hw-web-size: 96px;
    --ote-hw-web-opacity: 0.28;
  }

  body.ote-halloween .ote-hw-web--tl,
  body.ote-halloween .ote-hw-web--br {
    display: none;
  }
}

/* ---------- Attribution line (required by CC BY 4.0) ---------- */
body.ote-halloween .ote-hw-credit {
  margin: 0;
  padding: 12px 16px calc(12px + var(--ote-hw-bottom, 0px));
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
  color: inherit;
}

body.ote-halloween .ote-hw-credit a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ote-hw-orange);
}

/* ---------- Spider intro (first visit only, see halloween.js) ---------- */
body.ote-halloween .ote-hw-intro {
  position: fixed;
  inset: 0;
  z-index: 100000;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

body.ote-halloween .ote-hw-spider {
  position: absolute;
  top: 100%;
  left: 0;
  display: block;
  max-width: none;
  height: auto;
  pointer-events: none;
  will-change: transform, opacity;
  /* Light rim keeps the dark spider visible on green cards and dark mode */
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}

@media (prefers-reduced-motion: reduce) {
  body.ote-halloween .ote-hw-intro {
    display: none;
  }
}

/* ---------- Cursors: mouse/trackpad only ---------- */
@media (hover: hover) and (pointer: fine) {
  body.ote-halloween {
    cursor: url("../images/halloween/cursor-spider-32.png") 16 4, auto;
  }

  body.ote-halloween :is(
    a[href],
    button:not(:disabled),
    [role="button"],
    summary,
    label[for],
    select,
    input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"]),
    .wp-block-button__link,
    .wp-element-button,
    .wp-block-navigation-submenu__toggle,
    .wp-block-navigation__responsive-container-open,
    .wp-block-navigation__responsive-container-close,
    .btn,
    .icon-btn,
    .chip,
    .ote-chip,
    .ote-tab,
    .theme-toggle,
    .ote-theme-toggle,
    .mobile-menu-theme-toggle,
    .search-toggle,
    .mobile-search-toggle,
    .search-submit,
    .search-clear,
    .search-sheet__close,
    .is-style-ote-card-animated,
    .card--animated,
    .ote-news-grid .wp-block-post-template > li,
    .unbc-modal-close,
    .unbc-modal-button,
    .ote-app-bar-nav [class*="dark-mode"]
  ),
  body.ote-halloween :is(a[href], button, [role="button"]) * {
    cursor: url("../images/halloween/cursor-pumpkin-32.png") 16 16, pointer;
  }

  /* Keep the I-beam where people type */
  body.ote-halloween :is(
    input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="image"]),
    textarea,
    [contenteditable=""],
    [contenteditable="true"]
  ) {
    cursor: text;
  }
}

@media print {
  body.ote-halloween .ote-hw-webs,
  body.ote-halloween .ote-hw-intro,
  body.ote-halloween header .ote-logo-link::after,
  body.ote-halloween header.wp-block-template-part::after {
    display: none;
  }
}