/*******************************************************************************
 * Fully Immersive Attractions
 * Site Theme for Scaffold (/assets/styles/fia/theme.css)
 * (C) 2026 Fully Immersive Attractions
 * Design by Rudy Valencia
 ******************************************************************************/

:root {
	/* FIA private colors */
	--color-bg: #ffffff;
	--color-text: #111111;
	--color-text-muted: #555555;

	--color-surface-bg: #f6f6f6;
	--color-border: #e2e2e2;

	--color-brand: #111111;
	--color-accent: #2563eb;

	--color-link: var(--color-accent);
	--color-link-hover: #1d4ed8;

	--font-body: Inter, system-ui, sans-serif;
	--font-heading: Inter, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-bg: #0f0f0f;
		--color-text: #f5f5f5;
		--color-text-muted: #b5b5b5;

		--color-surface-bg: #1a1a1a;
		--color-border: rgba(255,255,255,0.12);

		--color-brand: #ffffff;
		--color-accent: #60a5fa;
	}
}

/* FIA: BASE OVERRIDES */

h1, h2, h3 {
	letter-spacing: -0.01em;
}

/* FIA: HEADER */

.sc-header {
	background: var(--color-bg);
	color: var(--color-text);
	border-bottom: 1px solid var(--color-border);
}

/* FIA: BRAND */

.fia-brand {
	flex: 0 0 auto;
}

.fia-brand__link {
	display: inline-block;
	font-size: 0;
	line-height: 0;
	padding: 0;
	margin: 0;
	vertical-align: top;
}

.fia-logo {
	display: block;
	width: 12rem;
	height: auto;
}

/* FIA: NAVIGATION */

.sc-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	transition: opacity var(--transition-base);
	z-index: 1000;
}

.sc-overlay.is-open {
	opacity: 1;
}

.sc-nav {
	position: fixed;
	top: 0;
	right: 0;
	width: min(84vw, 22rem);
	height: 100dvh;
	background: var(--color-bg);
	color: var(--color-text);
	border-left: 1px solid var(--color-border);
	box-shadow: var(--shadow-md);
	transform: translateX(100%);
	transition: transform var(--transition-base);
	z-index: 1001;
	overflow-y: auto;
}

.sc-nav.is-open {
	transform: translateX(0);
}

.sc-nav__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-min-height);
	padding: 0 1rem;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-bg);
	color: var(--color-text);
}

.sc-nav__title {
	font-family: var(--font-heading);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.sc-nav__list {
	list-style: none;
	margin: 0;
	padding: 1.25rem;
	display: grid;
	gap: 0.75rem;
}

.sc-nav__item {
	margin: 0;
	padding: 0;
}

.sc-nav__link:link,
.sc-nav__link:visited {
	display: block;
	padding: 1rem 1.15rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--color-text);
	text-decoration: none;
	font-weight: 600;
}

.sc-nav__link:hover,
.sc-nav__link:focus-visible {
	background: var(--color-surface-bg);
}

@media (min-width: 48rem) {
	.sc-nav {
		position: static;
		width: auto;
		height: auto;
		transform: none;
		transition: none;
		background: transparent;
		border: 0;
		box-shadow: none;
		overflow: visible;
	}

	.sc-nav__header {
		display: none;
	}

	.sc-nav__list {
		display: flex;
		align-items: center;
		gap: 1.5rem;
		padding: 0;
	}

	.sc-nav__link:link,
	.sc-nav__link:visited {
		display: inline-block;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
	}
}

/* FIA: HERO */

.fia-hero {
	padding: 4rem 0 3rem;
	background: var(--color-bg);
}

/* FIA: SURFACE OVERRIDES */

.sc-surface {
	background: var(--color-surface-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: none;
}

/* FIA: BUTTON OVERRIDES */

.sc-button--primary:link,
.sc-button--primary:visited {
	background: var(--color-text);
	color: var(--color-bg);
	border-color: var(--color-text);
}

.sc-button--primary:hover {
	opacity: 0.9;
}

.sc-button--secondary {
	background: transparent;
	color: var(--color-text);
	border-color: var(--color-border);
}

/* FIA: CARD OVERRIDES */

.sc-card {
	padding: 1.25rem;
}

/* FIA: FOOTER OVERRIDES */

.sc-footer {
	background: var(--color-bg);
	color: var(--color-text-muted);
	border-top: 1px solid var(--color-border);
}

.fia-footer__logo {
	width: 10rem;
}