/* Temporary Halloween theme: enabled only until 1 November 2026. */
:root {
  --navy: #29242c;
  --ink: #332c30;
  --slate: #645b60;
  --gold: #b45119;
  --cream: #fcf3e7;
}
.halloween-scene, .halloween-moon, .seasonal-bats { display: block; }

/* Halloween: warm pumpkin accents and a cosy, moonlit welcome. */
.site-header,
.footer {
  background: #29242c;
  border-color: #bd733d;
}

.nav a:hover,
.footer a:hover,
.contact-panel a:hover {
  color: #ffc58b;
}

.hero::after {
  background: linear-gradient(90deg, rgba(34, 25, 32, .91), rgba(34, 25, 32, .64) 55%, rgba(34, 25, 32, .28));
}

.hero {
  min-height: max(760px, 87vh);
}

.hero-copy-panel {
  max-width: 660px;
}

.hero-copy-panel h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.25rem, 4.2vw, 4.4rem);
  font-weight: 400;
  line-height: 1.06;
  max-width: 12em;
}

.hero .hero-question {
  color: #ffc58b !important;
  font-size: .9rem;
  letter-spacing: .22em;
}

.hero-brochure-tab,
.button.primary,
.map-button {
  background: #f0a362;
  color: #29242c;
}

.map-button:hover,
.button.primary:hover {
  background: #ffc58b;
}

.hero .made-badge,
.dealer .eyebrow,
.dealer .locator-search-label,
.dealer .locator-list h4,
.dealer .locator-distance,
.contact-panel a,
.footer-column h2,
.bariatric-hero .eyebrow,
.info-hero .eyebrow,
.buxton-hero .eyebrow,
.beds-hero .eyebrow {
  color: #ffc58b;
}

.hero .made-badge {
  border-color: #d29b70;
}

.dealer {
  background: linear-gradient(130deg, #29242c, #443039);
}

.halloween-moon {
  position: absolute;
  top: 145px;
  right: clamp(20px, 4vw, 64px);
  width: clamp(220px, 25vw, 340px);
  height: auto;
  z-index: 2;
  pointer-events: none;
}

.halloween-scene {
  position: absolute;
  right: clamp(20px, 4vw, 64px);
  bottom: 20px;
  width: clamp(340px, 43vw, 650px);
  height: auto;
  z-index: 2;
  pointer-events: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid #df853d;
  outline-offset: 5px;
}

@media (max-width: 980px) {
  .hero { padding-top: 340px; padding-bottom: 340px; }
  .halloween-moon { top: 140px; width: 220px; }
  .halloween-scene { width: 420px; max-width: 85%; bottom: 12px; }
}

@media (max-width: 640px) {
  .hero { padding-top: 320px; min-height: 880px; }
  .halloween-moon { top: 150px; right: 18px; width: 190px; }
  .hero-copy-panel h1 { font-size: clamp(2.6rem, 11vw, 3.8rem); }
  .hero .hero-question { font-size: .78rem; }
  .hero { padding-bottom: 280px; }
  .halloween-scene { width: 340px; max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-brochure-tab { transition: none; }
}

/* Keep the larger Halloween scene clear of the original homepage copy. */
@media (min-width: 981px) {
  .hero-copy-panel { max-width: 53%; }
  .halloween-scene { right: 1%; }
}

/* Larger corner webs and hanging spiders remain non-interactive. */
.site-header,
.footer,
main { position: relative; }
.site-header { position: fixed; }

.site-header::after,
.footer::after,
.subpage::after {
  background: url("assets/halloween-cobweb.svg") top right / contain no-repeat;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(210px, 25vw, 340px);
  height: clamp(210px, 25vw, 340px);
  opacity: .48;
  pointer-events: none;
}

.site-header::after {
  width: 170px;
  height: 170px;
  opacity: .4;
}

.footer::after { width: 280px; height: 280px; max-width: 75vw; opacity: .45; }
.subpage::after { top: 155px; }

.seasonal-bats {
  position: absolute;
  inset: 0;
  background-image: url("assets/halloween-bats.svg"), url("assets/halloween-bats.svg"), url("assets/halloween-bats.svg");
  background-repeat: no-repeat;
  background-size: 82px 60px, 58px 42px, 72px 52px;
  background-position: right 12px top 28%, left 8px top 57%, right 12px top 86%;
  opacity: .65;
  pointer-events: none;
  z-index: 3;
}

@media (max-width: 640px) {
  .site-header::after { width: 125px; height: 125px; }
  .subpage::after { top: 175px; width: 200px; height: 200px; }
  .footer::after { width: 210px; height: 210px; }
  .seasonal-bats {
    background-size: 46px 34px, 36px 26px, 42px 31px;
    background-position: right 3px top 28%, left 2px top 57%, right 3px top 86%;
    opacity: .45;
  }
}