/* ==========================================================================
   Site Frame — header: brand, main menu, WhatsApp button
   The menu shows inline above 1180px and as a drop-down panel below it.
   ========================================================================== */

/* sticky bar (the template-part wrapper sticks, so the bar stays under the admin bar) */
.wp-site-blocks > .wp-block-template-part:has(> .mro-header) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: var(--wp--custom--layer--header);
}

.mro-header {
	position: relative;
	isolation: isolate;
	transition: box-shadow var(--wp--custom--duration--base) var(--wp--custom--ease--gentle);
}
/* translucent, blurred background lives on ::before — a blurred ancestor
   would trap the menu panel inside the bar */
.mro-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.mro-header.is-scrolled { box-shadow: var(--wp--preset--shadow--soft); }

.mro-header .mro-header__inner {
	gap: var(--wp--preset--spacing--60);
	max-width: var(--wp--custom--container--wide);
	min-height: var(--wp--custom--header--height);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--20) var(--wp--custom--gutter);
}

/* ---------- Brand ---------- */
.mro-header .mro-brand {
	flex: none;
	gap: var(--wp--preset--spacing--30);
}
.mro-header .mro-brand__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: var(--wp--custom--weight--regular);
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--display);
	color: var(--wp--preset--color--contrast);
}
.mro-header .mro-brand__name a {
	color: inherit;
	text-decoration: none;
}

/* logo placeholder — shows until a logo is set in the Site Logo block */
body:not(.editor-styles-wrapper) .mro-header .mro-brand:not(:has(.wp-block-site-logo img))::before {
	content: "logo";
	flex: none;
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border: var(--wp--custom--stroke--hand) dashed var(--wp--preset--color--accent-strong);
	border-radius: 50%;
	background: var(--wp--preset--color--mint-faint);
	color: var(--wp--preset--color--accent-strong);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--weight--bold);
	line-height: 1;
}

/* ---------- Main menu ---------- */
.mro-header .mro-nav {
	margin-left: auto;
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--weight--medium);
}
.mro-header .mro-nav .wp-block-navigation__container { gap: var(--wp--preset--spacing--50); }
.mro-header .mro-nav .wp-block-navigation-item__content {
	padding-block: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	white-space: nowrap;
}
.mro-header .mro-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-strong);
	text-decoration: underline wavy var(--wp--preset--color--accent);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.2em;
}

/* round menu / close buttons */
.mro-header .mro-nav .wp-block-navigation__responsive-container-open,
.mro-header .mro-nav .wp-block-navigation__responsive-container-close {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: var(--wp--custom--stroke--hand) solid var(--wp--preset--color--line);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}
.mro-header .mro-nav .wp-block-navigation__responsive-container-open svg,
.mro-header .mro-nav .wp-block-navigation__responsive-container-close svg { display: none; }
.mro-header .mro-nav .wp-block-navigation__responsive-container-open::before,
.mro-header .mro-nav .wp-block-navigation__responsive-container-close::before {
	content: "";
	width: 24px;
	height: 24px;
	background: currentColor;
	-webkit-mask: var(--mro-nav-icon) center / contain no-repeat;
	mask: var(--mro-nav-icon) center / contain no-repeat;
}
.mro-header .mro-nav .wp-block-navigation__responsive-container-open {
	--mro-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.6h16M4 12.2h11.5M4 16.8h16'/%3E%3C/svg%3E");
}
.mro-header .mro-nav .wp-block-navigation__responsive-container-close {
	--mro-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}

