/**
 * Nucific custom main header.
 *
 * Layout: logo (left) / primary menu (true center) / actions (right).
 * The center column is centered against equal 1fr side columns, so the
 * primary menu stays optically centered regardless of logo or actions width.
 */

.nucific-header {
	position: relative;
	z-index: 100;
	padding: 16px 20px;
}

.nucific-header .nucific-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1.5rem;
	max-width: 1280px;
	margin: 0 auto;
}

/* ---- Logo (left column) ---- */
.nucific-header .nucific-header__logo {
	justify-self: start;
	display: flex;
	align-items: center;
}

.nucific-header .nucific-header__logo img,
.nucific-header .nucific-header__logo .custom-logo {
	display: block;
	width: 150px;
	height: auto;
	max-width: 150px;
}

.nucific-header .nucific-header__logo-text {
	font-size: 1.25rem;
	font-weight: 700;
	text-decoration: none;
	color: inherit;
}

/* ---- Primary menu (center column) ---- */
.nucific-header .nucific-header__primary {
	justify-self: center;
	/* Fill the bar height so the dropdown drops flush from the header's bottom edge. */
	align-self: stretch;
	display: flex;
	align-items: stretch;
}

/* Items fill the bar height (link stays centred via the li rule below).
   Scoped under __primary to outrank the shared .nucific-menu rule. */
.nucific-header .nucific-header__primary .nucific-menu {
	align-items: stretch;
}

