/* ==========================================================================
   BoxOfficeHero Modern Retro Red & Gold Design System
   Palette extracted directly from BoxOfficeHero superhero logo head:
   Crimson: #E1110D | Dark Ruby: #931102 | Hero Gold: #DFB537 | Amber: #B47313
   ========================================================================== */

:root {
	--hero-red: #E1110D;
	--hero-red-hover: #C70F0B;
	--hero-red-dark: #931102;
	--hero-red-light: #FFF1F0;
	--hero-red-tint: rgba(225, 17, 13, 0.08);

	--hero-gold: #DFB537;
	--hero-gold-bright: #E7C23E;
	--hero-gold-dark: #B47313;
	--hero-gold-light: #FFFDF5;
	--hero-gold-border: #E8D38A;

	--hero-dark: #1E2229;
	--hero-slate: #323842;
	--hero-body: #4A515E;
	--hero-light-bg: #F8F9FB;
	--hero-card-bg: #FFFFFF;
	--hero-border: #E5E8ED;

	--hero-font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--hero-font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--hero-font-accent: 'Space Grotesk', -apple-system, sans-serif;

	--hero-radius: 8px;
	--hero-radius-lg: 12px;
	--hero-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.04);
	--hero-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
	--hero-shadow-hover: 0 8px 24px rgba(225, 17, 13, 0.12);
	--hero-retro-border: 2px solid var(--hero-dark);
}

html { background-color: var(--hero-light-bg); }
body {
	font-family: var(--hero-font-body);
	background-color: transparent;
	color: var(--hero-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--hero-font-heading);
	color: var(--hero-dark);
	font-weight: 700;
	letter-spacing: -0.02em;
}

a {
	color: var(--hero-red);
	transition: color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

a:hover {
	color: var(--hero-red-dark);
	text-decoration: none;
}

/* Navbar & Header */
.navbar-hero {
	background-color: #FFFFFF;
	border-bottom: 3px solid var(--hero-gold);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.hero-accent-bar {
	height: 4px;
	background: linear-gradient(90deg, var(--hero-red) 0%, var(--hero-gold) 50%, var(--hero-red) 100%);
}

/* Hero Typography & Badges */
.hero-heading {
	font-size: 1.85rem;
	font-weight: 800;
	color: var(--hero-dark);
	line-height: 1.25;
}

.badge-hero-red {
	background-color: var(--hero-red);
	color: #FFFFFF !important;
	font-weight: 700;
	padding: 0.35em 0.75em;
	border-radius: 4px;
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.5px;
	display: inline-block;
}

.badge-hero-gold {
	background-color: var(--hero-gold);
	color: var(--hero-dark) !important;
	font-weight: 700;
	padding: 0.35em 0.75em;
	border-radius: 4px;
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.5px;
	display: inline-block;
}

/* Cards & Containers */
.card-hero {
	background: var(--hero-card-bg);
	border: 1px solid var(--hero-border);
	border-radius: var(--hero-radius-lg);
	box-shadow: var(--hero-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	overflow: hidden;
}

.card-hero:hover {
	transform: translateY(-2px);
	box-shadow: var(--hero-shadow-hover);
	border-color: var(--hero-gold-border);
}

/* Replacement for old purple .red-container */
.red-container {
	background-color: var(--hero-gold-light);
	border: 2px solid var(--hero-gold-border);
	border-left: 5px solid var(--hero-red);
	border-radius: var(--hero-radius);
	padding: 1.25rem;
	box-shadow: var(--hero-shadow-sm);
	margin-bottom: 1.5rem;
}

.red-container h5 {
	color: var(--hero-dark);
	font-weight: 800;
	margin-top: 0;
	margin-bottom: 0.75rem;
	text-transform: uppercase;
	font-size: 0.95rem;
	letter-spacing: 0.5px;
}

/* Buttons with Retro Hero Pop */
.btn-hero-red {
	background-color: var(--hero-red);
	color: #FFFFFF !important;
	border: 2px solid var(--hero-dark);
	font-weight: 700;
	font-family: var(--hero-font-accent);
	border-radius: var(--hero-radius);
	padding: 0.6rem 1.25rem;
	box-shadow: 3px 3px 0px var(--hero-dark);
	transition: all 0.15s ease;
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 0.875rem;
}

.btn-hero-red:hover {
	background-color: var(--hero-red-hover);
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0px var(--hero-dark);
}

.btn-hero-red:active {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0px var(--hero-dark);
}

.btn-hero-gold {
	background-color: var(--hero-gold);
	color: var(--hero-dark) !important;
	border: 2px solid var(--hero-dark);
	font-weight: 700;
	font-family: var(--hero-font-accent);
	border-radius: var(--hero-radius);
	padding: 0.6rem 1.25rem;
	box-shadow: 3px 3px 0px var(--hero-dark);
	transition: all 0.15s ease;
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 0.875rem;
}

.btn-hero-gold:hover {
	background-color: var(--hero-gold-bright);
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0px var(--hero-dark);
}

.btn-hero-gold:active {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0px var(--hero-dark);
}

/* Images */
img.main-image {
	max-width: 100%;
	height: auto;
	border-radius: var(--hero-radius-lg);
	box-shadow: var(--hero-shadow);
	border: 2px solid #FFFFFF;
}

img.thin-grey-border {
	border: 1px solid var(--hero-border);
}

/* Event & Presale Table styling */
.table-hero {
	width: 100%;
	margin-bottom: 1rem;
	background-color: #FFFFFF;
	border-radius: var(--hero-radius);
	overflow: hidden;
	border: 1px solid var(--hero-border);
}

.table-hero th {
	background-color: var(--hero-dark);
	color: var(--hero-gold);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.5px;
	padding: 0.75rem 1rem;
	border: none;
}

.table-hero td {
	padding: 0.85rem 1rem;
	vertical-align: middle;
	border-top: 1px solid var(--hero-border);
}

/* Link seed items in footer */
.list-group-item-primary {
	background-color: var(--hero-card-bg);
	border: 1px solid var(--hero-border);
	color: var(--hero-dark);
	font-weight: 600;
	transition: all 0.15s ease;
	border-radius: 6px !important;
	margin-bottom: 0.35rem;
}

.list-group-item-primary:hover {
	background-color: var(--hero-red-light);
	border-color: var(--hero-red);
	color: var(--hero-red-dark);
	transform: translateX(4px);
}

/* Footer styling */
footer.footer-hero {
	background-color: #FFFFFF;
	border-top: 3px solid var(--hero-dark);
	color: var(--hero-body);
}

/* Google Search Box fix */
form.gsc-search-box, table.gsc-search-box {
	margin-bottom: 0px !important;
}

.text-underline {
	text-decoration: underline;
}

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

.ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Background Fluid Superhero Cape / Curtain Canvas */
#hero-cape-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: -1;
	opacity: 0.90;
	transition: opacity 0.3s ease;
}