/* Bonfire Night dressing, linked only while SeasonalHelper#bonfire_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 {
  /* 9.6:1 on the band's night sky, so it can carry text. */
  --obi-firework-gold: #f2b632;
  --obi-night-sky: #121a2e;
}

.bonfire-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-night-sky);
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;
}

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

.bonfire-band__firework {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--obi-firework-gold);
}

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

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

.bonfire-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) {
  .bonfire-band__link { display: none; }
}

.site-navbar {
  border-bottom-color: rgba(242, 182, 50, 0.6);
}

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

/* Fireworks over the dark copy panel, the same bursts as Foodigram's: the
   photo beside it is daylight, where they got lost. The SVG animates itself,
   so no hero template needs any markup. isolation gives the panel its own
   stacking context so they sit behind the words without dropping behind the
   hero's background. */
.home-hero__copy {
  position: relative;
  isolation: isolate;
}

.home-hero__copy::before {
  position: absolute;
  inset-block-start: clamp(0.5rem, 1.5vw, 1rem);
  inset-inline-end: clamp(0.75rem, 3vw, 2rem);
  z-index: -1;
  width: clamp(9rem, 40%, 15rem);
  aspect-ratio: 280 / 190;
  content: "";
  background: url("/assets/bonfire-fireworks-animated-5fbe2721.svg") no-repeat 100% 0 / contain;
  filter: drop-shadow(0 0 0.35rem rgba(251, 191, 36, 0.35));
  pointer-events: none;
}

/* The still picture: the moving one cannot be told to stop from here. */
@media (prefers-reduced-motion: reduce) {
  .home-hero__copy::before {
    background-image: url("/assets/bonfire-fireworks-74ec836f.svg");
  }
}