/* ---------- WhatsApp button ---------- */
.mro-header .mro-header__cta { flex: none; }
.mro-header .mro-header__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	min-height: 2.75rem;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
	border: 2px solid transparent;
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--wp--custom--duration--quick) var(--wp--custom--ease--gentle),
		transform var(--wp--custom--duration--base) var(--wp--custom--ease--gentle);
}
.mro-header .mro-header__cta .wp-block-button__link:hover { transform: translateY(-2px); }
.mro-header .mro-header__cta .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.2l1.3-3.9A8.4 8.4 0 1 1 8.1 19z'/%3E%3Cpath d='M9.2 8.1c-.4 3.6 2.9 7 6.6 6.7l.9-1.6-2.1-1.1-1 .9a5 5 0 0 1-2.6-2.6l.9-1-1-2.1z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.2l1.3-3.9A8.4 8.4 0 1 1 8.1 19z'/%3E%3Cpath d='M9.2 8.1c-.4 3.6 2.9 7 6.6 6.7l.9-1.6-2.1-1.1-1 .9a5 5 0 0 1-2.6-2.6l.9-1-1-2.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Wide screens: links inline, no menu button ---------- */
@media (min-width: 1181px) {
	.mro-header .mro-nav .wp-block-navigation__responsive-container-open { display: none; }
	.mro-header .mro-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: block;
		position: relative;
		inset: auto;
		width: auto;
		z-index: auto;
		background-color: transparent;
	}
	.mro-header .mro-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close { display: none; }
}

@media (max-width: 1360px) {
	.mro-header .mro-nav { font-size: var(--wp--preset--font-size--sm); }
	.mro-header .mro-nav .wp-block-navigation__container { gap: var(--wp--preset--spacing--40); }
}

/* ---------- Narrow screens: drop-down panel under the bar ---------- */
@media (max-width: 1180px) {
	/* core positions these three wrappers; static lets the panel hang off the bar */
	.mro-header .mro-nav.wp-block-navigation,
	.mro-header .mro-nav .wp-block-navigation__responsive-dialog,
	.mro-header .mro-nav .wp-block-navigation__responsive-close { position: static; }

	.mro-header .mro-nav .wp-block-navigation__responsive-container.is-menu-open {
		position: absolute;
		inset: 100% 0 auto 0;
		height: auto;
		padding: var(--wp--preset--spacing--30) var(--wp--custom--gutter) var(--wp--preset--spacing--60);
		overflow: visible;
		background-color: var(--wp--preset--color--base);
		color: var(--wp--preset--color--contrast);
		border-radius: 0 0 var(--wp--custom--radius--lg) var(--wp--custom--radius--lg);
		box-shadow: var(--wp--preset--shadow--soft);
		font-size: var(--wp--preset--font-size--md);
		animation: mro-drop var(--wp--custom--duration--base) var(--wp--custom--ease--gentle);
	}
	body .mro-header .mro-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { margin-top: 0; }

	.mro-header .mro-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 0;
		max-height: calc(100dvh - var(--wp--custom--header--height) - var(--wp-admin--admin-bar--height, 0px) - 5rem);
		overflow-y: auto;
		align-items: stretch;
	}
	.mro-header .mro-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 0;
		align-items: stretch;
		width: 100%;
	}
	.mro-header .mro-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }
	.mro-header .mro-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: var(--wp--preset--spacing--30) 0;
		border-bottom: var(--wp--custom--stroke--hand) dashed var(--wp--preset--color--line);
	}

	/* the X takes the menu button's spot (site-frame.js measures it) */
	.mro-header .mro-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open { visibility: hidden; }
	.mro-header .mro-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute;
		top: var(--mro-toggle-top, calc((var(--wp--custom--header--height) + 3rem) / -2));
		right: var(--mro-toggle-right, var(--wp--custom--gutter));
		z-index: 2;
	}
}

@media (max-width: 640px) {
	.mro-header .mro-header__inner { min-height: var(--wp--custom--header--heightsmall); }
	.mro-header .mro-header__cta { display: none; }
	body:not(.editor-styles-wrapper) .mro-header .mro-brand:not(:has(.wp-block-site-logo img))::before { width: 2.75rem; height: 2.75rem; }
	.mro-header .mro-brand__name { font-size: var(--wp--preset--font-size--md); }
}