/* ==========================================================================
   Siam District — Header & Primary Navigation
   Single row: hamburger (mobile) / logo / nav (inline, desktop only) / actions
   ========================================================================== */

/* ---- Breadcrumb (shop archive, product, and any future inner page) ----
   White background (same as the section below it), no border — reads
   as part of that section instead of a separate grey banner. */

.shop-breadcrumb {
	background: var(--sd-color-white);
}

.shop-breadcrumb__container {
	max-width: var(--sd-container-width);
	margin: 0 auto;
	padding: 16px 24px 0;
	font-family: var(--sd-font-body);
	font-size: 13px;
	color: #777777;
}

.shop-breadcrumb__container a:hover,
.shop-breadcrumb__container a:focus-visible {
	color: var(--sd-color-brand);
}

.shop-breadcrumb__container span[aria-hidden] {
	margin: 0 8px;
}

/* ---- Promo bar (above the header) ---- */

.promo-bar {
	background: var(--sd-color-brand);
	color: var(--sd-color-button-text);
}

.promo-bar__container {
	max-width: var(--sd-container-width);
	margin: 0 auto;
	padding: 0 24px;
	height: 42px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
}

.promo-bar__social {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	justify-self: start;
}

.promo-bar__spacer {
	justify-self: end;
}

.promo-bar__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--sd-color-button-text);
	opacity: 0.85;
	transition: opacity 0.15s ease;
}

.promo-bar__social-link:hover,
.promo-bar__social-link:focus-visible {
	opacity: 1;
}

.promo-bar__social-link svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
}

.promo-bar__message {
	display: flex;
	align-items: center;
	justify-self: center;
	gap: 12px;
	color: var(--sd-color-button-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.promo-bar__message-text {
	font-family: var(--sd-font-body);
	font-size: 14px;
	font-weight: 600;
}

.promo-bar__message-cta {
	font-family: var(--sd-font-button);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 12px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: var(--sd-radius);
	transition: background-color 0.15s ease, color 0.15s ease;
	flex-shrink: 0;
}

.promo-bar__message:hover .promo-bar__message-cta,
.promo-bar__message:focus-visible .promo-bar__message-cta {
	background: var(--sd-color-button-text);
	color: var(--sd-color-brand);
}

@media (max-width: 479.98px) {
	.promo-bar__message-text {
		display: none;
	}
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--sd-color-header-bg);
	width: 100%;
}

/* The WP admin toolbar is position:fixed at top:0 with a z-index far above
   ours, so once logged-in visitors scroll and the header sticks at top:0,
   the toolbar renders on top of it, hiding the header's top ~32px behind
   a black bar — reads as the header being "cut off". Real site visitors
   never see the admin bar and are unaffected. Matches WP core's own
   breakpoint for the shorter mobile admin bar height. */
body.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

/* Locks the background page while the mobile off-canvas nav is open —
   without this, scrolling the page behind the panel up to the promo bar
   pushes .site-header (and its close button) out of sync with the fixed
   nav panel's top offset, leaving no way to close the menu. */
body.sd-nav-locked {
	overflow: hidden;
	position: fixed;
	width: 100%;
}

.site-header__bar {
	border-bottom: 1px solid var(--sd-color-header-border);
}

.site-header__container {
	max-width: var(--sd-container-width);
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: stretch;
	height: var(--sd-header-height);
	gap: 8px;
}

.site-header__logo,
.site-header__actions,
.site-header__menu-toggle {
	align-self: center;
}

.site-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.site-header__logo img,
.site-header__logo svg {
	height: 40px;
	width: auto;
	max-width: 100%;
	/* The logo sits inside a flex parent (.site-header__logo) which itself
	   sits in a flex row on desktop and a grid on mobile. flex-shrink:0 stops
	   any of those from squeezing the image's width while its height stays
	   pinned; object-fit:contain is a belt-and-braces guard so the artwork
	   keeps its ratio even if a container ever forces an odd box size. */
	flex-shrink: 0;
	object-fit: contain;
	display: block;
}

.site-header__logo-text {
	color: var(--sd-color-header-text);
	font-family: var(--sd-font-heading);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.site-header__logo-text span {
	color: var(--sd-color-brand);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	margin-left: auto;
}

.site-header__icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: none;
	color: var(--sd-color-header-text);
	cursor: pointer;
	border-radius: var(--sd-radius);
	transition: background-color 0.15s ease;
}

.site-header__icon-btn:hover,
.site-header__icon-btn:focus-visible {
	background: var(--sd-color-header-hover-bg);
}

.site-header__icon-btn svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	fill: none;
}

