/*
 * Header layout: branding, primary nav (incl. mobile off-canvas), search
 * toggle, cart. Structural/functional styling — not the final homepage
 * visual design pass.
 */

.site-header {
	border-bottom: 1px solid var(--color-grey-light);
	background-color: var(--color-white);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding-block: var(--space-sm);
}

.site-branding img {
	display: block;
	max-height: 48px;
	width: auto;
}

.site-title-link {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--text-md);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ---------- Hamburger toggle (mobile only) ---------- */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 32px;
	height: 32px;
	padding: 0;
}

.nav-toggle__bar {
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--color-black);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) {
	transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(4) {
	opacity: 0;
}

/* ---------- Primary nav ---------- */
.primary-menu {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
}

.primary-menu li {
	position: relative;
}

.primary-menu a {
	display: block;
	font-weight: 600;
	font-size: var(--text-sm);
}

/*
 * Dropdown submenus (Sports, Nationalities): WordPress core already adds
 * "menu-item-has-children" to the parent <li> and wraps children in a
 * <ul class="sub-menu"> — no custom walker needed, just style the result.
 * Desktop: hover/focus reveals it. Mobile gets its own rule further down,
 * since hover doesn't really exist there.
 */
@media (min-width: 960px) {
	.primary-menu .sub-menu {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 50;
		min-width: 220px;
		margin-top: var(--space-sm);
		padding: var(--space-xs);
		background-color: var(--color-white);
		border: 1px solid var(--color-grey-light);
		border-radius: var(--radius-md);
		box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
		opacity: 0;
		visibility: hidden;
		transform: translateY(4px);
		transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	}

	.primary-menu .menu-item-has-children:hover > .sub-menu,
	.primary-menu .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	/* Nationalities has a lot of items — two columns keeps the dropdown
	   from turning into one very long list. */
	.primary-menu .menu-item-columns > .sub-menu {
		columns: 2;
		column-gap: var(--space-md);
		min-width: 360px;
	}

	.primary-menu .sub-menu li {
		break-inside: avoid;
	}

	.primary-menu .sub-menu a {
		padding: var(--space-2xs) var(--space-sm);
		font-weight: 400;
		white-space: nowrap;
		border-radius: var(--radius-sm);
	}

	.primary-menu .sub-menu a:hover,
	.primary-menu .sub-menu a:focus-visible {
		background-color: var(--color-grey-light);
	}
}

/* ---------- Header icons (search + cart) ---------- */
.header-icons {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.search-toggle,
.header-cart-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
}

.header-search-form {
	display: none;
	align-items: center;
	gap: var(--space-2xs);
}

.header-search-form.is-open {
	display: flex;
}

.header-search-form input[type='search'] {
	border: 1px solid var(--color-grey-light);
	border-radius: var(--radius-pill);
	padding: var(--space-3xs) var(--space-sm);
}

.header-cart-link {
	position: relative;
}

.cart-count {
	font-size: var(--text-xs);
	font-weight: 600;
}

/* ---------- Mobile off-canvas nav ---------- */
@media (max-width: 959px) {
	.nav-toggle {
		display: flex;
	}

	.primary-navigation {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(320px, 85vw);
		height: 100vh;
		overflow-y: auto;
		background-color: var(--color-white);
		padding: var(--space-2xl) var(--space-lg);
		transform: translateX(100%);
		transition: transform 0.3s ease;
		z-index: 100;
	}

	.primary-navigation.is-open {
		transform: translateX(0);
	}

	.primary-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-md);
		width: 100%;
	}

	/* No hover on touch — sub-menus (Sports, Nationalities) are just
	   always shown, indented, under their parent label. */
	.primary-menu .sub-menu {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		margin-top: var(--space-sm);
		padding-left: var(--space-md);
		border-left: 2px solid var(--color-grey-light);
	}

	.primary-menu .menu-item-has-children > a {
		font-family: var(--font-heading);
		text-transform: uppercase;
		letter-spacing: 0.04em;
		font-size: var(--text-xs);
		color: rgba(0, 0, 0, 0.5);
	}

	.primary-menu .sub-menu a {
		font-weight: 500;
	}

	.header-search-form {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--color-white);
		padding: var(--space-sm) var(--space-md);
		border-bottom: 1px solid var(--color-grey-light);
	}

	.header-search-form.is-open {
		display: flex;
	}

	.header-search-form input[type='search'] {
		flex: 1;
	}
}