/* ==========================================================================
   20 — Header

   Three sticky rows, as live: utility bar, main row, nav row.
   Layout rules on block-generated containers are written twice — bare and
   .wp-site-blocks-prefixed — because core matches them at two classes.
   ========================================================================== */

.jn-header,
.wp-site-blocks .jn-header {
	position: sticky;
	top: var( --jn-adminbar );
	z-index: 50;
	margin-block: 0;
	border-bottom: 1px solid hsl( var( --jn-border ) );
	background-color: hsl( var( --jn-background ) );
}

/* Trap 3 — backdrop-filter on the header would make it the containing block
   for the fixed mobile panel. It goes on a pseudo-element instead. */
.jn-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: blur( 8px );
	pointer-events: none;
}

/* Trap 4 — every header row is a block group, so core's flow layout puts
   `margin-block-start: var(--wp--style--block-gap)` on each child after the
   first. Inside a grid that margin joins the item's outer size: it inflated
   the main row's track to 64px inside a 40px content box, pushing the search
   field 8px down into the nav row. Reset it on all three rows' children.
   -------------------------------------------------------------------------- */

.jn-utilbar__inner > *,
.wp-site-blocks .jn-utilbar__inner > *,
.jn-mainrow__inner > *,
.wp-site-blocks .jn-mainrow__inner > *,
.jn-navrow__inner > *,
.wp-site-blocks .jn-navrow__inner > * {
	margin-block: 0;
}

/* --------------------------------------------------------------------------
   Row 1 — utility bar
   -------------------------------------------------------------------------- */

.jn-utilbar,
.wp-site-blocks .jn-utilbar {
	margin-block: 0;
	background-color: var( --jn-luxury-dark );
	color: #fff;
}

.jn-utilbar__inner,
.wp-site-blocks .jn-utilbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	box-sizing: border-box;
	height: var( --jn-utilbar-h );
	margin-block: 0;
	padding-block: .375rem;
}

.jn-header .jn-utilbar__welcome {
	margin: 0;
	font-size: .875rem;
	color: #fff;
}

.jn-utilbar__welcome-short {
	display: none;
}

.jn-utilbar__actions,
.wp-site-blocks .jn-utilbar__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-block: 0;
}

.jn-currency {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	font-size: .875rem;
	color: #fff;
}

/* --------------------------------------------------------------------------
   Row 2 — logo, search, actions
   -------------------------------------------------------------------------- */

.jn-mainrow,
.wp-site-blocks .jn-mainrow {
	margin-block: 0;
	background-color: hsl( var( --jn-background ) );
}

/* Grid, not flex: the logo and the action cluster are different widths, so a
   flex centre would leave the search off-centre by half their difference. */
.jn-mainrow__inner,
.wp-site-blocks .jn-mainrow__inner {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 2rem;
	box-sizing: border-box;
	height: var( --jn-mainrow-h );
	margin-block: 0;
	padding-block: 1rem;
}

.jn-header .jn-logo,
.jn-header .jn-logo a {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
	color: hsl( var( --jn-primary-text ) );
	text-decoration: none;
}

.jn-mainrow__actions,
.wp-site-blocks .jn-mainrow__actions {
	display: flex;
	align-items: center;
	gap: .25rem;
	margin-block: 0;
	justify-self: end;
}

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */

.jn-search {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	max-width: 42rem;
	margin-inline: auto;
}

.jn-search__icon {
	position: absolute;
	left: .625rem;
	width: 1.125rem;
	height: 1.125rem;
	color: hsl( var( --jn-muted-foreground ) );
	pointer-events: none;
}

.jn-header .jn-search__input {
	width: 100%;
	height: 2.5rem;
	padding: 0 6.5rem 0 2.5rem;
	border: 2px solid hsl( var( --jn-border ) );
	border-radius: .5rem;
	background-color: hsl( var( --jn-background ) );
	color: hsl( var( --jn-foreground ) );
	font-size: 1rem;
	font-family: inherit;
}

.jn-header .jn-search__input::placeholder {
	color: hsl( var( --jn-muted-foreground ) );
}

.jn-header .jn-search__input:focus {
	border-color: var( --jn-gold-500 );
	outline: none;
}

.jn-header .jn-search__input:focus-visible {
	outline: 2px solid hsl( var( --jn-ring ) );
	outline-offset: 1px;
}

.jn-header .jn-search__submit {
	position: absolute;
	right: .25rem;
	height: 2rem;
	padding-inline: 1.5rem;
	border: 0;
	border-radius: .375rem;
	background-color: var( --jn-gold-500 );
	/* Live sets white here, which measures 1.78:1 on gold. The nav CTAs beside
	   it already use near-black; this matches them and clears AA. */
	color: #111;
	font-family: inherit;
	font-size: .9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: var( --jn-transition );
}

.jn-header .jn-search__submit:hover {
	background-color: var( --jn-gold-600 );
}

/* --------------------------------------------------------------------------
   Icon buttons — 2.5rem (40px), which is what live uses and what keeps the
   main row at its 72px. The 44px minimum is held for the mobile nav toggle,
   the close button and every link in the open panel.
   -------------------------------------------------------------------------- */

