@import "./fonts/style.css";

/* Tokens */
:root {
  --font-body: "cantarell", Arial, sans-serif;
  --font-heading: "cantarell-bold", Arial, sans-serif;
  --font-haunt: "plasma-drip", "cantarell-bold", Arial, sans-serif;

  --page-max: 1000px;
  --content-pad: 20px;

  --cream: #f9f1e2;
  --cream-border: #d3b892;
  --ghost: #F8F8FF;
  --ink: #181817;
  --muted: #c8c5be;
  --paper: #ecf1ee;
  --blue: #6594B1;
  --deep-blue: #0F4C81;
  --green: #2f4f3a;
  --pink: #DDAED3;

  --haunt-black: #000000;
  --haunt-surface: #181817;
  --haunt-red: #DB1A1A;
  --haunt-dark-red: #7c0200;
  --haunt-muted-red: #A2574F;

  --page-bg: var(--paper);
  --page-text: var(--ink);
  --surface-bg: var(--paper);
  --header-bg: var(--blue);
  --footer-bg: var(--blue);
  --footer-text: whitesmoke;
  --nav-bg: var(--pink);
  --nav-bar-bg: transparent;
  --nav-text: var(--ink);
  --nav-hover: var(--green);
  --menu-bg: var(--pink);
  --link: var(--deep-blue);
  --link-visited: var(--green);
  --link-hover-bg: var(--deep-blue);
  --link-hover-text: var(--muted);
  --link-active-bg: var(--green);
  --link-active-text: #faf6ee;
  --newsletter-bg: var(--blue);
  --newsletter-text: whitesmoke;
  --pdf-bg: var(--blue);
  --pdf-hover-bg: var(--deep-blue);
  --pdf-text: #ffffff;

  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 20px;
  --shadow-soft: rgba(0, 0, 0, 0.16) 0 3px 6px;
  --shadow-raised: rgba(0, 0, 0, 0.16) 0 3px 6px, rgba(0, 0, 0, 0.23) 0 3px 6px;
  --shadow-card: rgba(0, 0, 0, 0.4) 0 10px 20px;
}

body.haunt-theme {
  --page-bg: var(--haunt-black);
  --page-text: whitesmoke;
  --surface-bg: var(--haunt-black);
  --header-bg: var(--haunt-dark-red);
  --footer-bg: var(--haunt-dark-red);
  --nav-bg: var(--haunt-red);
  --nav-bar-bg: var(--haunt-dark-red);
  --menu-bg: var(--haunt-dark-red);
  --link: var(--haunt-red);
  --link-visited: var(--haunt-muted-red);
  --link-hover-bg: var(--haunt-red);
  --link-hover-text: var(--ink);
  --newsletter-bg: var(--haunt-surface);
  --pdf-bg: var(--haunt-red);
  --pdf-hover-bg: var(--haunt-dark-red);
  --pdf-text: var(--ink);
}

/* Base */
html {
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1.2;
  background-color: var(--paper);
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: var(--page-bg);
  color: var(--page-text);
  font-family: var(--font-body);
}

#wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: var(--page-max);
  min-height: 100vh;
  margin: 0 auto;
  background-color: var(--surface-bg);
  color: var(--page-text);
}

main {
  padding: 0 var(--content-pad);
}

img {
  max-width: 100%;
  height: auto;
}

p {
  padding: 8px;
}

:where(h1, h2, h3, h4, h5, h6) {
  line-height: 1.15;
}

h1 {
  font-size: 2.1rem;
}

h2 {
  font-size: 1.7rem;
}

h3 {
  font-size: 1.4rem;
}

h4 {
  font-size: 1.2rem;
}

h5 {
  font-size: 1.1rem;
}

h6 {
  font-size: 1rem;
}

:where(h2, h3, h4, h5, h6) {
  margin: 20px 0 0;
  padding: 0 8px;
  font-family: var(--font-heading);
}

a,
a:link {
  color: var(--link);
  text-decoration: none;
}

a:visited {
  color: var(--link-visited);
}

