/**
 * Site header and primary navigation (docs/design.md §8).
 * Phones/tablets (< 75rem): logo, compact booking button, menu button that
 * opens a full-height panel. Desktop (≥ 75rem): inline menu with dropdowns.
 * Without JS the menu is always shown as a list.
 */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-surface);
}

.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-5);
	align-items: center;
	min-height: 4rem;
}

.site-header__logo {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	min-height: 44px;
	margin-right: auto;
}

.site-header__logo-img {
	width: auto;
	height: 2.5rem;
}

.site-header__logo-text {
	color: var(--color-navy);
	font-family: var(--font-heading);
	font-size: var(--step-1);
	font-weight: 700;
}

.site-header__actions {
	display: flex;
	gap: var(--space-3);
	align-items: center;
}

.site-header__cta {
	gap: 0.25em;
	padding-inline: var(--space-4);
}

.site-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-button);
	background: var(--color-surface);
	color: var(--color-navy);
	cursor: pointer;
}

.site-header__toggle-close,
.site-header.is-open .site-header__toggle-open {
	display: none;
}

.site-header.is-open .site-header__toggle-close {
	display: block;
}

/* ---------- Menu (shared) ---------- */

.site-nav__menu,
.site-nav__submenu,
.site-nav__group-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__item {
	position: relative;
}

.site-nav__link {
	display: inline-flex;
	gap: var(--space-1);
	align-items: center;
	min-height: 44px;
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: var(--step--1);
	font-weight: 600;
	text-decoration: none;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
	color: var(--color-accent);
}

.site-nav__link[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.4em;
}

/* Links inside submenus are lighter than the top level. */
.site-nav__submenu .site-nav__link {
	font-family: var(--font-body);
	font-size: var(--step-0);
	font-weight: 400;
}

.site-nav__toggle {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-text);
	cursor: pointer;
}

.site-nav__toggle .icon {
	transition: transform var(--duration-fast) var(--ease);
}

.site-nav__toggle[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

.site-nav__group-label {
	display: block;
	margin-bottom: var(--space-1);
	color: var(--color-text-subtle);
	font-family: var(--font-heading);
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.site-nav__external {
	color: var(--color-text-subtle);
}

.site-nav__item--action > .site-nav__link {
	color: var(--color-accent);
}

/* ---------- Phones and tablets ---------- */

@media (max-width: 74.99rem) {

	/* Without JS the menu is a plain list under the header row. */
	.site-nav {
		order: 3;
		width: 100%;
		padding-bottom: var(--space-4);
	}

	.js .site-header__toggle {
		display: inline-flex;
	}

	.js .site-nav {
		display: none;
		position: fixed;
		top: var(--engleski-header-height, 4rem);
		right: 0;
		bottom: 0;
		left: 0;
		overflow-y: auto;
		padding: var(--space-4) var(--gutter) var(--space-7);
		background: var(--color-surface);
	}

	.js .site-header.is-open .site-nav {
		display: block;
	}

	.site-nav__menu > .site-nav__item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid var(--color-border);
	}

	.site-nav__menu > .site-nav__item > .site-nav__link {
		flex: 1;
		min-height: 52px;
		font-size: var(--step-0);
	}

	.site-nav__submenu {
		width: 100%;
		padding-bottom: var(--space-4);
	}

	.js .site-nav__submenu {
		display: none;
	}

	.site-nav__toggle[aria-expanded="true"] + .site-nav__submenu {
		display: block;
	}

	.site-nav__group {
		margin-top: var(--space-3);
	}

	.site-nav__group-list {
		padding-left: var(--space-3);
	}

	.site-nav__cta {
		margin-top: var(--space-6);
	}

	.site-nav__cta .button {
		width: 100%;
	}

	.site-header__cta-rest {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	body.has-open-menu {
		overflow: hidden;
	}
}

/* ---------- Desktop ---------- */

/* Phones: the menu slides down 8px and fades in (250ms), out quicker. */
@media (max-width: 74.99rem) and (prefers-reduced-motion: no-preference) {

	.js .site-nav {
		opacity: 0;
		translate: 0 -8px;
		transition:
			opacity var(--duration-fast) var(--ease),
			translate var(--duration-fast) var(--ease),
			display var(--duration-fast) allow-discrete;
	}

	.js .site-header.is-open .site-nav {
		opacity: 1;
		translate: none;
		transition-duration: var(--duration-base);
	}

	@starting-style {

		.js .site-header.is-open .site-nav {
			opacity: 0;
			translate: 0 -8px;
		}
	}
}

@media (min-width: 75rem) {

	.site-header__inner {
		flex-wrap: nowrap;
		min-height: 4.5rem;
	}

	.site-nav__menu {
		display: flex;
		gap: var(--space-5);
		align-items: center;
	}

	.site-nav__menu > .site-nav__item {
		display: flex;
		align-items: center;
	}

	.site-nav__menu > .site-nav__item > .site-nav__toggle {
		width: 28px;
		margin-left: calc(-1 * var(--space-1));
	}

	.site-nav__item--action {
		padding-left: var(--space-5);
		border-left: 1px solid var(--color-border);
	}

	.site-nav__submenu {
		display: none;
		position: absolute;
		top: 100%;
		left: calc(-1 * var(--space-5));
		z-index: 10;
		min-width: 15rem;
		padding: var(--space-5);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-card);
		background: var(--color-surface);
		box-shadow: var(--shadow-raised);
	}

	/* Kursevi: course groups side by side. */
	.site-nav__submenu:has(> .site-nav__group) {
		display: none;
		grid-template-columns: repeat(3, max-content);
		gap: var(--space-4) var(--space-7);
	}

	.site-nav__toggle[aria-expanded="true"] + .site-nav__submenu {
		display: block;
	}

	.site-nav__toggle[aria-expanded="true"] + .site-nav__submenu:has(> .site-nav__group) {
		display: grid;
	}

	.site-nav__submenu > .site-nav__item:not(.site-nav__group) {
		grid-column: 1 / -1;
	}

	.site-nav__submenu .site-nav__link {
		min-height: 36px;
	}

	.site-nav__cta {
		display: none;
	}
}

/* Mouse users also get dropdowns on hover. */
@media (min-width: 75rem) and (hover: hover) {

	.site-nav__menu > .site-nav__item:hover > .site-nav__submenu {
		display: block;
	}

	.site-nav__menu > .site-nav__item:hover > .site-nav__submenu:has(> .site-nav__group) {
		display: grid;
	}
}