/*
 * nav-mobile.css — huvudmenyns låda.
 *
 * Bruten ur base.css och köad med `(max-width: 1199px)` som media-attribut
 * (se inc/assets.php). Poängen är inte färre byte — webbläsaren hämtar
 * filen ändå — utan att en stilmall vars media inte matchar INTE
 * blockerar renderingen. En telefon väntar alltså aldrig på
 * megapanelens CSS, och en dator väntar aldrig på lådans.
 *
 * Media-frågorna står kvar inuti filen med flit. Då avgörs vad som
 * gäller av CSS:en själv och inte av ett argument i en enqueue — filen
 * gör rätt även om någon köar den utan media.
 *
 * Lagren är deklarerade i base.css, som alltid laddas före den här.
 */

@layer components {
	/* ---------------------------------------------------------------- */
	/* Huvudmeny — lådan på mobil                                        */
	/* ---------------------------------------------------------------- */

	@media (max-width: 1199px) {
		/*
		 * Listan står på höjden i lådan, utan gap: raderna skiljs åt av
		 * linjer i stället. Regeln ligger i components av samma skäl som
		 * menyknappens — lagret vinner över @layer layout oavsett hur
		 * specifik selektorn där är.
		 */
		[data-nav-collapsed] .site-nav__list {
			flex-direction: column;
			gap: 0;
		}

		.site-nav__close {
			display: block;
			margin-inline: auto var(--space-2xs);
			width: 44px;
			height: 44px;
			padding: 0;
			border: 0;
			background: none;
			color: var(--color-ink);
			font-size: 1.75rem;
			line-height: 1;
		}

		/* Sökrutan överst, avdelad med samma linje som menyraderna. */
		.nav-search {
			display: flex;
			align-items: center;
			gap: var(--space-2xs);
			padding: 0 var(--space-s) var(--space-s);
			border-block-end: 1px solid var(--color-line);
		}

		.nav-search__input {
			flex: 1;
			min-width: 0;
			padding: var(--space-2xs) 0;
			border: 0;
			background: none;
			font: inherit;
			font-size: 0.9375rem;
			color: var(--color-ink);
		}

		.nav-search__input::placeholder {
			color: var(--color-ink-muted);
		}

		.nav-search__submit {
			display: grid;
			place-items: center;
			width: 32px;
			height: 32px;
			padding: 0;
			border: 0;
			background: none;
			color: var(--color-ink);
		}

		.nav-search__submit svg {
			width: 20px;
			height: 20px;
		}

		[data-nav-collapsed] .site-nav .menu-item {
			border-block-end: 1px solid var(--color-line);
		}

		[data-nav-collapsed] .site-nav .menu-item-has-children {
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: stretch;
		}

		[data-nav-collapsed] .site-nav .menu-item > a {
			padding: 14px var(--space-s);
			font-size: 0.9375rem;
			font-weight: 600;
		}

		/*
		 * Pilen sitter i en egen cell med en lodrät linje till vänster,
		 * som på .se, och pekar åt höger: nästa nivå glider in, den fälls
		 * inte ut under.
		 */
		[data-nav-collapsed] .site-nav__sub-toggle {
			width: 56px;
			height: auto;
			border-inline-start: 1px solid var(--color-line);
		}

		[data-nav-collapsed] .site-nav__sub-toggle::before {
			rotate: -45deg;
			translate: -2px 0;
		}

		[data-nav-collapsed] .site-nav .sub-menu {
			grid-column: 1 / -1;
			display: none;
		}

		/*
		 * Nivåbyte i stället för dragspel. Är en post öppen döljs
		 * syskonen i samma lista, och postens egen etikett byts mot
		 * tillbaka-raden överst i undermenyn. `:has()` gör att regeln
		 * gäller på alla nivåer utan en klass per nivå.
		 */
		[data-nav-collapsed] .site-nav ul:has(> .menu-item[data-open]) > .menu-item:not([data-open]) {
			display: none;
		}

		[data-nav-collapsed] .site-nav .menu-item[data-open] {
			display: block;
			border-block-end: 0;
		}

		[data-nav-collapsed] .site-nav .menu-item[data-open] > a,
		[data-nav-collapsed] .site-nav .menu-item[data-open] > .site-nav__sub-toggle {
			display: none;
		}

		[data-nav-collapsed] .site-nav .menu-item[data-open] > .sub-menu {
			display: block;
		}

		.site-nav__back {
			display: flex;
			align-items: center;
			gap: var(--space-2xs);
			width: 100%;
			padding: 14px var(--space-s);
			border: 0;
			background: none;
			font: inherit;
			font-size: 0.75rem;
			font-weight: 600;
			letter-spacing: 0.12em;
			text-transform: uppercase;
			color: var(--color-ink-muted);
			text-align: start;
		}

		.site-nav__back::before {
			content: "";
			width: 6px;
			height: 6px;
			border-inline-start: 1.5px solid currentColor;
			border-block-end: 1.5px solid currentColor;
			rotate: 45deg;
		}

		/* Grupprubriken i lådan är en rad som alla andra. */
		[data-nav-collapsed] .site-nav .menu-item--group > a {
			margin-block-end: 0;
			font-size: 0.9375rem;
			font-weight: 600;
			letter-spacing: normal;
			text-transform: none;
			color: var(--color-ink);
		}

		[data-nav-collapsed] .site-nav .menu-item--group > a::before {
			display: none;
		}

		/*
		 * Korten och hårstrecken hör till panelen, inte till lådan. Bara
		 * utseendet nollställs här — `display` styrs av nivåläget ovan,
		 * och en `display: block` här hade tvingat fram undermenyer som
		 * ska vara stängda.
		 */
		[data-nav-collapsed] .site-nav .sub-menu--card {
			grid-template-columns: 1fr;
			gap: 0;
			padding: 0;
			border: 0;
			border-radius: 0;
			background: none;
		}

		[data-nav-collapsed] .site-nav .sub-menu--list a {
			padding-inline: var(--space-s);
			border: 0;
		}

		/*
		 * Lådans toppnivå är grupperna själva — Categories, Brands,
		 * Important links — precis som .se listar Hälsokategorier och
		 * Varumärken direkt. main.js lyfter upp dem ur panelen och sätter
		 * `data-hoisted`; posten som höll panelen har då inget kvar att
		 * visa och göms.
		 */
		[data-nav-collapsed] .site-nav[data-hoisted] .menu-item--mega {
			display: none;
		}

		/*
		 * Rälsen är inte samma sak i lådan som i panelen.
		 *
		 * Kollektionerna faller bort: Best Sellers, New In och Deals står
		 * redan som egna rader överst på första nivån, och en andra
		 * uppsättning en nivå ner hade varit samma tre länkar två gånger i
		 * samma meny. Rubrikerna faller bort med dem — nivån heter redan
		 * Categories i tillbaka-raden, och "SHOP BY CATEGORY" strax under
		 * hade sagt det en gång till. Kvar blir sex avdelningar och inget
		 * annat, vilket är hela poängen med en drill-down.
		 */
		[data-nav-collapsed] .site-nav .sub-menu--rail > .menu-item--collection,
		[data-nav-collapsed] .site-nav .sub-menu--rail > .menu-item--heading {
			display: none;
		}

		/* Kortet sist i lådan, med luft runt sig. */
		[data-nav-collapsed] .site-nav .menu-item--promo {
			border-block-end: 0;
			padding: var(--space-s);
		}

		/*
		 * Kortet är en bild med rubriken lagd över nederkanten, inte en
		 * menyrad. Utan den här regeln får länken lådans radpadding, och
		 * då krymper bilden inåt medan rubriken hamnar under den i den vita
		 * luften — svart text bredvid ett foto i stället för vit text på
		 * det, vilket är precis vad kortet inte ska vara.
		 */
		[data-nav-collapsed] .site-nav .menu-item--promo > a {
			padding: 0;
		}

		/*
		 * Brickorna blir rader i lådan, men behåller logotypen: den ligger
		 * först i raden i en egen liten ram. Ramen är inte dekoration —
		 * flera logotyper är liggande banners med ljus bakgrund, och utan
		 * kant flyter de ihop med raden.
		 *
		 * .se visar bara namnen i sin låda. Linus ville ha bilderna även
		 * här, och raden har plats för dem utan att tappa sin rytm.
		 */
		[data-nav-collapsed] .site-nav .sub-menu--tiles {
			grid-template-columns: 1fr;
			gap: 0;
		}

		[data-nav-collapsed] .site-nav .sub-menu--tiles a {
			display: flex;
			align-items: center;
			gap: var(--space-xs);
			border: 0;
			border-radius: 0;
			text-align: start;
		}

		[data-nav-collapsed] .menu-item__logo {
			flex: 0 0 auto;
			width: 56px;
			height: 34px;
			padding: 3px;
			border: 1px solid var(--color-line);
			border-radius: 8px;
			background: var(--color-paper);
		}

		/*
		 * Två spalter ur megapanelen står inte i lådan: Links, vars sidor
		 * redan ligger under Explore här, och Latest posts. I en lodrät
		 * lista är de två skärmar att skrolla förbi innan man når det man
		 * kom för — på desktop står de bredvid varandra och kostar ingen
		 * höjd alls, alltså är det här en presentationsfråga och inte en
		 * fråga om vad menyn innehåller.
		 */
		[data-nav-collapsed] .site-nav .menu-item--links,
		[data-nav-collapsed] .site-nav .menu-item--posts {
			display: none;
		}

		/*
		 * Inläggen blir rader i lådan, inte kort. Tre kort under varandra
		 * hade tagit hela skärmen och tryckt ner resten av menyn — här är
		 * bilden en miniatyr till vänster och texten står bredvid.
		 *
		 * Placeringen är utskriven: bilden över två rader, underraden
		 * överst i andra spalten och rubriken under den. Automatiken hade
		 * lagt rubriken i spalt ett på rad två, eftersom länken har tre
		 * barn och inget omslag runt texten.
		 */
		[data-nav-collapsed] .site-nav .menu-item--posts > .sub-menu {
			grid-template-columns: 1fr;
			gap: 0;
		}

		/*
		 * Spalten för miniatyren finns bara när inlägget har en bild. Ett
		 * inlägg utan utvald bild hade annars stått indraget 72 px, som om
		 * något saknades — vilket det gör, men det är inget besökaren ska
		 * behöva se.
		 */
		[data-nav-collapsed] .site-nav .menu-item--posts .sub-menu a:has(.menu-item__logo) {
			grid-template-columns: 72px minmax(0, 1fr);
			align-items: center;
			column-gap: var(--space-xs);
			row-gap: 2px;
		}

		[data-nav-collapsed] .site-nav .menu-item--posts .menu-item__logo {
			grid-area: 1 / 1 / 3 / 2;
			width: 72px;
			height: 46px;
			padding: 0;
			border: 0;
		}

		[data-nav-collapsed] .site-nav .menu-item--posts a:has(.menu-item__logo) .menu-item__meta {
			grid-area: 1 / 2;
		}

		[data-nav-collapsed] .site-nav .menu-item--posts a:has(.menu-item__logo) .menu-item__label {
			grid-area: 2 / 2;
		}

		[data-nav-collapsed] .site-nav .sub-menu--card > .menu-item {
			border-block-start: 0;
		}

		[data-nav-collapsed] .site-nav .sub-menu a {
			padding: 14px var(--space-s);
			font-size: 0.9375rem;
			font-weight: 500;
			color: var(--color-body);
		}
	}
}

