/*
Ability Esports — Header, footer, and navigation structure.
Minimal, functional styling only — the final navigation visual design is a
later Stage 5 prompt. This just makes the Prompt 2 markup usable and
non-broken across breakpoints.
*/

.ae-site-header {
	position: relative;
	z-index: var(--ae-z-header);
	background: var(--ae-color-bg-secondary);
	border-bottom: var(--ae-border-subtle);
}

.ae-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ae-space-lg);
	min-height: var(--ae-nav-height-mobile);
}

@media (min-width: 1024px) {
	.ae-site-header__inner {
		min-height: var(--ae-nav-height);
	}
}

.ae-site-branding__name {
	font-family: var(--ae-font-display);
	font-weight: var(--ae-weight-heading);
	font-size: var(--ae-text-h5);
	color: var(--ae-color-text-primary);
	text-decoration: none;
}

.ae-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--ae-button-height-md);
	padding-inline: var(--ae-space-md);
	background: transparent;
	border: var(--ae-border-default);
	border-radius: var(--ae-radius-sm);
	color: var(--ae-color-text-primary);
	font-size: var(--ae-text-button);
}

.ae-nav-toggle:hover {
	background: var(--ae-color-interactive-hover);
}

@media (min-width: 1024px) {
	.ae-nav-toggle {
		display: none;
	}
}

.ae-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ae-nav-link-gap);
}

.ae-nav--primary {
	display: none;
}

@media (min-width: 1024px) {
	.ae-nav--primary {
		display: block;
	}
}

[data-ability-nav-menu][data-open="true"] .ae-nav--primary {
	display: block;
}

.ae-nav__list a {
	font-size: var(--ae-nav-font);
	color: var(--ae-color-text-secondary);
	text-decoration: none;
}

.ae-nav__list a:hover {
	color: var(--ae-color-text-primary);
}

.ae-site-footer {
	background: var(--ae-color-bg-secondary);
	border-top: var(--ae-border-subtle);
	padding-block: var(--ae-space-2xl);
	margin-top: var(--ae-space-3xl);
}

.ae-nav--footer .ae-nav__list {
	margin-bottom: var(--ae-space-lg);
}

.ae-site-footer__info {
	font-size: var(--ae-text-caption);
	color: var(--ae-color-text-muted);
	margin: 0;
}