:root {

	/* HAMBURGER TOGGLE */
	--menu-toggle-bar-height: 4px;
	--menu-toggle-bar-spacing: 4px;
	--menu-toggle-bar-radius: 4px;
	--menu-hamburger-offset: 8px;
	--menu-toggle-width: 24px;
	--menu-toggle-bar-color: var(--color-primary);

	/* SEARCH TOGGLE */
	--header-search-offset: var(--space-large);
	--header-search-icon-size: 27px;

	/* CATALOG ICON */
	--header-catalog-icon-size: 18px;
	
	/* BORDER */
	--header-border-color: var(--gray-light);
	--header-border-width: 1px;
	--header-border-style: solid;

	/* COLORS */
	--header-surface: var(--color-surface);
	--header-shadow: none;
	
	/* SPACING */
	--header-offset-top: 0;
	--header-extra-row-height: 40px;
	--header-wrap-padding-vertical: var(--space-small);
	--header-row-padding-bottom: var(--space-xsmall);
}

/* DO NOT EDIT BELOW THIS LINE — these are the actual styles using the above tokens. */

/* ===== HEADER: OUTER WRAPPER ===== */

.wp-block-group.site-header,
.wp-block-group.site-header .wp-block-group {
	overflow: visible;
}

@media (min-width: 78.75em) {

	.wp-block-group.site-header {
		overflow-x: clip;
	}
}

/* ===== SITE HEADER BASE ===== */

.site-header {

	@media (min-width: 78.75em) {
		background-color: var(--header-surface);
		border-bottom: var(--header-border-width) var(--header-border-style) var(--header-border-color);
		margin-block-start: var(--header-offset-top);
		padding: 0;
		position: relative;

		/* Full-width rule above the header offset.
		   NOTE: .wp-block-group.site-header::before { display: none } (higher specificity)
		   overrides this in block-editor context, so this is a non-block-editor fallback only. */
		&::before {
			border-bottom: var(--header-border-width) var(--header-border-style) var(--header-border-color);
			content: "";
			display: block;
			left: 0;
			position: absolute;
			right: 0;
			top: var(--header-extra-row-height);
		}
	}
}

.site-header a {
	text-decoration: none;
}

/* ===== HEADER WRAP ===== */

.site-header-wrap {
	align-items: center;
	box-shadow: var(--header-shadow);
	display: flex;
	padding: var(--header-wrap-padding-vertical) var(--gutter-width);
	position: relative;
	max-width: 100%;

	@media (min-width: 78.75em) {
		box-shadow: none;
		margin: 0 auto;
		max-width: var(--max-width-wide);
		padding-bottom: var(--header-row-padding-bottom);
		padding-top: 0;
	}
}

/* ===== EXTRA ROW (utility nav + mobile controls bar) ===== */

/* At desktop: full-width row with a bottom border extending edge-to-edge */
@media (min-width: 78.75em) {

	.wp-block-group.site-header .wp-block-group.al-header-extra-row {
		flex: 0 0 100%;
		order: -1;
		padding-bottom: var(--header-row-padding-bottom);
		position: relative;
		width: 100%;
	}
}

/* ===== CATALOG ICON ===== */

.ftmicon-catalog::before {
	content: var(--icon-catalog-svg);
	display: block;
	height: var(--header-catalog-icon-size);
	width: var(--header-catalog-icon-size);
}

.ftmicon-search::before {
	font-size: var(--header-search-icon-size);
}

/* ===== MOBILE MENU TOGGLE ===== */

/*
 * Rendered by annalee-dolls/mobile-menu-toggle block.
 * JS toggle state (FTM toggle system) sets .toggled on this button's parent,
 * which drives .mobile-menu open/close visibility in primary-nav.css.
 */

.mobile-menu-toggle {
	width: var(--menu-toggle-width);
	z-index: var(--z-layer-header-controls);
	order: 999;
	background-color: transparent !important;
	border: 0;
	border-radius: 0;
	color: inherit;
	padding: 0;

	@media (min-width: 78.75em) {
		display: none;
	}
}

.menu-toggle-bar {
	display: block;
	height: var(--menu-toggle-bar-height);
	margin-block: var(--menu-toggle-bar-spacing);
	border-radius: var(--menu-toggle-bar-radius);
	background-color: var(--menu-toggle-bar-color);
}

.toggled > .hamburger-middle {
	opacity: 0;
}

.toggled > .hamburger-top {
	transform: translateY(var(--menu-hamburger-offset)) rotate(-45deg);
}

.toggled > .hamburger-bottom {
	transform: translateY(calc(-1 * var(--menu-hamburger-offset))) rotate(45deg);
}

/* ===== HEADER SEARCH ===== */

/*
 * Rendered by annalee-dolls/header-search block as a Doofinder trigger button.
 * Two instances: mobile (inside .al-header-extra-row) and desktop (.header-search-desktop).
 * Doofinder overlay styling lives in blocks/ftm/header-search/style.css.
 */

.site-header-search {
	height: var(--header-search-icon-size);
	order: 2;

	@media (min-width: 78.75em) {
		margin-left: var(--header-search-offset);
		order: 4;
	}

	/* Mobile instance hidden at desktop — high specificity needed for block editor */
	.wp-block-group.site-header .al-header-extra-row & {

		@media (min-width: 78.75em) {
			display: none;
		}
	}
}

/* Desktop search — hidden until 78.75em; block editor override shows it inline */
.wp-block-group.site-header .header-search-desktop {
	display: none;

	@media (min-width: 78.75em) {
		align-items: center;
		display: flex;
		margin-inline-start: var(--header-search-offset);
	}
}

.ftm-global-section-inner .page-section {

	@media (min-width: 45em) {
        margin: 0;
	}
}