@layer layout {
	@media (max-width: 1199px) {
		/*
		 * Menyn är en låda som skjuts in från vänster, som på
		 * longevitylabs.se. Den tidigare lösningen fällde ut listan under
		 * sidhuvudet, vilket fungerar för fem poster men inte för ett
		 * sortiment: med kategorierna under Shop blir listan längre än
		 * skärmen, och en utfälld rad som knuffar ner sidan känns som att
		 * innehållet hoppar bort under fingret.
		 *
		 * `visibility` växlar med i övergången så att lådan inte går att
		 * tabba in i medan den ligger utanför skärmkanten.
		 */
		[data-nav-collapsed] .site-nav {
			position: fixed;
			inset-block: 0;
			inset-inline-start: 0;
			z-index: 40;
			/* 300 px är måttet på .se:s låda. */
			width: min(86vw, 300px);
			padding-block: var(--space-2xs) var(--space-2xl);
			overflow-y: auto;
			/*
			 * Lådan rullar bara på höjden. `overflow-y: auto` ensamt gör
			 * annars även sidled rullbar, och då gick hela menyn att dra
			 * i sidled så fort något i den var för brett.
			 */
			overflow-x: hidden;
			overscroll-behavior: contain;
			background: var(--color-paper);
			box-shadow: 0 0 40px rgb(0 0 0 / 0.12);
			translate: -100% 0;
			visibility: hidden;
			transition: translate 0.25s ease, visibility 0.25s;
		}

		/*
		 * Öppet läge tar bort `visibility` ur övergången. Ligger den kvar
		 * är lådan osynlig medan den glider in, och focus() på något
		 * osynligt gör ingenting — stängknappen fick alltså aldrig fokus
		 * och tangentbordet blev kvar i sidhuvudet bakom skuggan. Vid
		 * stängning gäller regeln ovan igen: då SKA visibility vänta tills
		 * lådan glidit ut.
		 */
		[data-nav-collapsed][data-nav-open] .site-nav {
			translate: 0 0;
			visibility: visible;
			transition: translate 0.25s ease;
		}

		/*
		 * Skuggan ligger kvar i DOM:en och tonas i stället för att växla
		 * `display` — annars går den inte att animera, och lådan hade
		 * glidit in mot en bakgrund som slog om i ett hopp.
		 */
		[data-nav-collapsed] .site-nav__backdrop {
			position: fixed;
			inset: 0;
			z-index: 35;
			background: rgb(0 0 0 / 0.4);
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.25s;
		}

		[data-nav-collapsed][data-nav-open] .site-nav__backdrop {
			opacity: 1;
			pointer-events: auto;
		}
	}

	/*
	 * Respektera systeminställningen. En låda som far in i sidled är
	 * precis den rörelse `prefers-reduced-motion` finns till för.
	 */
	@media (prefers-reduced-motion: reduce) {
		[data-nav-collapsed] .site-nav,
		[data-nav-collapsed] .site-nav__backdrop {
			transition-duration: 0.01ms;
		}
	}
}