/*
 * nav-desktop.css — megapanelen i huvudmenyn.
 *
 * Bruten ur base.css och köad med `(min-width: 1200px)` 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 — desktop                                               */
	/* ---------------------------------------------------------------- */

	@media (min-width: 1200px) {
		/*
		 * Menyraden och sökikonen ligger bredvid varandra i sidhuvudets
		 * vänsterspalt. Ikonen står efter posterna och inte bland vagnen
		 * och kontot till höger: söka och bläddra är två sätt att hitta
		 * samma sak, och de hör ihop.
		 */
		/*
		 * Mellanrummet är mindre än menyns egna 2 rem med flit: ikonens
		 * träffyta är 40 px bred kring en 23 px glyf, alltså bär den redan
		 * 8,5 px luft på var sida. 1,5 rem här ger samma optiska avstånd
		 * mellan "Explore" och förstoringsglaset som mellan menyposterna.
		 */
		.site-nav {
			display: flex;
			align-items: center;
			gap: var(--space-m);
		}

		/*
		 * Megapanelen spänner över sidhuvudet, alltså är det referensen.
		 * Ingen `position` här: sidhuvudet är redan `sticky` i @layer layout,
		 * och sticky är en positionerad ram precis som relative. En regel här
		 * hade vunnit på lagerordning och tagit bort den klibbiga raden.
		 */
		.site-nav__list > .menu-item {
			position: relative;
			/*
			 * Luft ovanför och under länken, inte marginal: ytan är också
			 * hover-bron ner till panelen. Utan den hinner musen lämna
			 * posten i glappet och panelen slår igen mitt i rörelsen.
			 */
			padding-block: var(--space-s);
			/*
			 * Posterna med panel bär en 28 px hög pilknapp bredvid texten,
			 * de utan bara sin länk. Utan en gemensam mittlinje lägger sig
			 * "Best sellers" och "Deals" några pixlar över "Shop" och
			 * "Explore" — samma rad, olika höjd.
			 */
			display: flex;
			align-items: center;
		}

		/* Full bredd kräver att posten inte är egen referensram. */
		.site-nav__list > .menu-item--mega {
			position: static;
		}

		/*
		 * Kampanjkortet skrivs ut sist på första nivån — det är lådans
		 * plats för det — och main.js flyttar in det i Shop-panelen på
		 * desktop. Mellan första bildrutan och att skriptet kört stod
		 * kortet därför som en 350 px hög post mitt i menyraden och tryckte
		 * ut hela sidhuvudet. Här hör det aldrig hemma på toppnivån.
		 */
		.site-nav__list > .menu-item--promo {
			display: none;
		}

		.site-nav__list > .menu-item > .sub-menu {
			position: absolute;
			inset-block-start: 100%;
			inset-inline-start: calc(var(--space-s) * -1);
			z-index: 30;
			min-width: 15rem;
			padding: var(--space-s);
			border-radius: var(--radius-panel);
			background: var(--color-paper);
			box-shadow: 0 12px 32px rgb(0 0 0 / 0.12), 0 0 3px rgb(0 0 0 / 0.08);
			/*
			 * `visibility` i stället för `display`, så att panelen kan
			 * tonas in. Den är ändå oåtkomlig för tangentbord och
			 * skärmläsare medan den är dold.
			 */
			visibility: hidden;
			opacity: 0;
			translate: 0 var(--space-3xs);
			transition: opacity 0.15s, translate 0.15s, visibility 0.15s;
		}

		/*
		 * Megapanelen går kant i kant som på .se. Innehållet hålls på
		 * innehållsbredden av sin egen padding i stället för av ett extra
		 * omslutande element — en meny ska inte behöva två divar för att
		 * hamna i mitten.
		 */
		/*
		 * Mellanrummet växer med fönstret i stället för att stå fast på
		 * 4,5 rem. Tre fasta glapp åt 72 px är 216 px som spalterna inte
		 * får använda — på en 13-tumsskärm är det skillnaden mellan en
		 * kategorirad på en rad och samma rad bruten mitt itu.
		 */
		.site-nav__list > .menu-item > .sub-menu--mega {
			display: flex;
			align-items: start;
			gap: clamp(var(--space-m), 3vw, var(--space-xl));
			inset-inline: 0;
			min-width: 0;
			padding: var(--space-l) max((100% - var(--wrap-max)) / 2, var(--wrap-gutter));
			border-radius: 0;
			box-shadow: 0 3px 3px rgb(0 0 0 / 0.06);
		}

		/*
		 * Spalterna fördelas i proportion, inte efter sin egen textbredd.
		 * Utan uttalad grund mätte flex varje spalt på innehållet och
		 * krympte dem sedan lika mycket: kategorikortet — det som behöver
		 * mest plats — fick lika stort avdrag som två länkar, och under
		 * ~1000 px sprang spalterna in i varandra. Grunden säger i stället
		 * vad varje sorts spalt behöver, och tillväxtfaktorn vem som ska
		 * ha överskottet när fönstret är brett.
		 *
		 * `min-width: 0` överallt, och inga rader som inte får bli
		 * smalare — därför kan panelen aldrig bli bredare än sidhuvudet,
		 * oavsett hur många kategorier menyn innehåller.
		 */
		.site-nav .sub-menu--mega > .menu-item {
			min-width: 0;
			flex: 1 1 auto;
		}

		/* Kategorikortet: två spalter poster, alltså den bredaste. */
		.site-nav .sub-menu--mega > .menu-item:has(> .sub-menu--card) {
			flex: 1.6 1 21rem;
		}

		/* Varumärkesbrickorna: två spalter, men kortare etiketter. */
		.site-nav .sub-menu--mega > .menu-item:has(> .sub-menu--tiles) {
			flex: 1.05 1 14rem;
		}

		/* Länklistan är en pelare och behöver inte mer än sin bredaste rad. */
		.site-nav .sub-menu--mega > .menu-item:has(> .sub-menu--list) {
			flex: 0.55 1 8rem;
		}

		/*
		 * Inläggsspalten rymmer tre kort bredvid varandra och behöver
		 * därför mer än brickorna. Klassen står två gånger med flit:
		 * regeln ovan för brickor väger `:has()` och en dubblerad klass
		 * är det enklaste sättet att väga tyngre utan !important.
		 */
		.site-nav .sub-menu--mega > .menu-item.menu-item--posts {
			flex: 2 1 26rem;
		}

		/*
		 * Kortet krymper aldrig — en bild som blir smalare än sin rubrik
		 * ser trasig ut — men det växer långsammare än spalterna bredvid.
		 * Måttet gick tidigare på `vw`, och det var fel referens: panelen
		 * slutar växa vid 1200 px medan fönstret fortsätter, så på en stor
		 * skärm åt kortet plats av brickorna utan att självt behöva den.
		 */
		/*
		 * Kortet börjar där varumärkesbrickorna börjar, inte där ögonbrynen
		 * gör det. Det är den enda spalten utan rubrik, och utan indraget
		 * stack det 37 px högre än allt annat i panelen — tillräckligt för
		 * att raden av spalter skulle läsa som feljusterad.
		 *
		 * Måttet är ögonbrynets egen radhöjd (0,75 rem × 1,6) plus dess
		 * `margin-block-end` från base.css. Ändras typografin i
		 * `.menu-item--group > a` måste den här raden följa med.
		 */
		.site-nav .sub-menu--mega > .menu-item--promo {
			flex: var(--promo-flex, 1.1 0 15rem);
			margin-block-start: calc(0.75rem * 1.6 + 18px);
			margin-inline-start: auto;
		}

		/* ---------------------------------------------------------------- */
		/* Rälsen och utfällningsytan                                        */
		/* ---------------------------------------------------------------- */

		/*
		 * Shop-panelens första zon är två saker i en spalt: en räls med
		 * kollektionerna och avdelningarna, och ytan där den valda
		 * avdelningens grenar fälls ut.
		 *
		 * Ytan ligger absolut placerad **inuti** rälsen i stället för som en
		 * egen spalt. Skälet är höjden: en spalt i flödet hade fått panelen
		 * att växa och krympa varje gång musen bytte avdelning, och en
		 * megapanel som hoppar under pekaren känns billig. Nu reserverar
		 * rälsposten plats för båda genom sin flex-grund, och utfällningen
		 * ritas i den reserverade halvan utan att röra layouten.
		 */
		/*
		 * Rälsen är smal tills en avdelning tas, och breddar sig då till
		 * rälsen plus utfällningen.
		 *
		 * Skälet till att bredden inte är reserverad hela tiden: den ytan
		 * är en tredjedel av panelen, och stod den tom från början fick
		 * Shop By Need och Brands klämma ihop sig på resten utan att någon
		 * bett om det. Nu öppnar panelen luftig och gör plats först när
		 * plats behövs.
		 *
		 * Spalten krymper aldrig (`0 0`) — utfällningen ligger absolut
		 * placerad och räknas inte in i postens egen bredd, så en krympt
		 * räls hade lagt grenarna ovanpå grannspalten utan att layouten
		 * märkte något.
		 */
		.site-nav .sub-menu--mega > .menu-item--rail {
			flex: 0 0 12.5rem;
		}

		/*
		 * Öppet läge: rälsen tar plats för utfällningen, och panelens tre
		 * andra spalter räknas om.
		 *
		 * Kampanjkortet krymper, det försvinner inte. Paketen är det som
		 * säljer bäst per klick i menyn, och en genväg som göms så fort man
		 * börjar bläddra är ingen genväg. Kortet får därför en smalare
		 * grund — och eftersom bilden bestämmer kortets höjd (`height:
		 * auto`, se base.css) blir det lägre av samma ändring, utan en rad
		 * till.
		 *
		 * Spalterna får uttalade mått i stället för tillväxtfaktorer.
		 * Faktorerna fördelade överskottet i proportion, alltså blev
		 * behovskortet bredast just när det hade minst plats att ge.
		 */
		/*
		 * Mellanrummet dras in samtidigt. Det växer annars med fönstret —
		 * tre glapp à 64 px på en bred skärm — och den bredden behövs bättre
		 * i spalterna när fyra zoner ska samsas.
		 */
		.site-nav .sub-menu--mega:has(.menu-item--dept:is([data-open], :focus-within)) {
			gap: var(--space-m);
			--promo-flex: 0 1 12rem;
			--promo-pad: var(--space-s);
			--promo-title: 0.9375rem;
		}

		.site-nav .sub-menu--mega:has(.menu-item--dept:is([data-open], :focus-within)) > .menu-item--rail {
			flex-basis: 31rem;
		}

		.site-nav .sub-menu--mega:has(.menu-item--dept:is([data-open], :focus-within)) > .menu-item:has(> .sub-menu--card) {
			flex: 0 1 16rem;
		}

		/*
		 * Märkena får växa och tar därmed upp det som blir över när kortet
		 * försvunnit. Utan det stod panelen med en tom remsa i högerkanten
		 * — och en megapanel som slutar en decimeter före sin egen kant
		 * ser ut som ett fel, inte som luft.
		 */
		.site-nav .sub-menu--mega:has(.menu-item--dept:is([data-open], :focus-within)) > .menu-item:has(> .sub-menu--tiles) {
			flex: 1 1 13rem;
		}

		/*
		 * Första rubriken bär ingen linje: den har inget ovanför sig.
		 * Andra selektorn behövs för att main.js lägger tillbaka-raden
		 * först i listan — den är dold här, men den är fortfarande
		 * `:first-child`.
		 */
		.site-nav .sub-menu--rail > .menu-item--heading:first-child,
		.site-nav .sub-menu--rail > .menu-item--back + .menu-item--heading {
			margin-block-start: 0;
			padding-block-start: 0;
			border-block-start: 0;
		}

		/*
		 * Referensram för utfällningen — listan, inte posten: ytan ska
		 * ligga i linje med rälsens första rad och inte med ögonbrynet.
		 *
		 * Fyra klasser i selektorn med flit. Regeln som lägger nivå tre i
		 * flödet (`.site-nav .sub-menu .sub-menu`) står längre ned i filen
		 * och väger lika mycket — utan den fjärde klassen vinner den på
		 * ordning, och rälsen tappar sin position utan att något syns i
		 * konsolen.
		 */
		.site-nav .sub-menu--mega .menu-item--rail > .sub-menu--rail {
			position: relative;
			inline-size: 12rem;
		}

		.site-nav .sub-menu--rail > .menu-item > a {
			padding-block: 5px;
			font-size: 0.9375rem;
			font-weight: 500;
		}

		/*
		 * Avdelningsraden har en pil och en platta i valt läge. Marginalen
		 * är negativ mot plattans padding, så att texten står kvar i samma
		 * lodräta linje som kollektionerna ovanför — annars hade de sex
		 * avdelningarna hoppat 8 px åt höger när plattan lades på.
		 */
		.site-nav .menu-item--dept > a {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-2xs);
			margin-inline: -8px;
			padding-inline: 8px;
			border-radius: 8px;
		}

		.site-nav .menu-item--dept > a::after {
			content: "";
			inline-size: 6px;
			block-size: 6px;
			border-inline-end: 1.5px solid currentcolor;
			border-block-start: 1.5px solid currentcolor;
			rotate: 45deg;
			opacity: 0.5;
		}

		/*
		 * Plattan följer musen, utfällningen följer klicket. Att markera
		 * raden man pekar på är en kvittens på att den går att trycka;
		 * att fälla ut på samma signal var det som gjorde panelen rastlös.
		 */
		.site-nav .menu-item--dept:is([data-open], :hover, :focus-within) > a {
			background: var(--color-surface-card);
		}

		/*
		 * Utfällningen i två spalter, i läsordning radvis — samma
		 * uppställning som kategorikortet i den gamla panelen. En enda
		 * spalt hade blivit fjorton rader hög och dragit panelens underkant
		 * långt under rälsens.
		 */
		.site-nav .sub-menu--rail .menu-item--dept > .sub-menu--dept {
			position: absolute;
			inset-block-start: 0;
			inset-inline-start: 13.5rem;
			display: none;
			inline-size: 16.5rem;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 0 var(--space-s);
		}

		.site-nav .sub-menu--dept > .menu-item > a {
			padding-block: 5px;
			font-size: 0.875rem;
			color: var(--color-ink-muted);
		}

		/*
		 * Hovern måste stå här och inte lita på `.site-nav a:hover` i
		 * base.css. Regeln ovan väger en klass tyngre än den generella
		 * hovern, så grenarna blev liggande kvar i dämpat bläck medan
		 * resten av menyn svarade i petrol — samma gest, två färger.
		 */
		.site-nav .sub-menu--dept > .menu-item > a:hover,
		.site-nav .sub-menu--dept > .menu-item--all > a:hover {
			color: var(--color-accent);
		}

		/* "Shop all …" går över båda spalterna och bär rubrikens vikt. */
		.site-nav .sub-menu--dept > .menu-item--all {
			grid-column: 1 / -1;
		}

		.site-nav .sub-menu--dept > .menu-item--all > a {
			padding-block-end: var(--space-2xs);
			font-size: 0.9375rem;
			font-weight: 500;
			color: var(--color-ink);
		}

		.site-nav .menu-item--dept:is([data-open], :focus-within) > .sub-menu--dept {
			display: grid;
		}

		/*
		 * Nivå tre ligger i flödet inuti panelen.
		 *
		 * Ingen `visibility: visible` här. Den stod här förut och var en
		 * bugg: `visibility` ärvs, så ett `visible` på barnen bröt
		 * panelens `hidden` och lämnade varenda länk klickbar — och
		 * därmed hoverbar — över hela den osynliga panelens yta. Menyn
		 * fälldes ut så fort musen passerade någonstans i det bandet,
		 * långt från knappen. Panelen döljs på nivå två; nivån under ska
		 * ärva det läget, inte upphäva det.
		 */
		.site-nav .sub-menu .sub-menu {
			position: static;
			box-shadow: none;
			padding: 0;
		}

		.site-nav .menu-item-has-children:hover > .sub-menu,
		.site-nav .menu-item-has-children:focus-within > .sub-menu,
		.site-nav .menu-item-has-children[data-open] > .sub-menu {
			visibility: visible;
			opacity: 1;
			translate: 0 0;
		}

		/*
		 * Tillbaka-raden och stängknappen hör till lådan. Det gör även
		 * pilknapparna inne i panelen: där ligger nivåerna redan
		 * uppslagna bredvid varandra, och en pil som inte fäller ut något
		 * är bara brus.
		 *
		 * Sökblocket döljs bara så länge det står kvar i menyn. På
		 * desktop flyttar main.js det till panelen under sidhuvudet, och
		 * där ska det synas — därför selektorn på platsen och inte på
		 * blocket självt.
		 *
		 * Rälsens gruppetikett hör också hit. Den är till för lådan på
		 * mobil, där den är raden man trycker på — här hade den blivit ett
		 * tredje "SHOP" ovanför "COLLECTIONS", tio pixlar under
		 * toppnivåposten som redan heter Shop.
		 */
		.site-nav .menu-item--back,
		.site-nav .menu-item--rail > a,
		.site-nav__list > .menu-item--drawer-only,
		.site-nav .sub-menu .site-nav__sub-toggle,
		.site-nav__close,
		.site-nav > .nav-search-block {
			display: none;
		}
	}
}