/* ══════════════════════════════════════════════════════════════════════════
   Bricks-adapter för c-dropdown

   brokk-dropdown.css och brokk-dropdown.js är hämtade ORDAGRANT ur
   designprojektet "Brokk-sajten: Design & UX-förbättring"
   (Dropdown-komponent.dc.html). De ska förbli oförändrade så att de går att
   återimportera när komponenten uppdateras där.

   Allt som behövs för att komponenten ska sitta ihop med Bricks renderade
   markup hör hemma HÄR, inte i de filerna.

   Komponentens kontrakt är:
       .c-dropdown > .c-dropdown__toggle + .c-dropdown__panel > .c-dropdown__list

   Bricks avviker på två punkter, och båda hanteras nedan.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Ikonen ──────────────────────────────────────────────────────────────
   Bricks Button-element renderar sin ikon som ett naket <svg class="">, utan
   komponentens .c-dropdown__icon. Utan den klassen får chevronen varken
   storlek, färg eller rotationen vid öppet läge — och rotationen är hela den
   visuella återkopplingen på att panelen är öppen.

   Reglerna nedan är samma deklarationer som .c-dropdown__icon i komponenten,
   riktade mot det Bricks faktiskt skriver ut. Ändras komponentens ikonregler
   måste dessa följa med. */
.c-dropdown__toggle > svg {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--dd-toggle-icon);
	transition: transform var(--dd-duration) var(--dd-ease);
}

.c-dropdown__toggle[aria-expanded="true"] > svg {
	transform: rotate(180deg);
}

/* ── 2. Triggern är en länk, inte en knapp ─────────────────────────────────
   Bricks Button-element renderar <a href="#">, inte <button>. Komponentens JS
   är byggd för det — den sätter role="button" och tabIndex, och lyssnar på
   Enter och Space för icke-knappar. Men <a> kommer med sajtens länkstilar,
   så understrykning och ärvd färg måste bort. */
.c-dropdown__toggle {
	text-decoration: none;
}

.c-dropdown__toggle:hover {
	text-decoration: none;
}

/* ── 3. Rot-fontstorleken ──────────────────────────────────────────────────
   DEN HÄR DELEN ÄR DEN VIKTIGASTE, och den syns bara om man mäter.

   Komponenten är skriven för en webbläsarnormal rot på 16px. Brokk kör ACSS
   62,5%-konvention, alltså `html { font-size: 62.5% }` och 1rem = 10px. Varje
   rem-värde i komponenten landar därför på 62,5 % av avsett:

       knapptext        10,6px   avsett 17px
       ikon             11,3px   avsett 18px
       panelpadding       15px   avsett 24px
       panelens min      200px   avsett 320px
       kolumnminimum     140px   avsett 224px

   Följden var inte bara att allt blev smått: med 140px kolumnminimum och 200px
   panel fick --auto-cols aldrig plats med mer än en kolumn, så tillbehörs-
   listans nitton länkar staplades i en 931px hög remsa.

   Alla värden nedan är komponentens egna, multiplicerade med 1,6 och skrivna i
   sajtens rem-idiom (1rem = 10px) — samma skrivsätt som resten av temat.

   Byter sajten någon gång rot-fontstorlek till 16px ska HELA det här avsnittet
   bort, inte justeras. */
