/* Halloween dressing, linked only while SeasonalHelper#halloween_theme? is
   true. Plain CSS served by Propshaft rather than part of the Sass bundle, so
   out of season it costs visitors nothing and removing it touches no shared
   file. Everything here layers over the normal styles; none of it is needed. */

:root {
  /* 6.5:1 on --obi-ink and 5.8:1 on the band's aubergine, so it can carry text. */
  --obi-pumpkin: #e8772e;
  --obi-aubergine: #21172a;
}

.halloween-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 1.25rem;
  padding: 0.55rem 1rem;
  color: var(--obi-limewash);
  background: var(--obi-aubergine);
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;
}

.halloween-band__message {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}

.halloween-band__pumpkin {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  fill: var(--obi-pumpkin);
}

.halloween-band__stalk { fill: #6f7a3a; }
.halloween-band__face { fill: var(--obi-aubergine); }

.halloween-band__link {
  color: var(--obi-pumpkin);
  font-weight: 700;
  text-underline-offset: 0.2em;
}

.halloween-band__link:hover,
.halloween-band__link:focus-visible {
  color: var(--obi-limewash);
}

.halloween-band__link:focus-visible {
  outline: 2px solid var(--obi-limewash);
  outline-offset: 3px;
}

/* Phones already have Book a table pinned to the bottom of the screen
   (.mobile-actions), and the extra line pushed the band to three. */
@media (max-width: 760px) {
  .halloween-band__link { display: none; }
}

.site-navbar {
  border-bottom-color: rgba(232, 119, 46, 0.6);
}

/* The hero is shared by the home and history pages. */
.home-hero__eyebrow,
.home-hero h1 em {
  color: var(--obi-pumpkin);
}

/* A cobweb strung across the top corner of the copy panel. isolation gives
   the panel its own stacking context so the web can sit behind the text
   without dropping behind the hero's background. */
.home-hero__copy {
  position: relative;
  isolation: isolate;
}

.home-hero__copy::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: -1;
  width: clamp(7rem, 14vw, 11rem);
  aspect-ratio: 1;
  content: "";
  background: url("/assets/halloween-cobweb-f3ec88bb.svg") no-repeat 0 0 / contain;
  opacity: 0.32;
  pointer-events: none;
}

/* Bats over the pale sky at the top of the photo, between the chimneys and
   the trees -- against the foliage on the right they disappear. Below the
   caption. */
.home-hero__image::before {
  position: absolute;
  inset-block-start: 2%;
  inset-inline-start: 6%;
  z-index: 1;
  width: clamp(12rem, 38%, 24rem);
  aspect-ratio: 8 / 5;
  content: "";
  background: url("/assets/halloween-bats-9bab4d52.svg") no-repeat 0 0 / contain;
  pointer-events: none;
  animation: halloween-bats-drift 7s ease-in-out infinite alternate;
}

@keyframes halloween-bats-drift {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(-0.75rem, 0.5rem) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__image::before {
    animation: none;
  }
}