/* =====================================================================
   CAFÉ AMMNA — HALLOWEEN THEME (October only). See halloween.js.
   Remove this file together with halloween.js after Halloween.
   ===================================================================== */

/* ---------- The switch, just under the ammna. logo at the top of the page (October only) ---------- */
.hw-bar {
  /* part of the page (not the fixed header), so it scrolls away instead of covering text */
  position: absolute; z-index: 49; top: calc(var(--header-h) + 16px); /* centred on the opening-hours pill */
  left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px 9px 10px; border: 2px solid #1B1222; border-radius: 16px; cursor: pointer;
  background: #EC7A2C; color: #1B1222; font-family: var(--sans); text-align: left;
  box-shadow: 0 8px 24px rgba(27, 18, 34, .35), 0 0 0 4px rgba(236, 122, 44, .25);
  transition: background .2s, transform .2s, box-shadow .2s;
  animation: hw-call 2.6s ease-in-out infinite;
}
.hw-bar:hover { transform: translateY(-2px) rotate(-1deg); background: #F39149; animation-play-state: paused; }
.hw-bar:focus-visible { outline: 3px solid #1B1222; outline-offset: 3px; }
@keyframes hw-call {
  0%, 70%, 100% { box-shadow: 0 8px 24px rgba(27, 18, 34, .35), 0 0 0 4px rgba(236, 122, 44, .25); }
  85% { box-shadow: 0 8px 24px rgba(27, 18, 34, .35), 0 0 0 12px rgba(236, 122, 44, 0); }
}
.hw-bar-icon svg { width: 36px; height: 32px; display: block; }
.hw-bar-icon-r { display: none; }
.hw-bar-text { display: flex; flex-direction: column; line-height: 1.2; }
.hw-bar-title { font-size: 1.02rem; font-weight: 700; white-space: nowrap; }
.hw-bar-sub { font-size: .8rem; font-weight: 500; opacity: .85; white-space: nowrap; }
.hw-switch {
  position: relative; width: 48px; height: 28px; border-radius: 999px; flex-shrink: 0; margin-left: 4px;
  background: #1B1222; transition: background .2s;
}
.hw-switch span {
  position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: #F6EADB; transition: transform .25s, background .25s;
}
/* switched on: dark purple tab with orange text */
html.halloween .hw-bar { background: #1B1222; color: #F6A649; border-color: #F6A649; animation: none; box-shadow: 0 8px 24px rgba(27, 18, 34, .45); }
html.halloween .hw-bar:hover { background: #2A1C34; }
html.halloween .hw-switch { background: #EC7A2C; }
html.halloween .hw-switch span { transform: translateX(20px); background: #1B1222; }
/* the Boo Box / pie pills sit right under the switch on the start page */
html.hw-has-bar .hero-promos { top: calc(var(--header-h) + 88px); }
/* keep it out of the way of the open mobile menu and the hero opening-hours pill */
.nav-open .hw-bar { display: none !important; }
@media (max-width: 600px) {
  .hw-bar { top: calc(var(--header-h) + 8px); padding: 7px 10px 7px 8px; gap: 9px; }
  .hw-bar-icon svg { width: 28px; height: 25px; }
  .hw-bar-title { font-size: .92rem; }
  .hw-bar-sub { display: none; }
  .hw-switch { width: 40px; height: 24px; }
  .hw-switch span { width: 16px; height: 16px; }
  html.halloween .hw-switch span { transform: translateX(16px); }
  html.hw-has-bar .hero-promos { top: calc(var(--header-h) + 64px); }
  html.hw-has-bar .hero-flags { top: calc(var(--header-h) + 174px); }
}

/* ---------- Colours when the theme is on ---------- */
html.halloween {
  --ivory: #F6EADB;
  --cream: #F2DCC2;
  --blush: #F7C9A0;
  --butter: #F6A649;
  --rose: #E4572E;
  --green: #7BB33A;
}
html.halloween body { background: var(--ivory); }
html.halloween .site-header { background: rgba(246, 234, 219, .94); }
html.halloween .eyebrow { color: #C4511C; }
html.halloween .eyebrow-light { color: #F6A649; }
html.halloween .hero h1 em { color: #F6A649; }
html.halloween .hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse at 82% 18%, rgba(236, 122, 44, .28), transparent 55%),
    linear-gradient(0deg, rgba(42, 12, 60, .45), rgba(42, 12, 60, .1));
}
html.halloween .press,
html.halloween .site-footer { background: #1B1222; }
html.halloween .btn-ink { background: #1B1222; }
html.halloween .btn-ink:hover { background: #3A2548; }
html.halloween .menu-feature { background: #EC7A2C; }
html.halloween .tile img,
html.halloween .strip-track img { filter: saturate(1.1) sepia(.12); }
html.halloween .site-footer { position: relative; overflow: visible; }

/* ---------- Decorations ---------- */
.hw-decor { pointer-events: none; }
.hw-decor svg { display: block; width: 100%; height: auto; }

/* Bats */
.hw-bats { position: fixed; inset: 0; z-index: 45; overflow: hidden; }
.hw-bat { position: absolute; left: -90px; width: 64px; animation: hw-fly linear infinite; }
.hw-bat svg .hw-wing-l, .hw-bat svg .hw-wing-r { transform-box: fill-box; animation: hw-flap .32s ease-in-out infinite alternate; }
.hw-bat svg .hw-wing-l { transform-origin: right center; }
.hw-bat svg .hw-wing-r { transform-origin: left center; }
.hw-bat-1 { top: 22%; animation-duration: 19s; animation-delay: -2s; }
.hw-bat-2 { top: 38%; width: 44px; animation-duration: 24s; animation-delay: -11s; }
.hw-bat-3 { top: 60%; width: 54px; animation-duration: 28s; animation-delay: -6s; }
.hw-bat-4 { top: 14%; width: 36px; animation-duration: 33s; animation-delay: -20s; }
.hw-bat-5 { top: 75%; width: 40px; animation-duration: 26s; animation-delay: -15s; }
@keyframes hw-fly {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(28vw, -6vh); }
  50%  { transform: translate(55vw, 4vh); }
  75%  { transform: translate(82vw, -5vh); }
  100% { transform: translate(calc(100vw + 180px), 2vh); }
}
@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }

/* Cobweb in the top-right corner */
.hw-web {
  position: fixed; right: 0; top: var(--header-h); transform: scaleX(-1); width: clamp(110px, 14vw, 180px); z-index: 44;
  opacity: .55; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .45));
}

/* Spider hanging from the header */
.hw-spider {
  position: fixed; top: var(--header-h); right: clamp(60px, 12vw, 200px); width: 46px; z-index: 46;
  pointer-events: auto; cursor: pointer;
  transform-origin: top center; animation: hw-dangle 5s ease-in-out infinite;
}
.hw-spider .hw-thread { display: block; width: 1.5px; height: 70px; margin: 0 auto; background: rgba(27, 18, 34, .6); }
.hw-spider.is-drop .hw-thread { animation: hw-drop 1.6s ease-in-out; }
@keyframes hw-dangle { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes hw-drop { 0%, 100% { height: 70px; } 40% { height: 260px; } 60% { height: 220px; } }

/* Skeleton peeking from the bottom-left corner */
.hw-skeleton {
  position: fixed; left: 14px; bottom: 0; width: 120px; z-index: 46;
  transform: translateY(70%); animation: hw-peek 9s ease-in-out infinite;
}
.hw-skeleton .hw-skel-hand { transform-box: fill-box; transform-origin: 50% 100%; animation: hw-wave 1.2s ease-in-out infinite alternate; }
@keyframes hw-peek {
  0%, 12%  { transform: translateY(78%); }
  22%, 60% { transform: translateY(8%); }
  70%, 100% { transform: translateY(78%); }
}
@keyframes hw-wave { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }

/* Pumpkin garland */
.hw-garland {
  height: 52px; margin: 0;
  background-color: transparent;
  background-image: var(--hw-pumpkin);
  background-repeat: repeat-x; background-size: 58px 50px; background-position: center 2px;
  position: relative;
}
.hw-garland::before {
  content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px;
  background: repeating-linear-gradient(90deg, #4E6B2B 0 14px, transparent 14px 20px);
}
.hw-garland-foot { margin-top: 0; }

/* Stitched monster peeking over the footer */
.hw-monster {
  position: absolute; right: clamp(16px, 8vw, 120px); top: 0; width: clamp(96px, 11vw, 140px);
  transform: translateY(-82%); z-index: 2;
}
.hw-monster .hw-eye { transform-box: fill-box; transform-origin: center; animation: hw-blink 5s infinite; }
@keyframes hw-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

/* Moon and ghosts in the start-page photo */
.hw-moon {
  position: absolute; right: clamp(40px, 12vw, 220px); top: calc(var(--header-h) + 90px);
  width: clamp(70px, 9vw, 130px); aspect-ratio: 1; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle at 38% 36%, #FFF6D8 0 40%, #F6D58A 70%, #E9B85A 100%);
  box-shadow: 0 0 60px 18px rgba(255, 220, 140, .35);
}
.hw-ghost { position: absolute; z-index: 0; width: 56px; opacity: .9; animation: hw-float 7s ease-in-out infinite; }
.hw-ghost-1 { right: 26%; bottom: 22%; }
.hw-ghost-2 { right: 8%; bottom: 38%; width: 40px; animation-delay: -3.5s; }
@keyframes hw-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-22px) rotate(3deg); } }

/* Witch's hat on Ammna in the "Välkommen till Ammna" photo (placed by halloween.js) */
html.halloween .intro-figure { position: relative; }
.hw-hat { position: absolute; z-index: 2; transform-origin: 50% 84%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }

/* Mini pumpkins after headings */
.hw-mini { display: inline-block; width: .8em; margin-left: .25em; vertical-align: -.02em; }

@media (max-width: 700px) {
  .hw-skeleton { width: 84px; left: 6px; }
  .hw-spider { right: 18px; width: 34px; }
  .hw-spider .hw-thread { height: 40px; }
  .hw-ghost-1 { display: none; }
  .page-order .hw-skeleton { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-bar { animation: none; }
  .hw-bat, .hw-bat svg *, .hw-spider, .hw-skeleton, .hw-skeleton *, .hw-ghost, .hw-monster * { animation: none !important; }
  .hw-bats { display: none; }
  .hw-skeleton { transform: translateY(40%); }
}