/*
 * mh-mobile-header.css
 *
 * Two sections:
 *
 * 1. UNLAYERED block (hide Storefront mobile chrome at ≤768px).
 *    These rules target Storefront markup (#masthead, etc.) which is itself
 *    styled by unlayered CSS in style.css and header-redesign-v1.css. Layered
 *    CSS always loses to unlayered CSS regardless of specificity, so to beat
 *    Storefront's display: flex/grid we have to be unlayered too. Kept narrow
 *    and breakpoint-scoped to minimise blast radius.
 *
 * 2. LAYERED block (@layer mh.components — our component styles).
 *    Targets only .mh-mobile-header__* selectors that Storefront never sees,
 *    so the layer wins cleanly without !important against wp_custom_css /
 *    storefront_customizer_css (which sit in @layer mh.legacy).
 *
 * BEM block: .mh-mobile-header
 *   __strip          top utility row (Öppettider + Frakt)
 *   __strip-item     one item in the strip
 *   __strip-icon     leading SVG
 *   __band           red brand row (hamburger | search | logo | cart)
 *   __band-cluster   left icon cluster (groups menu + search side by side)
 *   __icon-btn       any 44×44 icon button
 *   __hamburger      pure-CSS hamburger lines (open + close states)
 *   __logo           center-positioned logo wrapper
 *   __cart-count     small pill badge on the cart icon
 *   __search-panel   slide-down search input region (revealed by JS)
 */

/* ========================================================================
   1. UNLAYERED — hide Storefront's mobile chrome at ≤768px.
   ======================================================================== */
@media (max-width: 768px) {
	/* !important required to beat header-redesign-v1.css's existing mobile
	 * block, which sets `display: block !important` on these elements
	 * (lines ~868-940 of that file, part of the previous mobile overhaul).
	 * Follow-up: delete those rules in header-redesign-v1.css and drop the
	 * !important here. */
	#masthead .header-widget-region,
	#masthead .site-branding,
	#masthead .site-search,
	#masthead .site-header-cart,
	#site-navigation > button.menu-toggle {
		display: none !important;
	}

	/* Strip Storefront's red band background and padding so nothing peeks
	 * above our mobile header. Same reason for !important. The container
	 * also gets `height: 0` so any leftover Storefront/customizer
	 * `padding-top` on .site-header (typically 1.618em from base CSS) can't
	 * push the breadcrumb below the mobile header band. The mobile drawer is
	 * a sibling of #masthead (not a descendant), so collapsing this doesn't
	 * affect hamburger / drawer behaviour. */
	#masthead.site-header,
	#masthead .storefront-primary-navigation {
		background: transparent !important;
		padding: 0 !important;
		margin: 0 !important;
		min-height: 0 !important;
		height: 0 !important;
		overflow: visible !important;
		border: 0 !important;
	}

	/* Also collapse #content top breathing room — Storefront and some
	 * legacy rules add em-based padding/margin on .site-content / .col-full.test
	 * which leaves a visible white gap below the mobile header on every page.
	 * Belt-level reset on mobile only. */
	#content.site-content,
	#content.site-content > .col-full,
	#content.site-content > .col-full.test {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}

	/* #site-navigation stays in DOM so our hamburger can toggle its drawer.
	 * Storefront's navigation.js flips .toggled to reveal it. */

	/* CookieYes (cookie-law-info plugin) injects a floating "revisit" button
	 * at viewport corner once consent has been given. It conflicts visually
	 * with the brand red and consumes a tap target. Hide on mobile; users
	 * can re-open consent from a footer link if needed. */
	.cky-revisit-consent,
	.cky-btn-revisit-consent,
	.cky-revisit-bottom-left,
	.cky-revisit-bottom-right {
		display: none !important;
	}

	/* WooCommerce blocks price-slider injects a stray <progress>-styled
	 * track that occasionally renders empty under filter chips when no
	 * range is set. Hide it on mobile until we redesign the price filter. */
	.wc-block-components-price-slider__range-input-progress {
		display: none;
	}
}

