/**
 * Jukwaa global shell: header, mega menu, mobile drawer, bottom bar, footer.
 *
 * Built on top of core's Navigation block rather than a custom menu system.
 * Core already ships the accessible submenu behaviour, the mobile overlay,
 * focus trapping and the aria wiring. Rewriting that would be a downgrade
 * dressed as craftsmanship. What is added here is layout and skin.
 */

/* ------------------------------------------------------------------ Header */

.jk-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* The admin bar is fixed at 32px on desktop, 46px on mobile. Without this the
   sticky header hides underneath it for logged in users. */
.admin-bar .jk-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .jk-header { top: 46px; }
}

.jk-header__inner {
	min-height: var(--wp--custom--header--height);
	gap: var(--wp--preset--spacing--50);
}

.jk-header__brand { gap: var(--wp--preset--spacing--20); flex: 0 0 auto; }
.jk-header__brand a { text-decoration: none; color: var(--wp--preset--color--ink); }

.jk-header__tools {
	flex: 0 1 auto;
	gap: var(--wp--preset--spacing--30);
	margin-left: auto;
}

/* Search is a field, not an icon. On a marketplace, hiding search behind a
   magnifier costs conversions, so it holds real estate at every size above
   mobile. */
.jk-search { flex: 1 1 320px; max-width: 420px; }
.jk-search .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--canvas);
	padding: 0.55rem 0.75rem;
	font-size: var(--wp--preset--font-size--small);
}
.jk-search .wp-block-search__input:focus {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--slate-light);
	outline: 2px solid var(--wp--preset--color--action);
	outline-offset: 1px;
}
.jk-search .wp-block-search__button { background: transparent; color: var(--wp--preset--color--slate); }

.jk-account-nav { flex: 0 0 auto; }
.jk-account-nav .wp-block-navigation__container { gap: var(--wp--preset--spacing--30); }
.jk-icon-link a {
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}
.jk-icon-link a:hover { color: var(--wp--preset--color--action); }

/* Below the mega menu breakpoint the header keeps only brand, search and the
   core overlay trigger. Wishlist, library and account move to the bottom bar,
   where a thumb can actually reach them. */
@media (max-width: 900px) {
	.jk-account-nav { display: none; }
	.jk-search { flex: 1 1 auto; max-width: none; }
}

/* -------------------------------------------------------------- Mega menu */

.jk-nav .wp-block-navigation-item > a {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}
.jk-nav__deals > a { color: var(--wp--preset--color--expiring); font-weight: 600; }

@media (min-width: 901px) {

	/* Full width panel rather than a dropdown column. */
	.jk-nav__browse > .wp-block-navigation__submenu-container {
		position: fixed;
		left: 0;
		right: 0;
		top: auto;
		width: 100vw;
		min-width: 0;
		padding: var(--wp--preset--spacing--60) max(var(--wp--preset--spacing--50), calc((100vw - 1360px) / 2));
		background: var(--wp--preset--color--surface);
		border: 0;
		border-top: 1px solid var(--wp--preset--color--line);
		border-bottom: 1px solid var(--wp--preset--color--line);
		box-shadow: var(--wp--preset--shadow--overlay);
		border-radius: 0;

		/* Multi-column flow, not a grid. A grid cannot keep a category heading
		   with its own children when the source is one flat list; multicol can,
		   via break-before. Zero JavaScript. */
		column-width: 200px;
		column-gap: var(--wp--preset--spacing--50);
	}

	.jk-nav__browse > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		display: block;
		break-inside: avoid;
	}

	.jk-nav__browse .wp-block-navigation-item a {
		display: block;
		padding: 5px 0;
		font-size: var(--wp--preset--font-size--small);
		color: var(--wp--preset--color--slate);
	}
	.jk-nav__browse .wp-block-navigation-item a:hover {
		color: var(--wp--preset--color--action);
		background: transparent;
		text-decoration: underline;
	}

	/* Category headings start a new column, so each category owns its column. */
	.jk-mega__head { break-before: column; }
	.jk-mega__head:first-child { break-before: avoid; }
	.jk-mega__head > a {
		font-family: var(--wp--preset--font-family--utility);
		font-size: var(--wp--preset--font-size--micro) !important;
		font-weight: 500;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--wp--preset--color--ink) !important;
		padding-bottom: var(--wp--preset--spacing--20) !important;
		margin-bottom: var(--wp--preset--spacing--20);
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	/* The curated entry points are not a seventh category, so they span the
	   full panel below a pindo rule instead of sitting in the column flow. */
	.jk-mega__head--alt {
		column-span: all;
		margin-top: var(--wp--preset--spacing--50);
		padding-top: var(--wp--preset--spacing--40);
		border-top: 1px solid var(--wp--preset--color--line);
		border-bottom: 1px solid var(--wp--preset--color--line);
	}
	.jk-mega__head--alt > a { border-bottom: 0; }
}

/* ---------------------------------------------- Mobile drawer (core overlay) */

.jk-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--surface);
}
.jk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	min-height: 44px;
	display: flex;
	align-items: center;
	font-size: var(--wp--preset--font-size--base);
}
.jk-nav .wp-block-navigation__responsive-container.is-menu-open .jk-mega__head > a {
	font-family: var(--wp--preset--font-family--utility);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	margin-top: var(--wp--preset--spacing--40);
}

/* ---------------------------------------------------------- Bottom bar */

.jk-bottombar {
	display: none;
	position: fixed;
	inset: auto 0 0 0;
	z-index: 60;
	padding: 6px var(--wp--preset--spacing--20) calc(6px + env(safe-area-inset-bottom));
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--line);
}

@media (max-width: 900px) {
	.jk-bottombar { display: block; }
	/* Reserve the space so the bar never covers the last row of a grid. */
	body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}

.jk-bottombar .wp-block-navigation__container {
	width: 100%;
	justify-content: space-between;
	gap: 0;
}
.jk-tab { flex: 1 1 0; }
.jk-tab > a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 500;
	color: var(--wp--preset--color--slate);
	text-decoration: none;
}
.jk-tab > a[aria-current="page"],
.jk-tab.current-menu-item > a { color: var(--wp--preset--color--action); font-weight: 600; }

/* ------------------------------------------------------------------ Footer */

.jk-footer { padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50); }
.jk-footer h6 { margin-bottom: var(--wp--preset--spacing--30); }
.jk-footer__nav a {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
	text-decoration: none;
	padding-block: 4px;
}
.jk-footer__nav a:hover { color: var(--wp--preset--color--ink); text-decoration: underline; }
.jk-footer__legal {
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--line);
}
.jk-footer__nav--inline a { font-size: var(--wp--preset--font-size--tiny); }

/* --------------------------------------------------------------------- 404 */

.jk-404 { text-align: center; }
.jk-404 .wp-block-buttons { justify-content: center; }
.jk-404 .jk-search--404 { margin-inline: auto; max-width: 460px; }