/* ---- Actions: guest / account / cart (right column) ---- */
.nucific-header .nucific-header__actions {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

/* ---- Shared menu styling ---- */
.nucific-header .nucific-menu {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nucific-header .nucific-menu li {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nucific-header .nucific-menu a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
	color: #1B2A2A;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.nucific-header .nucific-menu a:hover,
.nucific-header .nucific-menu .current-menu-item>a {
	color: #70cacb;
}

/* Per-item icon set via Appearance → Menus */
.nucific-header .nucific-menu .nucific-menu__icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	object-fit: contain;
}

/* Sub-menus (depth 2) */
.nucific-header .nucific-menu .sub-menu {
	position: absolute;
	/* +16px clears the header's bottom padding so the panel sits flush with its edge. */
	top: calc(100% + 16px);
	left: 0;
	margin: 0;
	list-style: none;
	background: #F5F5F5;
	border: 1px solid #eaeaea;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 10;

	display: flex;
	width: 300px;
	padding: 28px 24px;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

/* Transparent hover bridge across the 16px gap (child of the li, so :hover survives). */
.nucific-header .nucific-menu .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -16px;
	height: 16px;
}

.nucific-header .nucific-menu li:hover>.sub-menu,
.nucific-header .nucific-menu li:focus-within>.sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Each sub-menu item is divided by a hairline. */
.nucific-header .nucific-menu .sub-menu li {
	width: 100%;
	padding-bottom: 16px;
	border-bottom: 1px solid #D9DADA;
}

.nucific-header .nucific-menu .sub-menu li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.nucific-header .nucific-menu .sub-menu a {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0;
}

/* External links (target="_blank") get a right-facing chevron, pinned to the
   panel's right edge (margin-left: auto) so arrows align regardless of text width. */
.nucific-header .nucific-menu .sub-menu a[target="_blank"]::after {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	margin-left: auto;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

/* Caret on items with a sub-menu (WordPress adds .menu-item-has-children). */
.nucific-header .nucific-menu .menu-item-has-children>a::after {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	margin-left: 2px;
	border-right: 2px solid #70CACB;
	border-bottom: 2px solid #70CACB;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}

/* Flip the caret while the sub-menu is open (hover or keyboard focus). */
.nucific-header .nucific-menu .menu-item-has-children:hover>a::after,
.nucific-header .nucific-menu .menu-item-has-children:focus-within>a::after {
	transform: translateY(2px) rotate(-135deg);
}

/* ---- Guest menu: vertical divider between links ---- */
.nucific-header .nucific-menu--guest>li+li {
	border-left: 1px solid #BDBEBF;
	padding-left: 1.5rem;
}

/* ---- My Account dropdown (desktop) ---- */
.nucific-header .nucific-header__account {
	position: relative;
}

.nucific-header .nucific-header__account-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: #1B2A2A;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
}

.nucific-header .nucific-header__account-trigger:hover {
	color: #70cacb;
}

.nucific-header .nucific-header__account-caret {
	width: 6px;
	height: 6px;
	border-right: 2px solid #70CACB;
	border-bottom: 2px solid #70CACB;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}

.nucific-header .nucific-header__account.is-open-dropdown .nucific-header__account-caret {
	transform: translateY(2px) rotate(-135deg);
}

.nucific-header .nucific-header__account-menu {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 0.5rem;
	background: #F5F5F5;
	border: 1px solid #eaeaea;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 10;

	/* Panel layout — matches the primary sub-menu. */
	display: flex;
	width: 300px;
	padding: 28px 24px;
	flex-direction: column;
	align-items: flex-start;
}

.nucific-header .nucific-header__account:hover .nucific-header__account-menu,
.nucific-header .nucific-header__account.is-open-dropdown .nucific-header__account-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nucific-header .nucific-header__account-menu .nucific-menu {
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
}

/* Same hairline dividers as the primary sub-menu. */
.nucific-header .nucific-header__account-menu .nucific-menu li {
	width: 100%;
	padding-bottom: 16px;
	border-bottom: 1px solid #D9DADA;
}

.nucific-header .nucific-header__account-menu .nucific-menu li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.nucific-header .nucific-header__account-menu .nucific-menu a {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0;
	white-space: nowrap;
}

/* External links get the right-facing chevron, pinned to the right edge. */
.nucific-header .nucific-header__account-menu .nucific-menu a[target="_blank"]::after {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	margin-left: auto;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

/* ---- Cart ---- */
.nucific-header .nucific-header__cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: #70cacb;
	padding-left: 1.5rem;
	border-left: 1px solid #BDBEBF;
}

.nucific-header .nucific-header__cart-icon {
	width: 24px;
	height: 24px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path d='M24 48C10.7 48 0 58.7 0 72C0 85.3 10.7 96 24 96L69.3 96C73.2 96 76.5 98.8 77.2 102.6L129.3 388.9C135.5 423.1 165.3 448 200.1 448L456 448C469.3 448 480 437.3 480 424C480 410.7 469.3 400 456 400L200.1 400C188.5 400 178.6 391.7 176.5 380.3L171.4 352L475 352C505.8 352 532.2 330.1 537.9 299.8L568.9 133.9C572.6 114.2 557.5 96 537.4 96L124.7 96L124.3 94C119.5 67.4 96.3 48 69.2 48L24 48zM208 576C234.5 576 256 554.5 256 528C256 501.5 234.5 480 208 480C181.5 480 160 501.5 160 528C160 554.5 181.5 576 208 576zM432 576C458.5 576 480 554.5 480 528C480 501.5 458.5 480 432 480C405.5 480 384 501.5 384 528C384 554.5 405.5 576 432 576z'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path d='M24 48C10.7 48 0 58.7 0 72C0 85.3 10.7 96 24 96L69.3 96C73.2 96 76.5 98.8 77.2 102.6L129.3 388.9C135.5 423.1 165.3 448 200.1 448L456 448C469.3 448 480 437.3 480 424C480 410.7 469.3 400 456 400L200.1 400C188.5 400 178.6 391.7 176.5 380.3L171.4 352L475 352C505.8 352 532.2 330.1 537.9 299.8L568.9 133.9C572.6 114.2 557.5 96 537.4 96L124.7 96L124.3 94C119.5 67.4 96.3 48 69.2 48L24 48zM208 576C234.5 576 256 554.5 256 528C256 501.5 234.5 480 208 480C181.5 480 160 501.5 160 528C160 554.5 181.5 576 208 576zM432 576C458.5 576 480 554.5 480 528C480 501.5 458.5 480 432 480C405.5 480 384 501.5 384 528C384 554.5 405.5 576 432 576z'/></svg>") center / contain no-repeat;
}

.nucific-header .nucific-header__cart-count {
	position: absolute;
	top: -8px;
	right: -10px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: #70cacb;
	color: #1B2A2A;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

/* ---- Login-state visibility (JS toggles the modifier classes) ---- */
.nucific-header.is-guest .nucific-header__account,
.nucific-header.is-logged-in .nucific-header__guest {
	display: none;
}

/* ---- Mobile toggle: hidden on desktop ---- */
.nucific-header .nucific-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.nucific-header .nucific-header__toggle-bars,
.nucific-header .nucific-header__toggle-bars::before,
.nucific-header .nucific-header__toggle-bars::after {
	display: block;
	width: 24px;
	height: 2px;
	background: #1B2A2A;
	transition: transform 0.2s ease, top 0.2s ease, background 0.2s ease;
}

.nucific-header .nucific-header__toggle-bars {
	position: relative;
}

.nucific-header .nucific-header__toggle-bars::before,
.nucific-header .nucific-header__toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.nucific-header .nucific-header__toggle-bars::before {
	top: -7px;
}

.nucific-header .nucific-header__toggle-bars::after {
	top: 7px;
}

/* Hamburger turns into an X while the panel is open. */
.nucific-header.is-open .nucific-header__toggle-bars {
	background: transparent;
}

.nucific-header.is-open .nucific-header__toggle-bars::before {
	top: 0;
	transform: rotate(45deg);
}

.nucific-header.is-open .nucific-header__toggle-bars::after {
	top: 0;
	transform: rotate(-45deg);
}

.nucific-header .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------------------- */
@media (max-width: 980px) {

	/* Mobile bar: [hamburger] [logo] [cart]. */
	.nucific-header .nucific-header__inner {
		grid-template-columns: auto 1fr auto;
		column-gap: 1rem;
		row-gap: 0;
	}

	.nucific-header .nucific-header__toggle {
		display: flex;
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}

	.nucific-header .nucific-header__logo {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
	}

	/* Dissolve the actions group: cart stays in the bar, menus drop into the panel. */
	.nucific-header .nucific-header__actions {
		display: contents;
	}

	.nucific-header .nucific-header__cart {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}

	/* Panel rows, stacked under the bar: primary, then guest/account. */
	.nucific-header .nucific-header__primary {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.nucific-header .nucific-header__guest {
		grid-column: 1 / -1;
		grid-row: 3;
	}

	.nucific-header .nucific-header__account {
		grid-column: 1 / -1;
		grid-row: 4;
	}

	.nucific-header .nucific-header__primary,
	.nucific-header .nucific-header__guest,
	.nucific-header .nucific-header__account {
		justify-self: stretch;
		display: none;
	}

	/* Open the panel: primary always, plus the menu matching login state. */
	.nucific-header.is-open .nucific-header__primary,
	.nucific-header.is-open.is-guest .nucific-header__guest,
	.nucific-header.is-open.is-logged-in .nucific-header__account {
		display: block;
	}

	/* All menus stack as one vertical list with a 16px gap between rows. */
	.nucific-header.is-open .nucific-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		width: 100%;
		box-sizing: border-box;
		padding: 28px 16px;
	}

	/* Links carry no vertical padding; the gap + item padding-bottom set the rhythm. */
	.nucific-header.is-open .nucific-menu a {
		display: flex;
		width: 100%;
		box-sizing: border-box;
		font-size: 16px;
		font-weight: 600;
	}

	/* Dropdown panel: light grey background. */
	.nucific-header.is-open .nucific-header__primary,
	.nucific-header.is-open .nucific-header__guest,
	.nucific-header.is-open .nucific-header__account {
		background: #F5F5F5;
	}

	/* Full-bleed the panel out of the bar's side padding. */
	.nucific-header.is-open .nucific-header__primary,
	.nucific-header.is-open .nucific-header__guest,
	.nucific-header.is-open .nucific-header__account {
		margin-left: -20px;
		margin-right: -20px;
	}

	.nucific-header.is-open .nucific-header__primary {
		margin-top: 16px;
	}

	.nucific-header.is-open .nucific-header__guest,
	.nucific-header.is-open .nucific-header__account {
		margin-bottom: -16px;
	}

	/* Each item: 16px padding-bottom + hairline; the 16px gap adds the matching
	   space above the next, centring the line in a 32px gap. */
	.nucific-header.is-open .nucific-menu li {
		width: 100%;
		padding-bottom: 16px;
		border-bottom: 1px solid #D9DADA;
	}

	/* Parent items put the separator under their own link, then stack children. */
	.nucific-header.is-open .nucific-menu .menu-item-has-children {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.nucific-header.is-open .nucific-menu .menu-item-has-children>a {
		padding-bottom: 16px;
		border-bottom: 1px solid #D9DADA;
	}

	/* No trailing separator at the bottom of a menu or a sub-menu. */
	.nucific-header.is-open .nucific-menu>li:last-child,
	.nucific-header.is-open .nucific-menu .sub-menu>li:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}

	/* Drop the desktop vertical dividers (guest links + cart) on mobile. */
	.nucific-header .nucific-menu--guest>li+li,
	.nucific-header .nucific-header__cart {
		border-left: 0;
		padding-left: 0;
	}

	/* Account: no dropdown on mobile — show the links inline in the panel. */
	.nucific-header .nucific-header__account-trigger {
		display: none;
	}

	.nucific-header .nucific-header__account-menu {
		position: static;
		width: auto;
		min-width: 0;
		margin: 0;
		padding: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* Sub-menus expand inline on mobile, so the caret has nothing to toggle. */
	.nucific-header .nucific-menu .menu-item-has-children>a::after {
		display: none;
	}

	/* Always show sub-menus inline; only indent — the shared gap/padding sets the rhythm. */
	.nucific-header .nucific-menu .sub-menu {
		position: static;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		opacity: 1;
		visibility: visible;
		transform: none;
		width: 100%;
		box-sizing: border-box;
		border: 0;
		box-shadow: none;
		padding: 0 0 0 16px;
	}

	/* No hover bridge needed when sub-menus are always shown inline. */
	.nucific-header .nucific-menu .sub-menu::before {
		content: none;
	}
}