/*
Theme Name: Grolloween
Theme URI: https://grolloween.example/
Author: Grolloween
Description: A dark, theatrical theme for the Grolloween town tour.
Version: 0.3.39
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: grolloween
*/

:root {
  --g-black: #080706;
  --g-ink: #14100e;
  --g-cream: #f3efd9;
  --g-muted: #b8b09a;
  --g-red: #a91c12;
  --g-red-bright: #d24730;
  --g-gold: #e7b75b;
  --g-border: rgba(243, 239, 217, .16);
  --g-max: 1180px;
}

@font-face {
  font-family: "Halloween Night";
  src: url("assets/fonts/halloween-night.otf") format("opentype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Creepy Circus";
  src: url("assets/fonts/creepy-circus.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  background: var(--g-black);
  color: var(--g-cream);
  font-family: "Creepy Circus", "Trebuchet MS", Arial, sans-serif;
  line-height: 1.6;
}

a { color: var(--g-gold); }
a:hover { color: #ffd27b; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--g-border);
  background: rgba(8, 7, 6, .88);
  backdrop-filter: blur(12px);
}

.site-header__inner,
.site-main,
.site-footer__inner {
  width: min(calc(100% - 2rem), var(--g-max));
  margin: 0 auto;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 84px;
}

.site-brand {
	position: relative;
	display: block;
	width: 100px;
	height: 100px;
	flex: 0 0 100px;
	color: var(--g-cream);
	text-decoration: none;
	transition: width .45s ease, flex-basis .45s ease;
}

.site-brand__logo {
	position: relative;
	display: block;
	width: 472px;
	height: 100px;
	pointer-events: none;
}

.site-brand__trigger {
	display: block;
	width: 100px;
	height: 100px;
}

.site-brand__g,
.site-brand__suffix {
	position: absolute;
	top: 0;
	display: block;
	max-width: none;
	height: 100px;
	object-fit: fill;
	pointer-events: none;
}

.site-brand__g {
	left: 0;
	width: 90px;
}

.site-brand__reveal {
	position: absolute;
	top: 0;
	left: 102px;
	display: block;
	width: 0;
	height: 100px;
	overflow: hidden;
	transition: width .6s ease;
}

.site-brand__suffix {
	left: 0;
	width: 370px;
}

@media (hover: hover) and (min-width: 701px) {
	.site-brand:has(.site-brand__trigger:hover),
	.site-brand:focus-visible {
		width: 472px;
		flex-basis: 472px;
	}

	.site-brand:has(.site-brand__trigger:hover) .site-brand__reveal,
	.site-brand:focus-visible .site-brand__reveal {
		width: 370px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-brand,
	.site-brand__reveal,
	.hero__logo-frame {
		transition: none;
		animation: none;
	}
}

.site-header__date {
  color: var(--g-muted);
  font-size: clamp(.82rem, 1vw, .95rem);
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.main-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-navigation a {
  color: var(--g-cream);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.main-navigation a:hover { color: var(--g-red-bright); }

.site-main { padding: 2rem 0 6rem; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr);
  align-items: center;
  overflow: hidden;
  min-height: 650px;
  padding: clamp(2.5rem, 7vw, 6rem) clamp(1.4rem, 6vw, 6rem);
  border: 0;
  background: transparent;
}

.hero::before {
  display: none;
  position: absolute;
  inset: auto -2% -2px 0;
  height: 19%;
  background: rgba(0, 0, 0, .78);
  clip-path: polygon(0 100%, 0 72%, 8% 68%, 12% 40%, 16% 72%, 22% 52%, 27% 74%, 34% 30%, 40% 70%, 48% 42%, 54% 72%, 61% 25%, 67% 70%, 74% 48%, 80% 74%, 88% 38%, 94% 70%, 100% 52%, 100% 100%);
  content: "";
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 620px;
}

.hero__eyebrow,
.section-eyebrow {
  color: var(--g-red-bright);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.hero__eyebrow {
  font-size: clamp(.88rem, 1.2vw, 1.05rem);
  letter-spacing: .2em;
}

.hero h1 {
  margin: .3rem 0 1.4rem;
  color: var(--g-cream);
  font-family: "Halloween Night", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(3.6rem, 6.2vw, 6.4rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .84;
  white-space: nowrap;
  text-transform: uppercase;
  text-shadow: none;
}

.hero h1 span { display: block; color: var(--g-red-bright); }

.hero__content > p:not(.hero__eyebrow) { max-width: 520px; color: var(--g-muted); font-size: 1.1rem; }

.hero__visual {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 480px;
}

.hero__logo-frame {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1233 / 573;
  background: url("assets/images/grolloween-hero-silhouette.png") center / contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(244, 28, 24, .85)) drop-shadow(0 0 30px rgba(194, 16, 24, .5)) drop-shadow(0 22px 18px rgba(0, 0, 0, .48));
  animation: hero-candle-glow 18s linear infinite;
  transform: rotate(2deg);
}

@keyframes hero-candle-glow {
  0%, 100% {
    opacity: .23;
    filter: drop-shadow(0 0 2px rgba(244, 28, 24, .05)) drop-shadow(0 0 5px rgba(194, 16, 24, .02)) drop-shadow(0 22px 18px rgba(0, 0, 0, .48));
  }

  7% {
    opacity: .25;
    filter: drop-shadow(0 0 2px rgba(244, 28, 24, .06)) drop-shadow(0 0 5px rgba(194, 16, 24, .02)) drop-shadow(0 22px 18px rgba(0, 0, 0, .48));
  }

  10% {
    opacity: .32;
    filter: drop-shadow(0 0 4px rgba(244, 28, 24, .12)) drop-shadow(0 0 9px rgba(194, 16, 24, .05)) drop-shadow(0 22px 18px rgba(0, 0, 0, .48));
  }

  13% {
    opacity: .72;
    filter: drop-shadow(0 0 10px rgba(244, 28, 24, .6)) drop-shadow(0 0 27px rgba(194, 16, 24, .38)) drop-shadow(0 22px 18px rgba(0, 0, 0, .48));
  }

  18% {
    opacity: .46;
    filter: drop-shadow(0 0 7px rgba(244, 28, 24, .3)) drop-shadow(0 0 16px rgba(194, 16, 24, .14)) drop-shadow(0 22px 18px rgba(0, 0, 0, .48));
  }

  24% {
    opacity: .24;
    filter: drop-shadow(0 0 2px rgba(244, 28, 24, .05)) drop-shadow(0 0 5px rgba(194, 16, 24, .02)) drop-shadow(0 22px 18px rgba(0, 0, 0, .48));
  }

  31% {
    opacity: .26;
    filter: drop-shadow(0 0 2px rgba(244, 28, 24, .06)) drop-shadow(0 0 6px rgba(194, 16, 24, .02)) drop-shadow(0 22px 18px rgba(0, 0, 0, .48));
  }

  35% {
    opacity: .4;
    filter: drop-shadow(0 0 5px rgba(244, 28, 24, .18)) drop-shadow(0 0 11px rgba(194, 16, 24, .08)) drop-shadow(0 22px 18px rgba(0, 0, 0, .48));
  }

  38% {
    opacity: .9;
    filter: drop-shadow(0 0 14px rgba(244, 28, 24, .84)) drop-shadow(0 0 36px rgba(194, 16, 24, .56)) drop-shadow(0 22px 18px rgba(0, 0, 0, .48));
  }

  43% {
    opacity: .52;
    filter: drop-shadow(0 0 8px rgba(244, 28, 24, .38)) drop-shadow(0 0 18px rgba(194, 16, 24, .18)) drop-shadow(0 22px 18px rgba(0, 0, 0, .48));
  }

  50% {
    opacity: .23;
    filter: drop-shadow(0 0 2px rgba(244, 28, 24, .05)) drop-shadow(0 0 5px rgba(194, 16, 24, .02)) drop-shadow(0 22px 18px rgba(0, 0, 0, .48));
  }

  60% {
    opacity: .27;
    filter: drop-shadow(0 0 2px rgba(244, 28, 24, .06)) drop-shadow(0 0 6px rgba(194, 16, 24, .02)) drop-shadow(0 22px 18px rgba(0, 0, 0, .48));
  }

  64% {
    opacity: .36;
    filter: drop-shadow(0 0 4px rgba(244, 28, 24, .14)) drop-shadow(0 0 10px rgba(194, 16, 24, .06)) drop-shadow(0 22px 18px rgba(0, 0, 0, .48));
  }

  67% {
    opacity: .65;
    filter: drop-shadow(0 0 9px rgba(244, 28, 24, .52)) drop-shadow(0 0 24px rgba(194, 16, 24, .32)) drop-shadow(0 22px 18px rgba(0, 0, 0, .48));
  }

  73% {
    opacity: .42;
    filter: drop-shadow(0 0 6px rgba(244, 28, 24, .28)) drop-shadow(0 0 14px rgba(194, 16, 24, .12)) drop-shadow(0 22px 18px rgba(0, 0, 0, .48));
  }

  78% {
    opacity: .22;
    filter: drop-shadow(0 0 2px rgba(244, 28, 24, .04)) drop-shadow(0 0 5px rgba(194, 16, 24, .02)) drop-shadow(0 22px 18px rgba(0, 0, 0, .48));
  }

  84% {
    opacity: .25;
    filter: drop-shadow(0 0 2px rgba(244, 28, 24, .06)) drop-shadow(0 0 6px rgba(194, 16, 24, .02)) drop-shadow(0 22px 18px rgba(0, 0, 0, .48));
  }

  87% {
    opacity: .48;
    filter: drop-shadow(0 0 7px rgba(244, 28, 24, .34)) drop-shadow(0 0 16px rgba(194, 16, 24, .16)) drop-shadow(0 22px 18px rgba(0, 0, 0, .48));
  }

  90% {
    opacity: .82;
    filter: drop-shadow(0 0 12px rgba(244, 28, 24, .72)) drop-shadow(0 0 31px rgba(194, 16, 24, .44)) drop-shadow(0 22px 18px rgba(0, 0, 0, .48));
  }

  95% {
    opacity: .4;
    filter: drop-shadow(0 0 5px rgba(244, 28, 24, .18)) drop-shadow(0 0 11px rgba(194, 16, 24, .08)) drop-shadow(0 22px 18px rgba(0, 0, 0, .48));
  }

}

.hero__tag {
  position: absolute;
  right: 4%;
  bottom: 7%;
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  color: var(--g-cream);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(9deg);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 2.3rem;
  color: var(--g-muted);
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hero__facts span { display: grid; gap: .15rem; }
.hero__facts strong { color: var(--g-cream); font-size: 1rem; }

.button,
button.button,
input[type="submit"] {
  display: inline-block;
  padding: .8rem 1.15rem;
  border: 1px solid var(--g-red-bright);
  border-radius: 2px;
  background: var(--g-red);
  color: var(--g-cream);
  font-weight: 900;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.button:hover,
button.button:hover,
input[type="submit"]:hover { background: var(--g-red-bright); color: #fff; }

.home-section { padding: clamp(4rem, 9vw, 8rem) 0 1rem; }

.section-heading {
  max-width: 640px;
  margin-bottom: 2.4rem;
}

.section-heading h2,
.content-card h2 {
  margin: .3rem 0 .7rem;
  color: var(--g-cream);
  font-family: "Halloween Night", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: .92;
  text-transform: uppercase;
}

.section-heading > p:last-child { color: var(--g-muted); font-size: 1.05rem; }

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  border: 0;
  background: transparent;
}

.info-card {
  min-height: 220px;
  padding: 1.6rem 0;
  background: transparent;
}

.info-card__number { color: var(--g-red-bright); font-size: .75rem; font-weight: 900; letter-spacing: .16em; }
.info-card h3 { margin: 2.8rem 0 .6rem; color: var(--g-cream); font-size: 1.1rem; text-transform: uppercase; }
.info-card p { margin: 0; color: var(--g-muted); font-size: .92rem; }

.content-card {
  max-width: 860px;
  margin: 6rem auto 0;
  padding: clamp(1.2rem, 4vw, 3rem);
  border: 0;
  background: transparent;
}

.content-card h1 { color: var(--g-cream); line-height: 1.05; }

.content-card p,
.content-card li { color: var(--g-muted); }

.site-footer {
  border-top: 0;
  background: transparent;
}

.site-footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem 0;
  color: var(--g-muted);
  font-size: .85rem;
}

.site-footer__brand { display: flex; align-items: center; gap: .7rem; }
.site-footer__brand img { width: 72px; height: 72px; object-fit: contain; }
.site-footer p { margin: 0; }

.woocommerce form .form-row label,
.woocommerce-checkout #payment,
.woocommerce-checkout form .form-row input,
.woocommerce-checkout form .form-row textarea,
.woocommerce-checkout form .form-row select {
  color: var(--g-cream);
}

.woocommerce-checkout form .form-row input,
.woocommerce-checkout form .form-row textarea,
.woocommerce-checkout form .form-row select {
  border: 1px solid var(--g-border);
  border-radius: 0;
  background: #151413;
}

.woocommerce-checkout .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control input {
  color: #241916 !important;
}

.woocommerce-checkout .wc-block-components-text-input input::placeholder,
.woocommerce-checkout .wc-block-components-text-input textarea::placeholder,
.woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control input::placeholder {
  color: #5a4740 !important;
  opacity: 1 !important;
}

.woocommerce-checkout .wc-block-components-text-input label,
.woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control label {
  color: #5a4740 !important;
}

.woocommerce-checkout #place_order,
.woocommerce-checkout .wc-block-components-checkout-place-order-button {
  border-color: var(--g-red-bright) !important;
  background: var(--g-red) !important;
  color: var(--g-cream) !important;
}

.woocommerce-checkout #place_order:hover,
.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
  background: var(--g-red-bright) !important;
  color: #fff !important;
}

@media (max-width: 700px) {
  .site-brand { width: 50px; height: 50px; flex-basis: 50px; }
  .site-brand__logo { width: 50px; height: 50px; overflow: hidden; }
  .site-brand__trigger { width: 50px; height: 50px; }
  .site-brand__g,
  .site-brand__suffix { height: 50px; }
  .site-brand__g { width: 45px; }
  .site-brand__reveal { display: none; }
  .site-header__inner,
  .site-footer__inner { align-items: flex-start; flex-direction: column; padding: 1rem 0; }
  .site-header__inner { padding-top: 1rem; }
  .site-header__date { display: none; }
  .site-main { padding-top: .5rem; }
  .content-card { margin-top: 0; padding: 1rem 1.2rem; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding: 1rem 1.2rem 2rem; }
  .hero h1 { font-size: clamp(2.9rem, 14.5vw, 5.2rem); }
  .hero__visual { min-height: 350px; margin-top: 1rem; }
  .hero__tag { right: 8%; bottom: 4%; width: 76px; height: 76px; }
  .hero__facts { margin-top: 1.7rem; }
  .info-grid { grid-template-columns: 1fr; }
  .info-card { min-height: 0; }
  .info-card h3 { margin-top: 1.5rem; }
  .site-footer__inner { gap: .3rem; }
}

@media (min-width: 701px) {
  .site-brand {
    width: 72px;
    height: 72px;
    flex-basis: 72px;
    margin-bottom: 6px;
  }

  .site-brand__logo {
    width: 340px;
    height: 72px;
  }

  .site-brand__trigger {
    width: 72px;
    height: 72px;
  }

  .site-brand__g,
  .site-brand__suffix {
    height: 72px;
  }

  .site-brand__g {
    width: 65px;
  }

  .site-brand__reveal {
    left: 74px;
    height: 72px;
  }

  .site-brand__suffix {
    width: 266px;
  }

  .site-brand:has(.site-brand__trigger:hover),
  .site-brand:focus-visible {
    width: 340px;
    flex-basis: 340px;
  }

  .site-brand:has(.site-brand__trigger:hover) .site-brand__reveal,
  .site-brand:focus-visible .site-brand__reveal {
    width: 266px;
  }

  body.home {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  body.home .site-main {
    display: flex;
    min-height: 0;
    flex: 1;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  body.home .hero {
    width: 100%;
    min-height: 0;
    padding-top: clamp(1rem, 4vh, 2rem);
    padding-bottom: clamp(1rem, 4vh, 2rem);
  }

  body.home .hero__visual {
    min-height: 0;
  }

  body.home .hero__logo-frame {
    width: min(100%, clamp(280px, 38vh, 340px));
  }
}