/**
 * Casa Noce header, announcement bar, mobile drawer and footer chrome.
 */

/* ------------------------------------------------------ announcement bar */

.cn-announce {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	padding-inline: 12px;
	background: var(--wp--preset--color--walnut);
	color: var(--wp--preset--color--oat);
	font-size: 12.5px;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	overflow: hidden;
}

.cn-announce__item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: 12px;
	opacity: 0;
	transition: opacity var(--cn-ease);
	pointer-events: none;
}

.cn-announce__item.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* No JS, or reduced motion: show the first message and stop rotating. */
.no-js .cn-announce__item:first-child,
.cn-announce__item:first-child:last-child {
	opacity: 1;
}

@media (max-width: 781px) {
	.cn-announce {
		height: 34px;
		font-size: 11px;
		letter-spacing: 0.08em;
	}
}

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

/* Unwrap the header template part so the sticky bar's containing block is the
   page, not the 114px chrome wrapper. Without this the bar leaves the viewport
   the moment its wrapper scrolls out, so it could never pin or fill. */
.wp-block-template-part:has(> .cn-header) {
	display: contents;
}

.cn-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--oat);
}

/* Crossfade between the transparent overlay and the filled state. Colour-only,
   so it reads the same with reduced motion (no movement to suppress). */
.cn-header,
.cn-header__bar {
	transition: background-color var(--cn-ease), border-color var(--cn-ease);
}

.cn-header__brand,
.cn-nav a,
.cn-icon-btn,
.cn-burger span {
	transition: color var(--cn-ease), background-color var(--cn-ease),
		border-color var(--cn-ease);
}

/* One DOM, two layouts. Desktop puts the wordmark left and the nav centred;
   mobile swaps the wordmark to centre and gives the left slot to the burger.
   Grid areas avoid duplicating the wordmark markup to achieve that. */
.cn-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: "brand nav actions";
	align-items: center;
	height: 76px;
	padding-inline: 48px;
	background: var(--wp--preset--color--oat);
	border-bottom: var(--cn-rule);
}

.cn-header__bar > .cn-burger {
	grid-area: burger;
}

.cn-header__bar > .cn-header__brand {
	grid-area: brand;
}

.cn-header__bar > .cn-nav {
	grid-area: nav;
}

.cn-header__bar > .cn-header__actions {
	grid-area: actions;
}

.cn-header__brand {
	display: flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: 26px;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1;
	text-transform: lowercase;
	color: var(--wp--preset--color--warm-ink);
}

.cn-header__brand:hover {
	color: var(--wp--preset--color--warm-ink);
}

/* ----------------------------------------------------------------- nav */

.cn-nav {
	display: flex;
	gap: 36px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cn-nav a {
	display: inline-block;
	padding: 6px 0;
	border-bottom: 1.5px solid transparent;
	transition: border-color var(--cn-ease), color var(--cn-ease);
}

.cn-nav a:hover,
.cn-nav a:focus-visible,
.cn-nav .is-current > a,
.cn-nav .current-menu-item > a {
	border-bottom-color: var(--wp--preset--color--honey-brass);
	color: var(--wp--preset--color--warm-ink);
}

/* --------------------------------------------------------- header icons */

.cn-header__actions {
	display: flex;
	gap: 22px;
	align-items: center;
	justify-content: flex-end;
}

.cn-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--warm-ink);
	cursor: pointer;
	transition: color var(--cn-ease);
}

.cn-icon-btn:hover {
	color: var(--wp--preset--color--honey-brass);
}

.cn-icon-btn svg {
	display: block;
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}

/* Cart count bubble. */
.cn-cart {
	position: relative;
}

.cn-cart__count {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--wp--preset--color--honey-brass);
	color: var(--wp--preset--color--ivory);
	font-size: 10px;
	font-weight: 600;
	line-height: 17px;
	text-align: center;
}

.cn-cart__count:empty,
.cn-cart__count[data-count="0"] {
	display: none;
}

/* Favourites count bubble, mirroring the cart bubble. */
.cn-fav-link {
	position: relative;
}

.cn-fav__count {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--wp--preset--color--honey-brass);
	color: var(--wp--preset--color--ivory);
	font-size: 10px;
	font-weight: 600;
	line-height: 17px;
	text-align: center;
	pointer-events: none;
}

.cn-fav__count:empty,
.cn-fav__count[data-count="0"] {
	display: none;
}

/* ------------------------------------------ transparent overlay (hero pages) */

/* On pages with a full-screen hero the bar floats over the video: transparent
   background, light marks, and a soft top scrim for legibility. ui.js adds
   .is-filled once the hero is scrolled past, restoring the solid bar. */
body:has(.cn-hero) .cn-header:not(.is-filled),
body:has(.cn-hero) .cn-header:not(.is-filled) .cn-header__bar {
	background: transparent;
	border-bottom-color: transparent;
}

/* Scrim sits behind the bar contents; it fades out as the bar fills. */
body:has(.cn-hero) .cn-header::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 220%;
	background: linear-gradient(
		to bottom,
		rgba(41, 36, 32, 0.55),
		rgba(41, 36, 32, 0)
	);
	opacity: 1;
	pointer-events: none;
	transition: opacity var(--cn-ease);
}

body:has(.cn-hero) .cn-header.is-filled::before {
	opacity: 0;
}

body:has(.cn-hero) .cn-header__bar {
	position: relative;
	z-index: 1;
}

/* Light marks while transparent. Cream matches the hero headline, and the
   scrim behind holds it above 4.5:1 over the bright footage. */
