/* =========================================================================
   modual Brand — supplemental theme CSS
   Only what theme.json cannot express. All values reference the WordPress-
   native tokens generated from theme.json (--wp--preset--* / --wp--custom--*).
   ========================================================================= */

/* --- Eyebrow / kicker ---------------------------------------------------- */
/* .eyebrow,
.modual-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-weight: var(--wp--custom--weight--medium);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
} */

/* --- Header -------------------------------------------------------------- */
/* Sticky header — stays fixed at the top while scrolling.
 *
 * Block themes render each template part in its own wrapper element (a sibling
 * under .wp-site-blocks). That wrapper is only as tall as the header, leaving
 * position:sticky no scroll range. Collapsing the wrapper with display:contents
 * makes the header a direct child of the tall .wp-site-blocks container so
 * sticky actually works. (The :has() selector only matches the header's
 * wrapper, never the header itself, so it is safe with or without a wrapper.) */
.wp-site-blocks > *:has(> .wc-blocks-header-pattern) {
	display: contents;
}

.wc-blocks-header-pattern {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--surface);
}

.site-footer {
	position: relative;
	z-index: 0;
}

/*
 * Mobile structural change for the WooCommerce "Essential Header" pattern.
 * On small screens the navigation hamburger is moved to the END of the row,
 * AFTER the mini-cart + customer-account icons. Desktop order is unchanged.
 * (This per-breakpoint reordering cannot be done in the block editor.)
 */
@media (max-width: 600px) {
	.wc-blocks-header-pattern nav.wp-block-navigation {
		order: 5;
	}
}

/* Mobile header padding — 24px on small screens. */
@media (max-width: 600px) {
	.wc-blocks-header-pattern {
		padding: 24px !important;
	}
}

/* Checkout header padding — desktop uses 24px 64px (inline block style);
 * on small screens collapse to even 24px on all sides. The horizontal
 * padding is an inline style on the block, so !important is required. */
@media (max-width: 600px) {
	header.wp-block-group.has-surface-background-color.is-layout-constrained {
		padding: 24px !important;
	}
}

/* --- Full-width page template ------------------------------------------- */
.site-main--full {
	margin-block: 0;
}

/* --- Checkout progress breadcrumb --------------------------------------- */
.mc-checkout-progress {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--60);
	padding: 0;
	flex-wrap: wrap;
}
.mc-checkout-progress__step {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--weight--medium);
}
.mc-checkout-progress__step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--grey-100);
	color: var(--wp--preset--color--text-muted);
}
.mc-checkout-progress__step.is-current .mc-checkout-progress__step-num {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}
.mc-checkout-progress__step.is-current {
	color: var(--wp--preset--color--text);
}
.mc-checkout-progress__step.is-done .mc-checkout-progress__step-num {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--grey-900);
}
.mc-checkout-progress__sep {
	flex: 0 1 32px;
	height: 1px;
	background: var(--wp--preset--color--border);
}

/* --- Button variants (editor-selectable block styles) ------------------- */
/* Accent — Power Yellow */
.wp-block-button.is-style-accent .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--grey-900);
	border-radius: var(--wp--custom--radius--md);
}
.wp-block-button.is-style-accent .wp-block-button__link:hover,
.wp-block-button.is-style-accent .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent-700);
	color: var(--wp--preset--color--grey-900);
}

/* Outline (brand) — transparent with blue border */
.wp-block-button.is-style-outline-brand .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--md);
}
.wp-block-button.is-style-outline-brand .wp-block-button__link:hover,
.wp-block-button.is-style-outline-brand .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* Ghost — text-only, no fill */
.wp-block-button.is-style-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	border: 0;
	padding-left: 0;
	padding-right: 0;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus {
	color: var(--wp--preset--color--primary-700);
	text-decoration: underline;
}

/* --- Installer-only pricing visibility ---------------------------------- */
.mc-installer-only {
	display: none;
}
.is-installer .mc-installer-only {
	display: revert;
}