.jn-header .jn-iconbtn,
.jn-header .jn-account,
.jn-header button.jn-iconbtn {
	display: inline-flex;
	border: 0;
	background-color: transparent;
	cursor: pointer;
	font-family: inherit;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding-inline: .5rem;
	border-radius: .375rem;
	color: hsl( var( --jn-foreground ) );
	text-decoration: none;
	transition: var( --jn-transition );
}

.jn-header .jn-iconbtn:hover,
.jn-header .jn-account:hover {
	background-color: hsl( var( --jn-muted ) );
	color: hsl( var( --jn-primary-text ) );
}

.jn-iconbtn .jn-icon,
.jn-account .jn-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.jn-account__label {
	font-size: .9375rem;
	font-weight: 500;
}

.jn-cart {
	position: relative;
}

.jn-cart__badge {
	position: absolute;
	top: .125rem;
	right: 0;
	min-width: 1.25rem;
	padding: 0 .3rem;
	border-radius: 999px;
	background-color: var( --jn-gold-500 );
	color: #fff;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.25rem;
	text-align: center;
}

/* Theme toggle shows the icon for the theme it switches *to*. */
.jn-header .jn-utilbar button.jn-theme-toggle,
.jn-header .jn-utilbar .jn-theme-toggle {
	min-width: 2.25rem;
	min-height: 2.25rem;
	border: 0;
	background-color: transparent;
	color: #fff;
	cursor: pointer;
}

.jn-header .jn-utilbar button.jn-theme-toggle:hover,
.jn-utilbar .jn-theme-toggle:hover {
	background-color: rgba( 255, 255, 255, .1 );
	color: var( --jn-gold-400 );
}

:root.dark .jn-icon--moon,
:root:not( .dark ) .jn-icon--sun {
	display: none;
}

/* --------------------------------------------------------------------------
   Row 3 — nav
   -------------------------------------------------------------------------- */

.jn-navrow,
.wp-site-blocks .jn-navrow {
	margin-block: 0;
	background-color: var( --jn-navrow );
}

.jn-navrow__inner,
.wp-site-blocks .jn-navrow__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	box-sizing: border-box;
	height: var( --jn-navrow-h );
	margin-block: 0;
}

/* Trap 6 — core copies the block's className onto the <ul> as well as the
   <nav>, so layout rules are scoped to the element; inherited properties are
   left unscoped so the list still gets them. */
.jn-nav {
	font-size: .9375rem;
}

nav.jn-nav,
.wp-site-blocks nav.jn-nav {
	flex: 0 0 auto;
}

.jn-navrow .wp-block-navigation__container {
	gap: 0;
}

.jn-navrow .wp-block-navigation__container .wp-block-navigation-item__content,
.jn-navrow a.wp-block-navigation-item__content,
.jn-navrow .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding-inline: 1rem;
	color: #fff;
	font-weight: 500;
	text-decoration: none;
	transition: var( --jn-transition );
}

.jn-navrow .wp-block-navigation__container .wp-block-navigation-item__content:hover,
.jn-navrow a.wp-block-navigation-item__content:hover,
.jn-navrow .current-menu-item a.wp-block-navigation-item__content {
	color: var( --jn-gold-400 );
}

/* The nav row's own CTAs, mirrored by in-panel links below the breakpoint. */
.jn-navrow__ctas {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex: 0 0 auto;
}

.jn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding-inline: 1.25rem;
	border: 1px solid transparent;
	border-radius: .5rem;
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: var( --jn-transition );
}

.jn-navrow .jn-btn--fill,
.jn-btn--fill {
	background-color: var( --jn-gold-500 );
	color: #111;
}

.jn-navrow .jn-btn--fill:hover {
	background-color: var( --jn-gold-400 );
}

/* border-offwhite before bg — an outlined button whose hover fills must not
   be read as filled. */
.jn-navrow .jn-btn--outline,
.jn-btn--outline {
	border-color: var( --jn-gold-500 );
	background-color: transparent;
	color: var( --jn-gold-500 );
}

.jn-navrow .jn-btn--outline:hover {
	background-color: rgba( 232, 189, 75, .12 );
	color: var( --jn-gold-400 );
}

/* The in-panel CTAs are hidden while the nav row's own are visible. */
.jn-nav .wp-block-navigation__responsive-container li.jn-nav-cta {
	display: none;
}

/* ==========================================================================
   Responsive contract

   Degradation order, each tier its own decision:
     1400+  full row
     1180   trim nav link padding
     1024   drop the account label, tighten search
      900   collapse the nav to the hamburger, in-panel CTAs appear
      640   utility welcome text shortens, header search hides
   Nothing ellipsises: an element either renders in full or is hidden.
   ========================================================================== */

@media ( max-width: 1180px ) {
	.jn-navrow .wp-block-navigation-item__content {
		padding-inline: .625rem;
	}

	.jn-mainrow__inner,
	.wp-site-blocks .jn-mainrow__inner {
		gap: 1.25rem;
	}
}

