/* * * * * * * * * * Homepage Redesign Additions * * * * * * * * *
   Scoped to index.html (and the attractions.html placeholder)
   only. Loaded alongside css/custom.css, which still supplies fonts,
   colors, .btnGetTickets, etc. Nothing here overrides site-wide rules
   used by other pages. */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* ---- Bebas Neue headline treatment (hero + named section headlines only) ----
   !important guards against any future higher-specificity h1/h2 rule added to
   custom.css silently reclaiming these elements back to exocetheavy. */
.bn-headline {
	font-family: "Bebas Neue", Impact, sans-serif !important;
	line-height: 0.95;
	color: #C656FF;
	text-transform: uppercase;
	text-shadow: 0px 0px 4px #000, 1px 1px 6px #000, 2px 2px 8px #000;
	margin: 0 0 10px 0;
	letter-spacing: 1px;
}
h1.bn-headline { font-size: 4.25rem; }
h2.bn-headline { font-size: 2.75rem; }
@media (max-width: 767px) {
	h1.bn-headline { font-size: 2.75rem; }
	h2.bn-headline { font-size: 2.1rem; }
}
.bn-body {
	color: #FFF;
	font-weight: 300;
	font-size: 1.25rem;
	max-width: 1092px;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 767px) {
	.bn-body {
		font-size: 1.1rem;
	}
}

/* ---- Nav: logo + Buy Tickets stay outside the collapsing hamburger ---- */
.navAlwaysOn {
	display: flex;
	align-items: center;
	gap: 10px;
}
/* .navbar-collapse carries Bootstrap's w-100 class, which sets its
   flex-basis to 100% of the row — not its content width. That makes
   the row's hypothetical total (brand + 100% + navAlwaysOn) far
   exceed the container, so flexbox's default flex-shrink:1 squeezes
   the logo down too, and since its height is fixed (not auto), the
   squeeze distorted its aspect ratio instead of scaling it down
   cleanly. flex-shrink:0 protects the logo from being shrunk at all. */
.navbar-brand {
	flex-shrink: 0;
}
.btnGetTickets.navBtn {
	font-family: "Open Sans", Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.85rem;
	letter-spacing: normal;
	padding: 8px 14px;
	white-space: nowrap;
}
/* ---- Header row order ----
   Mobile: hamburger far left, logo next to it, Buy Tickets hidden
   (the floating sticky mobile CTA already covers that job).
   Desktop: logo left, nav links center, Buy Tickets right — unchanged
   from before. */
@media (max-width: 767px) {
	.navbar > .container-fluid.rdInner {
		/* wrap (not nowrap): with the logo now taken out of flex flow
		   (absolute, below), the only two flex items are the hamburger
		   and the w-100 collapse menu. wrap lets the w-100 collapse drop
		   to its own line when opened, instead of sharing a line with
		   the hamburger — sharing a line let align-items:center drag the
		   hamburger down to the middle of the whole (now-tall) row once
		   the menu's height was added to it. */
		flex-wrap: wrap;
		/* Bootstrap's navbar container defaults to space-between, which
		   (with the collapse menu hidden/display:none pre-toggle) spreads
		   the two remaining items to opposite edges instead of grouping
		   them at the left. */
		justify-content: flex-start;
		position: relative;
	}
	.navAlwaysOn {
		order: 1;
		margin-right: 0;
	}
	.btnGetTickets.navBtn {
		display: none;
	}
	/* Logo is centered in the bar via absolute positioning (not flex
	   order) so it's centered on the full bar width regardless of the
	   hamburger's width, rather than just centered in the leftover
	   space next to it. top is a fixed px anchor (half the toggler's
	   57px height below) rather than top:50%, because top:50% is
	   relative to the container's full height — which grows a lot
	   once the dropdown menu opens below, dragging the logo down with
	   it. A fixed px anchor stays put regardless of dropdown state. */
	.navbar-brand {
		position: absolute;
		left: 50%;
		top: 28.5px;
		transform: translate(-50%, -50%);
		margin: 0;
	}
	.navbar-collapse {
		order: 3;
	}
	.navbar-toggler {
		font-size: 30px;
	}
}
@media (min-width: 768px) {
	.navbar-brand {
		order: 1;
	}
	.navbar-collapse {
		order: 2;
	}
	.navAlwaysOn {
		order: 3;
		margin-left: 12px;
	}
}
@media (min-width: 1500px) {
	.navAlwaysOn {
		margin-left: 28px;
	}
}
/* ---- Header bar: more vertical padding so the nav has room to read
   large, plus a bigger logo to match the taller bar. Mobile stays
   compact (logo/button/hamburger share one row and wrap if too wide);
   the full-size treatment is desktop-only where there's room. ---- */
