/* =========================================================================
   ARUNA — Site header component
   All colours reference design tokens from tokens.css. No hardcoded hex.
   ========================================================================= */

:root {
	/* Header-specific layout token (height drives the body offset below). */
	--header-height: 88px;
}

/* -------------------------------------------------------------------------
   Body offset
   Fixed header is lifted out of flow, so push content down by its height.
   The homepage hero sits *under* the transparent header → no offset there.
   ------------------------------------------------------------------------- */
body {
	padding-top: var(--header-height);
}

body.home {
	padding-top: 0;
}

/* -------------------------------------------------------------------------
   Header shell
   ------------------------------------------------------------------------- */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	background-color: var(--color-primary);
	transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md, 2rem);
	min-height: var(--header-height);
	max-width: 1320px;
	margin: 0 auto;
	padding-inline: var(--space-md, 2rem);
}

/* Homepage: transparent on load, navy once scrolled past the threshold. */
body.home .site-header {
	background-color: transparent;
}

body.home .site-header.scrolled {
	background-color: var(--color-primary);
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
}

/* Inner pages: navy always — only a subtle shadow cue on scroll. */
body:not(.home) .site-header.scrolled {
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.08);
}

/* -------------------------------------------------------------------------
   Branding / logo
   Two stacked logos — only one is visible depending on header background.
   ------------------------------------------------------------------------- */
.site-header__branding {
	flex: 0 0 auto;
}

.site-header__logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.site-header__logo {
	display: block;
	height: clamp(40px, 4vw, 80px);
	width: auto;
}

/* -------------------------------------------------------------------------
   Primary navigation
   ------------------------------------------------------------------------- */
.site-header__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.site-header__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--space-md, 2rem);
}

.site-header__menu li {
	position: relative;
}

.site-header__menu a {
	position: relative;
	display: inline-block;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-decoration: none;
	color: var(--color-text-inverse);
	padding-block: 0.5rem;
	transition: color 0.25s ease;
}

/* Animated underline indicator. */
.site-header__menu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background-color: var(--color-accent);
	transition: width 0.25s ease;
}

.site-header__menu a:hover,
.site-header__menu a:focus-visible {
	color: var(--color-accent);
}

.site-header__menu a:hover::after,
.site-header__menu a:focus-visible::after,
.site-header__menu .current-menu-item > a::after,
.site-header__menu .current-menu-ancestor > a::after {
	width: 100%;
}

.site-header__menu .current-menu-item > a,
.site-header__menu .current-menu-ancestor > a {
	color: var(--color-accent);
}

/* -------------------------------------------------------------------------
   Language switcher
   ------------------------------------------------------------------------- */
.site-header__lang {
	flex: 0 0 auto;
}

.site-header__lang-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.site-header__lang-list a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-text-inverse);
	opacity: 0.65;
	transition: opacity 0.25s ease, color 0.25s ease;
}

.site-header__lang-list a:hover,
.site-header__lang-list a:focus-visible {
	color: var(--color-accent);
	opacity: 1;
}

.site-header__lang-list .current-lang > a,
.site-header__lang-list li.current-lang > a {
	color: var(--color-accent);
	opacity: 1;
}

.site-header__lang-list img {
	display: block;
	width: 18px;
	height: auto;
}

/* -------------------------------------------------------------------------
   Responsive
   Desktop nav is hidden on small screens; the mobile hamburger menu is
   delivered separately in Task 3.5.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	:root {
		--header-height: 72px;
	}

	.site-header__logo {
		height: 40px;
	}

	.site-header__nav {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   Narrow phones
   The logo, language switcher and hamburger need about 365px at their
   normal size, so below ~390px the hamburger was pushed past the screen
   edge (5px off at 360px, 45px off at 320px). Compress the row in two
   steps so it always fits and keeps the page's side margins where it can.
   ------------------------------------------------------------------------- */
@media (max-width: 390px) {
	.site-header__inner {
		gap: 0.75rem;
	}

	.site-header__logo {
		height: 34px;
	}
}

@media (max-width: 340px) {
	.site-header__inner {
		padding-inline: 1.25rem;
	}

	.site-header__logo {
		height: 30px;
	}
}