.c-dropdown {
	--dd-toggle-padding:  1.6rem 2.4rem;
	--dd-panel-padding:   1.5rem;
	--dd-panel-gap:       0.8rem;
	--dd-grid-gap-row:    0.2rem;
	--dd-grid-gap-col:    4rem;
	--dd-link-padding:    1.2rem 1.6rem;
	--dd-col-min:         22.4rem;

	--dd-radius:          0.4rem;
	--dd-panel-radius:    1.2rem;
	--dd-link-radius:     0.6rem;
	--dd-shadow:          0 2.4rem 4.8rem -0.8rem rgba(20, 22, 26, 0.22),
	                      0 0.4rem 1.2rem rgba(20, 22, 26, 0.08);
	--dd-panel-min-width: 32rem;
	/* 53,6rem = två kolumner à 22,4 + kolumngap 4 + panelpadding 2×2,4.
	   Komponentens egna 46rem motsvarar 73,6rem här, men så brett behöver
	   panelen aldrig bli, och en högerställd panel som är bredare än
	   utrymmet till vänster om knappen hamnar utanför vyn. */
	--dd-panel-max-width: min(53.6rem, calc(100vw - 3.2rem));

	--dd-toggle-font:     700 1.7rem/1 "Saira Semi Condensed", system-ui, sans-serif;

	/* Knappen tar sajtens svarta, inte komponentens egna.
	   --base är #2d2d2d, komponentens --dd-black är #14161a — 25 punkter mörkare.
	   Skillnaden är liten men knappen står bredvid sajtens övriga mörka ytor, och
	   där syns det.

	   Ändringen gjordes först direkt i brokk-dropdown.css. Den filen är en
	   ORDAGRANN kopia ur designprojektet och ska förbli det — en uppdatering
	   därifrån hade tyst skrivit över raden. Här överlever den, och komponenten
	   är byggd för just det: allt utseende går genom --dd-*. */
	--dd-toggle-bg:       var(--base, #2d2d2d);
}

/* Fyra rem-värden i komponenten ligger utanför --dd-*-variablerna och kan
   därför inte rättas ovan. */
.c-dropdown__toggle { gap: 3.2rem; }

.c-dropdown__toggle > svg,
.c-dropdown__icon {
	width: 1.8rem;
	height: 1.8rem;
}

/* Rubrikens storlek hämtas ur designsystemet i stället för att skrivas som
   literal. --text-xs är 12px i båda ändar av sin clamp, alltså exakt det
   komponentens 0.75rem blir omräknat — men knuten till typskalan, så den följer
   med om skalan ändras. Samma skäl som för länkarna längre ned. */
.c-dropdown__heading {
	margin-block-end: 1.2rem;
	padding-block-end: 1.2rem;
	font-size: var(--text-xs);
}

@media (max-width: 767px) {
	.c-dropdown__panel { max-height: min(70vh, 51.2rem); }
}

/* ── 4. Länktypografin ─────────────────────────────────────────────────────
   Komponentens `--dd-link-font: 500 1rem/1.35 inherit` är ogiltig CSS:
   font-kortformen tillåter inte `inherit` som familj, så hela deklarationen
   kastas av webbläsaren. Länkarna har därför aldrig fått vare sig sin vikt
   eller sin storlek — de har ärvt brödtextens.

   Det är ett fel i komponenten och bör rättas i designprojektet. Tills dess
   sätts egenskaperna var för sig här, vilket dessutom är rätt sätt när
   familjen ska ärvas. Storleken hämtas ur designsystemet i stället för att
   hårdkodas, så länkarna följer sajtens typskala. */
.c-dropdown__link {
   width: 100%;
	font-weight: 400;
	font-size: var(--text-s);
	line-height: 1.35;
}

/* ── 5. Panelen måste ligga överst ─────────────────────────────────────────
   Blocket runt branschdropdownen (#brxe-fmjhtd) har `isolation: isolate`.
   Det skapar en egen stapelkontext, och då är panelens z-index: 60 inlåst i
   den — den kan aldrig nå över en SENARE sektion, hur högt talet än är.
   Uppmätt: elementFromPoint mitt i den öppna panelen returnerade ett
   bildelement ur nästa sektion, alltså låg panelen under.

   Tillbehörsdropdownen saknar isoleringen och hade aldrig problemet. Det är
   därför bara den ena av två syntes som trasig.

   Eftersom CSS inte kan välja en förälder på annat sätt används :has() för att
   lyfta den omslutande Bricks-behållaren medan en panel är öppen. Bara z-index
   sätts, inte position: ett påtvingat position: relative på godtyckliga
   behållare hade kunnat flytta absolutpositionerade barn någon annanstans.
   Element som redan är static påverkas därför inte alls — och de behöver det
   inte, för utan egen stapelkontext ligger panelen redan rätt. */
:where(.brxe-section, .brxe-container, .brxe-block, .brxe-div):has(.c-dropdown__panel.is-open) {
	z-index: 70;
}

/* ── 6. Kolumnerna i columnar-läget ───────────────────────────────────────
   .c-dropdown__list sätter `grid-template-columns: 1fr`, och --columnar lägger
   bara `grid-auto-flow: column` ovanpå utan att nollställa den. Kvar blir en
   explicit 1fr-kolumn plus implicita auto-kolumner, vilket gör rutnätets
   max-content litet — panelen växer aldrig och kolumnerna klämdes ihop till
   102 och 108px. Namn som "Brokk Vacuum Excavator" bröts då på tre rader.

   Med `none` sizeas kolumnerna efter innehållet.

   Men det räckte inte. Panelen är absolutpositionerad, och en sådan boxs
   krymp-till-innehåll-bredd begränsas av sitt containerblock — här .c-dropdown,
   som är inline-block och alltså bara så bred som knappen. Panelen landade
   därför på sin min-width (320px) oavsett hur brett innehållet ville vara, och
   kolumnerna klämdes in i det.

   `width: max-content` låter panelen mätas efter innehållet i stället, med
   max-width kvar som tak.

   Kolumnerna får dessutom ett uttalat minimum. Utan det sizeas de efter
   innehållet och blev 102 och 194px breda, så "Sorting & Demolition Grapple"
   bröts på fyra rader. minmax(--dd-col-min, …) ger läsbara kolumner utan att
   tvinga fram bredd som inte behövs.

   Övre gränsen är `1fr`, inte `max-content`. Med max-content stannade en
   ENKOLUMNSPANEL vid kolumnens egen bredd medan panelen ändå tvingades till sin
   min-width — uppmätt på Find Industries: panelens innermått 272px, kolumnen
   224px. Kvar blev en 48px död remsa till höger, och hover-plattan slutade mitt
   i panelen i stället för att gå ut till kanten. Tvåkolumnspanelen hade aldrig
   problemet, eftersom två kolumner à 224 plus gap råkar fylla bredden exakt.

   `1fr` löser båda: vid intrinsisk mätning beter den sig som max-content, så
   panelens max-content-bredd blir densamma som förut, men den slutliga bredden
   fördelas över spåren. Uppmätt efteråt: en kolumn 272px, två kolumner 224px —
   alltså oförändrad tvåkolumnslayout och en enkolumnspanel som fyller. */
.c-dropdown__list--columnar {
	grid-template-columns: none;
	grid-auto-columns: minmax(var(--dd-col-min), 1fr);
}

/* Bara från komponentens egen mobilbrytpunkt och uppåt. Under den spänner
   panelen kant till kant med `left: 0; right: 0; width: auto`, och en
   max-content-bredd hade slagit ut det — uppmätt 526px panel i en 360px vy,
   med 196px sidspill som följd. */
@media (min-width: 768px) {
	.c-dropdown__panel {
		width: max-content;
	}
}

/* ── 7. Länkarnas hover ────────────────────────────────────────────────────
   Plattan är komponentens egen:
   `.c-dropdown__link:hover { background: var(--dd-link-bg-hover) }`. Den var
   kortvarigt överstyrd till transparent på begäran, men önskades tillbaka —
   den är ett aktivt val, inte en glömska.

   Ingen färgregel här. Här stod en som spikade textfärgen på hover, därför att
   ACSS `body a:where(…):hover` färgade länkarna #806600, en mörk senapston, så
   fort pekaren rörde dem. Den gulbruna hovertonen är sedan 2026-08-31 utbytt
   globalt i ACSS: --link-color-hover är #000000 och fallbacken --neutral likaså.

   Lappen behövdes alltså inte längre, och en lapp som skyddar mot ett problem
   som är löst vid roten är bara ett avsteg till. Komponenten ärver nu ACSS
   svarta som alla andra länkar. */

/* ── 8. Vit knapptext, oavsett vem mer som har åsikter ────────────────────
   Toggeln renderas som <a> och matchar därför ACSS
   `body a:where(:not([class*="btn--"], …))`, som sätter länkfärgen. Den regeln
   förlorar idag på källordning — men det är en tunn garanti, och den försvann
   i praktiken när btn--neutral togs bort från elementet.

   Färgen spikas här i samtliga tillstånd så att den inte kan tippa över vid en
   omordning av stilmallar. */
.c-dropdown__toggle,
.c-dropdown__toggle:hover,
.c-dropdown__toggle:focus,
.c-dropdown__toggle:active,
.c-dropdown__toggle:visited {
	color: var(--dd-toggle-fg);
}

/* ── 9. En kolumn under 1024 ───────────────────────────────────────────────
   Komponenten faller till en kolumn först vid sin egen mobilbrytpunkt (767px).
   Mellan 768 och 1023 blev tillbehörspanelen därför tvåkolumnig och 536px bred
   — men knappen sitter så långt åt vänster i den layouten att en högerställd
   panel av den bredden inte ryms. Uppmätt vid 768: panelens vänsterkant hamnade
   utanför vyn.

   Två kolumner kräver helt enkelt mer sidbredd än vad som finns där. Under 1024
   går listan därför till en kolumn, vilket ger 320px panel och gott om plats. */
@media (max-width: 1023px) {
	.c-dropdown__list--columnar {
		grid-auto-flow: row;
		grid-template-rows: none;
		grid-template-columns: 1fr;
	}
}

/* ── 10. Högerställningen gäller bara breda skärmar ────────────────────────
   Tillbehörsdropdownen har data-align="end" därför att knappen sitter till
   höger på sidan i den breda layouten — 652px in med bara 533px kvar åt höger.

   Under 1024 stackar layouten och samma knapp flyttar till vänsterkanten
   (uppmätt vid 768: x 53–261). Högerställningen fäller då ut panelen åt
   vänster, till x −260, alltså utanför vyn.

   Attributet sitter på elementet och kan inte vara villkorat per brytpunkt, så
   modifieraren neutraliseras här i stället. Under 1024 öppnas panelen åt höger
   som vanligt, vilket är rätt när knappen står till vänster. */
@media (max-width: 1023px) {
	.c-dropdown__panel--end {
		left: 0;
		right: auto;
		transform-origin: top left;
	}
}

/* ── 11. hidden måste alltid vinna ─────────────────────────────────────────
   Panelen bar kvar _display: grid från den gamla designen, där panelen själv
   var rutnätet. Bricks emitterar sådana inställningar som en ID-regel
   (#brxe-xxxx { display: grid }), och en id-selektor slår komponentens
   .c-dropdown__panel[hidden] { display: none }.

   Följden: panelen var aldrig dold. Osynlig tack vare opacity: 0, men fullt
   klickbar och 507px hög. På desktop låg den under sin egen knapp och märktes
   inte alls. På mobil, där layouten stackar, hamnade den ovanpå
   Find Industries-knappen — som därför inte gick att trycka på.

   Inställningarna är borttagna ur elementdatan, så den här regeln behövs inte
   idag. Den ligger här som spärr: `hidden` är ett korrekthetsvillkor, inte ett
   utseende, och nästa person som sätter en layoutinställning på panelen i
   byggaren ska inte kunna återskapa en osynlig klickfälla.

   `!important` är motiverat just därför att motparten är en id-selektor. */
.c-dropdown__panel[hidden] {
	display: none !important;
}

/* ── 7. Promoboxarnas paneler (design 2A, 2026-10-02) ──────────────────────
   Startsidans två dropdowns ("Find industries", "Attachments") är strukturerade
   paneler: rader med miniatyr och en rad text, respektive fyra grupper i två
   kolumner. Innehållet är Bricks-element på post 7 (layout, typografi och hover
   i elementens egna fält) — här står bara det fälten inte når.

   Öppen knapp får 2 px gul ram. Inset-skugga och inte border: knappen ska inte
   byta storlek när den öppnas, och Bricks-knappen har ingen egen ram att färga. */
/* html body: ACSS nollställer box-shadow på :focus med `body.bricks-is-frontend.bricks-is-frontend
   :focus` (0,3,1), så ringen försvann så fort knappen fått fokus av klicket. */
html body .c-dropdown--promo .c-dropdown__toggle[aria-expanded="true"] {
	box-shadow: inset 0 0 0 2px var(--primary);
}
/* Attachments-rutan är gul: där syns bara en svart ram (Anders 2026-11-09). wrpatt är rutans id i post 7. */
html body #brxe-wrpatt .c-dropdown--promo .c-dropdown__toggle[aria-expanded="true"] {
	box-shadow: inset 0 0 0 2px var(--black);
}