a:hover,
a:focus {
  color: var(--link-hover-text);
  background-color: var(--link-hover-bg);
  border-radius: var(--radius-md);
}

a:active {
  color: var(--link-active-text);
  background-color: var(--link-active-bg);
  border-radius: var(--radius-md);
}

button,
input,
select,
textarea {
  font: inherit;
}

ul {
  padding-left: 0;
  list-style: none;
}

main ul > li {
  margin-bottom: 10px;
  padding-left: 25px;
  background-image: url("../media/chevron-right-svgrepo-com.svg");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 15px;
}

ol {
  list-style-type: upper-alpha;
}

blockquote {
  border-radius: var(--radius-sm);
  background-color: var(--green);
}

blockquote p {
  color: #b0ada6;
}

blockquote cite {
  color: var(--ink);
}

blockquote .cite {
  margin-bottom: 0;
  border-radius: var(--radius-sm);
  background-color: var(--muted);
}

pre {
  padding: 5px;
  border-radius: var(--radius-sm);
  background-color: var(--deep-blue);
  color: #faf6ee;
  white-space: normal;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table tr:nth-child(odd) {
  background-color: var(--green);
  color: #ffffff;
}

table tr:nth-child(even) {
  background-color: var(--deep-blue);
  color: #ffffff;
}

iframe {
  width: 100%;
  max-width: 500px;
  max-height: 500px;
  aspect-ratio: 4 / 3;
  border: 0;
  flex-shrink: 1;
}

figure {
  margin: 20px 0;
}

figure img {
  display: block;
  width: 100%;
}

figcaption {
  font-style: italic;
}

.hidden-header {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.hero-header{
  position: relative;
}

#corn-stalk-right{
  position: absolute;
  right: 0;
  bottom: 0;
}

#corn-stalk-left{
  position: absolute;
  left: 0;
  bottom: 0;
}

/* Header and navigation */
header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  padding: 15px 25px;
  background-color: var(--header-bg);
  box-shadow: var(--shadow-raised);
}

header .logo-btn {
  grid-column: 2;
  justify-self: center;
}

header .logo-btn:hover,
header .logo-btn:focus,
header .logo-btn:active {
  background-color: transparent;
}

header img {
  display: block;
  width: 85px;
  height: auto;
}

.haunt-theme header h1 {
  color: var(--ink);
  font-family: var(--font-haunt);
}

.btn-menu {
  grid-column: 3;
  justify-self: end;
  display: block;
  padding: 0 12px 0 0;
  margin: 0 5px 0 0;
  border: 0;
  background-color: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.8rem;
  text-transform: uppercase;
}

.nav-bar {
  position: relative;
  z-index: 1000;
  width: 100%;
  background-color: var(--nav-bar-bg);
}

.nav-bar nav {
  display: none;
  width: 100%;
  margin-bottom: 16px;
}

.nav-bar nav.show {
  display: block;
}

.nav-ul {
  display: block;
  padding: 0;
  margin: 0;
  background-color: var(--nav-bg);
  box-shadow: var(--shadow-raised);
  list-style: none;
}

.nav-ul > li {
  padding: 0;
  margin: 0;
  background-image: none;
}

