/**
 * Pixaris header system.
 *
 * Covers the sticky behaviour, the utility bar, the centred variant and the
 * mega menu block style. All four are opt in from the Site Editor: apply the
 * matching block style and the CSS below takes effect.
 *
 * @package Pixaris
 * @author  Pixaris
 * @since   1.2.0
 */

/* Sticky header ----------------------------------------------------------- */

.is-style-pixaris-sticky {
	position: sticky;
	inset-block-start: 0;
	z-index: 80;
	background: var(--wp--preset--color--canvas, #F7F5F1);
	transition: box-shadow 180ms ease, background-color 180ms ease;
}

.admin-bar .is-style-pixaris-sticky {
	inset-block-start: 32px;
}

@media (max-width: 782px) {
	.admin-bar .is-style-pixaris-sticky {
		inset-block-start: 46px;
	}
}

.is-style-pixaris-sticky.is-stuck {
	background: var(--wp--preset--color--surface, #fff);
	box-shadow: 0 1px 0 var(--wp--preset--color--hairline, #E2DDD4), 0 6px 20px rgba(26, 25, 23, 0.05);
}

/* The sentinel is a zero height marker the observer watches. */
.pixaris-sticky-sentinel {
	block-size: 1px;
	margin-block-end: -1px;
	pointer-events: none;
}

/* Utility bar ------------------------------------------------------------- */

.pixaris-utility {
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	color: var(--wp--preset--color--ink-muted, #6A665E);
}

.pixaris-utility a {
	color: inherit;
	text-decoration: none;
}

.pixaris-utility a:hover,
.pixaris-utility a:focus-visible {
	color: var(--wp--preset--color--ink, #1A1917);
	text-decoration: underline;
}

/* Mega menu --------------------------------------------------------------- */

/*
 * Applied to a submenu inside the Navigation block. The submenu keeps its
 * semantics as a nested list; only the presentation changes to a panel that
 * spans the content width and flows its items into columns.
 */
@media (min-width: 783px) {
	.wp-block-navigation .wp-block-navigation__submenu-container.is-style-pixaris-mega,
	.wp-block-navigation .is-style-pixaris-mega > .wp-block-navigation__submenu-container {
		position: absolute;
		inset-inline: 0;
		inline-size: min(var(--wp--style--global--wide-size, 1200px), calc(100vw - 2rem));
		margin-inline: auto;
		padding: 1.5rem;
		columns: 3;
		column-gap: 2rem;
		border: 1px solid var(--wp--preset--color--hairline, #E2DDD4);
		border-radius: var(--pixaris-radius-lg, 14px);
		background: var(--wp--preset--color--surface, #fff);
		box-shadow: 0 12px 32px rgba(26, 25, 23, 0.07);
	}

	.wp-block-navigation .is-style-pixaris-mega .wp-block-navigation-item {
		break-inside: avoid;
		display: block;
		inline-size: 100%;
	}

	.wp-block-navigation .is-style-pixaris-mega .wp-block-navigation-item__content {
		padding-block: 0.4rem;
	}
}

/* Centred header variant -------------------------------------------------- */

.pixaris-header--centered .wp-block-site-title,
.pixaris-header--centered .wp-block-site-logo {
	text-align: center;
}

.pixaris-header--centered .wp-block-navigation {
	justify-content: center;
}

/* Search toggle ----------------------------------------------------------- */

.pixaris-header .wp-block-search__button {
	border-radius: var(--pixaris-radius, 10px);
}

@media (prefers-reduced-motion: reduce) {
	.is-style-pixaris-sticky {
		transition: none;
	}
}