/*
 * Cacio 2 — Astra Header Builder refinement.
 * Scope: desktop and mobile header presentation only.
 * Astra remains responsible for menu rendering and interactions.
 */

:root {
	--cacio-header-paper: var(--cacio-global-paper, #f5f3ec);
	--cacio-header-ink: var(--cacio-global-ink, #1d211d);
	--cacio-header-line: var(--cacio-global-line, #d5d1c6);
	--cacio-header-gutter: clamp(20px, 4vw, 64px);
}

#ast-desktop-header .ast-primary-header-bar,
#ast-mobile-header .ast-primary-header-bar {
	background-color: var(--cacio-header-paper);
	border-bottom: 1px solid var(--cacio-header-line);
}

/* The approved header uses the graphical logo without the adjacent site-title text. */
#ast-desktop-header .ast-site-title-wrap,
#ast-mobile-header .ast-site-title-wrap,
#ast-mobile-header .site-title,
#ast-mobile-header .ast-site-title,
.ast-mobile-header-wrap .ast-site-title-wrap,
.ast-mobile-header-wrap .site-title,
.ast-mobile-header-wrap .ast-site-title {
	display: none !important;
}

/* Astra desktop breakpoint: keep the three builder sections balanced around the logo. */
@media (min-width: 922px) {
	#ast-desktop-header .ast-builder-grid-row {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		column-gap: clamp(16px, 2vw, 30px);
		padding-inline: var(--cacio-header-gutter);
		min-height: 84px;
		align-items: center;
	}

	#ast-desktop-header .ast-primary-header-bar,
	#ast-desktop-header .site-primary-header-wrap {
		min-height: 84px;
	}

	#ast-desktop-header .site-header-primary-section-left {
		justify-content: flex-end;
		justify-self: end;
		width: max-content;
		min-width: max-content;
		white-space: nowrap;
	}

	#ast-desktop-header .site-header-primary-section-center {
		justify-content: center;
		justify-self: center;
		min-width: 0;
	}

	#ast-desktop-header .site-header-primary-section-right {
		justify-content: flex-start;
		justify-self: start;
		width: max-content;
		min-width: max-content;
		white-space: nowrap;
	}

	#ast-desktop-header .site-header-primary-section-left .main-header-menu {
		justify-content: flex-end;
		gap: clamp(16px, 2vw, 30px);
		flex-wrap: nowrap !important;
		width: max-content;
		max-width: none;
	}

	#ast-desktop-header .site-header-primary-section-right .main-header-menu {
		justify-content: flex-start;
		gap: clamp(10px, 1.3vw, 18px);
		flex-wrap: nowrap !important;
		width: max-content;
		max-width: none;
	}

	#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
		color: var(--cacio-global-ink, #1d211d);
		font-size: 13px;
		line-height: 1.4;
		padding-inline: 0;
		white-space: nowrap;
		letter-spacing: normal;
	}

	#ast-desktop-header .main-header-menu > .menu-item > .menu-link:hover {
		color: var(--cacio-global-ink, #1d211d);
		text-decoration: underline;
		text-underline-offset: 5px;
	}

	#ast-desktop-header .site-logo-img,
	#ast-desktop-header .site-logo-img img {
		width: 102px;
		max-width: 102px;
		height: auto;
	}

	#ast-desktop-header .main-header-menu .sub-menu {
		min-width: 236px;
		padding-block: 8px;
		border-color: var(--cacio-header-line);
		box-shadow: 0 12px 28px rgba(29, 33, 29, 0.12);
	}

	#ast-desktop-header .main-header-menu .sub-menu .menu-link {
		color: var(--cacio-global-ink, #1d211d);
		padding: 8px 18px;
		font-size: 13px;
		line-height: 1.5;
		white-space: normal;
	}

	#ast-desktop-header .main-header-menu .sub-menu .menu-link:hover {
		color: var(--cacio-global-ink, #1d211d);
	}
}