.navbar.fixed-top {
	padding-top: 8px;
	padding-bottom: 8px;
}
/* .bg-dark (custom.css) ships rgba(0,0,0,0.7) with !important, which
   lets scrolled page content bleed through the fixed header. Beat it
   with a higher-specificity + !important solid color matching the
   rest of the page's dark panels (.rdSection). */
.navbar.fixed-top.bg-dark {
	background-color: #0c0a0a !important;
}
.navbar-brand img {
	height: 36px;
	width: auto;
}
/* ---- Medium desktop/laptop tier (768-1499px) ----
   The full-size treatment below (78px logo, 1rem button, 22px link
   gaps) only has room to breathe at >=1500px. Between the mobile
   hamburger breakpoint (max-width:767px, navbar-expand-md) and 1500px,
   the full nav row (logo + 5 links + Español + Buy Tickets) is wider
   than the viewport at common laptop resolutions (1280x800, 1366x768,
   and even 1440x900), pushing Buy Tickets off the right edge entirely.
   This tier shrinks the logo, link spacing, and button padding just
   enough for the full row to fit with no wrap/overflow across that
   whole range. */
@media (min-width: 768px) {
	.navbar.fixed-top {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.navbar-brand img {
		height: 46px;
	}
	.btnGetTickets.navBtn {
		font-size: 0.85rem;
		padding: 8px 16px;
	}
}
@media (min-width: 1500px) {
	.navbar.fixed-top {
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.navbar-brand img {
		height: 78px;
	}
	.btnGetTickets.navBtn {
		font-size: 1rem;
		padding: 10px 25px;
	}
}

/* ---- Header content: same centered rdInner width as the rest of the
   page, so the logo/nav/Buy Tickets read as one unit instead of the
   button stranding itself at the far edge on wide viewports. The
   navbar background itself stays full-bleed. ---- */
.navbar > .container-fluid.rdInner {
	max-width: 1140px;
	padding: 0 16px;
}
@media (min-width: 1500px) {
	.navbar > .container-fluid.rdInner {
		padding: 0 32px;
	}
}

/* ---- Nav links: Open Sans instead of Bahiana ----
   Bahiana ships one weight (400) only — font-weight was a proven
   no-op on it (identical glyph metrics 400 through 900), and
   text-stroke just muddied an already-unusual script face instead of
   fixing the "thin" look. Switching to Open Sans (same family as the
   Buy Tickets button) since it has a real 600 weight that actually
   renders bolder. White by default with a purple hover cue (inverted
   from the site-wide purple-by-default nav-link color for cleaner
   contrast on this page's black header). ---- */
#navSV .nav-link {
	font-family: "Open Sans", Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: normal;
	padding: 0.5rem 0.55rem;
	color: #FFFFFF;
	transition: color 0.2s ease;
}
@media (min-width: 1500px) {
	#navSV .nav-link {
		font-size: 18px;
		padding: 0.5rem 1rem;
	}
}
#navSV .nav-link:hover,
#navSV .nav-link:focus {
	color: #CC00FF;
}
/* ---- Active/current-page nav link ----
   Subtle purple color + underline so the current page reads at a
   glance without shouting over the rest of the nav. */
#navSV .nav-link.active {
	color: #C656FF;
	box-shadow: inset 0 -2px 0 #C656FF;
}
#navSV .nav-link.active:hover,
#navSV .nav-link.active:focus {
	color: #EDC4FF;
}
#navSV .navbar-nav {
	gap: 6px;
}
@media (min-width: 768px) {
	#navSV .navbar-nav {
		gap: 4px;
	}
}
@media (min-width: 1500px) {
	#navSV .navbar-nav {
		gap: 22px;
	}
}

/* ---- Mobile floating "Buy tickets" bar (.tixM, custom.css) clearance ----
   .tixM is fixed to the bottom of the viewport on mobile (<768px, ~76px
   tall at every mobile width) and sits on top of whatever content is
   scrolled underneath it — nothing in custom.css reserves space for it,
   so page content can end up covered (e.g. the Barn of Terror heading
   here, but the same bug is reproducible on index.html too).
   Padding the bottom of <main> keeps the last bit of scrollable content
   from ever landing under the bar, on both pages that load this
   stylesheet. */
@media (max-width: 767px) {
	main {
		padding-bottom: 100px;
	}
}

