/*
 * Site header — multi-pane fixed container with internal grid borders.
 * Desktop: brand | nav | cta panes separated by 1px lines. Height 80px.
 * Mobile: hamburger toggle → drawer slides in from the right (500ms).
 */

/* The template-part <header> wrapper is the sticky element (see theme style.css).
 * The frosted layer lives on __inner (not on .mcci-header) so backdrop-filter
 * never becomes the containing block / stacking context for the fixed
 * full-screen menu, which is a sibling of __inner inside .mcci-header. */
.mcci-header {
	position: relative;
	z-index: 50;
	border-bottom: 1px solid var( --wp--custom--line--color, #d2cfc7 );
}

.mcci-header__inner {
	background: var( --wp--preset--color--sand, #ebe8e3 );
	transition: background 400ms ease, box-shadow 400ms ease,
		-webkit-backdrop-filter 400ms ease, backdrop-filter 400ms ease;
}

/* Frosted glass once the page is scrolled — premium sticky header. */
.mcci-header.is-scrolled .mcci-header__inner {
	background: rgba( 235, 232, 227, 0.72 );
	-webkit-backdrop-filter: blur( 14px ) saturate( 1.08 );
	backdrop-filter: blur( 14px ) saturate( 1.08 );
	box-shadow: 0 10px 30px -14px rgba( 28, 27, 26, 0.22 );
}

/* While the overlay is open, drop the blur so __inner is not a stacking context
 * — keeps the toggle X clickable above the overlay (the overlay hides it anyway). */
.mcci-header.is-menu-open .mcci-header__inner {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
	background: transparent;
}

@media ( prefers-reduced-motion: reduce ) {
	.mcci-header__inner {
		transition: none;
	}
}

.mcci-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: stretch;
	min-height: var( --wp--custom--header-height, 80px );
}

.mcci-header__brand,
.mcci-header__cta {
	display: flex;
	align-items: center;
	padding-inline: var( --wp--custom--edge, clamp( 1rem, 4vw, 2rem ) );
}

.mcci-header__logo {
	font-size: var( --wp--preset--font-size--medium, 1.125rem );
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var( --wp--custom--tracking--label, 0.2em );
	text-decoration: none;
	color: var( --wp--preset--color--charcoal, #1e1d1b );
	white-space: nowrap;
}

/* Desktop navigation ----------------------------------------------------- */
.mcci-header__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: clamp( 1rem, 4vw, 2rem );
}

.mcci-header__menu {
	display: flex;
	gap: clamp( 1rem, 3vw, 2.5rem );
	list-style: none;
	margin: 0;
	padding: 0;
}

.mcci-header__menu a {
	font-size: var( --wp--preset--font-size--label, 0.75rem );
	text-transform: uppercase;
	letter-spacing: var( --wp--custom--tracking--label, 0.2em );
	text-decoration: none;
	color: var( --wp--preset--color--charcoal, #1e1d1b );
	transition: color var( --wp--custom--motion--standard, 500ms ease-in-out );
}

.mcci-header__menu a:hover {
	color: var( --wp--preset--color--moss, #6a6750 );
}

.mcci-header__cta-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var( --wp--preset--font-size--label, 0.75rem );
	text-transform: uppercase;
	letter-spacing: var( --wp--custom--tracking--label, 0.2em );
	text-decoration: none;
	color: var( --wp--preset--color--charcoal, #1e1d1b );
	white-space: nowrap;
}

/* Toggle (hamburger → X) + full-screen overlay menu ---------------------- */
.mcci-header__toggle,
.mcci-header__drawer {
	display: none;
}

.mcci-header__toggle {
	appearance: none;
	background: transparent;
	border: 0;
	border-left: 1px solid var( --wp--custom--line--color, #d2cfc7 );
	padding-inline: 1.25rem;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 60; /* stay above the overlay so the X remains clickable */
	transition: border-color 300ms ease;
}

.mcci-header__toggle-box {
	position: relative;
	display: block;
	width: 28px;
	height: 13px;
}

.mcci-header__toggle-bar {
	position: absolute;
	left: 0;
	width: 28px;
	height: 2px;
	background: var( --wp--preset--color--charcoal, #1e1d1b );
	/* Closing: bar re-separates (top) AFTER it un-rotates (transform); and it stays
	 * LIGHT until the circle wipe (760ms) has fully receded, then goes dark over the
	 * sand — so the X is never dark-on-dark against the shrinking overlay. */
	transition: top 260ms ease 150ms, transform 320ms cubic-bezier( 0.76, 0, 0.24, 1 ),
		background-color 200ms ease 760ms;
}

.mcci-header__toggle-bar:nth-child( 1 ) { top: 0; }
.mcci-header__toggle-bar:nth-child( 2 ) { top: 11px; }

/* Open: bars converge to centre (top, no delay) THEN cross (transform delay). */
.mcci-header.is-menu-open .mcci-header__toggle-bar {
	background: var( --wp--preset--color--light, #f9f8f6 );
	transition: top 260ms ease, transform 320ms cubic-bezier( 0.76, 0, 0.24, 1 ) 150ms,
		background-color 280ms ease;
}

.mcci-header.is-menu-open .mcci-header__toggle-bar:nth-child( 1 ) {
	top: 5.5px;
	transform: rotate( 45deg );
}

.mcci-header.is-menu-open .mcci-header__toggle-bar:nth-child( 2 ) {
	top: 5.5px;
	transform: rotate( -45deg );
}

@media ( max-width: 900px ) {
	.mcci-header__inner {
		grid-template-columns: 1fr auto;
	}

	.mcci-header__nav,
	.mcci-header__cta {
		display: none;
	}

	.mcci-header__toggle {
		display: flex;
	}

	/* Keep the brand visible over the overlay; turn it light while open. */
	.mcci-header__brand {
		position: relative;
		z-index: 60;
	}

	.mcci-header.is-menu-open .mcci-header__logo {
		color: var( --wp--preset--color--light, #f9f8f6 );
		transition: color 300ms ease 120ms;
	}

	/* No internal grid lines on the mobile header — the toggle's border-left
	 * would otherwise flash as a vertical seam against the overlay while the
	 * circle wipe contracts. */
	.mcci-header__inner .mcci-header__brand {
		border-right: 0;
	}

	.mcci-header__inner .mcci-header__toggle {
		border-left: 0;
	}

	/* Full-screen overlay revealed with a circle wipe from the toggle corner. */
	.mcci-header__drawer {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 55;
		background: var( --wp--preset--color--charcoal, #1e1d1b );
		color: var( --wp--preset--color--light, #f9f8f6 );
		overflow-y: auto;
		/* Both radii MUST be percentages — a length (0) and a percentage (150%)
		 * are not interpolable, so the wipe would step/glitch instead of animate. */
		clip-path: circle( 0% at calc( 100% - 36px ) 40px );
		transition: clip-path 760ms cubic-bezier( 0.76, 0, 0.24, 1 );
	}

	.mcci-header.is-menu-open .mcci-header__drawer {
		clip-path: circle( 150% at calc( 100% - 36px ) 40px );
	}

	.mcci-header__drawer-inner {
		min-height: 100dvh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var( --wp--preset--spacing--50, 64px );
		padding: calc( var( --wp--custom--header-height, 80px ) + var( --wp--preset--spacing--40, 32px ) ) clamp( 1.5rem, 8vw, 4rem ) var( --wp--preset--spacing--50, 64px );
	}

	.mcci-header__drawer-nav .mcci-header__menu {
		flex-direction: column;
		align-items: flex-start;
		gap: clamp( 0.75rem, 3.5vw, 1.75rem );
	}

	.mcci-header__drawer .mcci-header__menu a {
		display: inline-block;
		color: var( --wp--preset--color--light, #f9f8f6 );
		font-size: clamp( 2rem, 9vw, 3.25rem );
		font-weight: 300;
		line-height: 1.05;
		letter-spacing: var( --wp--custom--tracking--tight, -0.02em );
		text-transform: none;
		text-decoration: none;
		transition: color 300ms ease, transform 300ms ease;
	}

	.mcci-header__drawer .mcci-header__menu a:hover {
		color: var( --wp--preset--color--sage-light, #a8a488 );
		transform: translateX( 10px );
	}

	/* Staggered entrance of the links (delays begin after the wipe starts). */
	.mcci-header__drawer-nav .mcci-header__menu li {
		opacity: 0;
		transform: translateY( 26px );
		transition: opacity 500ms ease, transform 620ms cubic-bezier( 0.16, 1, 0.3, 1 );
	}

	.mcci-header.is-menu-open .mcci-header__drawer-nav .mcci-header__menu li {
		opacity: 1;
		transform: translateY( 0 );
	}

	.mcci-header.is-menu-open .mcci-header__drawer-nav .mcci-header__menu li:nth-child( 1 ) { transition-delay: 0.26s; }
	.mcci-header.is-menu-open .mcci-header__drawer-nav .mcci-header__menu li:nth-child( 2 ) { transition-delay: 0.34s; }
	.mcci-header.is-menu-open .mcci-header__drawer-nav .mcci-header__menu li:nth-child( 3 ) { transition-delay: 0.42s; }
	.mcci-header.is-menu-open .mcci-header__drawer-nav .mcci-header__menu li:nth-child( 4 ) { transition-delay: 0.50s; }
	.mcci-header.is-menu-open .mcci-header__drawer-nav .mcci-header__menu li:nth-child( 5 ) { transition-delay: 0.58s; }
	.mcci-header.is-menu-open .mcci-header__drawer-nav .mcci-header__menu li:nth-child( 6 ) { transition-delay: 0.66s; }

	.mcci-header__drawer-foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var( --wp--preset--spacing--30, 24px );
		padding-top: var( --wp--preset--spacing--40, 32px );
		border-top: 1px solid rgba( 249, 248, 246, 0.16 );
		opacity: 0;
		transform: translateY( 16px );
		transition: opacity 500ms ease, transform 500ms ease;
	}

	.mcci-header.is-menu-open .mcci-header__drawer-foot {
		opacity: 1;
		transform: translateY( 0 );
		transition-delay: 0.62s;
	}

	.mcci-header__drawer-cta {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		color: var( --wp--preset--color--light, #f9f8f6 );
		font-size: var( --wp--preset--font-size--label, 0.75rem );
		text-transform: uppercase;
		letter-spacing: var( --wp--custom--tracking--label, 0.2em );
		text-decoration: none;
	}

	.mcci-header__drawer-meta {
		color: var( --wp--preset--color--sage-light, #a8a488 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.mcci-header__drawer,
	.mcci-header__toggle-bar,
	.mcci-header__drawer-nav .mcci-header__menu li,
	.mcci-header__drawer-foot {
		transition: none !important;
	}
}