/*
 * Site header: bar, wordmark, desktop nav, mobile sheet.
 *
 * Transcribed from the design source's Header and Wordmark components. The
 * scoped-style boundaries Astro provided are gone, so the selectors are flat
 * and class-based; the rules themselves are unchanged.
 *
 * One adaptation: navigation markup now comes from wp_nav_menu, so links are
 * addressed as `.nav__list a` rather than a hand-written `.nav__link`, and the
 * current page is WordPress's own `.current-menu-item`. Appearance is identical.
 *
 * @package Slovenia_Concierge
 */

.header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var( --wp--preset--color--black );
	border-block-end: var( --wp--custom--hairline ) solid var( --wp--preset--color--black-line );
	transition:
		background var( --wp--custom--transition--base ) var( --wp--custom--transition--ease ),
		border-color var( --wp--custom--transition--base ) var( --wp--custom--transition--ease );
}

/*
 * Clear the WordPress admin bar.
 *
 * The bar is fixed to the top of the viewport for logged-in users, and the site
 * header — sticky on interior pages, fixed over the hero on the home page —
 * slid underneath it and disappeared. A client editing their own site would
 * have read that as the navigation breaking.
 *
 * Scoped to `body.admin-bar`, a class WordPress adds ONLY when it actually
 * renders the bar. A logged-out visitor's page is byte-for-byte unaffected.
 *
 * The three widths are WordPress's own behaviour, not guesses: the bar is 32px
 * above 782px, 46px between 601 and 782, and below 601 it stops being fixed and
 * scrolls away with the page — so there is nothing to clear.
 */
body.admin-bar .header {
	top: 32px;
}

@media screen and ( max-width: 782px ) {
	body.admin-bar .header {
		top: 46px;
	}
}

@media screen and ( max-width: 600px ) {
	body.admin-bar .header {
		top: 0;
	}
}

/*
 * Over a hero the bar carries nothing of its own: no plate, no gradient. The
 * picture stays exactly as shot. Legibility comes from the type instead — pure
 * white rather than the warm off-white used on flat dark surfaces, plus a
 * shadow tight enough to be invisible but enough to hold an edge against a
 * bright sky.
 */
.header--overlay {
	position: fixed;
	inset-inline: 0;
	background: transparent;
	border-block-end-color: transparent;
}

.header--overlay .nav__list a,
.header--overlay .burger,
.header--overlay .wordmark,
.header--overlay .langswitch {
	color: var( --wp--preset--color--white );
	text-shadow: var( --wp--custom--overlay--text-shadow );
}

/*
 * The language badge was the one thing in the overlay bar still in the muted
 * grey and dark hairline meant for a flat black surface, so over a bright sky
 * or snow it disappeared. It now takes the same white-with-shadow as the menu,
 * and its frame is a light rule with the same soft shadow, so the box holds its
 * edge on light and dark footage alike.
 */
.header--overlay .langswitch {
	border-color: var( --wp--custom--overlay--rule );
	box-shadow: 0 0 10px rgba( 8, 8, 10, 0.28 );
}

.header--overlay .wordmark__line--2,
.header--overlay .nav__list .current-menu-item > a {
	color: var( --wp--preset--color--gold-light );
}

.header--overlay .nav {
	border-block-start-color: var( --wp--custom--overlay--rule );
}

/* Once the bar has its black plate the shadow is only muddying the type. */
.header--overlay[data-scrolled] .nav__list a,
.header--overlay[data-scrolled] .burger,
.header--overlay[data-scrolled] .wordmark,
.header--overlay[data-scrolled] .langswitch {
	color: var( --wp--preset--color--text-on-dark );
	text-shadow: none;
}

.header--overlay[data-scrolled] .langswitch {
	border-color: var( --wp--preset--color--black-line );
	box-shadow: none;
}

.header--overlay[data-scrolled] .nav {
	border-block-start-color: var( --wp--preset--color--black-line );
}

.header[data-scrolled] {
	background: var( --wp--preset--color--black );
	border-block-end-color: var( --wp--preset--color--black-line );
}

/*
 * Compact once scrolled. Three things move together, because shrinking the bar
 * alone is barely noticeable on desktop, where the navigation sits on its own
 * second row: the bar loses height, the wordmark scales down, and the nav row
 * loses the padding that separates it from the wordmark.
 */
.header[data-scrolled] .header__inner {
	min-height: var( --wp--custom--header--height-compact );
	padding-block: 0;
}

/*
 * Type size, not transform: a scaled wordmark keeps its original box and the
 * bar would not actually get any shorter.
 */
.header .wordmark__line,
.header .wordmark__tagline {
	transition: font-size var( --wp--custom--transition--base ) var( --wp--custom--transition--ease );
}

.header[data-scrolled] .wordmark__line--1 {
	font-size: 1rem;
}

.header[data-scrolled] .wordmark__line--2 {
	font-size: 0.62rem;
}

/*
 * The rule between the two lines is the first thing to go: at this size it is a
 * detail nobody reads, and it costs a whole row of the lockup.
 */
.header[data-scrolled] .wordmark__rule {
	display: none;
}

