/* =========================================================
   HALLOWEEN TOP BAR  (header only — nothing else on the site changes)
   Loaded after main.css. Dark mode only; light mode keeps the normal header.
   To switch it off after Halloween: see ap_enqueue_halloween_header()
   in functions.php (set the filter to false, or delete that block).
   ========================================================= */

html:not([data-theme="light"]) {
  --hw-orange: #f7881f;
  --hw-orange-hi: #ffa23d;
  --hw-orange-glow: rgba(247, 136, 31, 0.32);
  --hw-white: #f6efe6;
  --hw-art: calc(var(--ap-header-h) * 1.0);     /* corner artwork width */
  --hw-pad: calc(var(--ap-header-h) * 0.46);    /* keeps content clear of the pumpkins */
}

/* ---------- bar background + corner artwork ---------- */
html:not([data-theme="light"]) .ap-header {
  background: linear-gradient(180deg, #121518 0%, #16181a 100%);
  border-bottom: 1px solid #2f3033;
}
html:not([data-theme="light"]) .ap-header::before,
html:not([data-theme="light"]) .ap-header::after {
  content: "";
  position: absolute;
  top: 0;
  height: var(--ap-header-h);
  width: var(--hw-art);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: -1;               /* above the bar background, below all header content */
}
html:not([data-theme="light"]) .ap-header::before {
  left: 0;
  background-image: url("../img/halloween-left.webp");
  background-position: left top;
}
html:not([data-theme="light"]) .ap-header::after {
  right: 0;
  background-image: url("../img/halloween-right.webp");
  background-position: right top;
}
html:not([data-theme="light"]) .ap-header .ap-container.ap-header__row {
  padding-left: var(--hw-pad);
  padding-right: var(--hw-pad);
}

/* ---------- logo ---------- */
html:not([data-theme="light"]) .ap-header .ap-logo .ap-logo__mark {
  color: var(--hw-orange);
  background: radial-gradient(circle at 35% 30%, rgba(247,136,31,0.14), rgba(247,136,31,0.03) 70%);
  border: 1.5px solid rgba(247, 136, 31, 0.42);
  box-shadow: 0 0 16px rgba(247, 136, 31, 0.28), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
html:not([data-theme="light"]) .ap-header .ap-logo:hover .ap-logo__mark {
  color: var(--hw-orange-hi);
  box-shadow: 0 0 22px rgba(247, 136, 31, 0.45), 0 0 0 1px rgba(255,255,255,0.05) inset;
}
/* PIXORA white  |  4K.COM orange  (hard split in the text gradient) */
html:not([data-theme="light"]) .ap-header .ap-logo .ap-logo__text {
  letter-spacing: 0.02em;
  background: linear-gradient(90deg,
    var(--hw-white) 0, var(--hw-white) 48.5%,
    var(--hw-orange-hi) 48.5%, var(--hw-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 10px rgba(247, 136, 31, 0.22));
}
html:not([data-theme="light"]) .ap-header .ap-logo:hover .ap-logo__text {
  letter-spacing: 0.04em;
  text-shadow: none;
}

/* ---------- desktop: Categories button picks up the orange outline ---------- */
html:not([data-theme="light"]) .ap-header .ap-cat-dropdown__toggle {
  border: 1.5px solid var(--hw-orange);
  border-radius: 8px;
  background: #141416;
  box-shadow: 0 0 10px rgba(247, 136, 31, 0.22);
}

/* ---------- mobile (same layout as the mockup) ---------- */
@media (max-width: 720px) {
  html:not([data-theme="light"]) {
    --ap-header-h: 84px;
  }
  html:not([data-theme="light"]) .ap-header .ap-container.ap-header__row {
    gap: 0.6rem;
  }

  /* hamburger + category chevron: orange outlined rounded squares */
  html:not([data-theme="light"]) .ap-header .ap-nav-toggle,
  html:not([data-theme="light"]) .ap-header .ap-mobile-only.ap-mobile-cat-toggle {
    width: 42px;
    height: 42px;
    border: 1.5px solid var(--hw-orange);
    border-radius: 8px;
    background: #141416;
    color: var(--hw-white);
    box-shadow: 0 0 10px rgba(247, 136, 31, 0.25);
    animation: hw-btn-glow 2.6s ease-in-out infinite;
  }
  html:not([data-theme="light"]) .ap-header .ap-nav-toggle:hover,
  html:not([data-theme="light"]) .ap-header .ap-mobile-only.ap-mobile-cat-toggle:hover {
    border-color: var(--hw-orange-hi);
    color: var(--hw-orange-hi);
  }
  html:not([data-theme="light"]) .ap-header .ap-mobile-only.ap-mobile-cat-toggle[aria-expanded="true"] {
    border-color: var(--hw-orange);
    color: var(--hw-orange);
    animation: none;
    box-shadow: 0 0 14px 2px var(--hw-orange-glow);
  }
  html:not([data-theme="light"]) .ap-header .ap-nav-toggle__bar {
    width: 20px;
    border-radius: 1px;
  }

  /* search button: neutral grey outline */
  html:not([data-theme="light"]) .ap-header .ap-mobile-only.ap-mobile-search-toggle {
    width: 42px;
    height: 42px;
    border: 1.5px solid #333437;
    border-radius: 8px;
    background: #1a1b1e;
    color: var(--hw-white);
  }
  html:not([data-theme="light"]) .ap-header .ap-mobile-only.ap-mobile-search-toggle:hover {
    border-color: var(--hw-orange);
    color: var(--hw-orange);
  }

  @keyframes hw-btn-glow {
    0%, 100% { box-shadow: 0 0 8px 1px rgba(247, 136, 31, 0.22); }
    50%      { box-shadow: 0 0 16px 3px rgba(247, 136, 31, 0.36); }
  }
}

/* small phones: wordmark scales down a little so everything stays in one row */
@media (max-width: 720px) {
  html:not([data-theme="light"]) .ap-header .ap-logo .ap-logo__text {
    font-size: clamp(1.05rem, 5.4vw, 1.35rem);
  }
}
@media (max-width: 400px) {
  html:not([data-theme="light"]) .ap-header .ap-logo .ap-logo__mark {
    width: 34px;
    height: 34px;
  }
}