.nav-bar a,
.nav-bar a:link,
.nav-bar a:visited {
  display: block;
  line-height: 30px;
  color: var(--nav-text);
  background-color: transparent;
  border-radius: 0;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

.nav-bar a:hover,
.nav-bar a:focus,
.nav-bar a:active {
  color: var(--nav-hover);
  background-color: transparent;
}

.dropdown {
  position: relative;
  background-color: var(--nav-bg);
}

.mega-menu {
  display: none;
  background-color: var(--menu-bg);
  box-shadow: var(--shadow-raised);
}

.mega-menu.show-mega {
  display: block;
}

.mega-menu .mega-header {
  width: 100%;
  padding: 5px;
  background-color: var(--menu-bg);
  justify-self: center;
}

.mega-header h2 {
  justify-self: center;
}

.haunt-theme .mega-menu .mega-header {
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
}

/* Footer */
footer {
  margin-top: 10px;
  background-color: var(--footer-bg);
  color: var(--footer-text);
}

footer .row {
  display: flex;
  flex-direction: column;
  padding: 15px;
}

footer .column {
  display: flex;
  flex-direction: column;
}

footer .row > div {
  border-top: 2px solid var(--footer-text);
}

footer nav {
  display: block;
  margin: 0;
}

footer li {
  padding-left: 0;
  margin-bottom: 10px;
  background-image: none;
}

footer a,
footer a:link,
footer a:visited {
  color: var(--footer-text);
  background-color: transparent;
  text-align: left;
  text-decoration: underline;
}

footer a:hover,
footer a:focus,
footer a:active {
  color: var(--muted);
  background-color: transparent;
}

footer .column img {
  width: 200px;
  padding-top: 15px;
}

/* Layout helpers */
.row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 15px;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.space-below {
  margin: 15px;
}

.hero-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
  text-align: center;
}

.scaling-image {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 20px auto;
}

.card-layout > a {
  display: block;
  height: 100%;
  color: inherit;
}

.card-layout > a:hover,
.card-layout > a:focus,
.card-layout > a:active {
  color: inherit;
  background-color: transparent;
  border-radius: 0;
}

.\32-column-grid {
  width: 100%;
}