/* ========================================================================
   2. .mh-mobile-header component styles (unlayered).
   Originally these were wrapped in @layer mh.components, but Storefront's
   parent-theme `img { max-width: 100%; height: auto }` reset (and similar
   element-tag resets) are unlayered — and unlayered ALWAYS beats layered
   regardless of specificity. Since our component selectors are uniquely
   namespaced (.mh-mobile-header__*) and conflict with nothing else, we
   just live unlayered and win on specificity + source order. The
   mh.components layer remains declared in mh-layers.css for future
   components that genuinely need it.
   ======================================================================== */

.mh-mobile-header {
	display: none;
}

@media (max-width: 768px) {

		/* ---- Block: visible on mobile, fills #page (which is viewport-wide on mobile) ---- */
		.mh-mobile-header {
			display: block;
			position: relative;
			z-index: 100;
			font-family: inherit;
			color: #fff;
			background: #ef0000;
			box-sizing: border-box;
			padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
		}

		/* ---- Element: utility strip (black bar at top) ---- */
		.mh-mobile-header__strip {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
			padding: 8px 16px;
			background: #111;
			color: #fff;
			font-size: 12px;
			line-height: 1.3;
		}

		.mh-mobile-header__strip-item {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			text-decoration: none;
			color: inherit;
			white-space: nowrap;
		}

		.mh-mobile-header__strip-item--link {
			text-decoration: none;
		}

		.mh-mobile-header__strip-item--link:hover,
		.mh-mobile-header__strip-item--link:focus {
			color: #fff;
			text-decoration: underline;
		}

		.mh-mobile-header__strip-icon {
			width: 14px;
			height: 14px;
			flex: 0 0 14px;
			color: inherit;
		}

		/* ---- Element: brand band (red bar with icons + logo)
		   3-column grid: [left cluster] [centered logo] [right cluster].
		   The centre column gets `1fr` and the logo is centred within it,
		   so the wordmark is centred relative to the viewport regardless
		   of the side clusters' widths. */
		.mh-mobile-header__band {
			display: grid;
			grid-template-columns: 1fr auto 1fr;
			align-items: center;
			column-gap: 8px;
			padding: 8px 12px;
			min-height: 56px;
			background: #ef0000;
		}

		.mh-mobile-header__band-cluster {
			display: inline-flex;
			align-items: center;
			gap: 4px;
		}

		.mh-mobile-header__band-cluster--left {
			justify-self: start;
		}

		/* Right cluster (cart) sits in column 3 so the logo column truly
		   centers in the viewport. */
		.mh-mobile-header__icon-btn--cart {
			justify-self: end;
		}

		/* ---- Element: icon button (44×44 tap target, no chrome) ---- */
		.mh-mobile-header__icon-btn {
			position: relative;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 44px;
			height: 44px;
			padding: 0;
			border: 0;
			background: transparent;
			color: #fff;
			text-decoration: none;
			cursor: pointer;
			-webkit-tap-highlight-color: rgba(255, 255, 255, 0.18);
			border-radius: 4px;
			transition: background-color 0.15s ease;
		}

		.mh-mobile-header__icon-btn:hover,
		.mh-mobile-header__icon-btn:focus-visible {
			background-color: rgba(255, 255, 255, 0.12);
			outline: none;
		}

		.mh-mobile-header__icon-btn:focus-visible {
			box-shadow: 0 0 0 2px #fff;
		}

		.mh-mobile-header__icon-btn svg {
			width: 22px;
			height: 22px;
			display: block;
		}

		/* ---- Element: hamburger glyph (three lines → X on toggled) ---- */
		.mh-mobile-header__hamburger {
			position: relative;
			display: block;
			width: 20px;
			height: 14px;
		}

		.mh-mobile-header__hamburger::before,
		.mh-mobile-header__hamburger::after,
		.mh-mobile-header__hamburger {
			background-repeat: no-repeat;
		}

		.mh-mobile-header__hamburger::before,
		.mh-mobile-header__hamburger::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			height: 2px;
			background: currentColor;
			border-radius: 1px;
			transition: transform 0.2s ease, opacity 0.2s ease;
		}

		.mh-mobile-header__hamburger::before {
			top: 0;
			box-shadow: 0 6px 0 currentColor;
		}

		.mh-mobile-header__hamburger::after {
			bottom: 0;
		}

		/* Open state — flip to X */
		.mh-mobile-header__icon-btn--menu[aria-expanded="true"] .mh-mobile-header__hamburger::before {
			top: 6px;
			transform: rotate(45deg);
			box-shadow: none;
		}

		.mh-mobile-header__icon-btn--menu[aria-expanded="true"] .mh-mobile-header__hamburger::after {
			bottom: 6px;
			transform: rotate(-45deg);
		}

		/* ---- Element: logo (centre grid column, visually centred) ---- */
		.mh-mobile-header__logo {
			display: flex;
			align-items: center;
			justify-content: center;
			justify-self: center;
			min-width: 0;
			max-width: 100%;
			text-decoration: none;
			overflow: hidden;
		}

		.mh-mobile-header__logo img {
			max-height: 34px !important;
			max-width: 150px !important;
			width: auto !important;
			height: auto !important;
			display: block;
			object-fit: contain;
		}

		.mh-mobile-header__logo-text {
			color: #fff;
			font-weight: 700;
			font-size: 22px;
			letter-spacing: 0.02em;
		}

		/* ---- Element: cart icon button (anchor variant with badge) ---- */
		.mh-mobile-header__cart-count {
			position: absolute;
			top: 4px;
			right: 2px;
			min-width: 18px;
			height: 18px;
			padding: 0 5px;
			border-radius: 9px;
			background: #fff;
			color: #ef0000;
			font-size: 11px;
			font-weight: 700;
			line-height: 18px;
			text-align: center;
			pointer-events: none;
		}

		.mh-mobile-header__cart-count[hidden] {
			display: none;
		}

		/* ---- Element: search panel (slide-down when toggled) ---- */
		.mh-mobile-header__search-panel {
			background: #fff;
			padding: 12px 16px;
			border-bottom: 1px solid #f0eeea;
		}

		.mh-mobile-header__search-panel[hidden] {
			display: none;
		}

		.mh-mobile-header__search-panel form {
			position: relative;
			margin: 0;
			padding: 0;
			max-width: 100%;
		}

		.mh-mobile-header__search-input {
			width: 100%;
			height: 40px;
			padding: 0 12px;
			border: 1px solid #d8d5cf;
			border-radius: 6px;
			background: #fff;
			box-shadow: none;
			font-size: 15px;
			color: #111;
			-webkit-appearance: none;
			appearance: none;
		}

		.mh-mobile-header__search-input:focus {
			outline: none;
			border-color: #111;
			background: #fff;
			box-shadow: none;
		}

		.mh-mobile-header__search-panel button[type="submit"] {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}

}

