/* ==========================================================================
   Million Dots — Site Frame
   Header bar, brand wordmark, primary navigation (desktop + mobile panel),
   and the shared button system used by the frame.
   Every value comes from theme.json tokens (--wp--preset--* / --wp--custom--*).
   ========================================================================== */

/* --- Resets the design assumes and WordPress does not ship ---------------- */
[class*="mdc-"],
[class*="mdc-"]::before,
[class*="mdc-"]::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--wp--custom--layout--header-height) + var(--wp--preset--spacing--60));
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Reduced motion means "don't animate", not "don't change". Without this a
   transitioned state change can sit frozen at its start value, leaving an
   accordion panel or an overlay stuck closed. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

.mdc-header :focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: var(--wp--custom--radius--xs);
}

/* --- Icon masks (inline SVG cannot live inside core blocks) --------------- */
.mdc-header {
	--mdc-i-phone: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.7 3.4h2.9l1.5 3.7-1.9 1.4a11.6 11.6 0 0 0 5.3 5.3l1.4-1.9 3.7 1.5v2.9a2 2 0 0 1-2.2 2A16.6 16.6 0 0 1 4.7 5.6a2 2 0 0 1 2-2.2z'/%3E%3C/svg%3E");
	--mdc-i-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.64.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.06-.17-.3-.02-.46.13-.6.13-.13.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.38-.02-.53-.08-.15-.67-1.6-.92-2.2-.24-.57-.49-.5-.67-.5h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.01-1.04 2.47s1.06 2.87 1.21 3.07c.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.69.63.71.22 1.36.19 1.87.12.57-.09 1.76-.72 2-1.41.25-.7.25-1.29.17-1.42-.07-.13-.27-.2-.57-.35z'/%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.96L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2m0 18.13h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.05-.2-.31a8.2 8.2 0 0 1-1.26-4.35c0-4.54 3.7-8.24 8.25-8.24a8.23 8.23 0 0 1 8.24 8.25c0 4.54-3.7 8.23-8.24 8.23'/%3E%3C/svg%3E");
	--mdc-i-arrow: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Button system (shared by the header bar and the mobile panel)
   ========================================================================== */

.mdc-header .mdc-btn > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 50px;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--weight--semibold);
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--wp--custom--duration--base) var(--wp--custom--ease--out),
		border-color var(--wp--custom--duration--base) var(--wp--custom--ease--out),
		color var(--wp--custom--duration--base) var(--wp--custom--ease--out),
		box-shadow var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.mdc-header .mdc-btn > .wp-block-button__link:active {
	transform: translateY(1px);
}

.mdc-header .mdc-btn--primary > .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--accent);
}

.mdc-header .mdc-btn--primary > .wp-block-button__link:hover,
.mdc-header .mdc-btn--primary > .wp-block-button__link:focus-visible {
	background-color: var(--wp--custom--color--accent-hover);
	color: var(--wp--preset--color--base);
}

.mdc-header .mdc-btn--primary > .wp-block-button__link:active {
	background-color: var(--wp--custom--color--accent-press);
}

.mdc-header .mdc-btn--outline > .wp-block-button__link {
	background-color: transparent;
	border-color: var(--wp--custom--color--border-strong);
	color: var(--wp--preset--color--contrast);
}

.mdc-header .mdc-btn--outline > .wp-block-button__link:hover,
.mdc-header .mdc-btn--outline > .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.mdc-header .mdc-btn--sm > .wp-block-button__link {
	min-height: 42px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--x-small);
}

.mdc-header .mdc-btn--block,
.mdc-header .mdc-btn--block > .wp-block-button__link {
	width: 100%;
}

/* Icons are chosen from the destination, so they survive label edits. */
.mdc-header .mdc-btn > .wp-block-button__link[href*="wa.me"]::before,
.mdc-header .mdc-btn > .wp-block-button__link[href^="tel:"]::before {
	content: "";
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	font-size: var(--wp--preset--font-size--small);
	background-color: currentColor;
}

.mdc-header .mdc-btn > .wp-block-button__link[href*="wa.me"]::before {
	-webkit-mask: var(--mdc-i-whatsapp) center / contain no-repeat;
	mask: var(--mdc-i-whatsapp) center / contain no-repeat;
}