/* Buttons and icons */
.pdf-btn,
a.pdf-btn,
a.pdf-btn:link,
a.pdf-btn:visited {
  display: inline-block;
  max-width: fit-content;
  padding: 10px 30px;
  border-radius: 50px;
  background-color: var(--pdf-bg);
  color: var(--pdf-text);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.pdf-btn h3 {
  margin: 0;
  padding: 0;
}

a.pdf-btn:hover,
a.pdf-btn:focus {
  color: #ffffff;
  background-color: var(--pdf-hover-bg);
  border-radius: 50px;
  transform: scale(1.05);
}

.socials {
  display: inline-block;
  padding-left: 30px;
  margin: 5px;
  background-repeat: no-repeat;
  background-size: 20px;
  color: #000000;
  text-decoration: none;
}

.socials:hover,
.socials:focus {
  color: var(--link);
  background-color: transparent;
}

.tiktok {
  background-image: url("../media/tiktok-simplified-black-icon.svg");
}

.facebook {
  background-image: url("../media/facebook.svg");
}

.instagram {
  background-image: url("../media/instagram.svg");
}

.twitter {
  background-image: url("../media/Twitter-X--Streamline-Bootstrap.svg");
}

.social-list li,
.social-list-large li {
  padding-left: 0;
  background-image: none;
}

.social-list a,
.social-list-large a {
  color: #000000;
  text-decoration: underline;
}

.copy-email-style {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.copy-email-style img {
  width: 1.25rem;
  height: 1.25rem;
}

.haunt-theme .copy-email-style img {
  border-radius: 50%;
  background-color: var(--haunt-red);
}

/* Forms */
form {
  display: flex;
  flex-direction: column;
  max-width: var(--page-max);
  margin: 0 auto 20px;
  padding: 48px 32px;
  border: 2px solid var(--cream-border);
  border-radius: var(--radius-xl);
  background: var(--cream);
  box-shadow: var(--shadow-soft);
}

form label {
  display: block;
  margin-bottom: 5px;
  color: #3b2b1f;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

form :where(input, textarea, select) {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--muted);
  border-radius: var(--radius-lg);
  background: #ffffff;
  color: #3b2b1f;
}

textarea {
  min-height: 9rem;
  resize: vertical;
}

.submit-btn,
.newsletter-btn {
  border: 0;
  background-color: var(--pink);
  color: var(--ink);
  cursor: pointer;
  font-weight: bold;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.submit-btn:hover,
.submit-btn:focus,
.newsletter-btn:hover,
.newsletter-btn:focus {
  transform: scale(1.05);
}

.error {
  border-color: #c62828;
}

.error-message {
  margin-top: -10px;
  margin-bottom: 5px;
  color: #8b0000;
  font-size: 0.9rem;
}

.btn-success {
  border-color: #4CAF50;
  background-color: #4CAF50;
  color: #ffffff;
  pointer-events: none;
  transition: all 0.3s ease;
}

.newsletter-section {
  padding: 40px 20px;
  margin-top: 40px;
  border-radius: var(--radius-lg);
  background-color: var(--newsletter-bg);
  color: var(--newsletter-text);
  text-align: center;
}

.newsletter-container {
  max-width: 600px;
  margin: 0 auto;
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
  align-items: center;
  max-width: none;
  padding: 0;
  margin: 20px auto 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.newsletter-form input[type="email"],
.newsletter-form input[type="text"] {
  flex: 1 1 320px;
  min-width: 0;
  padding: 12px 15px;
  border-radius: var(--radius-sm);
}

.newsletter-form .newsletter-btn,
.newsletter-form input[type="submit"] {
  flex: 0 0 auto;
  padding: 12px 25px;
  border-radius: var(--radius-sm);
}

.newsletter-form .newsletter-error,
.newsletter-form .error-message.newsletter-error {
  flex-basis: 100%;
  margin: 6px 0 0;
  color: #c62828;
  font-size: 0.95rem;
  line-height: 1.2;
}

.newsletter-form input.error {
  border-color: #c62828;
  box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.06);
}

.newsletter-form .error-message {
  margin-top: 6px;
  margin-bottom: 0;
}

.haunt-theme form {
  border-color: var(--haunt-red);
  background: var(--haunt-surface);
}

.haunt-theme form label {
  color: whitesmoke;
}

.haunt-theme form :where(input, textarea, select) {
  border-color: var(--haunt-red);
}

.haunt-theme .newsletter-form {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.haunt-theme .newsletter-section {
  border-top: 2px solid var(--haunt-red);
  border-bottom: 2px solid var(--haunt-red);
}

.haunt-theme .newsletter-btn {
  background-color: var(--haunt-dark-red);
  color: whitesmoke;
}

.haunt-theme .newsletter-btn:hover,
.haunt-theme .newsletter-btn:focus {
  background-color: var(--haunt-red);
  color: var(--ink);
}

/* Content blocks */
.questions-blog,
.sponsors-blog,
.large-card,
.form-card {
  border-radius: var(--radius-lg);
}

.questions-blog {
  padding: 15px;
  margin: 10px 0;
  background-color: var(--muted);
}

.questions-blog .about-us-img {
  float: left;
  max-width: 150px;
  margin: 5px 20px 10px 0;
}

.questions-blog ul li,
.sponsors-blog ul li {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: var(--radius-lg);
  background-image: none;
  text-align: left;
}

.questions-blog ul li {
  background-color: #edf2fa;
}

.questions-blog ul li h5,
.sponsors-blog ul li h5 {
  margin-top: 10px;
}

.sponsors-blog {
  padding: 15px;
  margin: 10px 0;
  background-color: #d0c1a1;
}

.sponsors-blog img {
  display: block;
  margin: 0 auto;
}

.sponsors-blog ul li {
  background-color: #bfedf7;
}

.large-card {
  padding: 40px 20px;
  margin: 40px 0;
  background-color: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.05) 0 1px 2px;
  text-align: center;
}

.large-card img {
  display: block;
  width: 80%;
  max-width: 350px;
  margin: 20px auto;
  border: 0;
  border-radius: 0;
}

.large-card h2 {
  margin-bottom: 10px;
  text-align: center;
}

.large-card p {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.6;
}

.form-card {
  margin: 40px 0;
}

.countdown-timer {
  padding: 15px;
  margin: 20px 0;
  border-radius: var(--radius-lg);
  background-color: var(--cream);
  box-shadow: var(--shadow-soft);
  color: var(--haunt-muted-red);
  font-family: var(--font-heading);
  font-size: 2rem;
  text-align: center;
}

.overlay {
  padding: 15px;
  border-radius: 18px;
  background-image: url("../media/unsplash-farm-shot.jpg");
  background-position: center;
  background-size: cover;
  box-shadow: var(--shadow-raised);
}

.about-us-img {
  border-radius: 100px;
}

.pay-gate-iframe {
  width: 100%;
  height: 900px;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
}

.scaled-map iframe {
  max-width: 700px;
}

/* Event cards */
.image-container,
.img-container {
  position: relative;
  display: block;
}

.haunt-card,
.family-card {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 15px;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: var(--radius-md);
  transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
}

.haunt-card > *,
.family-card > * {
  position: relative;
  z-index: 1;
}

.haunt-card {
  background-color: #03342e;
  color: var(--ghost);
}

.family-card {
  background-color: #B7BDF7;
  color: #03342e;
}

.haunt-card img,
.family-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.haunt-card::before,
.family-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: repeat;
  background-size: cover;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease-in-out;
}

.haunt-card::before {
  background-image: url("../media/tileable-smoke-free.png");
  animation: haunt-smoke 20s linear infinite;
}

.family-card::before {
  background-image: url("../media/tileable-hearts.jpeg");
  animation: haunt-smoke 10s linear infinite;
}

.haunt-card.in-view,
.family-card.in-view {
  transform: scale(1.03);
  box-shadow: var(--shadow-card);
}

.haunt-card.in-view::before,
.family-card.in-view::before {
  opacity: 0.6;
}

.haunt-card h2,
.haunt-card h3 {
  font-family: var(--font-haunt);
  text-align: center;
}

.haunt-card-btn,
.haunt-btn,
.family-card-btn {
  margin-top: auto;
  padding: 5px;
  border-radius: var(--radius-lg);
  font-size: larger;
  text-align: center;
}

.haunt-card-btn,
.haunt-card .haunt-btn {
  background-color: var(--haunt-dark-red);
  color: var(--ghost);
  font-family: var(--font-haunt);
}

.haunt-btn {
  border: 0;
  background-color: var(--haunt-dark-red);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-haunt);
}

.haunt-btn:link,
.haunt-btn:visited {
  color: var(--ink);
}

.family-card-btn {
  background-color: #FF7444;
  color: var(--ghost);
}

.family-card-btn a,
.family-card-btn a:link,
.family-card-btn a:visited,
.haunt-btn a,
.haunt-btn a:link,
.haunt-btn a:visited {
  display: block;
  color: inherit;
  background-color: transparent;
}

.haunt-card.in-view .haunt-card-btn,
.haunt-card.in-view .haunt-btn,
.haunt-card-btn:hover,
.haunt-card-btn:focus {
  background-color: var(--haunt-red);
  color: var(--ink);
}

.family-card.in-view .family-card-btn {
  background-color: #576A8F;
  color: #FFF8DE;
}

.category-tag {
  position: absolute;
  z-index: 2;
  padding: 6px;
  border-radius: 6px;
  background-color: pink;
  color: purple;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.haunt-theme .category-tag {
  background-color: var(--haunt-red);
  color: var(--ink);
}

@keyframes haunt-smoke {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 -1536px;
  }
}

/* Haunt pages */
.age-gate-wrapper {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
}

.age-gate-content {
  max-width: 450px;
  padding: 40px;
  border: 8px solid var(--ink);
  border-radius: var(--radius-lg);
  background-color: var(--haunt-dark-red);
  box-shadow: rgba(0, 0, 0, 0.5) 0 10px 20px;
  color: var(--ink);
  text-align: center;
}

.age-gate-buttons {
  display: flex;
  justify-content: space-around;
  gap: 15px;
  margin-top: 25px;
}

.age-gate-hidden {
  display: none;
}

.haunt-buy-btn,
a.haunt-buy-btn,
a.haunt-buy-btn:link,
a.haunt-buy-btn:visited {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 12px 32px;
  margin: 20px auto 0;
  border: 2px solid var(--haunt-red);
  border-radius: var(--radius-md);
  background-color: var(--haunt-dark-red);
  color: var(--ghost);
  cursor: pointer;
  font-family: var(--font-haunt);
  font-size: 1.25rem;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.haunt-buy-btn h3 {
  margin: 0;
  padding: 0;
}

.haunt-buy-btn a,
.haunt-buy-btn a:link,
.haunt-buy-btn a:visited {
  color: inherit;
  background-color: transparent;
}

.haunt-buy-btn:hover,
.haunt-buy-btn:focus,
a.haunt-buy-btn:hover,
a.haunt-buy-btn:focus {
  background-color: var(--haunt-red);
  color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.haunt-buy-btn:active,
a.haunt-buy-btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.haunt-ruleboard,
.haunt-archive {
  padding: 15px;
  margin: 10px 0;
  border-radius: var(--radius-lg);
}

.haunt-ruleboard {
  background-color: var(--haunt-dark-red);
  color: var(--ink);
}

.haunt-archive {
  background-color: #ffffff;
  color: var(--ink);
}

.redacted {
  background-color: var(--haunt-black);
  color: var(--haunt-black);
  word-break: break-all;
}

.haunt-theme .overlay {
  background-image: url("../media/foggy_corn.jpg");
}

.haunt-theme .questions-blog {
  background-color: var(--haunt-dark-red);
}

.haunt-theme .questions-blog ul li {
  background-color: var(--haunt-muted-red);
  color: var(--ink);
}

.haunt-theme .sponsors-blog {
  background-color: var(--haunt-red);
  color: var(--ink);
}

.haunt-theme .large-card {
  border: 2px solid var(--haunt-red);
  background-color: var(--haunt-surface);
  color: whitesmoke;
}

.haunt-theme .large-card h2 {
  color: var(--haunt-red);
}

.haunt-theme .large-card img {
  filter: brightness(0.9);
}

.haunt-theme .countdown-timer {
  background-color: var(--haunt-red);
  color: var(--ink);
}

.haunt-theme main ul > li {
  background-color: var(--haunt-dark-red);
  color: var(--ink);
}

.haunt-theme .questions-blog ul > li {
  background-color: var(--haunt-muted-red);
  color: var(--ink);
}

.haunt-theme .sponsors-blog ul > li {
  background-color: var(--haunt-dark-red);
  color: var(--ink);
}

.haunt-theme .questions-blog ul li,
.haunt-theme .sponsors-blog ul li,
.haunt-theme .social-list li,
.haunt-theme .social-list-large li {
  background-image: none;
}

/* Responsive */
@media (min-width: 698px) {
  header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  header img {
    order: 1;
  }

  header .hidden-header {
    position: static;
    order: 2;
    width: auto;
    height: auto;
    padding: 0;
    margin: 20px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    border: 0;
    white-space: normal;
  }

  header h1 {
    font-size: 2em;
    text-align: center;
  }

  header button {
    order: 3;
  }

  .btn-menu {
    visibility: hidden;
  }

  .nav-bar nav {
    display: block;
    margin-bottom: 0;
  }

  .nav-ul {
    display: flex;
    justify-content: space-between;
  }

  .nav-ul > li {
    padding: 8px;
  }

  .mega-menu {
    position: absolute;
    top: 100%;
    z-index: 10000;
    display: block;
    min-width: 500px;
    border-radius: var(--radius-lg);
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.6s ease, opacity 0.3s ease;
  }

  .dropdown:hover .mega-menu,
  .dropdown:focus-within .mega-menu,
  .mega-menu.show-mega {
    opacity: 1;
    visibility: visible;
  }

  footer .row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    border: 0;
  }

  footer li {
    padding: 0;
    margin: 16px 0;
    word-break: break-all;
  }

  footer .column {
    margin: 16px;
  }

  footer .row > div {
    border: 0;
  }

  footer .row .column:first-child {
    flex: 0 0 200px;
  }

  footer .row .column:not(:first-child) {
    flex: 1 1 auto;
    max-width: 200px;
  }

  .social-list-large {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  .scaling-image {
    max-width: 500px;
    min-width: 300px;
    margin-top: 20px;
  }

  .newsletter-form {
    flex-direction: row;
  }
}

@media (min-width: 750px) {
  .email-exception {
    word-break: keep-all;
  }
}

@media (min-width: 800px) {
  .nav-bar {
    background-color: var(--nav-bg);
    box-shadow: var(--shadow-soft);
  }

  .nav-ul {
    max-width: 1200px;
    padding: 0 20px;
    margin: 0 auto;
    background-color: transparent;
    box-shadow: none;
  }

  .card-layout {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 30px;
    margin-bottom: 20px;
  }

  .card-layout > a {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-self: stretch;
    height: auto;
    min-width: 0;
  }

  .card-layout > section,
  .card-layout > div {
    flex: 1;
    min-width: 0;
  }

  .card-layout > a > .haunt-card,
  .card-layout > a > .family-card {
    flex: 1;
    height: auto;
    margin-bottom: 0;
  }

  .contact-form {
    flex: 2;
    max-width: none;
  }

  .haunt-card.in-view,
  .family-card.in-view {
    transform: none;
    box-shadow: none;
  }

  .haunt-card.in-view::before,
  .family-card.in-view::before {
    opacity: 0;
  }

  .haunt-card.in-view .haunt-card-btn,
  .haunt-card.in-view .haunt-btn {
    background-color: var(--haunt-dark-red);
    color: var(--ghost);
  }

  .family-card.in-view .family-card-btn {
    background-color: #FF7444;
    color: var(--ghost);
  }

  .haunt-card:hover,
  .family-card:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-card);
  }

  .haunt-card:hover::before,
  .family-card:hover::before {
    opacity: 0.6;
  }

  .haunt-card:hover .haunt-card-btn,
  .haunt-card:hover .haunt-btn {
    background-color: var(--haunt-red);
    color: var(--ink);
  }

  .family-card:hover .family-card-btn {
    background-color: #576A8F;
    color: #FFF8DE;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega-menu,
  .pdf-btn,
  a.pdf-btn,
  .submit-btn,
  .newsletter-btn,
  .haunt-card,
  .family-card,
  .haunt-card::before,
  .family-card::before,
  .haunt-card-btn,
  .haunt-btn,
  .family-card-btn,
  .haunt-buy-btn,
  a.haunt-buy-btn {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

/* Brand headers */
.brand-header {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 178px;
  min-height: 0;
  max-height: 178px;
  padding: clamp(24px, 4vw, 44px) clamp(62px, 8vw, 110px) clamp(22px, 4vw, 42px);
  overflow: hidden;
  box-shadow: var(--shadow-raised);
}

.haunted-brand-header {
  background-image:
    linear-gradient(180deg, rgba(20, 0, 0, 0.08), rgba(20, 0, 0, 0.14)),
    url("../media/haunted-background-image.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-blend-mode: multiply, normal;
  box-shadow: inset 0 -18px 22px rgba(0, 0, 0, 0.46), var(--shadow-raised);
}

.seasonal-brand-header {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.08)),
    var(--header-bg);
}

.haunted-brand-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.22));
  mix-blend-mode: multiply;
}