@media ( max-width: 1024px ) {
	.jn-account__label {
		display: none;
	}

	.jn-header .jn-search__input {
		padding-right: 6rem;
	}
}

/* --------------------------------------------------------------------------
   Nav collapse at 900px.

   Core hard-codes 600px and must be beaten in both directions, so its :not()
   chains are copied verbatim rather than reaching for !important.
   -------------------------------------------------------------------------- */

@media ( max-width: 900px ) {
	/* Show the hamburger. */
	.jn-nav .wp-block-navigation__responsive-container-open:not( .always-shown ) {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 2.75rem;
		min-height: 2.75rem;
		color: #fff;
	}

	/* Hide the inline list. */
	.jn-nav .wp-block-navigation__responsive-container:not( .hidden-by-default ):not( .is-menu-open ) {
		display: none;
	}

	/* The nav row's own CTAs give way to the in-panel ones. */
	.jn-navrow__ctas {
		display: none;
	}

	.jn-nav .wp-block-navigation__responsive-container li.jn-nav-cta {
		display: block;
	}

	.jn-navrow__inner,
	.wp-site-blocks .jn-navrow__inner {
		justify-content: flex-start;
	}

	/* ----------------------------------------------------------------------
	   The open panel is a dropdown, not a full-screen overlay: the container
	   is fixed and transparent so the logo stays visible and clickable, and
	   only the dialog itself takes pointer events.
	   ---------------------------------------------------------------------- */

	.jn-nav .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		inset: 0;
		padding: 0;
		background-color: transparent;
		pointer-events: none;
		/* Core's entrance slides up from translateY(.5em); if its opacity
		   keyframe never runs the panel stays invisible. */
		animation: none;
	}

	/* The block no longer declares overlay colours, but core still ships a
	   background rule for the open container. Match it at six classes. */
	.wp-site-blocks .jn-nav .wp-block-navigation__responsive-container.is-menu-open.has-modal-open,
	.wp-site-blocks .jn-nav .wp-block-navigation__responsive-container.is-menu-open.has-background.has-background-background-color {
		background-color: transparent;
	}

	.jn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		margin-top: calc( var( --jn-header-h ) + var( --jn-adminbar ) );
		max-height: calc( 100dvh - var( --jn-header-h ) - var( --jn-adminbar ) );
		overflow-y: auto;
		overscroll-behavior: contain;
		/* No backdrop-filter here either — solid, with a hairline top border. */
		background-color: hsl( var( --jn-background ) );
		border-top: 1px solid hsl( var( --jn-border ) );
		pointer-events: auto;
	}

	.jn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding: 1rem var( --jn-gutter ) 1.5rem;
	}

	.jn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: .25rem;
	}

	.jn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		min-height: 2.75rem;
		padding-inline: 0;
		color: hsl( var( --jn-foreground ) );
	}

	.jn-nav .wp-block-navigation__responsive-container.is-menu-open li.jn-nav-cta .wp-block-navigation-item__content {
		justify-content: center;
		margin-top: .5rem;
		border-radius: .5rem;
		background-color: var( --jn-gold-500 );
		color: #111;
		font-weight: 600;
	}

	.jn-nav .wp-block-navigation__responsive-container.is-menu-open li.jn-nav-cta--outline .wp-block-navigation-item__content {
		border: 1px solid var( --jn-gold-500 );
		background-color: transparent;
		color: var( --jn-gold-500 );
	}

	/* The close button sits in the toggle's exact box, so the icons appear to
	   swap in place. */
	.jn-nav .wp-block-navigation__responsive-container-close {
		position: fixed;
		top: calc(
			var( --jn-adminbar ) + var( --jn-utilbar-h ) + var( --jn-mainrow-h )
			+ ( var( --jn-navrow-h ) - 2.75rem ) / 2
		);
		left: calc( ( 100vw - min( 100vw, var( --jn-shell ) ) ) / 2 + var( --jn-gutter ) );
		/* Core also sets right, which would stretch the button across the row. */
		right: auto;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		color: hsl( var( --jn-foreground ) );
		pointer-events: auto;
	}

	/* Core never hides the open toggle — its own overlay is opaque and covers
	   it. Ours is transparent, so read the open state off the container and
	   hide the toggle. visibility, not display, so the row does not reflow. */
	.jn-nav:has( .wp-block-navigation__responsive-container.is-menu-open ) .wp-block-navigation__responsive-container-open {
		visibility: hidden;
	}
}

@media ( max-width: 640px ) {
	.jn-utilbar__welcome-long {
		display: none;
	}

	.jn-utilbar__welcome-short {
		display: inline;
	}

	/* The header search gives way; the shop page carries its own. */
	.jn-search--header {
		display: none;
	}

	.jn-mainrow__inner,
	.wp-site-blocks .jn-mainrow__inner {
		grid-template-columns: auto 1fr;
		gap: 1rem;
	}

	.jn-header .jn-logo,
	.jn-header .jn-logo a {
		font-size: 1.5rem;
	}
}