/*
 * Site header — Figma "Global Header" (CRH file CPO8VrN83OFQrdnEQ6hRGX,
 * 8103:36711: desktop 8103:36712, mobile 8107:1167) and "Global / Message
 * Bar" (28408:5436).
 *
 * Served directly, like block CSS; bin/add-fallbacks.mjs generates the var()
 * fallbacks. Type metrics come from the composite classes in the markup
 * (.text-label-sm, .text-label-lg); this file is color and layout only.
 */

.site-header {
	background: var(--background, #ffffff);
}

/* Announcement bar ---------------------------------------------------------- */

.site-announcement {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: var(--spacing-2, 8px) var(--section-hr-padding, 64px);
	background: var(--primary, #325cb2);
	color: var(--primary-foreground, #ffffff);
}

.site-announcement[hidden] {
	display: none;
}

.site-announcement__text {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	text-align: center;
}

/* Desktop: pinned 16px from the right edge at 20px, so the copy stays centred
   on the full bar. Mobile moves it into the flow at 16px (below). */
.site-announcement__close {
	--icon-size: 20px;
	position: absolute;
	top: 50%;
	right: var(--spacing-4, 16px);
	display: inline-flex;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transform: translateY(-50%);
}

.site-announcement__close:focus-visible {
	outline: 2px solid var(--primary-foreground, #ffffff);
	outline-offset: 2px;
	border-radius: var(--radius-sm, 2px);
}

/* Main row ------------------------------------------------------------------ */

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--spacing-8, 32px);
	max-width: var(--container-max-width, 1440px);
	margin-inline: auto;
	padding: var(--spacing-6, 24px) var(--section-hr-padding, 64px);
}

/* The global a:not(.btn) hover underline doesn't belong on the logo. */
.site-header__logo,
.site-header__logo:hover {
	display: flex;
	flex: none;
	align-items: center;
	border-bottom-color: transparent;
}

.site-header__logo img {
	display: block;
	width: auto;
	max-width: 200px;
	height: 60px;
	object-fit: contain;
}

.site-header__site-name {
	color: var(--foreground, #333333);
}

.site-header__nav {
	flex: 1 1 0;
	min-width: 0;
}

.site-header__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* 24px between links, per Figma. A menu longer than the comp's three links
	   can wrap at tablet widths; the 8px row gap keeps it compact when it does. */
	gap: var(--spacing-2, 8px) var(--spacing-6, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Menu links are Figma Button Type=Link in foreground: the hover underline
   comes from the global link rule, in the link's own color. */
.site-header__link {
	color: var(--foreground, #333333);
}

.site-header__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--spacing-2, 8px);
	margin-left: auto;
}

/* The header's pills are full-round in Figma whatever the brand's
   --radius-button is (the Button component uses border-radius/full here). */
.site-header__pill {
	border-radius: var(--radius-full, 9999px);
}

.site-header__toggle {
	display: none;
}

/* Mobile -------------------------------------------------------------------- */

@media (max-width: 767px) {
	.site-announcement__close {
		--icon-size: 16px;
		position: static;
		flex: none;
		transform: none;
	}

	.site-header__inner {
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 0 var(--spacing-2, 8px);
		padding-block: var(--spacing-4, 16px);
	}

	.site-header__logo img {
		height: 40px;
	}

	/* The menu becomes a panel under the row, opened by the toggle. Without JS
	   (no .has-js) it stays visible and the toggle stays hidden, so the menu is
	   always reachable. The open panel isn't in the Figma comp — this is the
	   simplest treatment on existing tokens; replace it when design adds one. */
	.site-header__nav {
		flex-basis: 100%;
		order: 3;
	}

	.site-header.has-js .site-header__nav {
		display: none;
	}

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

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

	.site-header__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin-top: var(--spacing-4, 16px);
		border-top: var(--border-width-1, 1px) solid var(--border, #d4d4d4);
	}

	.site-header__menu > li {
		border-bottom: var(--border-width-1, 1px) solid var(--border, #d4d4d4);
	}

	.site-header__link {
		display: block;
		padding-block: var(--spacing-3, 12px);
	}
}

/* DANCEQUEST header — matches the live Divi header: white bar, logo at 81% of
   the bar, 16px #6d6d6d lowercase links, and the current page as a slanted
   #325cb2 box with white text and 10px padding. */
.site-header__inner {
	padding-block: var(--spacing-4, 16px);
	min-height: 100px;
}

.site-header__logo img {
	height: 52px;
	max-width: 240px;
}

.site-header__nav {
	display: flex;
	justify-content: flex-end;
}

.site-header__menu {
	gap: var(--spacing-2, 8px) var(--spacing-4, 16px);
}

.site-header__link {
	display: inline-block;
	padding: 10px;
	font-family: var(--font-label, "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
	font-weight: 600;
	font-size: var(--font-size-base, 16px);
	line-height: 1;
	text-transform: lowercase;
	color: #6d6d6d;
	border-bottom: 0;
}

.site-header__link:hover {
	color: var(--primary, #325cb2);
	border-bottom: 0;
}

.site-header__menu .current-menu-item > .site-header__link,
.site-header__menu .current_page_item > .site-header__link {
	background: var(--primary, #325cb2);
	color: var(--primary-foreground, #ffffff);
	transform: skewX(-15deg);
}

.site-header__actions {
	margin-left: 0;
}

@media (max-width: 767px) {
	.site-header__menu .current-menu-item > .site-header__link,
	.site-header__menu .current_page_item > .site-header__link {
		transform: none;
	}
}

/* DANCEQUEST container — Divi lays content in an 80%-wide centred column. */
@media (min-width: 768px) {
	.site-header__inner {
		width: 80%;
		max-width: none;
		padding-inline: 0;
		min-height: 123px; /* live Divi header height */
	}
	.site-header__logo img {
		height: 64px;
	}
}

/* DANCEQUEST mobile — 80% column on phones too, and Divi's plain blue
   hamburger instead of the outlined round button. */
@media (max-width: 767px) {
	.site-header__inner {
		width: 80%;
		padding-inline: 0;
		margin-inline: auto;
	}
	.site-header__toggle {
		--icon-size: 28px;
		border: 0;
		background: transparent;
		color: var(--primary, #325cb2);
	}
}

/* mobile menu — matches the live Divi mobile menu: a floating
   white panel under the bar (3px #325cb2 top edge, soft shadow, 5% padding),
   14px/600 lowercase links with faint separators, and the current page as a
   full-width slanted blue bar. Plain blue hamburger, no circle. */
@media (max-width: 767px) {
	.site-header { position: relative; z-index: 50; }
	.site-header__inner { position: relative; }

	.site-header__toggle,
	.site-header__toggle:hover {
		--icon-size: 32px;
		width: auto;
		height: auto;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: var(--primary, #325cb2);
	}
	.site-header__toggle .icon { stroke-width: 2.5; }

	.site-header.has-js .site-header__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		padding: 5%;
		background: var(--background, #ffffff);
		border-top: 3px solid var(--primary, #325cb2);
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.site-header__menu {
		margin-top: 0;
		border-top: 0;
	}
	.site-header__menu > li { border-bottom: 0; }

	.site-header__link,
	.site-header__link:hover {
		display: block;
		padding: 10px 5%;
		font-size: var(--font-size-sm, 14px);
		border-bottom: 1px solid rgba(0, 0, 0, 0.03);
	}

	.site-header__menu .current-menu-item > .site-header__link,
	.site-header__menu .current_page_item > .site-header__link {
		display: block;
		transform: skewX(-15deg);
		background: var(--primary, #325cb2);
		color: var(--primary-foreground, #ffffff);
	}
}

/* mobile active text — per Oris (8 Oct): on the mobile menu the
   current page is blue bold text, not a filled button. Desktop keeps the
   slanted blue box. */
@media (max-width: 767px) {
	.site-header__menu .current-menu-item > .site-header__link,
	.site-header__menu .current_page_item > .site-header__link {
		transform: none;
		background: transparent;
		color: var(--primary, #325cb2);
		font-weight: 700;
	}
}