.haunted-brand-header #corn-stalk-left,
.haunted-brand-header #corn-stalk-right {
  position: absolute;
  z-index: 2;
  bottom: 0;
  width: auto;
  max-width: none;
  height: 116%;
  max-height: none;
  object-fit: contain;
  object-position: bottom;
  opacity: 0.58;
  filter: grayscale(1) contrast(1.55) brightness(0.46) saturate(0);
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
}

.haunted-brand-header #corn-stalk-left {
  left: 0;
  transform: translateX(-1px);
}

.haunted-brand-header #corn-stalk-right {
  right: 0;
  transform: translateX(1px);
}

.brand-lockup {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: grid;
  justify-items: center;
  width: min(calc(100% - 124px), 560px);
  color: #f7f0e7;
  text-align: center;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

.seasonal-brand-header .brand-lockup {
  color: var(--ghost);
}

.brand-logo-link,
.brand-logo-link:link,
.brand-logo-link:visited,
.brand-logo-link:hover,
.brand-logo-link:focus,
.brand-logo-link:active {
  display: inline-grid;
  place-items: center;
  color: inherit;
  background: transparent;
  text-decoration: none;
}

.brand-header .brand-logo {
  display: block;
  order: initial;
  width: clamp(76px, 14vw, 132px);
  height: auto;
  margin-bottom: clamp(4px, 0.9vw, 10px);
}

.haunted-brand-header .brand-logo {
  opacity: 0.76;
  filter: grayscale(1) contrast(1.28) brightness(0.38) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.62));
  mix-blend-mode: multiply;
}

