/*
 * GameRStar News — Site header layout, logo scale, and navigation styling.
 * Scoped to #site-header / .site-navigation so no other template is affected.
 * Loads sitewide (not gated to the front page) because the header is shared
 * across every page.
 */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-3 );
	min-height: 72px;
	padding-block: var( --space-2 );
	padding-inline: var( --space-3 );
	border-bottom: 1px solid var( --color-border );
}

/*
 * The blurred background lives on a pseudo-element rather than directly on
 * .site-header. backdrop-filter (like transform/filter/will-change) makes
 * an element a containing block for its position:fixed descendants — and
 * #site-navigation (the mobile drawer) is nested inside this header. Left
 * on .site-header itself, the "fixed" drawer would resolve against the
 * header's own ~72px box instead of the viewport, confining and squashing
 * it instead of covering the full screen.
 */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba( var( --color-bg-primary-rgb ), 0.85 );
	backdrop-filter: blur( 12px );
	-webkit-backdrop-filter: blur( 12px );
	transition: background-color 0.25s ease;
}

.site-header.is-scrolled::before {
	background-color: rgba( var( --color-bg-primary-rgb ), 0.95 );
}

.site-header.is-scrolled {
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.3 );
	transition: box-shadow 0.25s ease;
}

/* Logo: constrain height so an image logo (any aspect ratio) or the plain
 * text fallback both fit the compact 72px header without distortion. */
.site-header .site-branding {
	flex-shrink: 0;
	gap: 0;
}

.site-header .custom-logo-link {
	display: flex;
	align-items: center;
}

.site-header .custom-logo-link img,
.site-header .site-branding .site-logo img {
	max-height: 44px;
	width: auto;
	display: block;
}

.site-header .site-title {
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1;
	font-family: var( --font-display );
	letter-spacing: 0.01em;
}

.site-header .site-title a {
	color: var( --color-text-primary ) !important;
	text-decoration: none;
}

/* Tagline intentionally hidden here only, so the lockup fits the compact
 * header height; it still renders anywhere else the theme displays it. */
.site-header .site-description {
	display: none;
}

.site-header__nav-group {
	display: flex;
	align-items: center;
	gap: var( --space-2 );
}

.site-navigation ul.menu li a {
	position: relative;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var( --letter-spacing-caps );
	color: var( --color-text-secondary ) !important;
	/* `!important` needed: overrides a sitewide `a { text-decoration: underline; }`
	 * rule stored in the site's Additional CSS (Customizer), same as the `a`
	 * color override already worked around elsewhere in this file. Without it,
	 * every nav link shows a native underline on top of (or instead of) the
	 * custom `::after` active-state bar below. */
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.site-navigation ul.menu li a:hover,
.site-navigation ul.menu li a:focus-visible {
	color: var( --color-accent ) !important;
}

.site-navigation ul.menu li.current-menu-item > a,
.site-navigation ul.menu li.current-menu-parent > a,
.site-navigation ul.menu li.current-menu-ancestor > a,
.site-navigation ul.menu li.current_page_item > a {
	color: var( --color-accent ) !important;
}

.site-navigation ul.menu li.current-menu-item > a::after,
.site-navigation ul.menu li.current-menu-parent > a::after,
.site-navigation ul.menu li.current-menu-ancestor > a::after,
.site-navigation ul.menu li.current_page_item > a::after {
	content: "";
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 2px;
	height: 2px;
	background-color: var( --color-accent );
}

.site-header__menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: none;
	border: none;
	border-radius: var( --radius-button );
	color: var( --color-text-secondary );
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.site-header__menu-toggle:hover,
.site-header__menu-toggle:focus-visible {
	color: var( --color-text-primary );
	background-color: var( --color-bg-elevated );
}

.site-header__menu-toggle svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Hamburger toggle: only relevant once the nav collapses into the mobile
 * drawer below; the desktop inline menu needs no toggle. */
.site-header__menu-toggle {
	display: none;
}

/* Mobile drawer furniture (mini-header, centered menu wrap, social row) is
 * irrelevant at desktop, where the nav is a plain inline row: the mini
 * header and social row stay hidden, and the menu-wrap collapses to
 * `display: contents` so the <ul> inside it participates directly in the
 * nav's own flex layout as if the wrapper weren't there. */
.site-navigation__mini-header,
.site-navigation__social {
	display: none;
}

.site-navigation__menu-wrap {
	display: contents;
}

.site-navigation__brand .custom-logo-link img,
.site-navigation__brand img {
	max-height: 40px;
	width: auto;
	display: block;
}

.site-navigation__brand-text {
	font-family: var( --font-display );
	font-weight: 800;
	font-size: 1.125rem;
	letter-spacing: 0.01em;
	color: var( --color-text-primary );
}

.site-navigation__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var( --color-border );
	border-radius: var( --radius-button );
	color: var( --color-text-secondary );
	transition: color 0.2s ease, border-color 0.2s ease;
}

.site-navigation__social-link:hover,
.site-navigation__social-link:focus-visible {
	color: var( --color-accent );
	border-color: var( --color-accent );
}

.site-navigation__social-link svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Close (X) button lives inside the nav itself so it travels with the
 * drawer; irrelevant at desktop where the nav is an inline row. */
.site-navigation__close {
	display: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: none;
	border: none;
	border-radius: var( --radius-button );
	color: var( --color-text-secondary );
	cursor: pointer;
}

.site-navigation__close:hover,
.site-navigation__close:focus-visible {
	color: var( --color-text-primary );
	background-color: var( --color-bg-elevated );
}

.site-navigation__close svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media ( max-width: 768px ) {
	.site-header {
		flex-wrap: nowrap;
	}

	.site-header__menu-toggle {
		display: flex;
	}

	.site-navigation__close {
		display: flex;
	}

	/* Scoped to #site-navigation (the header menu specifically) — the footer
	 * reuses the same .site-navigation class for its own "Legal" links list,
	 * and must not be turned into an off-canvas drawer too. */
	#site-navigation {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		z-index: 9999;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 24px var( --space-4 ) 24px;
		background-color: var( --color-bg-primary );
		opacity: 0;
		visibility: hidden;
		transform: translateY( 12px );
		transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s;
		overflow-y: auto;
	}

	#site-navigation.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY( 0 );
		transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0s;
	}

	/* Mini header: logo left, close button right, same row. */
	.site-navigation__mini-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 0 0 auto;
		width: 100%;
	}

	/* Vertically centers the menu list in the space left between the mini
	 * header and the social row. */
	.site-navigation__menu-wrap {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
		width: 100%;
	}

	.site-navigation__social {
		display: flex;
		flex: 0 0 auto;
		gap: 12px;
		padding-top: var( --space-3 );
	}

	#site-navigation ul.menu {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		gap: 28px;
	}

	#site-navigation ul.menu li {
		width: 100%;
	}

	#site-navigation ul.menu li a {
		display: block;
		padding: 0;
		font-size: 26px;
		font-weight: 800;
	}

	#site-navigation ul.menu li.current-menu-item > a::after,
	#site-navigation ul.menu li.current-menu-parent > a::after,
	#site-navigation ul.menu li.current-menu-ancestor > a::after,
	#site-navigation ul.menu li.current_page_item > a::after {
		left: 0;
		right: auto;
		width: 32px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	#site-navigation {
		transition: none;
	}
}