.mdc-header .mdc-btn > .wp-block-button__link[href^="tel:"]::before {
	-webkit-mask: var(--mdc-i-phone) center / contain no-repeat;
	mask: var(--mdc-i-phone) center / contain no-repeat;
}

/* ==========================================================================
   The sticky bar
   ========================================================================== */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: var(--wp--custom--z-index--header);
}

/* Logged-in owners get the fixed admin bar; keep the sticky bar below it. */
.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.mdc-header {
	--mdc-h: var(--wp--custom--layout--header-height);
	padding: 0;
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
	transition: box-shadow var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.mdc-header.mdc-is-stuck {
	--mdc-h: var(--wp--custom--layout--header-height-compact);
	box-shadow: var(--wp--custom--shadow--sm);
}

.mdc-header .mdc-header__inner.wp-block-group {
	width: 100%;
	max-width: var(--wp--custom--layout--container-max);
	margin-inline: auto;
	padding-inline: var(--wp--custom--layout--gutter);
	min-height: var(--mdc-h);
	gap: var(--wp--preset--spacing--60);
	transition: min-height var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

/* ==========================================================================
   Brand
   ========================================================================== */

.mdc-header .mdc-header__brand.wp-block-group {
	flex: 0 0 auto;
	gap: var(--wp--preset--spacing--30);
}

.mdc-header .wp-block-site-logo {
	line-height: 0;
}

.mdc-header .wp-block-site-logo img {
	display: block;
	width: 46px;
	height: 46px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
}

.mdc-header .mdc-header__word.wp-block-group {
	gap: 2px;
}

.mdc-header__name {
	margin: 0;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: var(--wp--custom--weight--bold);
	letter-spacing: var(--wp--custom--tracking--tight);
	line-height: 1;
	color: var(--wp--preset--color--contrast);
}

.mdc-header__name em {
	font-style: normal;
	color: var(--wp--preset--color--accent);
}

.mdc-header__tag {
	margin: 0;
	white-space: nowrap;
	font-size: 0.625rem;
	font-weight: var(--wp--custom--weight--medium);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	line-height: 1;
	color: var(--wp--custom--color--ink-subtle);
}

/* ==========================================================================
   Header actions (phone + bar CTA)
   ========================================================================== */

.mdc-header .mdc-header__actions.wp-block-group {
	flex: 0 0 auto;
	gap: var(--wp--preset--spacing--40);
}

.mdc-header__phone {
	display: none;
	margin: 0;
}

.mdc-header .mdc-header__phone a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--weight--semibold);
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
	text-decoration: none;
	transition: color var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.mdc-header .mdc-header__phone a::before {
	content: "";
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: var(--mdc-i-phone) center / contain no-repeat;
	mask: var(--mdc-i-phone) center / contain no-repeat;
}

.mdc-header .mdc-header__phone a:hover,
.mdc-header .mdc-header__phone a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.mdc-header .mdc-header__cta.wp-block-buttons {
	gap: 0;
	flex: 0 0 auto;
}

/* ==========================================================================
   Primary navigation — desktop
   ========================================================================== */

.mdc-header .mdc-nav {
	flex: 0 1 auto;
}

.mdc-header .mdc-nav .wp-block-navigation__container {
	gap: clamp(var(--wp--preset--spacing--30), 1.6vw, var(--wp--preset--spacing--60));
}

.mdc-header .mdc-nav .wp-block-navigation-item__content {
	position: relative;
	display: block;
	padding: var(--wp--preset--spacing--20) 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--weight--medium);
	color: var(--wp--preset--color--ink-muted);
	white-space: nowrap;
	text-decoration: none;
	transition: color var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.mdc-header .mdc-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background-color: var(--wp--preset--color--accent);
	transition: right var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.mdc-header .mdc-nav .wp-block-navigation-item__content:hover,
.mdc-header .mdc-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--contrast);
}

.mdc-header .mdc-nav .wp-block-navigation-item__content:hover::after,
.mdc-header .mdc-nav .wp-block-navigation-item__content:focus-visible::after {
	right: 0;
}

/* The panel CTA is drawer-only. */
@media (min-width: 960px) {
	.mdc-header .mdc-nav .mdc-nav__cta {
		display: none;
	}

	.mdc-header__phone {
		display: block;
	}
}