.seasonal-brand-header .brand-logo {
  width: clamp(78px, 13vw, 126px);
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.24));
}

.brand-header .brand-heading {
  padding: 0;
  margin: 0;
  color: inherit;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.62);
}

.brand-title,
.brand-subtitle {
  display: block;
  letter-spacing: 0;
}

.brand-title {
  font-size: clamp(1.7rem, 5.2vw, 3rem);
}

.brand-rule {
  display: block;
  width: min(100%, 340px);
  height: 2px;
  margin: clamp(4px, 0.8vw, 8px) auto clamp(5px, 0.9vw, 9px);
  background: linear-gradient(90deg, transparent, currentColor 12%, currentColor 88%, transparent);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.72);
}

.brand-subtitle {
  font-family: var(--font-heading);
  font-size: clamp(0.86rem, 2.35vw, 1.34rem);
}

.brand-header .btn-menu {
  position: absolute;
  top: clamp(16px, 3.4vw, 30px);
  right: clamp(18px, 4vw, 36px);
  z-index: 5;
  display: block;
  width: 46px;
  height: 42px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: currentColor;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  visibility: visible;
}

.haunted-brand-header .btn-menu {
  color: #f7f0e7;
}

.seasonal-brand-header .btn-menu {
  color: var(--ghost);
}