.site-header__cart-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background: var(--sd-color-brand);
	color: var(--sd-color-button-text);
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	border-radius: 999px;
}

.site-header__cart-count[data-count="0"] {
	display: none;
}

/* Mobile hamburger toggle — hidden on desktop */

.site-header__menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	background: none;
	border: none;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.hamburger,
.hamburger::before,
.hamburger::after {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--sd-color-header-text);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.hamburger {
	position: relative;
}

.hamburger::before,
.hamburger::after {
	content: "";
	position: absolute;
	left: 0;
}

.hamburger::before {
	top: -7px;
}

.hamburger::after {
	top: 7px;
}

.site-header__menu-toggle[aria-expanded="true"] .hamburger {
	background: transparent;
}

.site-header__menu-toggle[aria-expanded="true"] .hamburger::before {
	transform: translateY(7px) rotate(45deg);
}

.site-header__menu-toggle[aria-expanded="true"] .hamburger::after {
	transform: translateY(-7px) rotate(-45deg);
}

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

.site-header__search {
	background: var(--sd-color-white);
	border-bottom: 1px solid var(--sd-color-header-border);
	overflow: hidden;
}

.site-header__search[hidden] {
	display: none;
}

.site-header__search-form {
	max-width: var(--sd-container-width);
	margin: 0 auto;
	padding: 16px 24px;
	display: flex;
	gap: 8px;
}

.site-header__search-form input[type="search"] {
	flex: 1;
	height: 44px;
	padding: 0 16px;
	background: var(--sd-color-white);
	border: 1px solid var(--sd-color-border);
	border-radius: var(--sd-radius);
	font-size: 15px;
	color: var(--sd-color-body-text);
}

.site-header__search-form input[type="search"]:focus {
	outline: 2px solid var(--sd-color-brand);
	outline-offset: -2px;
}

.site-header__search-form button {
	height: 44px;
	padding: 0 24px;
	background: var(--sd-color-brand);
	color: var(--sd-color-button-text);
	border: none;
	border-radius: var(--sd-radius);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.site-header__search-form button:hover {
	background: var(--sd-color-brand-hover);
}

/* ---- Rotating promo strip (below the nav) ---- */

.promo-strip {
	background: var(--sd-color-banner-bg);
	color: var(--sd-color-banner-text);
}

.promo-strip__container {
	max-width: var(--sd-container-width);
	margin: 0 auto;
	padding: 0 24px;
	height: 52px;
	position: relative;
}

.promo-strip__item {
	position: absolute;
	inset: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: var(--sd-font-body);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	pointer-events: none;
}

.promo-strip__item.is-active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.promo-strip__highlight,
.promo-strip__item strong {
	color: var(--sd-color-brand);
	font-weight: 700;
	margin: 0 2px;
}

.promo-strip__item p {
	display: inline;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.promo-strip__item {
		transition: opacity 0.15s linear;
		transform: none;
	}
}

@media (max-width: 599.98px) {
	.promo-strip__item {
		font-size: 13px;
		letter-spacing: 0.03em;
		padding: 0 12px;
	}
}


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

.site-nav__container {
	height: 100%;
}

.site-nav__menu {
	display: flex;
	align-items: stretch;
	height: 100%;
}

.site-nav__menu > .menu-item {
	position: relative;
}

.site-nav__menu > .menu-item > a {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 16px;
	color: var(--sd-color-header-text);
	font-family: var(--sd-font-heading);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
	transition: color 0.15s ease;
	border-bottom: 2px solid transparent;
}

.site-nav__menu > .menu-item > a:hover,
.site-nav__menu > .menu-item > a:focus-visible,
.site-nav__menu > .menu-item.is-open > a {
	color: var(--sd-color-brand);
	border-bottom-color: var(--sd-color-brand);
}

.menu-item-has-children > a {
	position: relative;
}

.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.menu-item-has-children.is-open > a::after {
	transform: rotate(-135deg);
}

/* Mobile-only close button inside the off-canvas panel — hidden by default,
   only shown under the mobile media query below. Without this base rule it
   falls back to the browser's default button display everywhere, including
   desktop. */

.site-nav__close {
	display: none;
}

/* Submenu toggle button — mobile-only accordion trigger, hidden on desktop */

.submenu-toggle {
	display: none;
}

/* Dropdown panel */

.sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--sd-color-white);
	border-top: 2px solid var(--sd-color-brand);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
	padding: 8px 0;
	z-index: 10;
}

