/*
 * Leimer header (Ticket #56): sticky, slides away on scroll down (assets/header.js), phone and desktop layouts.
 * Colours, fonts and spacing come from theme.json presets. The menu switches to its phone form at 600px,
 * where WordPress's own navigation block switches, so the two always agree.
 */

/* Sticky: the template part that wraps the header. */
.wp-block-template-part:has(> .leimer-header) {
	border-bottom: 1px solid var(--wp--preset--color--line);
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--paper);
	transition: transform 0.25s ease;
}

.admin-bar .wp-block-template-part:has(> .leimer-header) {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Under 601px the admin bar scrolls away, so there is nothing to sit below. */
@media (max-width: 600px) {
	.admin-bar .wp-block-template-part:has(> .leimer-header) {
		top: 0;
	}
}

/* Only the hidden state sets a transform: a transform on the visible header would trap the full-screen menu. */
.wp-block-template-part.is-header-hidden {
	transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-template-part:has(> .leimer-header) {
		transition: none;
	}

	.wp-block-template-part.is-header-hidden {
		transform: none;
	}
}

/* Row: the theme's side padding, and the page's wide width (padding sits inside it, like the content below). */
.leimer-header {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--wp--style--global--wide-size, 1200px) + 2 * var(--wp--style--root--padding-left, 1.5rem));
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 1.5rem) var(--wp--style--root--padding-right, 1.5rem);
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--30);
}

.leimer-header__brand,
.leimer-header__brand a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.leimer-header__brand {
	margin: 0;
	flex: 0 0 auto;
}

.leimer-header__actions {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: var(--wp--preset--spacing--20);
}

.leimer-header__actions p,
.leimer-header .wp-block-buttons {
	margin: 0;
}

/* Desktop (600px and up): phone-only parts are hidden. !important because core's layout classes also set display. */
@media (min-width: 600px) {
	.leimer-header .leimer-phone-only {
		display: none !important;
	}
}

.leimer-header .leimer-main-nav {
	margin-left: auto;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	gap: var(--wp--preset--spacing--40);
}

.leimer-header .leimer-main-nav .wp-block-navigation-item__content {
	padding: 0.5rem 0.25rem;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.leimer-header .leimer-main-nav .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.leimer-header .leimer-main-nav .current-menu-item > .wp-block-navigation-item__content,
.leimer-header .leimer-main-nav [aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-underline-offset: 0.3em;
}

/* Keyboard focus, everywhere in the header and the open menu. */
.leimer-header a:focus-visible,
.leimer-header button:focus-visible,
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-deep);
	outline-offset: 3px;
}

/* Phones (under 600px): icon + Leimer, call, Estimate, menu toggle. */
@media (max-width: 599.98px) {
	.leimer-header .leimer-desk-only {
		display: none !important;
	}

	.leimer-header {
		gap: 0.5rem;
	}

	.leimer-header__actions {
		gap: 0.375rem;
	}

	.leimer-header__brand {
		flex: 1 1 auto;
		min-width: 0;
	}

	.leimer-header .leimer-header__brand-phone {
		gap: 0.5rem;
		flex-wrap: nowrap;
	}

	.leimer-header__brand-name {
		margin: 0;
		white-space: nowrap;
		font-family: var(--wp--preset--font-family--serif);
		font-size: var(--wp--preset--font-size--lg);
		font-weight: 500;
		line-height: 1;
	}

	/* Leimer over a small bold CONSTRUCTION, like the desktop wordmark, centred as one block on the icon. */
	.leimer-header__brand-name a {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
		color: inherit;
		text-decoration: none;
	}

	.leimer-header__brand-sub {
		font-family: var(--wp--preset--font-family--sans);
		font-size: 0.5625rem;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.leimer-header .leimer-main-nav {
		margin-left: 0;
	}

	.leimer-header__call {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		min-width: 44px;
		padding: 0 0.6rem;
		white-space: nowrap;
		border: 1px solid var(--wp--preset--color--accent);
		border-radius: 2px;
		color: var(--wp--preset--color--accent);
		font-weight: 600;
		text-decoration: none;
	}

	.leimer-header__estimate-phone .wp-block-button__link {
		min-height: 44px;
		white-space: nowrap;
		display: inline-flex;
		align-items: center;
		padding: 0 0.7em;
		font-size: var(--wp--preset--font-size--sm);
	}

	.wp-block-navigation__responsive-container-open {
		min-height: 44px;
		min-width: 44px;
		justify-content: center;
		align-items: center;
	}
}

/* The full-screen menu: large tap targets. */
.leimer-main-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	padding: var(--wp--preset--spacing--40);
}

.leimer-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
	align-items: stretch;
}

.leimer-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.leimer-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 1.1rem 0;
	min-height: 56px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--3-xl);
	line-height: 1.2;
}

/* Narrow desktop and tablets (600 to 799px): tighter menu so the row still fits. */
@media (min-width: 600px) and (max-width: 799px) {
	.leimer-header .leimer-main-nav {
		gap: var(--wp--preset--spacing--20);
		font-size: var(--wp--preset--font-size--sm);
	}
}