.header[data-scrolled] .wordmark__lockup {
	gap: 0.16em;
}

.header[data-scrolled] .nav {
	padding-block-start: 0;
	margin-block-start: 0;
	border-block-start-color: transparent;
}

/* An open mobile panel always needs its own plate, scrolled or not. */
.header:has( .mobilenav:not( [ hidden ] ) ) {
	background: var( --wp--preset--color--black );
}

.header__inner {
	transition:
		min-height var( --wp--custom--transition--base ) var( --wp--custom--transition--ease ),
		padding-block var( --wp--custom--transition--base ) var( --wp--custom--transition--ease );
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--m );
	min-height: var( --wp--custom--header--height );
	padding-block: var( --wp--preset--spacing--2-xs );
}

.header__end {
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--xs );
}

/* ------------------------------------------------------------- wordmark */
.wordmark {
	display: inline-block;
	text-decoration: none;
	color: var( --wp--preset--color--text );
}

.wordmark--on-dark {
	color: var( --wp--preset--color--white );
}

.wordmark__lockup {
	display: grid;
	justify-items: center;
	gap: 0.28em;
	line-height: 1;
}

.wordmark__line {
	font-family: var( --wp--preset--font-family--display );
	font-weight: 500;
	font-size: clamp( 1.15rem, 1rem + 0.5vw, 1.45rem );
	letter-spacing: 0.3em;
	/* letter-spacing adds trailing space; pull it back so the lockup is optically centred */
	text-indent: 0.3em;
	text-transform: uppercase;
}

.wordmark__tagline {
	margin-block-start: 0.55em;
	font-family: var( --wp--preset--font-family--sans );
	font-size: 0.62rem;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-indent: 0.24em;
	text-transform: uppercase;
	color: var( --wp--preset--color--gold-light );
}

.wordmark__line--2 {
	font-size: clamp( 0.72rem, 0.65rem + 0.25vw, 0.85rem );
	font-family: var( --wp--preset--font-family--sans );
	font-weight: 400;
	letter-spacing: 0.42em;
	text-indent: 0.42em;
	color: var( --wp--preset--color--gold-deep );
}

.wordmark--on-dark .wordmark__line--2 {
	color: var( --wp--preset--color--gold-light );
}

.wordmark__rule {
	width: 100%;
	max-width: 8rem;
	height: 1px;
	background: var( --wp--custom--gold-hairline );
}

.wordmark--compact .wordmark__lockup {
	justify-items: start;
	gap: 0.2em;
}

.wordmark--compact .wordmark__rule {
	display: none;
}

/* ---------------------------------------------------------- desktop nav */
.nav {
	display: none;
	transition:
		padding-block-start var( --wp--custom--transition--base ) var( --wp--custom--transition--ease ),
		margin-block-start var( --wp--custom--transition--base ) var( --wp--custom--transition--ease );
}

.nav__list {
	display: flex;
	align-items: center;
	gap: clamp( 1rem, 2.2vw, 2.25rem );
}

.nav__list a {
	display: inline-block;
	padding-block: 0.35rem;
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: var( --wp--custom--letter-spacing--caps );
	text-transform: uppercase;
	text-decoration: none;
	color: var( --wp--preset--color--text-on-dark );
	border-block-end: var( --wp--custom--hairline ) solid transparent;
	transition:
		color var( --wp--custom--transition--base ) var( --wp--custom--transition--ease ),
		border-color var( --wp--custom--transition--base ) var( --wp--custom--transition--ease );
}

.nav__list a:hover,
.nav__list a:focus-visible {
	color: var( --wp--preset--color--gold-light );
	border-block-end-color: var( --wp--preset--color--gold-light );
}

.nav__list .current-menu-item > a,
.nav__list .current_page_item > a,
.nav__list .current-menu-ancestor > a {
	color: var( --wp--preset--color--gold-light );
	border-block-end-color: var( --wp--custom--gold-hairline );
}

/* ------------------------------------------------------- language switch */
.langswitch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding-inline: 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-decoration: none;
	color: var( --wp--preset--color--text-on-dark-muted );
	border: var( --wp--custom--hairline ) solid var( --wp--preset--color--black-line );
	transition:
		color var( --wp--custom--transition--base ) var( --wp--custom--transition--ease ),
		border-color var( --wp--custom--transition--base ) var( --wp--custom--transition--ease );
}

.langswitch:hover,
.langswitch:focus-visible {
	color: var( --wp--preset--color--gold-light );
	border-color: var( --wp--custom--gold-hairline );
}

/*
 * Inert state: only reached if the switch URL is empty, which since
 * 2026-09-23 means TranslatePress is deactivated. Dimmed and takes no pointer,
 * so nobody clicks it into a 404. Kept as that fallback.
 */
.langswitch--inert {
	opacity: 0.45;
	cursor: default;
	pointer-events: none;
}

/* -------------------------------------------------------------- burger */
.burger {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	color: var( --wp--preset--color--text-on-dark );
}

.burger__bars {
	display: grid;
	gap: 6px;
	width: 1.375rem;
}