/* ---- Section panels ----
   Every major block on the redesigned homepage sits on its own fully
   opaque background so the body's fixed back.jpg texture never bleeds
   through content. Sections are separated by generous vertical padding
   alone; a full-bleed divider line would be redundant with the borders
   already on each card/value block. */
.rdSection {
	position: relative;
	background-color: #0c0a0a;
	padding: 75px 15px;
}
/* Any section jumped to directly (nav anchors, cross-page links like
   attractions.html#barn-of-terror) needs breathing room above it so
   the fixed-position nav doesn't cover the top of the section. */
.rdSection[id] {
	scroll-margin-top: 80px;
}
@media (min-width: 768px) {
	.rdSection[id] {
		scroll-margin-top: 130px;
	}
}
.rdInner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 24px;
}
@media (min-width: 768px) {
	.rdInner {
		padding: 0 32px;
	}
}

/* Contact/footer content also constrained; the purple .reachUsWrap
   band and the copyright bar itself stay full-bleed edge to edge. */
.reachUs {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 24px;
}
.SVi-footer .container-fluid {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---- Value blocks ---- */
.valueCard {
	background-color: #150f1a;
	border: 1px solid rgba(198, 86, 255, 0.3);
	border-radius: 10px;
	padding: 30px 20px;
	height: 100%;
	max-width: 380px;
	margin: 0 auto;
}
.valueCard i {
	color: #FF007E;
	font-size: 250%;
	margin-bottom: 10px;
	text-shadow: 0px 0px 4px #000, 1px 1px 6px #000, 2px 2px 8px #000;
}

/* ---- Admission card ---- */
.admissionCard {
	background-color: #150f1a;
	border: 2px solid rgba(198, 86, 255, 0.45);
	border-radius: 14px;
	padding: 35px 25px;
	max-width: 720px;
	margin: 0 auto;
}
/* Price: Bebas Neue for a clean, scannable number instead of the
   stylized exocet display font used for other headings. */
.admissionCard .uePrice {
	font-family: "Bebas Neue", Impact, sans-serif !important;
	letter-spacing: 1px;
}
.ueIncludes {
	list-style: none;
	margin: 15px 0 0;
	padding: 0;
	text-align: left;
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}
.ueIncludes li {
	position: relative;
	padding: 4px 0 4px 22px;
}
.ueIncludes li::before {
	content: "\2726";
	position: absolute;
	left: 0;
	color: #C656FF;
	font-size: 90%;
}
.ueUnlimited {
	margin: 20px auto 30px;
	max-width: 480px;
	font-weight: 700;
	color: #FF007E;
	text-shadow: 0px 0px 4px #000, 1px 1px 6px #000;
}

/* ---- Schedule & location cards ---- */
.infoCard {
	background-color: #150f1a;
	border: 1px solid rgba(198, 86, 255, 0.3);
	border-radius: 10px;
	padding: 30px 25px;
	height: 100%;
	max-width: 520px;
	margin: 0 auto;
}
.infoCard h3 {
	margin-bottom: 12px;
}
.infoCard .infoCardImg {
	border-radius: 8px;
	margin-top: 15px;
}
.mapWrap {
	border-radius: 8px;
	overflow: hidden;
	margin-top: 15px;
	line-height: 0;
}
.mapWrap iframe {
	display: block;
	width: 100%;
	height: 300px;
	border: 0;
}

/* ---- Attraction cards ---- */
.attrCard {
	display: block;
	height: 100%;
	color: #EDC4FF !important;
	overflow: hidden;
	background-color: #150f1a;
	border: 1px solid rgba(198, 86, 255, 0.3);
	border-radius: 10px;
	max-width: 400px;
	margin: 0 auto;
}
.attrCard:hover, .attrCard:focus, .attrCard:active {
	color: #FFF !important;
	border-color: rgba(198, 86, 255, 0.7);
}
.attrCard .attrCardImgWrap {
	/* Matches the source images' native ~694x300 ratio so object-fit:
	   cover doesn't crop into the baked-in title text on the left/right
	   edges the way a forced 16:9 box did. */
	width: 100%;
	aspect-ratio: 694 / 300;
	overflow: hidden;
	border-radius: 9px 9px 0 0;
}
.attrCard .attrCardImgWrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}
.attrCard:hover .attrCardImgWrap img {
	transform: scale(1.05);
}
.attrCard .attrCardBody {
	padding: 15px;
}
.attrCard .attrCardBody h3 {
	margin-bottom: 6px;
}
.attrCard .attrCardBody p {
	margin: 0;
	font-weight: 300;
	line-height: 1.5;
}