.brand-header .btn-menu::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 5px;
  width: 36px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  box-shadow:
    0 12px 0 currentColor,
    0 24px 0 currentColor;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.62));
}

.brand-header .btn-menu:hover,
.brand-header .btn-menu:focus {
  color: #ffffff;
  background: transparent;
}

@media (max-width: 697px) {
  .brand-header {
    height: 178px;
    padding: 22px 58px 20px;
  }

  .brand-lockup {
    width: min(calc(100% - 104px), 360px);
  }

  .haunted-brand-header #corn-stalk-left,
  .haunted-brand-header #corn-stalk-right {
    width: auto;
    height: 118%;
    opacity: 0.56;
  }

  .haunted-brand-header #corn-stalk-left {
    left: 0;
  }

  .haunted-brand-header #corn-stalk-right {
    right: 0;
  }

  .brand-header .brand-logo {
    width: clamp(72px, 22vw, 96px);
  }

  .brand-rule {
    width: min(100%, 260px);
  }

  .brand-header .btn-menu {
    width: 40px;
    height: 38px;
  }

  .brand-header .btn-menu::before {
    left: 5px;
    width: 31px;
    height: 4px;
    box-shadow:
      0 11px 0 currentColor,
      0 22px 0 currentColor;
  }
}

@media (max-width: 360px) {
  .brand-header {
    height: 178px;
    padding-right: 52px;
    padding-left: 52px;
  }

  .brand-title {
    font-size: 1.48rem;
  }

  .brand-subtitle {
    font-size: 0.78rem;
  }
}

@media (min-width: 698px) {
  .brand-header .brand-logo {
    width: 76px;
    margin-bottom: 5px;
  }

  .seasonal-brand-header .brand-logo {
    width: 78px;
  }

  .brand-title {
    font-size: 2.15rem;
  }

  .brand-rule {
    width: min(100%, 270px);
    margin: 4px auto 5px;
  }

  .brand-subtitle {
    font-size: 0.98rem;
  }

  .brand-header .btn-menu {
    visibility: hidden;
  }
}