.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu,
.menu-item-has-children.is-open > .sub-menu {
	display: block;
}

.sub-menu .menu-item a {
	display: block;
	padding: 12px 20px;
	color: var(--sd-color-body-text);
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sub-menu .menu-item a:hover,
.sub-menu .menu-item a:focus-visible {
	background: #f4f5fa;
	color: var(--sd-color-brand);
}

/* Split dropdown — opt-in via "has-card-menu" CSS class on the top-level
   menu item (Appearance > Menus > item > CSS Classes). Sub-items with a
   Description set (used as the image URL, see SD_Nav_Walker) become an
   image card and are laid out left-to-right in their own row via the
   sub-menu__card-slot-N class the walker numbers them with (slot 1 = first
   card, slot 2 = second, ...). Plain text sub-items (no description) stay
   stacked in the left-hand text column. Add both a text item and a card
   item per brand to get "Chang Jerseys" listed on the left and shown as
   a card on the right.
   Only 3 card slots are wired up below (2 brands today, one spare) — add
   a .sub-menu__card-slot-4 rule and widen grid-template-columns if a 4th
   brand card is ever needed here. */

.menu-item.has-card-menu > .sub-menu {
	display: none;
	min-width: 680px;
	padding: 32px;
}

.menu-item.has-card-menu:hover > .sub-menu,
.menu-item.has-card-menu:focus-within > .sub-menu,
.menu-item.has-card-menu.is-open > .sub-menu {
	display: grid;
	grid-template-columns: auto repeat(3, 190px);
	grid-template-rows: repeat(3, auto);
	column-gap: 32px;
	row-gap: 10px;
	align-items: start;
}

.menu-item.has-card-menu > .sub-menu > .menu-item {
	grid-column: 1;
}

/* Cards span all 3 text rows (rather than sitting only in row 1) so their
   height doesn't force a gap under the first text link — see the comment
   above this block for why a flat WP menu list needs this trick. */

.menu-item.has-card-menu > .sub-menu > .menu-item.sub-menu__card-slot-1 {
	grid-column: 2;
	grid-row: 1 / span 3;
}

.menu-item.has-card-menu > .sub-menu > .menu-item.sub-menu__card-slot-2 {
	grid-column: 3;
	grid-row: 1 / span 3;
}

.menu-item.has-card-menu > .sub-menu > .menu-item.sub-menu__card-slot-3 {
	grid-column: 4;
	grid-row: 1 / span 3;
}

.menu-item.has-card-menu > .sub-menu > .menu-item a:not(.sub-menu__card) {
	white-space: nowrap;
}

.sub-menu .menu-item a.sub-menu__card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: 100%;
	padding-bottom: 16px;
	background: #f5f5f5;
	border-radius: var(--sd-radius);
	overflow: hidden;
	white-space: normal;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
}

.sub-menu .menu-item a.sub-menu__card:hover,
.sub-menu .menu-item a.sub-menu__card:focus-visible {
	background: #ebedf5;
	color: var(--sd-color-body-text);
}

.sub-menu__card-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 190px;
	padding: 14px;
}

.sub-menu__card-image img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* ==========================================================================
   Desktop (>= 1000px) — nav sits inline in the header row, right of the logo
   ========================================================================== */

@media (min-width: 1000px) {
	.site-nav {
		flex: 1;
		display: flex;
		margin-left: 32px;
	}
}

/* ==========================================================================
   Mobile (< 1000px) — nav becomes an off-canvas panel behind the hamburger
   ========================================================================== */