.burger__bars i {
	display: block;
	height: 1px;
	background: currentColor;
	transition:
		transform var( --wp--custom--transition--base ) var( --wp--custom--transition--ease ),
		opacity var( --wp--custom--transition--base ) var( --wp--custom--transition--ease );
}

.burger[aria-expanded='true'] .burger__bars i:first-child {
	transform: translateY( 3.5px ) rotate( 45deg );
}

.burger[aria-expanded='true'] .burger__bars i:last-child {
	transform: translateY( -3.5px ) rotate( -45deg );
}

/* ---------------------------------------------------------- mobile nav */
/*
 * A full sheet under the bar rather than a panel that pushes the page down.
 * Pushed open, the page behind kept its own scroll: the menu slid away under a
 * thumb that meant to pick a link, and half the screen still showed the article
 * underneath. Fixed to the viewport with the document locked, the menu is the
 * only thing on screen while it is open.
 *
 * --nav-top is written by the script from the measured bar, because the bar is
 * two different heights depending on whether the page has been scrolled.
 */
.mobilenav {
	position: fixed;
	inset-block-start: var( --nav-top, var( --wp--custom--header--height ) );
	inset-inline: 0;
	inset-block-end: 0;
	overflow-y: auto;
	/* A flick inside the sheet must not hand the scroll to the page behind. */
	overscroll-behavior: contain;
	border-block-start: var( --wp--custom--hairline ) solid var( --wp--preset--color--black-line );
	background: var( --wp--preset--color--black );
	padding-block: var( --wp--preset--spacing--m ) var( --wp--preset--spacing--l );
}

.mobilenav[hidden] {
	display: none;
}

html.nav-open {
	overflow-y: hidden;
}

.mobilenav__list {
	display: grid;
}

.mobilenav__list a {
	display: block;
	padding-block: 0.9rem;
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.35rem;
	text-decoration: none;
	color: var( --wp--preset--color--text-on-dark );
	border-block-end: var( --wp--custom--hairline ) solid var( --wp--preset--color--black-line );
}

.mobilenav__list .current-menu-item > a,
.mobilenav__list .current_page_item > a,
.mobilenav__list .current-menu-ancestor > a {
	color: var( --wp--preset--color--gold-light );
}

@media ( min-width: 64rem ) {
	.header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		/*
		 * Centre the two rows as a group inside the bar, not just each item
		 * inside its own row. The bar is taller than its contents, and grid
		 * hands that slack to the rows by default — which pushed the wordmark
		 * row to the top and left a gap under it, above the hairline.
		 */
		align-content: center;
		/*
		 * Row gap, set apart from the column gap. The column gap gets the
		 * wider step because it separates the wordmark from the language
		 * badge across the whole width of the bar. The row gap only has to
		 * hold the wordmark off the hairline, and at the wider step it left
		 * the wordmark pinned to the top of the bar with a void underneath.
		 */
		row-gap: var( --wp--preset--spacing--s );
		min-height: var( --wp--custom--header--height-desktop );
	}

	.header__inner > .wordmark {
		align-self: center;
	}

	.header[data-scrolled] .header__inner {
		min-height: var( --wp--custom--header--height-compact-desktop );
		/*
		 * The compact bar gets the same treatment as the expanded one. It had
		 * been left alone out of caution about the scroll hysteresis in
		 * header.js, but that caution was misplaced: the bar is
		 * `position: fixed`, so changing its height cannot move the document
		 * under it - measured, the document height is identical in both
		 * states. There is nothing for a height change to shift.
		 *
		 * Without this the compact bar sat 6px below the top edge and 22px
		 * above the hairline: top-heavy, and visible.
		 */
		padding-block: var( --wp--preset--spacing--2-xs );
		row-gap: var( --wp--preset--spacing--s );
	}

	.nav {
		display: block;
		order: 3;
		grid-column: 1 / -1;
		grid-row: 2;
		border-block-start: var( --wp--custom--hairline ) solid var( --wp--preset--color--black-line );
		padding-block-start: var( --wp--preset--spacing--xs );
		/*
		 * No margin stacked on top of the row gap. Two spacings in the same
		 * place is how the space under the wordmark grew to four times the
		 * space above it; the grid's row gap is the one that belongs here.
		 */
		margin-block-start: 0;
	}

	.nav__list {
		justify-content: center;
	}

	.header__inner > .wordmark {
		grid-column: 2;
		grid-row: 1;
	}

	.header__end {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}

	.burger,
	.mobilenav {
		display: none !important;
	}
}

/*
 * Ten menu items (Wellness & Spa made it ten, 2026-09-24) no longer fit at the
 * smallest desktop width: at 1024px "Accommodation" and "Contact" ran off both
 * edges. Between 1024 and 1280 the type and the gaps scale down with the
 * window and items stop breaking onto two lines; above 1280 nothing changes.
 * Measured: one row, inside the bar, at 1024, 1100, 1180 and 1240.
 */
@media ( min-width: 64rem ) and ( max-width: 79.99rem ) {
	.nav__list {
		gap: clamp( 0.75rem, 1.3vw, 1.25rem );
	}

	.nav__list a {
		font-size: clamp( 0.6875rem, 1.05vw, 0.8125rem );
		white-space: nowrap;
	}
}