/* ========================================================================
   3. .mh-mobile-drawer — left-side off-canvas menu (unlayered)
   Self-contained component. Owns its own data (server-rendered
   `wp_nav_menu`) so it doesn't depend on Storefront's #site-navigation
   plumbing, which is hidden at this breakpoint and never worked reliably
   as a drawer here.
   ======================================================================== */

/* Default desktop: keep drawer DOM in place but inert + invisible. */
.mh-mobile-drawer {
	display: none;
}

@media (max-width: 768px) {

	.mh-mobile-drawer {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
		pointer-events: none;
		visibility: hidden;
	}

	.mh-mobile-drawer[aria-hidden="false"] {
		pointer-events: auto;
		visibility: visible;
	}

	/* Scrim — fades in behind the panel. */
	.mh-mobile-drawer__scrim {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		opacity: 0;
		transition: opacity 0.25s ease;
	}

	.mh-mobile-drawer[aria-hidden="false"] .mh-mobile-drawer__scrim {
		opacity: 1;
	}

	/* Panel — slides in from the left. */
	.mh-mobile-drawer__panel {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(86vw, 360px);
		max-width: 100%;
		background: #fff;
		color: #111;
		display: flex;
		flex-direction: column;
		box-shadow: 2px 0 24px rgba(0, 0, 0, 0.18);
		transform: translateX(-100%);
		transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
		padding-top: env(safe-area-inset-top);
		padding-bottom: env(safe-area-inset-bottom);
		overflow: hidden;
	}

	.mh-mobile-drawer[aria-hidden="false"] .mh-mobile-drawer__panel {
		transform: translateX(0);
	}

	/* Head: title + close. */
	.mh-mobile-drawer__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px 16px;
		background: #ef0000;
		color: #fff;
		flex: 0 0 auto;
	}

	.mh-mobile-drawer__title {
		font-size: 16px;
		font-weight: 700;
		letter-spacing: 0.02em;
		text-transform: uppercase;
	}

	.mh-mobile-drawer__close {
		appearance: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		margin: -8px -8px -8px 0;
		background: transparent;
		border: 0;
		border-radius: 4px;
		color: #fff;
		cursor: pointer;
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
		transition: background-color 0.15s ease;
	}

	.mh-mobile-drawer__close:hover,
	.mh-mobile-drawer__close:focus-visible {
		background-color: rgba(255, 255, 255, 0.15);
		outline: none;
	}

	.mh-mobile-drawer__close:focus-visible {
		box-shadow: 0 0 0 2px #fff;
	}

	.mh-mobile-drawer__close svg {
		width: 22px;
		height: 22px;
		display: block;
	}

	/* Nav region scrolls if the menu is long. */
	.mh-mobile-drawer__nav {
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Menu — vertical list of links. Force block on UL/LI so any inherited
	   inline-block rules from .main-navigation / .secondary-navigation that
	   target generic `nav ul li` can't reflow these horizontally. */
	.mh-mobile-drawer__nav .mh-mobile-drawer__menu,
	.mh-mobile-drawer__nav .mh-mobile-drawer__menu ul,
	.mh-mobile-drawer .mh-mobile-drawer__menu,
	.mh-mobile-drawer .mh-mobile-drawer__menu ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: block !important;
		width: 100%;
	}

	.mh-mobile-drawer__nav .mh-mobile-drawer__menu li,
	.mh-mobile-drawer .mh-mobile-drawer__menu li {
		display: block !important;
		float: none !important;
		width: 100%;
		margin: 0;
		padding: 0;
		background: transparent;
		position: relative;
		text-align: left;
	}

	.mh-mobile-drawer__nav .mh-mobile-drawer__menu a,
	.mh-mobile-drawer .mh-mobile-drawer__menu a {
		display: block;
		width: 100%;
		padding: 9px 16px;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.3;
		color: #111;
		text-decoration: none;
		border-bottom: 1px solid #f3f1ed;
		background: transparent;
	}

	.mh-mobile-drawer__nav .mh-mobile-drawer__menu a:hover,
	.mh-mobile-drawer__nav .mh-mobile-drawer__menu a:focus {
		background: #faf7f2;
		color: #ef0000;
		outline: none;
	}

	/* Sub-menu items — indented, lighter weight, smaller. */
	.mh-mobile-drawer__nav .mh-mobile-drawer__menu .sub-menu a {
		padding: 7px 16px 7px 28px;
		font-size: 12px;
		font-weight: 400;
		color: #555;
	}

	/* Active / current item — beige bg, red text. */
	.mh-mobile-drawer__nav .mh-mobile-drawer__menu .current-menu-item > a,
	.mh-mobile-drawer__nav .mh-mobile-drawer__menu .current-menu-ancestor > a {
		background: #faf7f2;
		color: #ef0000;
	}

	/* Foot — slim utility link. */
	.mh-mobile-drawer__foot {
		flex: 0 0 auto;
		padding: 14px 18px;
		border-top: 1px solid #f0eeea;
		background: #faf7f2;
	}

	.mh-mobile-drawer__foot-link {
		display: inline-block;
		font-size: 14px;
		font-weight: 600;
		color: #111;
		text-decoration: none;
	}

	.mh-mobile-drawer__foot-link:hover,
	.mh-mobile-drawer__foot-link:focus {
		color: #ef0000;
	}

	/* Lock body scroll while the drawer is open. JS toggles this class. */
	body.mh-drawer-open {
		overflow: hidden;
	}
}