@media (max-width: 999.98px) {
	.site-header__menu-toggle {
		display: inline-flex;
	}

	.site-header__container {
		height: 64px;
		display: grid;
		/* Centre track is auto (sized to the logo) so it's never compressed;
		   the two minmax(0, 1fr) side tracks absorb the leftover space and
		   keep the logo optically centred. Plain 1fr side tracks would force
		   the logo track narrower than the artwork on small phones and
		   squish it. */
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
	}

	/* Hamburger left, logo dead-center, search+cart right — Marden's
	   call, 20 Aug. .site-nav is position:fixed on mobile so it's out of
	   normal flow and doesn't take a grid track; these are the only 3
	   in-flow children, one per column. */
	.site-header__menu-toggle {
		justify-self: start;
	}

	.site-header__logo {
		justify-self: center;
	}

	.site-header__actions {
		justify-self: end;
	}

	.site-header__logo img,
	.site-header__logo svg {
		height: 32px;
	}

	.site-nav {
		position: fixed;
		top: 64px;
		left: 0;
		bottom: 0;
		width: min(320px, 86vw);
		overflow-y: auto;
		background: var(--sd-color-header-bg);
		transform: translateX(-100%);
		transition: transform 0.25s ease;
		border-right: 1px solid var(--sd-color-header-border);
	}

	.site-nav.is-open {
		transform: translateX(0);
	}

	/* Always-visible close button inside the panel itself — the header's
	   own hamburger toggle can scroll out of reach if the background page
	   was already scrolled down before the menu was opened, and the
	   backdrop's tappable strip can be too narrow to notice on small
	   phones. This guarantees a way out regardless of scroll position. */
	.site-nav__close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 8px;
		right: 8px;
		width: 44px;
		height: 44px;
		background: none;
		border: none;
		color: var(--sd-color-header-text);
		font-size: 32px;
		line-height: 1;
		cursor: pointer;
		z-index: 1;
	}

	.site-nav__container {
		padding: 8px 0;
	}

	.site-nav__menu {
		flex-direction: column;
		height: auto;
	}

	.site-nav__menu > .menu-item {
		border-bottom: 1px solid var(--sd-color-header-border);
	}

	.site-nav__menu > .menu-item > a {
		height: auto;
		padding: 16px 20px;
		border-bottom: none;
	}

	.menu-item-has-children > a::after {
		display: none;
	}

	.submenu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		right: 0;
		width: 48px;
		height: 48px;
		background: none;
		border: none;
		color: var(--sd-color-header-text);
		cursor: pointer;
	}

	.submenu-toggle::after {
		content: "";
		width: 8px;
		height: 8px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.15s ease;
	}

	.submenu-toggle[aria-expanded="true"]::after {
		transform: rotate(-135deg);
	}

	.sub-menu {
		display: none;
		position: static;
		box-shadow: none;
		border-top: none;
		background: rgba(0, 0, 0, 0.04);
		padding: 0;
	}

	.menu-item-has-children:hover > .sub-menu,
	.menu-item-has-children:focus-within > .sub-menu {
		display: none;
	}

	.menu-item-has-children.is-open > .sub-menu {
		display: block;
	}

	/* Touch browsers often trigger :hover on tap, and the desktop card-grid
	   rule's :hover selector has the same specificity as the generic mobile
	   :hover-hide rule above but matches more precisely (has-card-menu),
	   so it wins and forces the grid layout open even on mobile unless
	   explicitly neutralised here at matching specificity. */
	.menu-item.has-card-menu:hover > .sub-menu,
	.menu-item.has-card-menu:focus-within > .sub-menu {
		display: none;
	}

	/* Narrow off-canvas panel — plain text links only, no image cards.
	   The desktop left/right card split doesn't fit here, and the cards
	   just duplicated the text links already sitting above them, so
	   they're hidden entirely on mobile (Marden's call, 20 Aug) rather
	   than shown stacked. */
	.menu-item.has-card-menu.is-open > .sub-menu {
		display: block;
		padding: 8px 20px 16px;
	}

	.menu-item.has-card-menu > .sub-menu > .menu-item {
		grid-column: initial;
	}

	.menu-item.has-card-menu > .sub-menu > .menu-item.sub-menu__card-slot-1,
	.menu-item.has-card-menu > .sub-menu > .menu-item.sub-menu__card-slot-2,
	.menu-item.has-card-menu > .sub-menu > .menu-item.sub-menu__card-slot-3 {
		display: none;
	}

	.sub-menu .menu-item a {
		color: rgba(26, 26, 26, 0.75);
		padding: 12px 20px 12px 32px;
	}

	.sub-menu .menu-item a:hover,
	.sub-menu .menu-item a:focus-visible {
		background: rgba(0, 0, 0, 0.05);
		color: var(--sd-color-header-text);
	}

	.site-header__search-form {
		padding: 12px 16px;
	}
}

/* Backdrop shown behind the off-canvas mobile nav */

.site-nav__backdrop {
	display: none;
}

@media (max-width: 999.98px) {
	.site-nav__backdrop {
		display: block;
		position: fixed;
		inset: 64px 0 0 0;
		background: var(--sd-color-overlay);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s ease;
		z-index: 90;
	}

	.site-nav__backdrop.is-visible {
		opacity: 1;
		pointer-events: auto;
	}

	.site-nav {
		z-index: 95;
	}
}