/* Keep the mobile builder compact and let Astra's Off Canvas component own the menu. */
@media (max-width: 921.99px) {
	#ast-mobile-header .ast-primary-header-bar,
	#ast-mobile-header .site-primary-header-wrap,
	#ast-mobile-header .ast-builder-grid-row {
		min-height: 66px;
	}

	#ast-mobile-header .ast-builder-grid-row {
		padding-inline: 20px;
	}

	#ast-mobile-header .site-logo-img,
	#ast-mobile-header .site-logo-img img {
		width: 83px;
		max-width: 83px;
		height: auto;
	}

	#ast-mobile-header .ast-builder-menu-mobile .main-header-menu .menu-link {
		color: var(--cacio-global-ink, #1d211d);
		font-size: 13px;
		line-height: 1.5;
		padding-block: 10px;
		border-bottom: 1px solid var(--cacio-header-line);
	}

	#ast-mobile-header .ast-mobile-menu-trigger-minimal {
		color: var(--cacio-header-ink);
	}

	#ast-mobile-header .ast-mobile-menu-trigger-minimal .ast-mobile-svg {
		fill: currentColor;
	}

	#ast-mobile-header .ast-mobile-popup-drawer .ast-mobile-popup-inner {
		background: var(--cacio-header-paper);
		color: var(--cacio-header-ink);
	}

	#ast-mobile-header .ast-mobile-popup-drawer .main-header-menu {
		border-top: 1px solid var(--cacio-header-line);
	}

	#ast-mobile-header .ast-mobile-popup-drawer .main-header-menu .menu-link {
		color: var(--cacio-global-ink, #1d211d);
		padding-inline: 4px;
		line-height: 1.55;
	}

	#ast-mobile-header .ast-builder-menu-mobile .main-header-menu .menu-link:hover,
	#ast-mobile-header .ast-mobile-popup-drawer .main-header-menu .menu-link:hover {
		color: var(--cacio-global-ink, #1d211d);
	}
}

/* Accessibility and focus treatment remain visible in every viewport. */
#ast-desktop-header a:focus-visible,
#ast-mobile-header a:focus-visible,
#ast-desktop-header button:focus-visible,
#ast-mobile-header button:focus-visible {
	outline: 2px solid #3568d4;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	#ast-desktop-header *,
	#ast-mobile-header * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* Prototype announcement sits in normal flow above Astra's header. */
.cacio2-announcement {
	width: 100%;
	padding: 7px 20px;
	background: var(--cacio-header-announcement-bg, var(--cacio-header-ink));
	color: var(--cacio-header-announcement-fg, #fff);
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-align: center;
}

/* Utility links are separate from the six editorial navigation slots. */
.cacio-header-utility > .menu-link,
.cacio-header-mobile-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 32px;
	padding: 0;
	color: var(--cacio-header-ink);
	text-decoration: none;
}

.cacio-header-utility > .menu-link svg,
.cacio-header-mobile-cart svg {
	display: block;
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cacio-header-utility-account {
	margin-inline-start: 0;
	padding-inline-start: 8px;
	border-inline-start: 1px solid var(--cacio-header-line);
}

.cacio-header-cart-count {
	position: absolute;
	top: -1px;
	right: -2px;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	border-radius: 999px;
	background: var(--cacio-header-ink);
	color: #fff;
	font-size: 9px;
	line-height: 15px;
	text-align: center;
}

.cacio-header-mobile-cart {
	display: none;
}

@media (min-width: 922px) {
	#ast-desktop-header .ast-primary-header-bar,
	#ast-desktop-header .site-primary-header-wrap,
	#ast-desktop-header .ast-builder-grid-row {
		height: 84px;
		min-height: 84px;
	}

	#ast-desktop-header .site-logo-img,
	#ast-desktop-header .site-logo-img img {
		width: 102px;
		max-width: 102px;
		height: auto;
	}
}

@media (max-width: 921.99px) {
	.cacio2-announcement {
		padding: 6px 14px;
		font-size: 10px;
	}

	.cacio-header-mobile-cart {
		display: inline-flex;
		width: 40px;
		height: 40px;
		margin-inline-end: 8px;
	}

	#ast-mobile-header .ast-mobile-menu-buttons {
		display: flex;
		align-items: center;
	}

	#ast-mobile-header .cacio-header-utility {
		display: none;
	}
}