/* ==========================================================================
   Primary navigation — collapse point moved from core's 600px to 960px
   ========================================================================== */

@media (min-width: 600px) and (max-width: 959.98px) {
	.mdc-header .mdc-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.mdc-header .mdc-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: inline-grid;
	}
}

/* Hamburger */
.mdc-header .mdc-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--contrast);
}

.mdc-header .mdc-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
	visibility: hidden;
}

@media (max-width: 959.98px) {
	.mdc-header .mdc-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: inline-grid;
	}
}

@media (min-width: 960px) {
	.mdc-header .mdc-nav .wp-block-navigation__responsive-container-open {
		display: none;
	}
}

/* ==========================================================================
   Primary navigation — mobile dropdown panel
   Neutralise core's three positioned wrappers so the panel anchors to the
   sticky header instead of one of them.
   ========================================================================== */

.mdc-header .mdc-nav,
.mdc-header .mdc-nav .wp-block-navigation__responsive-dialog,
.mdc-header .mdc-nav .wp-block-navigation__responsive-close {
	position: static;
}

.mdc-header .mdc-nav .wp-block-navigation__responsive-container.is-menu-open {
	position: absolute;
	inset: 100% 0 auto 0;
	width: auto;
	min-width: 0;
	padding: 0;
	overflow: visible; /* the close X sits above the panel edge */
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--wp--custom--shadow--lg);
	z-index: var(--wp--custom--z-index--drawer);
	animation: mdc-panel-in var(--wp--custom--duration--base) var(--wp--custom--ease--out) both;
}

@keyframes mdc-panel-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mdc-header .mdc-nav .wp-block-navigation__responsive-container.is-menu-open {
		animation: none;
	}
}

.mdc-header .mdc-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	display: block;
	width: 100%;
	max-height: calc(100dvh - var(--mdc-h));
	overflow-y: auto;
	padding: var(--wp--preset--spacing--60) var(--wp--custom--layout--gutter) var(--wp--preset--spacing--90);
}

.mdc-header .mdc-nav .is-menu-open .wp-block-navigation__container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-content: stretch;
	gap: 0;
	width: 100%;
	border-top: 1px solid var(--wp--preset--color--border);
}

.mdc-header .mdc-nav .is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.mdc-header .mdc-nav .is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--wp--preset--spacing--40) 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: var(--wp--custom--weight--semibold);
	color: var(--wp--preset--color--contrast);
}

.mdc-header .mdc-nav .is-menu-open .wp-block-navigation-item__content::after {
	content: "";
	position: static;
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: var(--mdc-i-arrow) center / contain no-repeat;
	mask: var(--mdc-i-arrow) center / contain no-repeat;
	transition: none;
}

.mdc-header .mdc-nav .is-menu-open .mdc-nav__cta.wp-block-buttons {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	width: 100%;
	margin-top: var(--wp--preset--spacing--80);
}

/* Close X, parked exactly where the hamburger was. */
.mdc-header .mdc-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: calc(-1 * var(--mdc-h) / 2 - 22px);
	right: var(--wp--custom--layout--gutter);
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--contrast);
	z-index: 1;
}

/* ==========================================================================
   Small-phone compaction — the bar CTA drops to an icon, per the design
   ========================================================================== */

@media (max-width: 430px) {
	.mdc-header .mdc-header__inner.wp-block-group {
		gap: var(--wp--preset--spacing--30);
	}

	.mdc-header .mdc-header__cta .wp-block-button__link {
		width: 42px;
		padding-inline: 0;
		font-size: 0;
		gap: 0;
	}

	.mdc-header .mdc-header__tag {
		display: none;
	}
}

/* ==========================================================================
   Below the desktop breakpoint the hamburger moves to the far right,
   after the phone/CTA cluster — matching the original design's order.
   ========================================================================== */

@media (max-width: 959.98px) {
	.mdc-header .mdc-header__inner.wp-block-group {
		justify-content: flex-start;
	}

	.mdc-header .mdc-header__brand.wp-block-group {
		margin-inline-end: auto;
	}

	.mdc-header .mdc-header__actions.wp-block-group {
		order: 2;
	}

	.mdc-header .mdc-nav {
		order: 3;
	}
}