/* ---- Quiet SEO copy block: plain, no card treatment ---- */
.seoText {
	font-weight: 300;
	font-size: 90%;
	line-height: 1.6;
	color: #C9AEDC;
	max-width: 900px;
	margin: 0 auto;
}
.seoText p {
	margin: 0 0 14px 0;
}
.seoText p:last-child {
	margin-bottom: 0;
}

/* ---- Hero video: true 16:9 box matching the self-hosted clip's
   native 1280x720 dimensions, so it fills the frame with no
   letterboxing or crop distortion. ---- */
.video-outer {
	width: 100%;
	aspect-ratio: 16 / 9;
	position: relative;
	margin-bottom: 0;
	overflow: hidden;
}
.video-cont {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
.video-cont video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

/* ---- Page header (attractions.html, and any other non-video-hero
   interior page) ----
   The homepage gets away with .rdSection's default 75px top padding
   because the fixed nav overlays the hero video, not text — the video
   block itself supplies the offset. A page whose first section is
   text needs enough top padding to actually clear the fixed nav
   (128px tall on desktop, 83px on mobile) instead of being covered by
   it. */
.pageHead {
	padding-top: 150px;
}
@media (max-width: 767px) {
	.pageHead {
		padding-top: 110px;
	}
}

/* ---- Attraction detail sections (attractions.html) ----
   Full-width row split into two equal columns; a hairline top border
   is enough to separate rows since every section shares the same
   opaque background already (see .rdSection). Image column is always
   first in markup so mobile stacking puts the image before the text
   with no extra CSS; the col-md-* order-md-* utilities (from
   Bootstrap, already loaded) handle the desktop-only alternation. */
.attrDetail {
	border-top: 1px solid rgba(198, 86, 255, 0.2);
}
.attrDetailImgCol img {
	width: 100%;
	aspect-ratio: 694 / 300;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}
.attrDetailBody h2.bn-headline {
	margin-top: 0;
}
.attrDetailBody p {
	color: #FFF;
	font-weight: 300;
	font-size: 1.1rem;
	line-height: 1.65;
}
.attrNote {
	color: #C9AEDC;
	font-size: 0.9rem;
	font-style: italic;
	margin-top: -6px;
}

/* Category label: small, uppercase, muted — sits above the h2 name. */
.attrCategory {
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 1.5px;
	color: #C9AEDC;
	font-weight: 600;
	margin: 0 0 6px;
}

/* Intensity/energy pills: color alone (plus label) communicates the
   scale, so no legend is needed. */
.attrPills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}
.pill {
	display: inline-block;
	padding: 4px 14px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
}
.pill-high {
	background-color: rgba(255, 45, 85, 0.15);
	color: #FF6B81;
}
.pill-medhigh {
	background-color: rgba(255, 140, 0, 0.15);
	color: #FF9F40;
}
.pill-medium {
	background-color: rgba(255, 193, 7, 0.15);
	color: #FFD24D;
}
.pill-low {
	background-color: rgba(46, 204, 113, 0.15);
	color: #4CD97B;
}
.pill-energy {
	background-color: rgba(198, 86, 255, 0.18);
	color: #DDA8FF;
}

/* ---- FAQ accordion (faq.html) ----
   Native <details>/<summary> for built-in expand/collapse semantics
   and keyboard support — no JS needed. Each item styled as its own
   bordered card, matching the .valueCard/.infoCard convention. */
.faqList {
	max-width: 900px;
	margin: 40px auto 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.faqItem {
	background-color: #150f1a;
	border: 1px solid rgba(198, 86, 255, 0.3);
	border-radius: 10px;
	padding: 22px 26px;
	text-align: left;
}
.faqItem[open] {
	border-color: rgba(198, 86, 255, 0.6);
}
.faqItem summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-family: "Open Sans", Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 1.15rem;
	color: #C656FF;
}
.faqItem summary::-webkit-details-marker {
	display: none;
}
.faqIcon {
	flex-shrink: 0;
	font-size: 1.1rem;
	color: #C656FF;
	transition: transform 0.2s ease;
	line-height: 1;
}
.faqItem[open] .faqIcon {
	transform: rotate(180deg);
}
.faqAnswer {
	color: #FFF;
	font-weight: 300;
	font-size: 1.05rem;
	line-height: 1.65;
	margin: 14px 0 0;
}
.faqAnswer a {
	color: #C656FF;
}