body:has(.cn-hero) .cn-header:not(.is-filled) .cn-header__brand,
body:has(.cn-hero) .cn-header:not(.is-filled) .cn-nav a,
body:has(.cn-hero) .cn-header:not(.is-filled) .cn-icon-btn {
	color: var(--wp--preset--color--cream);
}

body:has(.cn-hero) .cn-header:not(.is-filled) .cn-burger span {
	background: var(--wp--preset--color--cream);
}

body:has(.cn-hero) .cn-header:not(.is-filled) .cn-nav a:hover,
body:has(.cn-hero) .cn-header:not(.is-filled) .cn-nav a:focus-visible,
body:has(.cn-hero) .cn-header:not(.is-filled) .cn-icon-btn:hover {
	color: var(--wp--preset--color--ivory);
	border-bottom-color: var(--wp--preset--color--honey-brass);
}

/* ------------------------------------------------------ mobile controls */

.cn-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	margin-left: -10px;
	padding: 0 10px;
	border: none;
	background: transparent;
	cursor: pointer;
}

.cn-burger span {
	display: block;
	height: 1.5px;
	background: var(--wp--preset--color--warm-ink);
	transition: transform var(--cn-ease), opacity var(--cn-ease);
}

@media (max-width: 1023px) {
	.cn-header__bar {
		grid-template-areas: "burger brand actions";
		height: 60px;
		padding-inline: 18px;
	}

	.cn-header__brand {
		font-size: 22px;
	}

	.cn-burger {
		display: flex;
	}

	.cn-nav {
		display: none;
	}

	.cn-header__actions {
		gap: 6px;
	}

	.cn-icon-btn {
		width: 44px;
		height: 44px;
	}

	/* Account and wishlist move into the drawer on small screens. */
	.cn-header__actions .cn-icon-btn--account,
	.cn-header__actions .cn-icon-btn--wishlist {
		display: none;
	}
}

/* --------------------------------------------------------- mobile drawer */

.cn-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	visibility: hidden;
	pointer-events: none;
}

.cn-drawer[data-open="true"] {
	visibility: visible;
	pointer-events: auto;
}

.cn-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(41, 36, 32, 0.5);
	opacity: 0;
	transition: opacity var(--cn-ease);
}

.cn-drawer[data-open="true"] .cn-drawer__scrim {
	opacity: 1;
}

.cn-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: min(86vw, 360px);
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 24px 24px 40px;
	background: var(--wp--preset--color--oat);
	transform: translateX(-100%);
	transition: transform var(--cn-ease-slow);
	overflow-y: auto;
}

.cn-drawer[data-open="true"] .cn-drawer__panel {
	transform: none;
}

.cn-drawer__close {
	align-self: flex-end;
	width: 44px;
	height: 44px;
	margin: -8px -8px 12px 0;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--warm-ink);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.cn-drawer__nav {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cn-drawer__nav a {
	display: block;
	padding: 16px 0;
	border-bottom: var(--cn-rule);
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	font-weight: 400;
}

.cn-drawer__secondary {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 28px;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------- footer */

.cn-footer {
	background: var(--wp--preset--color--walnut);
	color: var(--wp--preset--color--oat);
	padding: 80px var(--cn-gutter) 48px;
}

.cn-footer a {
	color: var(--wp--preset--color--oat);
	transition: color var(--cn-ease);
}

.cn-footer a:hover {
	color: var(--wp--preset--color--brass-light);
}

.cn-footer__top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 48px;
	margin-bottom: 64px;
}

.cn-footer__wordmark {
	font-family: var(--wp--preset--font-family--display);
	font-size: 19px;
	letter-spacing: 0.28em;
	margin-bottom: 18px;
}

.cn-footer__blurb {
	max-width: 280px;
	margin: 0 0 20px;
	color: var(--wp--preset--color--linen);
	font-size: 13.5px;
	line-height: 1.6;
}

.cn-footer__address {
	margin: 0;
	color: var(--wp--preset--color--linen);
	font-size: 13px;
	font-style: normal;
	line-height: 1.7;
}

.cn-footer__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 13.5px;
}

.cn-footer__col-title {
	margin-bottom: 6px;
	color: var(--wp--preset--color--brass-light);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.cn-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	align-items: center;
	padding-top: 24px;
	border-top: 1px solid rgba(237, 228, 211, 0.2);
	color: var(--wp--preset--color--linen);
	font-size: 12.5px;
}

.cn-footer__social {
	display: flex;
	gap: 24px;
}

.cn-footer__social a {
	color: var(--wp--preset--color--linen);
}

@media (max-width: 1023px) {
	.cn-footer {
		padding: 56px var(--cn-gutter) 32px;
	}

	/* Brand block spans the row, the three link columns pair up beneath it. */
	.cn-footer__top {
		grid-template-columns: 1fr 1fr;
		gap: 32px 20px;
		margin-bottom: 40px;
	}

	.cn-footer__top > :first-child {
		grid-column: 1 / -1;
	}
}

/* ---------------------------------------------------------- payment row */

.cn-payments {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	align-items: center;
	padding: 24px var(--cn-gutter) 32px;
	background: var(--wp--preset--color--walnut);
}

.cn-payments__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Each SVG carries its own light card background, so we render it at a fixed
   height and let the 38:24 aspect ratio set the width. */
.cn-payments__icon img {
	display: block;
	width: auto;
	height: 24px;
	border-radius: 3px;
}