/* Panelernas mått. De låg först i elementens egna fält, men som KOMPONENT renderar Bricks
   elementen med klass (.brxe-xxxxxx) i stället för id, och då vinner komponentens
   .c-dropdown__panel (samma specificitet, laddas senare) — panelen blev 428/512 px med
   komponentens padding. Dubbel klass här, och mobilläget följer komponentens width: auto. */
.c-dropdown__panel.c-dropdown__panel--ind { width: 40rem; padding: 0; overflow: hidden; }
.c-dropdown__panel.c-dropdown__panel--att { width: 48.8rem; padding: 1.8rem 2.4rem; }
/* "All industries"/"All attachments" låg sist i panelerna (kant till kant, linje ovanför) t.o.m. 2026-10-29.
   De är nu länkar till höger om knappen (btn--clear + pil, som heroens "View Our Machines"), Anders 2026-10-29. */
@media (max-width: 767px) {
	.c-dropdown__panel.c-dropdown__panel--ind,
	.c-dropdown__panel.c-dropdown__panel--att { width: auto; }
	/* overflow: hidden ovan (för hörnen på desktop) slog ut komponentens overflow-y: auto, så
	   panelen klipptes vid max-height och Security & Rescue gick inte att nå (Anders 2026-10-07). */
	.c-dropdown__panel.c-dropdown__panel--ind { overflow-y: auto; }

	/* Attachments i mobil i samma utseende som branschpanelen (Anders 2026-10-07): rader med
	   linje emellan, bildruta 72 × 48, pil till höger, 10/20 px luft. Strukturella selektorer –
	   elementens id:n är Bricks egna. Bilderna är frilagda på vitt, därför contain. */
	.c-dropdown__panel.c-dropdown__panel--att { padding: 0; }
	.c-dropdown__panel--att > .brx-grid { row-gap: 0; }
	.c-dropdown__panel--att > .brx-grid > div > span:first-child {
		display: block;
		padding: 1.6rem 2rem .6rem;
		margin: 0;
	}
	.c-dropdown__panel--att > .brx-grid > div > a {
		grid-template-columns: 7.2rem minmax(0, 1fr) 1.6rem;
		column-gap: 1.4rem;
		align-items: center;
		padding: 1rem 2rem;
		border-bottom: 1px solid var(--neutral-light);
		font-weight: 400;
	}
	.c-dropdown__panel--att > .brx-grid > div > a img {
		width: 7.2rem;
		height: 4.8rem;
		object-fit: contain;
	}
	.c-dropdown__panel--att > .brx-grid > div > a::after {
		content: "";
		justify-self: center;
		width: .8rem;
		height: .8rem;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		rotate: -45deg;
	}
}

/* Branschradernas chevron: setets ikon pekar nedåt. */
.c-dropdown__panel--ind > a .brxe-icon { transform: rotate(-90deg); }

/* Sajtens ytradie i stället för komponentens 12px. */
.c-dropdown__panel--ind,
.c-dropdown__panel--att {
	--dd-panel-radius: var(--radius);
}

/* Under 768 px gör komponenten panelen lika bred som roten (left/right: 0).
   Roten är annars bara så bred som knappen, så den får fylla promoboxens
   innerbredd — knappen behåller sin egen bredd (inline-flex). */
@media (max-width: 767px) {
	.c-dropdown--promo { display: block; width: 100%; --dd-panel-min-width: 0; } /* adapterns 32rem gjorde panelen bredare än knappen */
	/* Knappen i naturlig bredd; roten är kvar i full bredd så att panelen fortfarande fyller rutan
	   (Anders 2026-10-07: "ta bort fullbredden"). */
	.c-dropdown.c-dropdown--promo > .c-dropdown__toggle.bricks-button { width: auto; } /* slår style.css .brxe-div > .bricks-button (≤478) */
}

/* Promorutornas knapp i rutans nederkant, i båda rutorna (Anders 2026-10-07). */
.c-dropdown--promo { margin-top: auto; }