/* =========================================================
   Soundstage 410 -- brand-aligned page styles
   Deliberately small: headings, body font, buttons, dark
   sections, and blue accent are all already global on this
   site. This file only covers the handful of layouts (hero,
   spec strip, use-case cards) that don't already exist
   elsewhere on 410mgmt.com.
   ========================================================= */

/* Sub-nav: translucent dark pill centered under the Soundstage nav item */
.ss-subnav {
	position: fixed;
	top: 56px; /* overridden by JS with real navbar height */
	left: 50%;
	transform: translateX(-50%);
	z-index: 1029;
	background: rgba(10, 10, 10, 0.78);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	width: max-content;
}

/* Connector arrow — SVG element injected by JS above the nav z-index */
#ss-subnav-arrow {
	position: fixed;
	z-index: 1031;
	pointer-events: none;
	transform: translateX(-50%);
	display: block;
	line-height: 0;
	filter: drop-shadow(0 2px 6px rgba(2, 73, 142, 0.7)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.12));
}

@media (max-width: 991px) {
	#ss-subnav-arrow { display: none; }
}

.ss-subnav .nav {
	flex-wrap: nowrap;
}

.ss-subnav .nav-link {
	color: #fff;
	font-family: bebas-neue-pro, sans-serif;
	font-size: 1.05rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 0.55rem 1.1rem;
	transition: opacity 0.15s;
	opacity: 0.75;
}

.ss-subnav .nav-link:hover,
.ss-subnav .nav-link.ss-subnav-active {
	color: #fff;
	opacity: 1;
}

.ss-subnav-book {
	color: #fff !important;
	border-left: 1px solid #2a2a2a;
}

/* Mobile: collapse to full-width strip, no triangle */
@media (max-width: 991px) {
	.ss-subnav {
		left: 0 !important;
		right: 0;
		transform: none !important;
		width: 100% !important;
		border-left: none;
		border-right: none;
	}
	.ss-subnav::before,
	.ss-subnav::after { display: none; }
	.ss-subnav .nav { overflow-x: auto; scrollbar-width: none; }
	.ss-subnav .nav::-webkit-scrollbar { display: none; }
}

.ss-hero {
	position: relative;
	min-height: 75vh;
	overflow: hidden;
	padding-top: 100px;
	padding-bottom: 56px;
}

.ss-hero h1 {
	text-transform: none;
}

.ss-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
	.ss-hero-video {
		display: none;
	}
	.ss-hero {
		background: url('../img/soundstage/soundstage-hero.jpg') no-repeat center / cover;
	}
}

.ss-hero-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.65) 100%);
}

.ss-hero .container-xxl {
	z-index: 1;
}

.ss-hero-name {
	font-family: bebas-neue-pro, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: clamp(4rem, 7.2vw, 7.2rem);
	line-height: 1;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.ss-hero-name-410 {
	color: #fff;
}

.ss-hero-name-soundstage {
	color: #fff;
}

.ss-eyebrow {
	color: #4a9eff;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.9rem;
	margin-bottom: 4rem;
}

.ss-kicker {
	color: #4a9eff;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
}

.ss-hero .btn,
.ss-support .btn,
#ss-location .btn,
#contact .wpforms-submit {
	border-radius: 4px;
}

.ss-specs {
	background: #0c0c0c;
	border-top: 1px solid #232323;
	border-bottom: 1px solid #232323;
}

.ss-spec-value {
	font-family: bebas-neue-pro, sans-serif;
	font-size: 2rem;
	color: #fff;
}

.ss-spec-label {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 0.25rem;
}

.ss-use-card {
	background: #1b1b1b;
	border: 1px solid #2a2a2a;
	transition: border-color 0.2s ease;
}

.ss-use-card:hover {
	border-color: #02498e;
}

.ss-use-card .card-title {
	font-family: bebas-neue-pro, sans-serif;
	letter-spacing: 0.01em;
}

.ss-support {
	position: relative;
	min-height: 420px;
	overflow: hidden;
	color: #fff;
}

.ss-map-wrap {
	overflow: hidden;
	border-radius: 4px;
}

.ss-callout {
	background: rgba(0, 0, 0, 0.5);
	border-left: 3px solid #02498e;
	padding: 1rem 1.25rem;
	margin-top: 4rem;
}

.ss-support-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.75) 60%, rgba(0, 0, 0, 0.3) 100%);
}

.ss-support .ss-kicker {
	color: rgba(255, 255, 255, 0.6);
}

/* Bootstrap's accordion ships accessible collapse behaviour out of
   the box (bootstrap.bundle.js is already enqueued sitewide for the
   offcanvas nav) -- only restyling the chrome to match the dark theme. */
#ss-tech {
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.75) 60%, rgba(0, 0, 0, 0.7) 100%),
		url('../img/soundstage/dsc5090-bg.jpg') center / 130% no-repeat !important;
}

.accordion-item {
	background: #151515;
	border-color: #2a2a2a;
}

.accordion-button {
	background: #151515;
	color: #fff;
	font-family: bebas-neue-pro, sans-serif;
	font-size: 1.6rem;
	letter-spacing: 0.01em;
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

.accordion-button:not(.collapsed) {
	background: #1b1b1b;
	color: #4a9eff;
	box-shadow: none;
}

.accordion-button::after {
	background-image: none !important;
	content: '+';
	font-size: 1.8rem;
	line-height: 1;
	width: auto;
	height: auto;
	color: #fff;
}

.accordion-button:not(.collapsed)::after {
	background-image: none !important;
	content: '−';
	transform: none;
	color: #4a9eff;
}

.accordion-body {
	background: #101010;
	color: rgba(255, 255, 255, 0.85);
}

.ss-insta-cta { text-decoration: none; transition: opacity 0.15s; }
.ss-insta-cta:hover { opacity: 0.8; text-decoration: underline; }

/* Gallery grid */
.ss-gallery-grid img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}

@media (max-width: 767px) {
	.ss-gallery-grid img { height: 150px; }
	/* 5th stat is orphaned in a 2-col grid — stretch it full-width so it centres */
	.ss-specs .row > .col:last-child { width: 100%; }
}

@media (max-width: 767px) {
	.ss-hero-name {
		font-size: 3.6rem;
	}
	.ss-eyebrow {
		margin-bottom: 6rem;
	}
	.ss-hero .display-3 {
		font-size: 2rem;
	}
	.ss-hero .lead {
		font-size: 1rem;
	}
	.ss-hero-scrim {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.88) 100%);
	}
}