/*
 * global.css — Donalds Webshop
 *
 * Endast stilar som theme.json genuint inte kan hantera.
 * Använd alltid CSS-variabler från theme.json — aldrig hårdkodade värden.
 */

/* Hairline-separator — 1 px editorial linje.
   WP renderar wp:separator som border-top: 2px solid default; theme.json
   exponerar inte separator-tjocklek. Scoped till hairline-färgvarianten. */
.wp-block-separator.has-hairline-color {
	border-top-width: 1px;
}

/* Header-logotypen — WooCommerce lägger på .woocommerce/.woocommerce-page
   som body-klass på Butik/produkt/kundvagn/kassa/Mitt konto-sidorna, och
   dess egen woocommerce-layout.css nollställer DÄR höjden på alla <img>
   som inte redan har en egen CSS-höjd ("height: auto; max-width: 100%").
   Logotypen sätter bara ett höjd-attribut i HTML (ingen CSS-höjd), vilket
   har noll specificitet och förlorar mot den regeln — logotypen blåstes
   upp till sin fulla originalstorlek på just de sidorna. Den här regeln
   (1 klass + 1 element, högre specificitet än .woocommerce img) vinner
   tillbaka höjden utan !important — "header img.donalds-logo" (två
   element + en klass) slår ".woocommerce img" (ett element + en klass)
   oavsett laddningsordning, till skillnad från en ren klassregel som
   bara skulle vinna genom att råka ladda senare. */
header img.donalds-logo,
.donalds-header-bar img.donalds-logo {
	height: 71px;
	width: auto;
}

/* (2026-10-12) Andra selektorn tillagd: WooCommerces egen mall för
   orderbekräftelsen (`order-confirmation.html`, används på
   /kassa/order-received/…) lägger header-delen i en `<div>` utan
   `tagName: header` — då matchar `header img.donalds-logo` aldrig, och
   logotypen blev stor som originalbilden (upptäckt på första riktiga
   testbeställningen på produktion). `.donalds-header-bar` är en klass på
   gruppen i `parts/header.html` och finns alltid, oavsett vilken mall som
   renderar delen. Samma specificitet-resonemang som ovan ((0,2,1) mot
   `.woocommerce img` (0,1,1)). Ingen Woo-mallöverskrivning behövs. */

/* ---------- Bildramar — Tidningskiosken 2.2 (2026-09) ----------
   core/image får en 0.5px hairline-ram som DEFAULT via theme.json
   (styles.blocks.core/image.border) — en källa för alla vanliga
   bilder i innehållet (I Galleriet, Om Donalds m fl), ingen egen
   CSS behövs för dem.

   Två sorters wrapper runt om en bild har redan sin EGEN ram (ett
   helt kort, eller ett vitt/papperfärgat "kort" mot mörk botten) —
   utan undantaget nedan skulle bildens nya standardram läggas
   OVANPÅ kortets, antingen som en dubblerad linje i samma kant
   (kort utan padding, t ex kategori-rutorna) eller som en synlig
   andra ram INUTI kortets vita marginal (vit-kort-mönstret på Högt
   register). Båda fallen annullerar bildens egen ram, så det bara
   finns EN ram kvar — kortets/ramens egen. */
.donalds-image-frame--light .wp-block-image img,
.donalds-no-inner-image-border .wp-block-image img {
	border: none;
}

/* Delad "vitt kort"-ram för bilder mot mörk botten (Högt register) —
   ersätter tidigare individuella inline-värden per pattern (10px
   padding + hårdkodad #ffffff i service-hero/studio-hero/
   studio-spotlight-barnfoto/hero-editorial/dagsprogram.php, 14px +
   var(--background) i hero-carousel — tre olika mått för samma
   avsedda komponent). Papperston (var(--background)) istället för
   ren vit, konsekvent 8px padding, samma 0.5px hairline-ram som
   resten av systemet. */
.donalds-image-frame--light {
	padding: 8px;
	background-color: var(--wp--preset--color--background);
	border: 0.5px solid var(--wp--preset--color--hairline);
}

/* core/image-blockets INBYGGDA bildtext (figcaption.wp-element-caption,
   tillagd via "Lägg till bildtext" i Redigeraren — t ex Om Donalds)
   är en tredje bildtext-mekanism utöver .donalds-utstallning-bildtext
   och de fristående "Foto: X"-styckena, och hade aldrig fått någon
   egen styling — renderade i Source Serif 17px svart (WP:s egen
   figcaption-default) istället för samma museumsetikett-typografi
   (Inter 13px, foreground-secondary, samma <em>-grammatik) som resten
   av sajtens bildtexter. Global regel, inte per-sida — träffar
   automatiskt varje framtida core/image-bildtext oavsett var den
   läggs till, samma princip som core/image:s hairline-default ovan. */
.wp-element-caption {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 13px;
	line-height: 1.55;
	color: var(--wp--preset--color--foreground-secondary);
	margin-top: var(--wp--preset--spacing--xs);
}

/* Logotyper och sociala ikoner är varumärkesgrafik, inte foton —
   ska aldrig få core/image:s nya hairline-standardram. Footern är
   enda stället core/image används för den typen av bild (logga +
   Instagram-/Facebook-ikonerna i Följ oss), så det räcker att
   nollställa ramen där istället för att lägga en klass på varje
   enskild bild. */
footer .wp-block-image img {
	border: none;
}

/* Studio-sidans fem "kommer snart"-platshållarbilder (Produktionsfoto/
   ID- och passfoto) hade `style="width:100%;height:auto"` skrivet
   direkt på <img>-taggen i databasen, utan att motsvarande `width`/
   `height`-attribut fanns sparade i blockets egen JSON-kommentar
   (bara `id`/`sizeSlug`/`linkDestination`) — troligen från en
   tidigare hand-redigering direkt i databasen, inte från Redigeraren
   själv. Eftersom core/image:s nuvarande version inte skulle
   generera den stilen från de sparade attributen alls, gav mismatchen
   "Block innehåller oväntat eller ogiltigt innehåll" i Redigeraren på
   alla fem ställena (upptäckt 2026-09 via användarrapport + en
   inklistrad HTML-snutt, inte reproducerad i en egen inloggad session
   här). Den inline-stilen togs bort ur databasen (matchar nu bara de
   sparade attributen, ingen mismatch längre) och samma visuella
   resultat återskapas istället via en egen klass på blocket,
   `donalds-studio-placeholder-img` — samma princip som resten av
   sajtens bildhantering (theme.json/CSS är sanningen, inte inline
   stilar i blockmarkupen). Verifierat med `getBoundingClientRect()`
   före/efter: bilden fyller sin behållares fulla bredd och skalar
   höjden proportionellt, pixel-identiskt med hur det såg ut innan. */
.donalds-studio-placeholder-img img {
	width: 100%;
	height: auto;
}

/* Navigation — grundläge, hovring/fokus och aktiv sida. Skopat till
   .donalds-header-nav-wrap (TopNav) — utan den skopningen träffade
   allt detta VARJE core/navigation-block på sidan, inklusive footerns
   egna raka länklistor (Butik/Tjänster) och kategorifiltret i Butik-
   arkivet, som fick TopNav:ens versaler/14px/letter-spacing/färg
   påtvingade istället för sin egen typografi — syntes tydligast när
   footern blev mörk (2026-09) och länkarna blev nästan oläsliga.

   current-menu-item sätts av inc/navigation.php (render_block_core/
   navigation-link), inte av WP-kärnan — se den filens kommentar för
   varför. theme.json exponerar ingen väg att styla per-state (hover/
   aktiv) eller sätta en pseudo-linje under etiketten, så allt utom
   fontFamily styrs härifrån.

   Linjen under etiketten finns i layouten redan i grundläget som en
   transparent ::after — den får bara sin färg i hover/aktiv-läge, så
   raden aldrig hoppar när den tänds.

   Grundlägets färg måste sättas med klassen dubblerad
   (.content.content) — WP-kärnan gör exakt samma sak för sin egen
   "color:inherit"-regel (specificitet 0,3,0) för att den ska vinna
   över temats färgpresets, och en enkel .wp-block-navigation .content
   (0,2,0) förlorar då alltid mot den, oavsett var i css-kaskaden den
   står. */
.donalds-header-nav-wrap .wp-block-navigation-item__content.wp-block-navigation-item__content {
	position: relative;
	display: inline-block;
	padding-bottom: 6px;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--foreground-secondary);
	transition: color 120ms ease;
}

.donalds-header-nav-wrap .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: transparent;
	transition: background-color 120ms ease;
}

.donalds-header-nav-wrap .wp-block-navigation-item__content:hover,
.donalds-header-nav-wrap .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--foreground);
}

.donalds-header-nav-wrap .wp-block-navigation-item__content:hover::after,
.donalds-header-nav-wrap .wp-block-navigation-item__content:focus-visible::after {
	background: var(--wp--preset--color--hairline);
}

/* Samma specificitet (0,3,0) som :hover/:focus-visible ovan — källordning
   avgör, och den här regeln står medvetet sist så att aktiv-sidans röda
   färg vinner även när man hovrar sin egen aktuella sida i menyn.
   Ingen egen ::after-understrykning längre (2026-09) — se den
   fyra-klassers dubblerade versionen längre ner i filen, efter
   "Länkarna inuti panelen", för varför och för hur den vinner även
   inne i undermenyn på alla bredder. */
.donalds-header-nav-wrap .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

/* Tangentbordsfokus lägger en ram ovanpå hover-stilen, ersätter den inte. */
.donalds-header-nav-wrap .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-structural);
	outline-offset: 3px;
}

/* ---------- Submeny — enkel dropdown (2026-09) ----------
   Porting av donalds-submeny-mockup.html:s panel-teknik ovanpå WP:s
   inbyggda core/navigation-submenu, inte en egen komponent. Blockets
   Interactivity API sköter redan hover (med stängningsfördröjning),
   tangentbordsfokus, Escape och aria-expanded helt själv — verifierat
   i wp-includes/blocks/navigation/view.js (data-wp-on--mouseenter/
   mouseleave/focusout/keydown). Den här CSS:en byter bara ut WP:s egen
   visningsmekanik (height/width/visibility/opacity, se wp-includes/
   blocks/navigation/style.css rad ~93–151) mot mockupens grid-
   template-rows 0fr→1fr-teknik, på samma selektorer WP redan använder
   för öppet/stängt läge — ingen egen JS eller PHP behövdes.

   grid-auto-rows körs parallellt med grid-template-rows — WP:s <ul>
   har flera <li>-länkar direkt som barn (ingen extra wrapper-div att
   lägga tricket på ensam), så både den explicita och alla implicita
   raderna måste kollapsa/expandera i takt, annars hoppar länk nummer
   två och tre till synliga direkt istället för att fällas ut med
   resten.

   Panelen hålls kompakt och förankrad vid sin trigger (WP:s egen
   position:absolute/left/top under respektive länk), INTE full
   sidbredd under headern som mockupens STEG 5-spec beskriver — den
   fullbredds-panelen med flera kolumner + teaserbild är mega-menyns
   egen layout, byggd 2026-09 (se "Mega-meny — Produkter & Tjänster"
   nedan), inte den enkla en-kolumns-dropdownen som byggs här. */
/* Ingen border och ingen box-shadow i grundläget (jämför mockupen,
   som bara har box-shadow — ingen ram alls) — båda ritas annars ut
   fullt synliga även vid grid-template-rows:0fr, eftersom en 0 hög
   ruta ändå har full bredd, så en konstant hårlinje + skugga syntes
   under hela menyraden oavsett om något var utfällt. Läggs bara på i
   öppet-läge-regeln nedan. Ramen är dessutom borttagen helt (inte
   bara flyttad) — mot en så pass smal, förankrad ruta läste den mer
   som ett fristående kort än en del av navigationsytan; skuggan ensam
   matchar mockupen och känns mer sammanhängande med TopNav.
   border:none krävs uttryckligen (räcker inte att bara utelämna
   egenskapen) — WP-kärnan har en egen ".wp-block-navigation:not(.has-
   background) .wp-block-navigation__submenu-container{border:1px
   solid #00000026}" (wp-includes/blocks/navigation/style.css) som
   annars syns rakt igenom, samma specificitet men läses innan temats
   CSS i källordning. */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--background);
	border: none;
	border-radius: 2px;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 0fr;
	grid-auto-rows: 0fr;
	width: auto;
	height: auto;
	min-width: 220px;
	visibility: visible;
	opacity: 1;
	overflow: hidden;
	padding: 0 var(--wp--preset--spacing--sm);
	transition: grid-template-rows 200ms ease-in, grid-auto-rows 200ms ease-in;
}

/* Grid-items har min-height:auto som default — det asserterar mot
   barnets eget innehåll och hindrar 0fr-raden från att faktiskt
   kollapsa under innehållets naturliga höjd. Mockupens .panel-inner
   löser samma sak med en extra wrapper-div (overflow:hidden;
   min-height:0) runt allt innehåll; WP:s <ul> saknar en sådan wrapper
   (li-länkarna ligger direkt som barn), så min-height:0 måste sättas
   på varje <li> istället. */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	min-height: 0;
	overflow: hidden;
}

/* :focus-within utan WP:s egen :not(.open-on-hover-click)-uteslutning
   (jämför wp-includes/blocks/navigation/style.css) — annars förblir
   panelen osynlig ända tills tangentbordsfokus hunnit hela vägen in i
   en av länkarna (WP:s egen aria-expanded-state öppnas först då, se
   assets/js/submenu-escape.js:s kommentar), vilket gjorde att en
   seende tangentbordsanvändare tabbade förbi triggern och knappen utan
   att panelen någonsin syntes öppen. Med den här varianten blir
   panelen synlig så fort fokus når TRIGGERN (innan man ens tabbat in
   bland länkarna) — rent visuellt, WP:s egen aria-expanded-state
   hänger inte alltid perfekt ihop med det momentant, men det är
   ofarligt: state uppdateras ändå så fort fokus faktiskt når en länk. */
.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
.wp-block-navigation .has-child:not(.open-on-click):focus-within > .wp-block-navigation__submenu-container {
	grid-template-rows: 1fr;
	grid-auto-rows: 1fr;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	/* Mockupens skuggvärde (0 16px 28px -12px, 0.14 opacitet) var tänkt
	   för en fullbredds mega-meny-panel — på den här mycket mindre,
	   förankrade rutan (samma toning som sidbakgrunden, låg kontrast)
	   lästes den knappt alls. Kortare offset, ingen negativ spread och
	   högre opacitet ger en skugga synlig runt om, inte bara en svag
	   ton långt under. */
	box-shadow: 0 6px 20px rgba(26, 26, 28, 0.22);
	transition: grid-template-rows 380ms cubic-bezier(0.16, 0.8, 0.3, 1), grid-auto-rows 380ms cubic-bezier(0.16, 0.8, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
		transition-duration: 0.01ms;
	}
}

/* Escape-stängning (assets/js/submenu-escape.js) flyttar fokus TILLBAKA
   till triggern enligt spec — men om fokus redan stod på triggern när
   Escape trycktes (panelen öppen bara via :focus-within, se ovan) gör
   blur+refocus på SAMMA element ingenting alls, :focus-within förblir
   sant och panelen skulle aldrig stänga. Klassen tvingar igen stängt
   läge oavsett fokus/hover, skriptet lägger på den vid Escape och tar
   bort den vid nästa mouseenter/focusin på samma objekt. !important
   krävs — .has-child:focus-within-regeln ovan har exakt samma
   specificitet (fyra klassnivåer vardera), inte högre, så källordning
   ensam räcker inte för att garantera att den här alltid vinner. */
.wp-block-navigation .has-child.donalds-submenu-force-closed > .wp-block-navigation__submenu-container {
	grid-template-rows: 0fr !important;
	grid-auto-rows: 0fr !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	box-shadow: none !important;
}

/* Ingen pil/ikon vid triggern (STEG 5) — knappen finns kvar i DOM:en
   för klick-/tangentbordsstöd (dess aria-expanded driver även den
   röda understrykningen nedan), bara den visuella pilen döljs.
   Skopat till desktop (2026-09) — ovanpå det avsiktliga bortvalet på
   desktop var regeln tidigare oskopad och dolde SAMMA <svg>, med
   samma specificitet, som mobilöverlägget uttryckligen vill visa som
   sin enda undermeny-indikation (se @media max-width:1023px nedan);
   knappens display sattes visserligen tillbaka till inline-flex där,
   men den här odiskriminerade display:none på själva svg:n vann ändå
   kvar och gjorde pilen osynlig i praktiken. */
@media (min-width: 1024px) {
	.wp-block-navigation .wp-block-navigation-submenu__toggle svg {
		display: none;
	}
}

/* Öppet läge visas genom aria-expanded=true + röd hairline-underline —
   samma ::after-linje och mekanik som aktiv-sida (.current-menu-item)
   redan använder ovan, bara en annan trigger. :has() krävs eftersom
   aria-expanded ligger på syskon-knappen, inte på själva länken. */
.wp-block-navigation .has-child:has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"]) > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--foreground);
}

.wp-block-navigation .has-child:has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"]) > .wp-block-navigation-item__content::after {
	background: var(--wp--preset--color--accent);
}

/* Mobil (≤1023px, samma brytpunkt som hamburgermenyn kollapsar vid) —
   WP:s egen is-menu-open-CSS (wp-includes/blocks/navigation/style.css)
   sätter redan submenyn till position:static och flyter den korrekt
   inline i listan (högre specificitet än allt ovan, den delen rörs
   inte här). Bakgrund/rundade hörn/skugga ovan är byggda för en
   FLYTANDE desktop-panel som behöver stå ut mot sidan bakom den —
   inuti det redan vita, helskärms-täckande mobilmenyöverlägget gav
   samma kort-behandling istället en gåtfull separat vit ruta med
   skugga, flytande mitt i länklistan (syntes i en skärmdump av "Om
   Donalds" i mobilmenyn). Nollställs här, samma selektorer som ovan
   (identisk specificitet, vinner på källordning eftersom de står
   senare) — plus pilen (dold på desktop, STEG 5, "Ingen pil/ikon vid
   triggern", nu skopad dit ovan) visas som enda indikationen på att
   raden går att fälla ut, och en hairline ovanför den utfällda
   gruppen visar hierarkin (2026-09, ersätter ett tidigare vänster-
   ställt indrag — se kommentaren vid "Länkarna inuti panelen" nedan
   för varför indraget togs bort helt). */
@media (max-width: 1023px) {
	.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
		background: none;
		border-radius: 0;
	}

	/* Hairlinen läggs bara på i öppet-läge (samma teknik som skuggan
	   redan använde ovan) — en konstant border-top hade annars synts
	   som en spökrad även vid grid-template-rows:0fr, eftersom en
	   0 hög ruta ändå har full bredd. */
	.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
	.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
	.wp-block-navigation .has-child:not(.open-on-click):focus-within > .wp-block-navigation__submenu-container {
		box-shadow: none;
		border-top: 0.5px solid var(--wp--preset--color--hairline);
	}

	/* Pilen döljs inte av en enkel "svg{display:none}"-regel — knappen
	   BÄR båda klasserna samtidigt (class="wp-block-navigation__submenu-icon
	   wp-block-navigation-submenu__toggle", en enda kombinerad knapp, inte
	   knapp+separat ikon-syskon som WP:s källselektor antyder). WP:s egen
	   is-menu-open-CSS döljer HELA knappen via .wp-block-navigation__submenu-icon
	   (fyra klassers specificitet), inte bara en svg inuti den — att bara
	   sätta svg:n till display:block gjorde alltså ingenting, knappen den
	   satt i var redan display:none. Måste träffa knappen/ikonen själv,
	   med minst samma specificitet (fyra klasser) för att vinna. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon.wp-block-navigation-submenu__toggle {
		display: inline-flex;
		align-items: center;
		margin-left: 6px;
	}

	/* Standardstorleken (12×12 HTML-attribut, men skalas ner till
	   ~8.4px av WP:s egen font-size-relativa em-mått) är för liten för
	   att läsas tydligt som en pil-indikator på mobil. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
		width: 12px;
		height: 12px;
	}
}

/* Länkarna inuti panelen — Inter 15px, normal case (inte versaler som
   toppnivålänkarna), egen hover/fokus-stil enligt mockupen. De två
   ".content.content"-upprepningarna krävs för att väga tyngre än
   grundregeln högre upp i filen (samma specificitetstrick, se dess
   kommentar).

   Skopat till desktop (2026-09) — den här stilen är byggd specifikt
   för den flytande desktop-dropdownen (samma DOM/klasser som mobil-
   överlägget återanvänder rakt av), och var tidigare oskopad. Fyra
   klassers specificitet vann då alltid över grundregelns tre
   (.donalds-header-nav-wrap ...content.content, se filens topp) även
   inuti mobilmenyns overlay — undermenyns länkar föll då tillbaka på
   den HÄR stilen (15px/gemener/svart/understrykning på hover) istället
   för toppnivåns Inter/versaler/letter-spacing/graphite, vilket såg ut
   som webbläsarens defaultstil i jämförelse. Nu träffar regeln bara
   ≥1024px; under det ärver undermenyns länkar grundregeln helt
   automatiskt — en delad källa för typografin på båda nivåerna och i
   båda kontexterna, ingen egen mobil-typografiregel behövs. */
@media (min-width: 1024px) {
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
		padding: 7px 0;
		font-size: 15px;
		font-weight: 400;
		letter-spacing: normal;
		text-transform: none;
		color: var(--wp--preset--color--foreground);
		border-bottom: 1px solid transparent;
	}

	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		color: var(--wp--preset--color--accent);
	}

	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::after,
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible::after {
		background: transparent;
	}

	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		border-bottom-color: var(--wp--preset--color--accent);
	}
}

/* Aktiv sida vinner alltid, oavsett nivå, kontext eller bredd — samma
   fyra-klassers specificitetstrick som ovan, placerad EFTER
   desktop-dropdownens egen textfärg (rad ~379) i källordning så att
   den vinner tie-break på desktop också, inte bara via mediequery-
   uteslutning på mobil. Utan den här dubbleringen vann dropdownens
   svarta textfärg alltid över den vanliga current-menu-item-regeln
   (tre klasser, se filens topp) när en undermenylänk råkade vara den
   aktuella sidan — svart text men ändå kvar med en röd ::after-linje
   (den enda platsen ::after aldrig styrdes om), en halvt genomförd,
   oavsiktlig kombination. Ingen egen understrykning här heller —
   samma "färg, inte linje"-behandling som resten av "du är här"-
   indikeringen, konsekvent på alla nivåer. */
.donalds-header-nav-wrap .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

/* Hamburgermenyn gäller upp till 1024px istället för WP-kärnans egna
   600px (wp-includes/blocks/navigation/style.css) — iPad-bredder
   (portrait och landscape) ska falla in i samma hamburgermeny som
   mobil, bara riktiga desktop/laptop-bredder ska visa raden med
   länkar. Ren CSS-override: WP-kärnans nav-JS (view.js) har ingen egen
   breddlogik, den bara växlar is-menu-open-klassen på klick, så det
   här är säkert att flytta utan att röra klickbeteendet.
   .donalds-nav-framkalla (Framkalla bilder-dubletten i menylistan)
   behöver INTE justeras — den döljs redan vid 600px och uppåt, vilket
   fortfarande är rätt: den fristående CTA-knappen ska synas även i
   1024px-hamburgerläget, bara inte upprepas inuti den öppnade menyn.

   Skopat till .donalds-header-nav-wrap — utan den skopningen träffade
   regeln ALLA core/navigation-block på sidan, inklusive footerns
   raka länklistor (Butik/Tjänster/Följ oss), som fick en trasig
   hamburgerknapp istället för sina länkar mellan 600–1024px. De
   footer-listorna använder core/navigation bara som ett enkelt
   vertikalt länkblock, aldrig menad att bli responsiv. */
@media (min-width: 600px) and (max-width: 1023px) {
	.donalds-header-nav-wrap .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	.donalds-header-nav-wrap .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
}

/* Hamburgerikonen ska ligga i högerkant, inte flyta i mitten mellan
   logo och CTA-knappen. Den yttre raden (logo/nav/CTA) är
   justifyContent:space-between med tre flex-barn — mittbarnet (nav-
   wrappern, som blir hamburgerikonens box i det här läget) placeras då
   av space-between-algoritmen ungefär mitt emellan, inte intill CTA-
   knappen. margin-left:auto på just det barnet trumfar
   space-between-fördelningen och skjuter det ända till höger, precis
   före CTA-knappen (eller helt till kanten under 600px, där knappen är
   dold — samma effekt, bara att space-between redan gjorde jobbet där
   och auto-marginalen bara bekräftar samma position).

   Klassen måste dubbleras (.donalds-header-nav-wrap.donalds-header-
   nav-wrap) — WP-kärnan nollställer marginalen på flex-barn med
   ".is-layout-flex > :is(*, div){margin-left:0}", specificitet
   (0,1,1) via :is()-selektorn (tar sitt högsta argument, "div"). En
   enkel klass (0,1,0) förlorar alltid mot den. */
@media (max-width: 1023px) {
	.donalds-header-nav-wrap.donalds-header-nav-wrap {
		margin-left: auto;
	}
}

/* wp:post-title med isLink:true — den egna textColor-inställningen
   (t ex "background"/vit på mörk botten, se editorial-list-dynamic) sätts
   på <h3>, men ärvs inte av länken därinuti. Global länkfärg
   (styles.elements.link i theme.json) riktar sig direkt mot <a>, och en
   regel som matchar elementet direkt vinner alltid över ett ärvt värde
   oavsett specificitet — därför syntes rubriken i tryckfärgssvart istället
   för vitt på den mörka "Från arkivet"-sektionen. Låt länken ärva
   rubrikens egen färg istället; scoped till bara post-title så vanliga
   brödtextlänkar inte påverkas. */
.wp-block-post-title.has-text-color > a {
	color: inherit;
}

/* Anfang (drop cap) — används i hero-print-not-cloud och ev. andra redaktionella
   sektioner. WP:s inbyggda dropCap=true sätter ::first-letter via block-attribut;
   override styr typsnitt (heading) och färg (accent). theme.json kan inte nå
   ::first-letter pseudo-element. */
p.has-drop-cap:not(:focus)::first-letter {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 4.5em;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	float: left;
	line-height: 0.75;
	margin-right: 0.1em;
	margin-top: 0.1em;
}

/* Formulärfält ärver body-fonten eftersom theme.json inte kan rikta sig mot
   HTML-element som input/select/textarea direkt. */
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
}

/* Tjänsteband (service-ticker-bar) — mobil horisontell scroll.
   theme.json kan inte hantera white-space eller overflow-x.
   Desktopvy: flex space-between, inget scroll.
   Mobilvy (≤781px): hela raden scrollar horisontellt, scrollbar dold. */
.donalds-service-ticker p {
	white-space: nowrap;
}

@media (max-width: 781px) {
	.donalds-service-ticker {
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.donalds-service-ticker::-webkit-scrollbar {
		display: none;
	}
}

/* Helt klickbara block (stretched link) — används där hela ytan (kort,
   listrad) ska länka vidare istället för bara rubriktexten, t ex
   category-tiles och editorial-list. wp:html-blocket lägger en osynlig,
   ARIA-märkt länk överst i blocket; theme.json kan inte sätta
   position:absolute/inset. Generisk klass, återanvänds av flera patterns. */
.donalds-stretched-link-wrap {
	position: relative;
}

.donalds-stretched-link-wrap .donalds-stretched-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* wp:html är blockets sista barn i ett flow-layout-block, så WP:s
	   block-gap ger den annars margin-top — nollställ så inset:0 gäller hela ytan. */
	margin: 0;
}

/* Rotnivåns sektionsmellanrum — theme.json:s styles.spacing.blockGap gäller
   globalt för allt flow-layout, inklusive .wp-site-blocks (toppnivåblocken:
   header, patterns, footer). Det är rätt värde för brödtextflöde inuti en
   sida (rubrik → stycke → knapp), men på startsidan, där hela sektioner
   staplas direkt i rotnivån, gör det att sidbakgrunden syns som vita
   ränder mellan mörka sektioner. theme.json kan inte sätta blockGap enbart
   för rotnivån separat från resten av sajten. Varje sektion har redan egen
   vertikal padding, så mellanrummet ska vara 0 här. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Radnumrering (01/02/03) i editorial-list-dynamic — Query Loop-varianten
   av editorial-list, byggd för framtida bruk. wp:post-template ger inget
   inbyggt radnummer-block, så numret genereras med en CSS-räknare för att
   matcha den statiska editorial-list-patternens utseende. Selektorn
   li.wp-block-post är WP-kärnans egen klass för varje post-template-rad
   (wp-includes/blocks/post-template.php), stabil men theme.json kan
   inte referera CSS-räknare eller ::before-innehåll. */
.donalds-editorial-dynamic-list {
	counter-reset: donalds-editorial-item;
}

.donalds-editorial-dynamic-list li.wp-block-post {
	counter-increment: donalds-editorial-item;
}

.donalds-editorial-dynamic-list .donalds-editorial-dynamic-item::before {
	content: counter(donalds-editorial-item, decimal-leading-zero);
	display: block;
	margin-bottom: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--marker);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--sm);
}

/* Tvåspaltig löptext (Butiken-sidan, "En timme hos Donalds") — theme.json
   har ingen inställning för CSS column-count, bara core/columns (sida vid
   sida-block), inte tidningsspalter där text flyter och radbryts själv
   mellan spalterna. En spalt på mobil, matchar mockupens brytpunkt. */
.donalds-two-col-text {
	column-gap: 2.75rem;
}

@media (min-width: 821px) {
	.donalds-two-col-text {
		column-count: 2;
	}
}

/* Visuellt dold rubrik — page-no-title.html visar ingen post-title, och
   sidor som Produkter har ingen synlig H1 i sin egen design (mockupens
   H2:or i hero-karusellen fyller den rollen visuellt). En dold H1 behålls
   ändå för skärmläsare/SEO. Standard "sr-only"-mönster, inget block-stöd
   för detta i theme.json. */
.donalds-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* WP nollställer bara block-gapets margin-block-start för det bokstavligen
   FÖRSTA barnet i en constrained-layout (:where(...) > :first-child).
   Den dolda H1:an ÄR det barnet (den ligger kvar i flödet trots
   position:absolute), så nästa element — sidans faktiska första synliga
   sektion — räknas som "andra barnet" och fick därför sitt vanliga
   block-gap-avstånd till headern, trots att det ska ligga klosst mot den. */
.donalds-visually-hidden + * {
	margin-block-start: 0 !important;
}

/* Hero-karusell (hero-carousel-mönstret) — visa/dölj slides och dot-
   navigering. Ren visningslogik; rotation/paus/tillgänglighet sköts av
   assets/js/hero-carousel.js. theme.json kan inte uttrycka grid-stapling
   eller runda knappar utan bakgrundsbild. Egen brytpunkt (960px) för
   en-kolumnsläge, enligt Produkter-specen — skiljer sig från WordPress
   kärnas fasta 782px-brytpunkt för wp:columns.

   Alla fyra slides staplas i samma grid-cell istället för att togglas med
   display:none/block. Det gör att containerns höjd alltid blir den för
   den högsta sliden — höjden ändras då inte när karusellen roterar, även
   om slide-innehållet varierar (t ex prisropet som bara finns på en
   slide). Osynliga slides är kvar i flödet (visibility:hidden) men tas
   ändå bort ur tabbordning och skärmläsarträdet, precis som display:none
   gjorde tidigare. */
.donalds-hero-slides {
	display: grid;
}

.donalds-hero-slide {
	grid-area: 1 / 1;
	visibility: hidden;
	pointer-events: none;
}

.donalds-hero-slide.is-active {
	visibility: visible;
	pointer-events: auto;
}

@media (max-width: 960px) {
	/* !important krävs — Gutenberg genererar per-block-instans en egen
	   klass (t ex .wp-container-core-columns-is-layout-XXXXXXXX) med
	   flex-wrap:nowrap som inline-injicerad global-styles-CSS; den vinner
	   annars över en vanlig klassväljare trots lägre specificitet, troligen
	   pga hur WP ordnar sina egna style-block i huvudet. */
	.donalds-hero-carousel .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.donalds-hero-carousel .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

.donalds-hero-controls {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: var(--wp--preset--spacing--xl);
}

.donalds-hero-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--foreground-tertiary);
	border: 0;
	padding: 0;
	cursor: pointer;
}

.donalds-hero-dot[aria-current="true"] {
	background: var(--wp--preset--color--marker);
}

.donalds-hero-dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--marker);
	outline-offset: 3px;
}

.donalds-hero-counter {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--foreground-tertiary);
	margin-left: 6px;
}

/* Kategorikortens enda hover-effekt: rubriken byter färg till tryckröd.
   Ingen annan hover-animation (ingen skugga, ingen rörelse, ingen ram). */
.donalds-stretched-link-wrap:hover h3 {
	color: var(--wp--preset--color--accent);
}

/* Kategori-rutor i en wp:columns-rad (t ex "Butik"-blocket på
   startsidan, fyra kort) — WP:s columns-block stretchar varje
   .wp-block-column till radens högsta kolumn, men kortet inuti
   (.donalds-stretched-link-wrap) är bara en div som sizear efter sitt
   eget innehåll, inte den stretchade kolumnhöjden — så korten blir
   olika höga så fort en kategoris rubrik/kickare radbryter annorlunda
   än de andra. Gör kortet till en flex-kolumn som fyller hela sin
   kolumn, och låt textrutan (andra barnet — kickare + rubrik) växa
   för att ta upp mellanskillnaden. Bildrutan (första barnet, fast
   min-height) håller sin egen höjd oavsett. Scopat till
   .donalds-category-tiles-row (category-tiles-mönstret) — klassen
   .donalds-stretched-link-wrap delas även av produkter-categories-
   rutnätet, som är CSS grid, inte columns, och inte berört här. */
.donalds-category-tiles-row .wp-block-column {
	display: flex;
}

.donalds-category-tiles-row .donalds-stretched-link-wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.donalds-category-tiles-row .donalds-stretched-link-wrap > .wp-block-group:nth-child(2) {
	flex-grow: 1;
}

/* Kategorirutnät (produkter-categories-mönstret) — theme.json:s grid-
   layout saknar stöd för egna brytpunkter (960px/620px enligt specen),
   bara WP:s inbyggda fasta värden. */
.donalds-category-grid {
	grid-template-columns: repeat(3, 1fr);
}

/* Rader/etiketter i botten (t ex "FÖR BILDEN OCH VÄGGEN") ska landa på
   samma höjd över hela raden, oavsett hur lång beskrivningstexten är
   — CSS Grid stretchar redan varje kort (.donalds-stretched-link-wrap)
   till radens högsta kort, men INNEHÅLLET i kortet följde bara sin
   egen naturliga höjd, så hairlinen ovanför etiketten hamnade olika
   högt beroende på textmängd (2026-09, upptäckt via skärmdump: "Ramar"
   och "Album" hade olika lång brödtext, vilket sköt isär deras
   hairlines/etiketter). Samma grundmönster som redan finns för
   .donalds-category-tiles-row ovan (flex-kolumn + växande innehåll),
   fast här landar sista barnet (etikett-stycket, `p:last-child` —
   pålitligt sista elementet i varje kort sedan de hårdkodade
   `donalds-stretched-link`-länkarna togs bort, se nedan) botten-
   förankrat med `margin-top:auto` istället för att ett mellanliggande
   element växer, eftersom korten här har olika många stycken (flera
   tomma mellanrumsstycken) mellan rubrik och etikett — en `:nth-child`-
   träff hade inte fungerat pålitligt som i tiles-varianten. */
.donalds-category-grid .donalds-stretched-link-wrap {
	display: flex;
	flex-direction: column;
}

/* (2026-10) `margin-top:auto` på etikett-stycket räckte inte längre: sidan
   har sparats i Redigeraren, som skriver ut stycket med ett inline
   `margin-top` (sm) som alltid vinner över en klassregel — etiketten fick
   då bara sin egen naturliga position igen och hairlinerna landade olika
   högt (28px skillnad inom en rad). Istället växer stycket FÖRE etiketten
   (näst sista barnet — beskrivningen eller ett tomt mellanrumsstycke) och
   tar upp överskottet; etikettens egna inline-marginal (mellanrummet till
   texten) består, och hairline + etikett hamnar i kortets underkant. */
.donalds-category-grid .donalds-stretched-link-wrap > p:nth-last-child(2) {
	flex-grow: 1;
}

/* Rutnätet är en redovisande översikt av sortimentet, inte klickbara
   kategorilänkar (till skillnad från category-tiles-mönstret som delar
   samma .donalds-stretched-link-wrap-klass) — de nio korten hade
   tidigare en hårdkodad `<a href="#">` (wp:html-block i sidans eget
   innehåll, borttagen 2026-09) som gjorde hela kortet klickbart utan
   att gå någonstans. Länken är borta, men grundregelns röda hover-på-
   rubrik (`.donalds-stretched-link-wrap:hover h3` ovan) gäller
   fortfarande generiskt för klassen — nollställs här så korten inte
   ser klickbara ut när de inte längre är det. */
.donalds-category-grid .donalds-stretched-link-wrap:hover h3 {
	color: inherit;
}

/* Samma "olika hög text sköt isär hairlinen/priset"-bugg som ovan,
   hittad 2026-09 på Produkter & Tjänster-sidans tre tvåkorts-sektioner
   (Butik/Fotostudio/Digitalisering — "Beställ bilder"/"ID-foto",
   "Personalfoto"/"Barnfoto", "Kopior av gamla fotografier"/"Filmer i
   digitalt format"). Bekräftat med ett riktigt test (kortare text i
   ett kort → 42px lägre pris-rad) innan fixen skrevs, inte bara antaget
   utifrån mönsterlikheten. Korten delade INTE `.donalds-category-grid`
   eller `.donalds-stretched-link-wrap` (helt annan, bespoke markup —
   `wp:columns`, inte grid, och ingen länk alls, bara ett kort med
   bild + rubrik + brödtext + en hairline-avdelad pris/CTA-rad) så
   samma fix behövde en egen klass, `donalds-service-card`, tillagd
   direkt i databasen på alla sex korten (samma skäl som
   `donalds-category-grid`-fixen ovan — sidan är frusen post_content,
   ingen levande pattern-referens).

   Tekniken följer istället `.donalds-category-tiles-row`-mönstret
   högre upp i filen (flex-kolumn i både kolumn och kort, växande
   textblock) snarare än `.donalds-category-grid`s margin-top:auto-
   variant, eftersom korten här har en FAST bildruta (min-height:160px)
   som första barn och bara EN text-wrapper som andra barn (inte flera
   syskonstycken) — flex-grow på det andra barnet räcker, ingen
   `:last-child`-gymnastik behövs. `:has()` används för att göra
   `.wp-block-column` till en flex-behållare bara när den faktiskt
   innehåller ett service-kort, utan att behöva lägga till ännu en
   klass på själva kolumn-blocket. */
.wp-block-column:has(> .donalds-service-card) {
	display: flex;
}

.donalds-service-card {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.donalds-service-card > .wp-block-group:nth-child(2) {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.donalds-service-card > .wp-block-group:nth-child(2) > .wp-block-group:last-child {
	margin-top: auto;
}

@media (max-width: 960px) {
	.donalds-category-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.donalds-category-grid {
		grid-template-columns: 1fr;
	}
}

/* Framkalla-knappen i headern (parts/header.html) — syns som fristående
   knapp i den vågräta desktop-navigationen, men flyttas in i den
   utfällda hamburgermenyn på mobil istället för att upprepas separat.
   600px matchar exakt WP-kärnans egen brytpunkt för när
   core/navigation växlar mellan vågrät rad och hamburgermeny (satt i
   wp-includes/blocks/navigation/style.css) — samma nav-lista återanvänds
   i båda lägena, så länken behöver bara döljas i det ena.

   Selektorn måste matcha WP-kärnans egen
   ".wp-block-navigation .wp-block-navigation-item{display:flex}"
   (specificitet 0,2,0, ingen media query) för att vinna — en enkel
   ".donalds-nav-framkalla{display:none}" förlorade annars kapplöpningen
   trots att den satt inuti en media query, av samma anledning som
   hero-karusellens flex-wrap-fix ovan. */
@media (min-width: 600px) {
	.wp-block-navigation-item.donalds-nav-framkalla {
		display: none;
	}
}

@media (max-width: 599px) {
	/* .is-layout-flex.donalds-header-cta (två klasser) krävs av samma
	   anledning som ovan — WP:s "body .is-layout-flex{display:flex}"
	   (specificitet 0,1,1) vinner annars över en ensam
	   .donalds-header-cta (0,1,0). */
	.donalds-header-cta.is-layout-flex {
		display: none;
	}
}

/* Smalt läsmått (Om Donalds-sidan) — begränsar ingress, fristående citat
   och avslutningsraden till en läsbar radlängd. theme.json kan bara sätta
   contentSize för en hel sektion, inte ett enskilt styckes max-width.
   Klassen sitter på SJÄLVA textelementet (paragraf/rubrik), inte på en
   omslutande grupp — en omslutande grupp vore en direkt barn-nod av
   sektionens constrained-layout och skulle då tvingas in i WP:s egen
   ".is-layout-constrained > :where(...)"-centrering (max-width:1200px,
   margin:auto), vilket gjorde att en manuell override av den centreringen
   hamnade fel så fort den omgivande sektionens egen box var bredare än
   1200px. Textelementet självt sitter i ett vanligt flow-layout-block
   (ingen auto-centrering där) och kan därför bara begränsas i bredd utan
   någon margin-kapplöpning. */
.donalds-narrow-measure {
	max-width: 40ch;
}

/* Halv kolumnbredd (Om Donalds-heron) — H1 ska bara ta upp halva
   sektionens 1200px, ingressen under är kvar på full bredd. Samma
   anledning som ovan till att klassen sitter på rubrikelementet självt,
   inte en omslutande grupp. */
.donalds-half-measure {
	max-width: 50%;
}

@media (max-width: 620px) {
	.donalds-half-measure {
		max-width: none;
	}
}

/* ==========================================================================
   Dagsprogram (inc/dagsprogram.php) — tidsbegränsad dagskomponent på
   startsidans hero-plats. Renderas som ren PHP/HTML via en shortcode,
   inte som blockmarkup (se kommentaren i inc/dagsprogram.php för varför),
   så den här sektionen styr layouten helt själv utan att gå via WP:s
   block-stöd eller theme.json — inget att krocka med, inga !important
   behövs.

   Färgerna under #1A1A1C/#F8F4EB/#AE1B34/#C9A94E är desamma som temats
   foreground/background/accent/marker (skrivna som CSS-variabler nedan).
   De gråa mellantonerna (--dp-*) finns inte i sajtens niofärgade palett —
   de är en egen mörk-på-mörk-hierarki tagen direkt ur den uppladdade
   mockupen donalds-oppningsveckan.html, kalibrerad för den här
   komponentens specifika kontrast (tablå-status, avslutad-dag, etc),
   inte en roll som återanvänds någon annanstans i temat.
   ========================================================================== */

.donalds-dagsprogram {
	--dp-svag: #6e6d67;
	--dp-svagare: #4a4945;
	--dp-ingress: #e7e1d5;
	--dp-bildtext: #8c8b84;
	--dp-titel-forbi: #5c5b56;
	--dp-linje: #3a3a3c;
	--dp-aktivbg: #242426;
	--dp-bildbg: #2a2a2c;

	background: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
}

.donalds-dagsprogram-inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 40px;
}

.donalds-dagsprogram-topp {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 20px;
	padding-top: var(--wp--preset--spacing--lg);
}

.donalds-dagsprogram-kicker,
.donalds-dagsprogram-meta {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.donalds-dagsprogram-kicker {
	color: var(--wp--preset--color--marker);
}

.donalds-dagsprogram-meta {
	color: var(--dp-svag);
}

/* Dagsvyn */
.donalds-dagsprogram-day {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--3-xl);
	align-items: center;
	padding: var(--wp--preset--spacing--lg) 0 44px;
}

/* [hidden] är en attributselektor med samma specificitet som en
   klasselektor (0,1,0) — men en författarregel som .donalds-dagsprogram-
   day{display:grid} vinner ändå alltid över webbläsarens inbyggda
   UA-regel [hidden]{display:none}, eftersom en UA-stilmall alltid
   förlorar mot en författarstilmall oavsett specificitet. Utan den här
   regeln visades den "dolda" dagen ändå. */
.donalds-dagsprogram-day[hidden] {
	display: none;
}

.donalds-dagsprogram-day-marker {
	display: block;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--marker);
}

.donalds-dagsprogram-day-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	color: var(--wp--preset--color--background);
	font-size: 52px;
	line-height: 1.06;
	letter-spacing: -0.012em;
	margin: 14px 0 0;
}

.donalds-dagsprogram-day-ingress {
	font-family: var(--wp--preset--font-family--body);
	font-style: italic;
	font-size: 20px;
	line-height: 1.5;
	color: var(--dp-ingress);
	max-width: 38ch;
	margin: var(--wp--preset--spacing--base) 0 0;
}

.donalds-dagsprogram-day-pris {
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 700;
	font-size: 44px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--accent);
	margin: var(--wp--preset--spacing--base) 0 0;
}

.donalds-dagsprogram-day-pris small {
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dp-svag);
	margin-left: 12px;
	vertical-align: middle;
}

.donalds-dagsprogram-day-cta {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--lg);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 15px 26px;
	border-radius: 2px;
}

.donalds-dagsprogram-day-cta:hover {
	background: #8e1429;
}

.donalds-dagsprogram-day-cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--marker);
	outline-offset: 3px;
}

/* aspect-ratio:4/3 här är bara Mode B-platshållarens (ingen bild vald
   ännu) egen förhandsvisningsform — det finns ingen riktig bild att
   basera formen på, så en fast preview-ruta behövs. Den formen gäller
   INTE längre för en riktigt vald bild, se .donalds-dagsprogram-day-
   bild-riktig nedan, som nollställer den (2026-09, på uttrycklig
   begäran — bilden ska behålla exakt de proportioner den laddades upp
   med, aldrig beskäras). min-height/min-width:0 kvar ändå: utan dem
   golvas höjden vid den bokstavliga width/height-HTML-attribut
   wp_get_attachment_image() skriver ut, vilket annars vinner över
   aspect-ratio precis som för .donalds-dagsprogram-day-bild-img
   nedan — gäller platshållarens 4:3-ruta lika mycket som den riktiga
   bilden gjorde innan omgörningen. Samma grundmönster som redan
   dokumenterat för grid-items i undermeny-dropdownen (se "Submeny —
   enkel dropdown"), bara i ett flex- istället för grid-sammanhang. */
.donalds-dagsprogram-day-bild {
	background: var(--dp-bildbg);
	border: 1px solid var(--dp-linje);
	aspect-ratio: 4 / 3;
	min-height: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
	padding: 16px;
}

.donalds-dagsprogram-day-bild-label,
.donalds-dagsprogram-day-bild-spec {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dp-svag);
}

.donalds-dagsprogram-day-bild-spec {
	letter-spacing: 0.02em;
	text-transform: none;
	font-size: 12px;
	color: #b3afa4;
}

/* Riktig bild vald i wp-admin, istället för Mode B-platshållaren — vitt
   monteringskort runt bilden, samma teknik som hero-carousel-mönstrets
   bilder mot mörk botten. aspect-ratio:auto nollställer basregelns
   4:3 (Mode B-platshållarens form, se ovan) — en riktigt vald bild
   ska aldrig tvingas till ett fast format, bara visas i sina egna
   proportioner. */
.donalds-dagsprogram-day-bild-riktig {
	background: var(--wp--preset--color--background);
	padding: 14px;
	aspect-ratio: auto;
}

/* Ingen aspect-ratio/object-fit här (2026-09, borttaget på uttrycklig
   begäran) — bilden ska visas i exakt de proportioner den laddades
   upp med, kvadratisk förblir kvadratisk, aldrig beskuren till ett
   fast format. height:auto + width:100% räcker: behållaren ovan har
   aspect-ratio:auto (ärver inte Mode B-platshållarens 4:3), så den
   följer bildens egen höjd i stället för att tvinga en form på den. */
.donalds-dagsprogram-day-bild-img {
	display: block;
	width: 100%;
	height: auto;
}

.donalds-dagsprogram-day-bildtext {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 13px;
	color: var(--dp-bildtext);
	margin: 10px 0 0;
}

/* Tablå — linjerna ritas med gap på grid-containern, inte med
   kantlinjer på knapparna, så en radbrytning på mobil aldrig ger
   dubbla eller saknade linjer. */
.donalds-dagsprogram-tabla {
	display: grid;
	grid-template-columns: repeat(var(--donalds-dp-kolumner, 4), 1fr);
	gap: 1px;
	background: var(--dp-linje);
	border-top: 1px solid var(--dp-linje);
	border-bottom: 1px solid var(--dp-linje);
}

.donalds-dagsprogram-tab {
	background: var(--wp--preset--color--foreground);
	border: 0;
	text-align: left;
	cursor: pointer;
	padding: 20px 18px 24px;
	color: var(--wp--preset--color--background);
	font-family: inherit;
	display: block;
	width: 100%;
}

.donalds-dagsprogram-tab-day,
.donalds-dagsprogram-tab-day-short {
	display: block;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dp-svag);
}

.donalds-dagsprogram-tab-day-short {
	display: none;
}

.donalds-dagsprogram-tab-date {
	display: block;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--dp-svagare);
	margin-top: 3px;
}

.donalds-dagsprogram-tab-title {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	line-height: 1.25;
	color: var(--dp-ingress);
	margin-top: 10px;
}

.donalds-dagsprogram-tab-status {
	display: block;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--marker);
	margin-top: 10px;
	min-height: 16px;
}

.donalds-dagsprogram-tab[aria-current="true"] {
	background: var(--dp-aktivbg);
}

.donalds-dagsprogram-tab[aria-current="true"] .donalds-dagsprogram-tab-day,
.donalds-dagsprogram-tab[aria-current="true"] .donalds-dagsprogram-tab-day-short {
	color: var(--wp--preset--color--marker);
}

.donalds-dagsprogram-tab.is-past .donalds-dagsprogram-tab-title {
	color: var(--dp-titel-forbi);
}

.donalds-dagsprogram-tab.is-past .donalds-dagsprogram-tab-day,
.donalds-dagsprogram-tab.is-past .donalds-dagsprogram-tab-day-short {
	color: var(--dp-svagare);
}

.donalds-dagsprogram-tab.is-past .donalds-dagsprogram-tab-status {
	color: var(--dp-svagare);
}

.donalds-dagsprogram-tab:hover .donalds-dagsprogram-tab-title {
	color: #fff;
}

.donalds-dagsprogram-tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--marker);
	outline-offset: -3px;
}

@media (max-width: 960px) {
	.donalds-dagsprogram-day {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--lg);
		padding: var(--wp--preset--spacing--lg) 0 var(--wp--preset--spacing--2-xl);
	}

	.donalds-dagsprogram-day-title {
		font-size: 38px;
	}

	.donalds-dagsprogram-tabla {
		grid-template-columns: repeat(var(--donalds-dp-kolumner-mellan, 3), 1fr);
	}
}

@media (max-width: 620px) {
	.donalds-dagsprogram-inner {
		padding-inline: 20px;
	}

	.donalds-dagsprogram-day-title {
		font-size: 30px;
	}

	.donalds-dagsprogram-day-ingress {
		font-size: 18px;
		max-width: none;
	}

	.donalds-dagsprogram-day-pris {
		font-size: 34px;
	}

	/* Tablån blir en dagväljare och flyttar upp ovanför dagsvyn. */
	.donalds-dagsprogram-inner {
		display: flex;
		flex-direction: column;
	}

	.donalds-dagsprogram-topp {
		order: 1;
		padding-top: var(--wp--preset--spacing--lg);
	}

	.donalds-dagsprogram-tabla {
		order: 2;
		margin-top: var(--wp--preset--spacing--base);
		grid-template-columns: repeat(var(--donalds-dp-kolumner-mobil, 4), 1fr);
	}

	.donalds-dagsprogram-tab {
		padding: 13px 2px 15px;
		text-align: center;
	}

	.donalds-dagsprogram-tab-day,
	.donalds-dagsprogram-tab-title,
	.donalds-dagsprogram-tab-status {
		display: none;
	}

	.donalds-dagsprogram-tab-day-short {
		display: block;
		letter-spacing: 0.06em;
	}

	.donalds-dagsprogram-tab-date {
		font-size: 11px;
		margin-top: 2px;
	}

	.donalds-dagsprogram-days {
		order: 3;
	}

	.donalds-dagsprogram-day {
		padding: var(--wp--preset--spacing--lg) 0 var(--wp--preset--spacing--2-xl);
	}
}

/* Programförklaring (patterns/programforklaring.php) — samma strategi
   som .donalds-category-grid ovan: egna brytpunkter (820px/620px) som
   varken WP:s columns-block eller theme.json:s spacing-skala stödjer.
   Padding och tes-storleken sätts uteslutande här, inte som block-
   style-attribut — annars blir de inline och en extern klassregel i en
   media query kan aldrig vinna över en inline-stil utan !important. */
.donalds-programforklaring {
	padding-top: 76px;
	padding-bottom: 76px;
}

/* Tes-rubriken satt direkt som barn till den yttre "constrained"-
   layout-gruppen (contentSize 1200px) fick fel resultat: WP:s egna
   ".is-layout-constrained > *"-regel centrerar varje direkt barn
   (max-width + margin-inline:auto) INOM hela sektionens fulla bredd,
   inte bara inom den redan 1200px-begränsade innehållskolumnen. Så
   länge tes-rubrikens box var lika bred som sina syskon (ingen egen
   max-width) syntes inget — men 19ch-begränsningen gjorde att en
   mycket smalare box centrerades mitt på hela sidan istället för att
   ligga kvar vid samma vänsterkant som kickern och brödtexten.
   Lösning: tes ligger nu i patterns/programforklaring.php nästlad i en
   egen oskylad wp:group (ingen egen layout-inställning). Den gruppen
   blir själv det direkta barnet som centreras korrekt till 1200px
   (exakt som .donalds-programforklaring-innehall redan gjorde), och
   rubriken därinne — ett barnbarn, inte ett direkt barn — påverkas
   aldrig av centreringsregeln, så dess egen max-width bara smalnar av
   texten utan att flytta boxen. Separatorerna (hårlinjerna) hade
   tvärtom en bugg där en tidigare ".donalds-programforklaring-linje
   {max-width:none}"-regel av misstag tog bort samma centrerings-
   mekaniks 1200px-tak helt, så linjerna sträckte sig ut över hela
   sektionens fulla bredd — de saknar nu en egen klass och ärver
   samma korrekta 1200px-beteende som allt annat. */
.donalds-programforklaring-tes {
	max-width: 19ch;
	font-size: 42px;
	line-height: 1.16;
	letter-spacing: -0.01em;
}

.donalds-programforklaring-innehall {
	display: grid;
	grid-template-columns: 6fr 5fr;
	gap: 56px;
	align-items: start;
}

.donalds-programforklaring-brodtext {
	max-width: 60ch;
}

/* .donalds-programforklaring-innehall är visuellt ett CSS-grid, men
   WP klassar den ändå som "flow"-layout (ingen egen layout-inställning
   satt på blocket) och lägger därför automatiskt temats blockGap
   (24px) som margin-top på det andra av de två barnen (brodtext,
   bildspalt) via sin "* + *"-regel för flow-barn — även om grid-gap
   redan sköter avståndet. Utan den nollställningen hamnade bildens
   överkant 24px lägre än brödtextens första rad, trots
   align-items:start på grid-containern. */
.donalds-programforklaring-bildspalt {
	margin-top: 0;
}

.donalds-programforklaring-bildspalt figure {
	margin: 0;
}

@media (max-width: 820px) {
	.donalds-programforklaring-tes {
		font-size: 32px;
		max-width: none;
	}

	.donalds-programforklaring-innehall {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.donalds-programforklaring-brodtext {
		max-width: none;
	}
}

@media (max-width: 620px) {
	.donalds-programforklaring {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.donalds-programforklaring-tes {
		font-size: 26px;
		line-height: 1.22;
	}
}

/* Toppbaren (parts/header.html, inc/topbar.php) — två fria texter, en för
   desktop och en för mobil (redigeras under Redigera innehåll). Mobiltexten
   visas vid samma 600px-brytpunkt som WP-kärnan växlar navigationen till
   hamburgermeny vid, med något mindre typsnitt så en rad rymms på smal
   skärm. Storleken är literal 11px (ett steg under xs = 12px). */
.donalds-topbar-mobil {
	display: none;
}

@media (max-width: 600px) {
	.donalds-topbar-desktop {
		display: none;
	}
	.donalds-topbar-mobil {
		display: inline;
	}
	.donalds-topbar {
		font-size: 11px !important;
		line-height: 1.5;
	}
}

/* Utställningar (inc/utstallningar-shortcodes.php) — Pågående/
   Kommande/Tidigare/startsidesblocket renderas som rå HTML från
   shortcoder, inte WP-block (samma anledning som Dagsprogrammet: de
   måste beräknas på nytt varje request och kan därför inte vara ett
   pattern). Egna brytpunkter (860px/620px) matchar referensmarkupen
   donalds-galleriet.html rakt av, samma strategi som
   .donalds-programforklaring* ovan. */
.donalds-utstallning-markor {
	display: inline-block;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--foreground-tertiary);
}

.donalds-utstallning-markor-bla {
	color: var(--wp--preset--color--accent-structural);
}

.donalds-utstallning-markor-rod {
	color: var(--wp--preset--color--accent);
}

/* Samma avstånd och typsnitt som museumsetikett-bildtexten i
   programforklaring.php (också Inter 13px, margin-top xs) — var
   tidigare hårdkodad till 10px istället för samma theme.json-token,
   och kursiveringen bytte av misstag till Source Serif i stället för
   att stanna i Inter (bara lutningen ska skilja, inte typsnittet —
   Inter saknar en egen kursiv fontFace, så <em> får webbläsarens
   syntetiska lutning, exakt som i programforklaring.php). */
.donalds-utstallning-bildtext {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 13px;
	line-height: 1.55;
	color: var(--wp--preset--color--foreground-secondary);
	margin: var(--wp--preset--spacing--xs) 0 0;
}

/* Bibehåller uppladdad bilds egna proportioner istället för att
   beskära den mot en fast aspect-ratio — redaktören väljer bildens
   format själv vid uppladdning, temat påtvingar inget beskärningsmått.
   Hairline-ramen (2026-09, se "Bildramar" högre upp i filen) sätts
   här manuellt — dessa är raka <img>-taggar från
   inc/utstallningar-shortcodes.php, inte core/image-block, så
   theme.json:s core/image-default når dem aldrig. */
.donalds-utstallning-hangningsbild,
.donalds-utstallning-hero-bild,
.donalds-utstallning-teaserbild {
	display: block;
	width: 100%;
	height: auto;
	border: 0.5px solid var(--wp--preset--color--hairline);
}

/* Pågående-sektionens två bilder (hängningsbild + teaserbild) delar
   samma format, annars blir de olika höga när bilderna har lite olika
   proportioner. */
.donalds-utstallning-hangningsbild,
.donalds-utstallning-teaserbild {
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.donalds-utstallning-knapp {
	display: inline-block;
	margin-top: 20px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 15px 26px;
	border-radius: 2px;
}

/* Pågående */
.donalds-utstallning-pagaende {
	padding-top: 48px;
}

/* Pågående: tre kolumner — text + två bilder (hängningsbild + teaserbild).
   Bilderna är lika stora (3:4, se aspect-ratio-regeln ovan); textkolumnen
   är något bredare. */
.donalds-utstallning-rad {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 60px;
	align-items: start;
	margin-top: 26px;
}

.donalds-utstallning-nrrad {
	display: flex;
	gap: 12px;
	align-items: baseline;
	margin-top: 14px;
}

.donalds-utstallning-text h2 {
	margin-top: 12px;
}

.donalds-utstallning-walltext p {
	margin: 16px 0 0;
	max-width: 46ch;
}

.donalds-utstallning-walltext > p:last-child {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 13px;
	color: var(--wp--preset--color--foreground-secondary);
}

/* Kommande */
.donalds-utstallning-kommande-sektion {
	margin-top: 56px;
	padding-top: 44px;
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.donalds-utstallning-kommande {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	margin-top: 30px;
}

/* Hairline bara från och med rad två (post 3+ i den 2-kolumners griden,
   .donalds-utstallning-kommande) — inte på alla poster. Sektionen
   (.donalds-utstallning-kommande-sektion) har redan en egen hairline
   ovanför hela "Kommande"-blocket; satte man samma border-top på VARJE
   post fick den första raden två hairlines tätt inpå varandra (sektionens
   egen + postens) med ett konstigt, till synes omotiverat mellanrum
   emellan — upptäckt när "Kommande" bara hade en rad (två poster) och
   dubbleringen blev tydlig. Med 3–4 kommande utställningar (grid-raden
   fylls, se donalds_utstallningar_med_status('kommande', 4) i
   inc/utstallningar-shortcodes.php) behövs fortfarande en linje mellan
   rad ett och rad två — det är vad :nth-child(n+3) ger. */
.donalds-utstallning-post:nth-child(n+3) {
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.donalds-utstallning-post h3 {
	margin-top: 8px;
}

.donalds-utstallning-post p {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 13px;
	line-height: 1.6;
	color: var(--wp--preset--color--foreground-secondary);
	margin: 8px 0 0;
}

/* Tidigare */
.donalds-utstallning-tidigare-sektion {
	margin-top: 56px;
	padding-top: 44px;
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.donalds-utstallning-tidigare-lista {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.donalds-utstallning-tidigare-lista li {
	display: flex;
	gap: 16px;
	align-items: baseline;
	padding: 10px 0;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 13px;
	color: var(--wp--preset--color--foreground-secondary);
}

/* Samma dubbla-hairline-bugg som .donalds-utstallning-post ovan —
   sektionen har redan en egen hairline ovanför hela listan, så bara
   raderna EFTER den första ska rita en egen. */
.donalds-utstallning-tidigare-lista li + li {
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.donalds-utstallning-tidigare-nr {
	color: var(--wp--preset--color--accent-structural);
	flex-shrink: 0;
}

.donalds-utstallning-tidigare-period {
	flex-shrink: 0;
	color: var(--wp--preset--color--foreground-tertiary);
}

.donalds-utstallning-tidigare-titel {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--foreground);
}

/* Startsidesblocket — papper, inte råpapper som första utkastet av
   specen sa. Föregående sektion (Programförklaringen) ligger redan på
   råpapper, och två råpapper-ytor i rad hade brutit mot regeln att
   angränsande Lugnt-sektioner aldrig får dela ton — löst genom att
   uttryckligen sätta papper här istället, enligt uppgiftens egen
   senare rättning av den första beskrivningen. */
.donalds-utstallning-hero {
	padding: 66px 0;
	background: var(--wp--preset--color--background);
}

.donalds-utstallning-hero-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--base, 24px);
}

.donalds-utstallning-hero-rad {
	display: grid;
	grid-template-columns: 6fr 5fr;
	gap: 48px;
	align-items: center;
}

.donalds-utstallning-hero h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: 34px;
	line-height: 1.15;
	margin: 12px 0 0;
	color: var(--wp--preset--color--foreground);
}

.donalds-utstallning-hero-datum {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 13px;
	color: var(--wp--preset--color--foreground-secondary);
	margin: 12px 0 0;
}

/* Scopat till ingresstextens exakta plats (direkt barn till textkolumnen,
   inte figure-kolumnen) istället för en generisk "p i hero:n"-selektor —
   den senare råkade även träffa .donalds-utstallning-bildtext (också
   bara en <p>, men i figure-kolumnen) och gav bildtexten fel färg och
   fel avstånd via högre specificitet (klass+tagg slår ren klass). */
.donalds-utstallning-hero-rad > div > p {
	margin: 16px 0 0;
	max-width: 40ch;
	color: var(--wp--preset--color--foreground);
}

@media (max-width: 860px) {
	.donalds-utstallning-hero-rad {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	/* Pågående: texten överst över hela bredden, de två bilderna sida vid sida under. */
	.donalds-utstallning-rad {
		grid-template-columns: 1fr 1fr;
		gap: 30px;
	}
	.donalds-utstallning-rad .donalds-utstallning-text {
		grid-column: 1 / -1;
	}
}

@media (max-width: 620px) {
	.donalds-utstallning-rad,
	.donalds-utstallning-kommande {
		grid-template-columns: 1fr;
	}
}

/* "Om Galleriet"-tesen på /i-galleriet — 38px finns inte i theme.json:s
   skala (2xl=32px, 3xl=48–64px), samma justerade undantag som
   Programförklaringens tes (se .donalds-programforklaring-tes ovan). */
.donalds-galleriet-om-tes {
	max-width: 20ch;
	font-size: 38px;
	line-height: 1.16;
}

@media (max-width: 620px) {
	.donalds-galleriet-om-tes {
		font-size: 25px;
		max-width: none;
	}
}

/* Scroll-fade — subtil in-fade för innehållsbilder, se assets/js/scroll-fade.js.
   .donalds-fade-target sätts av JS bara på de bilder den faktiskt tänker
   fejda in (header/footer/hero-carousel undantagna redan i JS) — CSS:en
   rör alltså aldrig en bild den inte själv satt klassen på. Utan JS, eller
   vid prefers-reduced-motion, sätts klassen aldrig och alla bilder är
   synliga direkt som standard. */
.donalds-fade-target {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.donalds-fade-target.donalds-fade-visible {
	opacity: 1;
	transform: none;
}

/* =================================================================
   WooCommerce — Fas 1b. Butik (archive-product.html), produktsida
   (single-product.html), kundvagn/kassa (page-cart.html/
   page-checkout.html) och Mitt konto (klassiska Woo-klasser, ingen
   egen mall). Byggt mot uppladdade mockups (donalds-shop-mockup.html,
   donalds-produkt-mockup.html) — se CLAUDE.md för vad som är en
   medveten förenkling mot mockupen (t ex "Ytterligare information"-
   fliken istället för en handbyggd accordion; WooCommerce ger oss
   samma nyckel/värde-tabell som mockupens .kv-row helt gratis).
   ================================================================= */

/* ---------- Kategorifilter (Butik) ---------- */
.donalds-shop-cat-filter .wp-block-navigation__responsive-container {
	overflow: visible;
}

.donalds-shop-cat-filter .wp-block-navigation-item__content {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--foreground-tertiary);
	padding-bottom: 4px;
	border-bottom: 1px solid transparent;
}

.donalds-shop-cat-filter .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
	border-bottom-color: var(--wp--preset--color--accent);
}

.donalds-shop-cat-filter .wp-block-navigation__submenu-icon {
	display: none;
}

/* ---------- Produktgrid (Butik) ---------- */
/* WooCommerce sätter grid-template-columns via en egen auto-fill-formel
   ("minmax(max(150px, 50% - 0.625em), 1fr)") som antar sin egen mindre
   standardmellanrum. Vårt större column-gap (3rem) fick den formeln att
   räkna fel och kollapsa till en kolumn — bredden för två spalter plus
   det verkliga mellanrummet rymdes inte enligt webbläsarens egen
   uträkning, även om formeln själv trodde det skulle göra det. Sätter
   grid-template-columns explicit istället för att lita på formeln;
   .columns-4 i klasslistan (2 klasser) matchar specificitetsmässigt
   samma nivå som WooCommerce-regeln, så vi lägger till en tredje klass
   (.donalds-shop-grid) för att vinna oavsett laddningsordning.
   4 kolumner på desktop sedan 2026-09 (var 2) — `displayLayout.columns`
   i archive-product.html styr både WooCommerce's egen `.columns-N`-
   klass OCH den här CSS-regelns kolumnantal, båda måste ändras ihop.
   Egen brytpunkt på 2 kolumner (900px) innan den kollapsar till 1
   (700px) — samma tvåstegs-mönster som `.donalds-category-grid`
   redan använder, istället för att hoppa rakt från 4 till 1. */
.donalds-shop-grid .wc-block-product-template.columns-4 {
	grid-template-columns: repeat(4, 1fr);
	column-gap: var(--wp--preset--spacing--xl);
	row-gap: var(--wp--preset--spacing--2-xl);
}

@media (max-width: 900px) {
	.donalds-shop-grid .wc-block-product-template.columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {
	.donalds-shop-grid .wc-block-product-template.columns-4 {
		grid-template-columns: 1fr;
	}
}

/* Equal heights (2026-09) — samma "kortet stretchar, innehållet gör
   det inte"-mönster som redan dokumenterat på andra ställen (se
   .donalds-category-grid/.donalds-service-card ovan). CSS Grid
   stretchar redan varje `.wc-block-product`-kort till radens högsta,
   bekräftat med getBoundingClientRect() — men "Lägg i kundvagn"-
   knappen followde bara sin egen naturliga position under
   titel/ingress/pris, som varierar i höjd per produkt (upp till 58px
   skillnad inom samma rad innan fixen). Flex-kolumn på kortet löser
   det utan att röra något av WooCommerce's egen prisberäkning eller
   knapp-logik.

   margin-top:auto ligger på PRIS-gruppen (.donalds-shop-card-meta),
   inte på knappen — annars hade bara knappen landat på samma linje
   medan avståndet pris→knapp varierade per produkt (samma variabla
   utrymme som tidigare hamnade ovanför knappen hamnar nu ovanför
   priset istället, så priset OCH knappen flyttar sig tillsammans som
   en enhet, med bevarat fast avstånd dem emellan). Knappen behöver
   ingen egen regel — den följer prisgruppen med temats vanliga
   blockGap, samma mellanrum överallt eftersom det inte är
   innehållsberoende. Skopat till .donalds-shop-grid/.donalds-shop-
   card-meta, inte generella block-regler — produktsidans relaterade
   produkter och andra sammanhang har redan sin egen, separata styling
   (se "Produktsidan — theme.json-först"). */
.wc-block-product {
	list-style: none;
	display: flex;
	flex-direction: column;
}

.donalds-shop-grid .wc-block-components-product-image {
	margin: 0;
}

.donalds-shop-grid .wc-block-components-product-image a {
	display: block;
	border: 0.5px solid var(--wp--preset--color--hairline);
}

.donalds-shop-grid .wc-block-components-product-image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
}

.donalds-shop-card-cat {
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--foreground-secondary);
	margin-top: var(--wp--preset--spacing--sm);
}

.wc-block-product .wp-block-post-title {
	margin: 0;
}

.wc-block-product .wp-block-post-title a {
	color: var(--wp--preset--color--foreground);
}

.donalds-shop-card-meta {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--sm);
}

/* Relaterade produkter på produktsidan (2026-10): WooCommerce eget
   related-products-mönster (flex-rad, 5 kolumner, ingen kortlayout).
   Samma "kortet stretchar, innehållet gör det inte"-fix som arkivet
   ovan, scopad till .single-product så arkivets egna regler inte
   påverkas: alla bilder 1:1, rubrikerna börjar i samma överkant (naturligt,
   korten startar på samma rad), och pris + knapp flyttas som en enhet
   till kortets underkant via margin-top:auto på PRIS-blocket. */
.single-product .wc-block-product-template {
	align-items: stretch;
}

.single-product .wc-block-product-template .wc-block-product {
	align-self: stretch;
}

.single-product .wc-block-product-template .wc-block-components-product-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
}

.single-product .wc-block-product-template .wp-block-woocommerce-product-price {
	margin-top: auto !important;
}

/* Knappen fyller hela kortets bredd oavsett etikett ("Lägg till i
   varukorg", "Välj alternativ", "1 i varukorgen"). Wrappern är
   align-center (align-self:center i flex-kolumnen) och krymper annars
   till etikettens bredd. */
.single-product .wc-block-product-template .wp-block-woocommerce-product-button {
	align-self: stretch;
	width: 100%;
}

.single-product .wc-block-product-template .wp-block-woocommerce-product-button .wc-block-components-product-button__button {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	justify-content: center;
}

/* ---------- Produktsida ---------- */
/* H1, ingress, kategorimarkör och pris sätts inte längre här — de är
   literal-pixel style.typography-värden direkt på blockinstanserna i
   templates/single-product.html (t ex "style":{"typography":{"fontSize":
   "36px"}}) istället för en preset-slug + !important-override. En
   literal instansvärde ger bara en inline style, ingen "has-X-font-
   size"-klass — det fanns då ingenting för WordPress egna !important-
   klassregler att slå igenom med i första taget. Samma exakta mockup-
   värden, men centraliserade på blocket istället för i en separat
   CSS-fil som bara halvvägs matchade dem.

   Variabla produkter: WooCommerce byter ut prisspannet mot ett specifikt
   pris (.woocommerce-variation-price, AJAX-injicerad) så fort en giltig
   kombination är vald. Oskyld är den bar text utan formatering — matchar
   här samma Inter/26px-stil som ovan så bytet inte känns som ett trasigt
   sidoelement. */
.donalds-product-info .woocommerce-variation-price {
	margin-top: var(--wp--preset--spacing--sm);
}

.donalds-product-info .woocommerce-variation-price .price {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 26px;
	font-weight: 500;
	color: var(--wp--preset--color--foreground);
}

.donalds-product-gallery .wc-block-woocommerce-product-image-gallery img,
.donalds-product-gallery img {
	border: 0.5px solid var(--wp--preset--color--hairline);
}

.donalds-product-info .variations {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--wp--preset--spacing--base);
}

.donalds-product-info .variations tr {
	display: block;
	margin-bottom: var(--wp--preset--spacing--sm);
}

/* th/td behåller sitt table-cell-display även när tr sätts till block
   (cascadear inte automatiskt) — utan den här regeln hamnar etiketten
   och knapparna bredvid varandra istället för under, tydligast på
   produkter med bara en variant-rad (t ex Presentkort Donalds).
   padding !important — WooCommerce egen ".woocommerce table.variations
   tr td/th"-regel (2 klasser + 3 element) satte padding-bottom till
   ett helt block-gap-mått (~24px), vilket är precis det stora
   mellanrummet mellan etikett och knappar som synades. */
.donalds-product-info .variations th,
.donalds-product-info .variations td {
	display: block;
	padding: 0 !important;
}

/* font-weight/color !important — WooCommerce egen
   ".woocommerce div.product form.cart .variations label"-regel
   (4 klasser + 3 element) väger tyngre än vad som går att matcha här
   utan att kedja lika djupt mot markup vi inte äger, samma mönster
   som select.donalds-select-swatched ovan. */
.donalds-product-info .variations label {
	display: block;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	font-weight: 500 !important;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--foreground-secondary) !important;
	margin-bottom: 6px;
}

/* Variantknappar — se assets/js/variation-swatches.js. Selecten döljs
   bara när JS faktiskt byggt knapprad (donalds-select-swatched), inte
   med en blank regel — utan JS är den vanliga dropdownen kvar som
   fallback, fullt fungerande. !important krävs — WooCommerce egen
   ".woocommerce div.product form.cart .variations select"-regel
   (4 klasser + 3 element) är mer specifik än vad som går att matcha
   här utan att kedja lika djupt mot markup vi inte äger. */
.donalds-product-info select.donalds-select-swatched {
	display: none !important;
}

.donalds-variation-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.donalds-variation-swatch {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 13px;
	border: 0.5px solid var(--wp--preset--color--hairline);
	border-radius: 2px;
	padding: 9px 16px;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground-secondary);
	cursor: pointer;
}

.donalds-variation-swatch.is-selected {
	border: 1px solid var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--foreground);
}

.donalds-variation-swatch.is-disabled {
	color: var(--wp--preset--color--foreground-tertiary);
	border-style: dashed;
	cursor: not-allowed;
	opacity: 0.6;
}

.donalds-product-info select {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 14px;
	border: 0.5px solid var(--wp--preset--color--hairline);
	border-radius: 2px;
	padding: 10px 14px;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	min-width: 220px;
}

/* WooCommerce lägger kvantitet + knapp i en display:grid med
   auto-storlekta kolumner (form.cart direkt för enkla produkter,
   .woocommerce-variation-add-to-cart för variabla) — knappens egen
   width:100% fyller bara sin egen innehålls-smala kolumn, inte hela
   raden. Tvingar enkelkolumn så kvantitet hamnar på egen rad och
   knappen får plats att bli verkligt full bredd, som i mockupen. */
.donalds-product-info form.cart,
.donalds-product-info .woocommerce-variation-add-to-cart {
	display: block !important;
}

/* Kvantitetsstepper — se assets/js/quantity-stepper.js. WooCommerce ger
   bara ett bart <input type=number> utan synlig etikett; JS:en bygger en
   .donalds-qty-row (etikett + fält) och −/+-knappar runt input.qty, den
   här CSS:en stylar resultatet mot mockupens bordrade .qty-box. Utan JS
   (t ex utan JS aktiverat) är fältet kvar som webbläsarens vanliga
   nummerinmatning, fullt fungerande. */
.donalds-qty-row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	/* Samma avstånd (24px) som pris → Antal ovanför. */
	margin-bottom: var(--wp--preset--spacing--base);
}

.donalds-qty-label {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--foreground-secondary);
}

.donalds-product-info .quantity {
	display: inline-flex;
	align-items: center;
	margin: 0;
	border: 0.5px solid var(--wp--preset--color--hairline);
	border-radius: 2px;
}

.donalds-qty-btn {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 16px;
	width: 38px;
	height: 38px;
	border: none;
	background: none;
	color: var(--wp--preset--color--foreground);
	cursor: pointer;
}

/* font-family !important — en global formulärregel längre ner i den
   här filen (input:not(...), select, textarea { font-family: body })
   är mer specifik än en enkel två-klassers regel och vinner annars,
   vilket visade sig som brödtext-serif i antal-fältet istället för
   Inter. Egna spinnerpilarna döljs — de dubblerar nu donalds-qty-btn. */
.donalds-product-info input.qty {
	font-family: var(--wp--preset--font-family--ui) !important;
	font-size: 14px;
	border: none;
	padding: 0;
	width: 30px;
	text-align: center;
	-moz-appearance: textfield;
}

.donalds-product-info input.qty::-webkit-outer-spin-button,
.donalds-product-info input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Klassisk WooCommerce-knapp (inget block, går inte att nå via
   theme.json) — samma knappspec som gäller överallt annars via
   theme.json för woocommerce/product-button: Inter 12px, versaler,
   letter-spacing 0.12em, padding 15px/26px, 2px radie. Svart bakgrund
   (inte tryckröd) — ett medvetet undantag från core/buttons Primär-
   spec, enligt mockupen och bekräftat 2026-09: köpknappar (Lägg till
   i varukorg, i alla tre sammanhang) är svarta, tryckröd Primär
   gäller redaktionella/marknadsförings-CTA:er (hero, header,
   cta-section). Utan den här regeln faller knappen tillbaka på
   WordPress egen ostylade wp-element-button-grunddesign (ingen
   padding/typografi) — det var precis avvikelsen mellan huvudprodukt
   och arkiv/relaterade produkter som syntes. width:100% är layout,
   inte varumärke, och matchar bara den här kontexten (arkiv-/
   relaterade-knapparna är inte fullbredd) — stannar därför här, inte
   i theme.json. */
.donalds-product-info .single_add_to_cart_button {
	display: block;
	width: 100%;
	background: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
	border: none;
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 15px 26px;
	text-align: center;
}

.donalds-product-delivery {
	font-style: normal;
}

/* WooCommerce eget related-products-mönster (plugins/woocommerce/
   patterns/related-products.php — rör inte pluginfilen) sätter
   "fontSize":"small" direkt på sin product-button-instans. Den klassen
   (has-small-font-size) kommer från WordPress egen global-styles-
   inline-css med !important (".has-small-font-size{font-size:var(--wp
   --preset--font-size--small)!important}") — samma mönster som övriga
   !important-undantag i den här filen, går inte att slå med högre
   specificitet. Gav 13px/bredare spårning istället för samma 12px som
   huvudprodukt och arkiv. Smalt riktad mot just den klasskombinationen,
   rör ingen annan knapp. */
.wc-block-components-product-button__button.has-small-font-size {
	font-size: var(--wp--preset--font-size--xs) !important;
}

/* Produktdetaljer — WooCommerce klassiska flikar, tre stycken:
   Om produkten / Material & mått / Leverans & retur (omdöpta/tillagda
   via inc/product-tabs.php woocommerce_product_tabs-filter, matchar
   mockupens tre .acc-item-sektioner). is-style-minimal ger redan en
   avskalad ram; vi stylar bara flikraden och specifikationstabellen
   mot temats hairline/Inter-språk. */
/* flex-wrap + white-space:nowrap — flikraden flyttades 2026-09 in i
   info-kolumnen (45% av 1200px, ca 490px) för att matcha mockupens
   layout, för smalt för att rymma alla tre flikar på en rad utan att
   ordet i sig bröts av flexboxens default-krympning. Radbryts nu hela
   flikar, aldrig mitt i ett ord. */
.donalds-product-details .wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg);
	list-style: none;
	margin: 0;
	padding: 0 0 var(--wp--preset--spacing--sm) 0;
	border-bottom: 0.5px solid var(--wp--preset--color--hairline);
}

.donalds-product-details .wc-tabs li {
	margin: 0;
}

.donalds-product-details .wc-tabs a {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--foreground-tertiary);
	white-space: nowrap;
}

.donalds-product-details .wc-tabs li.active a {
	color: var(--wp--preset--color--foreground);
}

/* Flikpanelernas egen rubrik ("Beskrivning" osv upprepas som en <h2>
   ovanför innehållet) — WordPress globala h2-storlek är mycket större
   än mockupens sektionsrubriker (motsvarande .acc-item h3, 17px). */
.donalds-product-details .woocommerce-Tabs-panel h2 {
	font-size: 17px;
	margin-bottom: var(--wp--preset--spacing--sm);
}

.donalds-product-details table.woocommerce-product-attributes {
	width: 100%;
	max-width: 560px;
	border-collapse: collapse;
	margin-top: var(--wp--preset--spacing--base);
}

.donalds-product-details table.woocommerce-product-attributes th,
.donalds-product-details table.woocommerce-product-attributes td {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 13px;
	text-align: left;
	padding: 10px 0;
	border-bottom: 0.5px solid var(--wp--preset--color--hairline);
	font-weight: 400;
}

.donalds-product-details table.woocommerce-product-attributes th {
	width: 40%;
	color: var(--wp--preset--color--foreground-secondary);
}

/* ---------- Kundvagn & Kassa ---------- */
.donalds-woo-page {
	font-family: var(--wp--preset--font-family--ui);
}

.donalds-woo-page h2,
.donalds-woo-page h3 {
	font-family: var(--wp--preset--font-family--heading);
}

.donalds-woo-page .wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--heading);
}

.donalds-woo-page .wc-block-cart-items__header,
.donalds-woo-page .wc-block-cart-item {
	border-bottom: 0.5px solid var(--wp--preset--color--hairline);
}

.donalds-woo-page .wc-block-components-totals-wrapper {
	border-color: var(--wp--preset--color--hairline);
}

.donalds-woo-page .wc-block-components-button,
.donalds-woo-page .wp-element-button {
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--ui);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 500;
}

.donalds-woo-page .wc-block-cart__submit-button,
.donalds-woo-page .wc-block-components-checkout-place-order-button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--accent);
}

.donalds-woo-page input[type="text"],
.donalds-woo-page input[type="email"],
.donalds-woo-page input[type="tel"],
.donalds-woo-page input[type="number"],
.donalds-woo-page select,
.donalds-woo-page textarea {
	font-family: var(--wp--preset--font-family--ui);
	border: 0.5px solid var(--wp--preset--color--hairline);
	border-radius: 2px;
}

.donalds-woo-page .wc-block-components-panel__button {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 13px;
}

/* ---------- Mitt konto — klassiska Woo-klasser, ingen egen mall ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 0.5px solid var(--wp--preset--color--hairline);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 0.5px solid var(--wp--preset--color--hairline);
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 12px 0;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--foreground-secondary);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--wp--preset--color--accent);
}

.woocommerce-account .woocommerce-MyAccount-content {
	font-family: var(--wp--preset--font-family--ui);
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-family: var(--wp--preset--font-family--heading);
}

.woocommerce-account table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 13px;
	text-align: left;
	padding: 10px 0;
	border-bottom: 0.5px solid var(--wp--preset--color--hairline);
}

.woocommerce-account .woocommerce-Button,
.woocommerce-account button.button,
.woocommerce-account input.button {
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--ui);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 500;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--accent);
	padding: 12px 20px;
}

.woocommerce-account .woocommerce-form-row input.input-text,
.woocommerce-account .woocommerce-form-row select,
.woocommerce-account .woocommerce-form-row textarea {
	font-family: var(--wp--preset--font-family--ui);
	border: 0.5px solid var(--wp--preset--color--hairline);
	border-radius: 2px;
	padding: 10px 14px;
	width: 100%;
}

/* ---------- Kontaktmodal (2026-09) ----------
   Nativ <dialog>, inte ett WordPress-block — core/button kan bara rendera
   <a>, och en submit-knapp inuti ett <form> måste vara en riktig <button>.
   En källa för hela komponenten: färg/typsnitt hämtas som theme.json-
   presets (var(--wp--preset--...)), samma princip som resten av sajten.
   Måtten (padding, 460px maxbredd, 13px etiketter osv) är literal px,
   tagna direkt ur donalds-kontaktmodal-mockup.html — de följer inte
   spacing-/typskalan, samma medvetna undantag som produktsidans literala
   instansvärden (se CLAUDE.md, "Produktsidan — theme.json-först"): en
   exakt mockup-matchning väger tyngre än att pressa in värden i skalan. */

.donalds-kontakt-modal {
	border: none;
	padding: 0;
	border-radius: 2px;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	width: min(460px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	box-shadow: 0 24px 60px rgba(26, 26, 28, 0.25);
	font-family: var(--wp--preset--font-family--body);
}

.donalds-kontakt-modal::backdrop {
	background: rgba(26, 26, 28, 0.55);
}

.donalds-kontakt-inner {
	padding: 44px 40px 36px 40px;
	position: relative;
}

.donalds-kontakt-close {
	position: absolute;
	top: 20px;
	right: 24px;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--wp--preset--color--foreground-secondary);
	padding: 0;
}

.donalds-kontakt-close:hover {
	color: var(--wp--preset--color--foreground);
}

.donalds-kontakt-eyebrow {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--wp--preset--color--accent);
	margin: 0 0 12px 0;
}

.donalds-kontakt-inner h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: 26px;
	max-width: 20ch;
	margin: 0 0 10px 0;
	letter-spacing: -0.01em;
}

.donalds-kontakt-lead {
	font-family: var(--wp--preset--font-family--body);
	font-style: italic;
	color: var(--wp--preset--color--foreground-secondary);
	font-size: 15.5px;
	line-height: 1.6;
	margin: 0 0 30px 0;
}

.donalds-kontakt-field-row {
	display: flex;
	gap: 20px;
}

.donalds-kontakt-field-row .donalds-kontakt-field {
	flex: 1;
}

.donalds-kontakt-field {
	margin-bottom: 22px;
}

.donalds-kontakt-field label {
	display: block;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 13px;
	color: var(--wp--preset--color--foreground-secondary);
	margin-bottom: 6px;
}

/* #kontaktModal-prefixet (inte bara .donalds-kontakt-field) är nödvändigt,
   inte kosmetiskt — "Formulärfält ärver body-fonten"-regeln högre upp i
   filen (input:not([type=submit])...) har fem :not()-selektorer och slår
   annars igenom med högre specificitet än en enkel klass, så font-size
   stannade på base (17px) istället för mockupens 15px tills ID:t lades till. */
#kontaktModal .donalds-kontakt-field input,
#kontaktModal .donalds-kontakt-field textarea {
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	background: transparent;
	padding: 6px 2px 8px 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	color: var(--wp--preset--color--foreground);
	outline: none;
}

#kontaktModal .donalds-kontakt-field input:focus,
#kontaktModal .donalds-kontakt-field textarea:focus {
	border-bottom-color: var(--wp--preset--color--foreground);
}

.donalds-kontakt-field textarea {
	resize: vertical;
	min-height: 64px;
}

.donalds-kontakt-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 12px;
	color: var(--wp--preset--color--foreground-tertiary);
	margin: 6px 0 26px 0;
	line-height: 1.5;
}

.donalds-kontakt-consent input {
	margin-top: 3px;
}

/* Länken till integritetspolicyn i samtyckesraden (öppnas i ny flik så
   formuläret inte tappas). */
.donalds-kontakt-consent a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.donalds-kontakt-submit {
	width: 100%;
	display: block;
	text-align: center;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border: none;
	border-radius: 2px;
	padding: 15px 26px;
	cursor: pointer;
}

.donalds-kontakt-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.donalds-kontakt-feedback {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 13px;
	margin: 0;
	min-height: 0;
}

.donalds-kontakt-feedback[data-state="error"] {
	color: var(--wp--preset--color--accent);
	margin-top: 14px;
}

.donalds-kontakt-ring-oss {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 13px;
	color: var(--wp--preset--color--foreground-tertiary);
	text-align: center;
	margin: 14px 0 0 0;
}

.donalds-kontakt-ring-oss a {
	color: var(--wp--preset--color--foreground);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Osynlig för besökare, bara botar som fyller i alla fält blint fyller i
   det här — display:none ignoreras av vissa enkla botar, position off-screen
   är mer träffsäkert. Se inc/kontaktformular.php för serversidans kontroll. */
.donalds-kontakt-honeypot {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.donalds-kontakt-confirmation {
	margin-top: 4px;
}

.donalds-kontakt-confirmation h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: 26px;
	margin: 0 0 10px 0;
	letter-spacing: -0.01em;
}

.donalds-kontakt-confirmation p {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--foreground-secondary);
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

@media (max-width: 480px) {
	.donalds-kontakt-inner {
		padding: 36px 24px 28px 24px;
	}

	.donalds-kontakt-field-row {
		gap: 12px;
	}
}

/* ---------- Fullbredd-sektioner utan blockGap (2026-09) ----------
   WordPress lägger automatiskt till margin-block-start (theme.json:s
   styles.spacing.blockGap, 24px) mellan varenda direkt barn i en
   "constrained"-layout — inklusive fullbredds-sektionerna
   (tagName:"section", align:"full") som bygger upp sidorna. Varje sådan
   sektion har redan egen top/bottom-padding (2xl) för sin egen vertikala
   rytm, så den extra 24px:en skapar bara en ihålig remsa i sidans
   default-bakgrund (background/papper) mellan sektionerna — osynlig så
   länge grannsektionerna råkar vara nära i ton, men ett tydligt ljust
   streck så fort en av dem har en avvikande färg (upptäckt när Butik-
   sektionen på Produkter & Tjänster bytte till en mörkare bakgrund, se
   "Registerrytm" — luckan fanns redan vid varje sektionsgräns på alla
   sid-mall-sidor, bara osynlig tills då). Gäller sidor byggda med den
   vanliga sidmallen (wp:post-content, klass .entry-content.is-layout-
   constrained) — inte startsidan, vars rotwrapper (.wp-site-blocks) inte
   har samma automatiska blockGap-regel och redan var 0 på alla sektioner. */
.entry-content.is-layout-constrained > .alignfull {
	margin-block-start: 0;
}

/* ---------- Kundvagn — header (2026-09) ----------
   woocommerce/mini-cart-blocket, oförändrat i sak (se inc/mini-cart.php
   för klick-till-kundvagnssidan-filtret och ikon-injektionen). Ren ikon,
   ingen textetikett, på alla brytpunkter — en "Kundvagn"-etikett
   bredvid ikonen provades på desktop men fungerade inte visuellt i
   headern och togs bort igen samma vecka.
   Blockets egen "supports" (block.json) deklarerar bara typography.
   fontSize och spacing.margin/padding — INGEN color eller fontFamily —
   så theme.json:s styles.blocks-API kan inte nå färg, versaler,
   letter-spacing eller typsnitt här oavsett hur mycket man vill hålla
   sig till "theme.json-först". Allt nedan är därför riktad CSS, en
   källa, samma princip som produktflikarna/klassisk Woo-markup. */

.wc-block-mini-cart__button {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0;
	color: var(--wp--preset--color--foreground-secondary);
	transition: color 120ms ease;
}

.wc-block-mini-cart__button:hover,
.wc-block-mini-cart__button:focus-visible {
	color: var(--wp--preset--color--foreground);
}

/* Egen ikon istället för Woos rundade standardform (se
   inc/mini-cart.php) — samma linjevikt som hairline-ramarna (0.5px är
   för tunt i den här skalan, 1.2 matchar mockupens egen avvägning) och
   räta hörn, ingen fyllning. Storleken matchar ungefär Woos tidigare
   ikonstorlek (1.5em) men som fasta px, eftersom .wc-block-mini-cart__
   button inte längre är en <button> med ett meningsfullt eget
   font-size att räkna em mot. */
.donalds-kundvagn-icon {
	width: 20px;
	height: 18px;
	display: block;
	flex-shrink: 0;
}

.donalds-kundvagn-icon path,
.donalds-kundvagn-icon rect {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.2;
}

/* Räknaren — liten fylld cirkel, återanvänder samma mönster som
   .cart-dot i den ursprungliga butiksmockupen. Positioneras mot hela
   länken (position:relative satt på .wc-block-mini-cart__button ovan),
   samma placering på alla brytpunkter — en textetikett bredvid ikonen
   provades på desktop men fungerade inte visuellt i headern och togs
   bort igen (2026-09), se inc/mini-cart.php.

   Färgerna sätts "baklänges" med flit: Mini Cart-blockets egen
   frontend-JS (assets/client/blocks/woocommerce/mini-cart.js,
   badgeBackgroundColor/badgeTextColor-gettrarna) läser badgens EGNA
   beräknade color/background-color och byter plats på dem vid
   hydrering (data-wp-style--background-color="state.badgeBackgroundColor"
   m fl) — samma mekanism som redan gav en helt korrekt svart/pappersfärgad
   badge gratis innan den här ändringen (se commit ef6d66c). Sätts color
   här alltså till tryckrött blir badgens FAKTISKA bakgrund tryckröd, och
   vice versa för texten — ingen bugg, bara hur blocket är byggt. */
.wc-block-mini-cart__badge {
	position: absolute;
	top: -9px;
	right: -13px;
	left: auto;
	margin-left: 0;
	transform: none;
	width: 16px;
	height: 16px;
	min-width: 16px;
	padding: 0;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0;
	border-radius: 50%;
	color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--background);
}

/* ---------- Mega-meny — Produkter & Tjänster (2026-09) ----------
   Port av donalds-submeny-mockup_2.html:s "Variant 1"-panel. Egen
   markup + egen JS (inc/megameny.php, assets/js/megameny.js) — till
   skillnad från "I Galleriet"s enkla dropdown (se "Submeny — enkel
   dropdown" ovan, som bygger på WP:s core/navigation-submenu) är den
   här panelens innehåll adminstyrt (Redigera innehåll → Mega-meny),
   inte riktiga barn-block, och kan därför inte återanvända kärnans
   Interactivity API. Öppen/stängd-läge (grid-template-rows 0fr→1fr,
   samma teknik och samma transitionsvärden som den enkla dropdownen)
   styrs av en JS-lagd .is-open-klass istället för WP:s egna
   aria-expanded-selektorer. "Offwhite" i mockupen (#F7F3EA, skiljer
   sig 1 enhet från paper-tokenet #F8F4EB) slås ihop med
   background-tokenet — samma bedömning som gjordes för
   kontaktmodalens badge-text, avsett som samma färg. */

.donalds-header-bar {
	position: relative;
}

.donalds-megameny-panel {
	display: grid;
	grid-template-rows: 0fr;
	background: var(--wp--preset--color--background);
	box-shadow: 0 16px 28px -12px rgba(26, 26, 28, 0.14);
	transition: grid-template-rows 380ms cubic-bezier(0.16, 0.8, 0.3, 1);
	z-index: 20;
	position: absolute;
	top: 100%;
	left: 0;
	/* Samma blockGap-fälla som "Fullbredd-sektioner utan blockGap"
	   längre ner i filen — WordPress lägger automatiskt margin-block-
	   start (theme.json:s blockGap, 24px) mellan direkta barn i
	   .donalds-header-bars flow-layout, och panelen är ett sådant barn
	   (syskon till nav-raden). Trots position:absolute räknas margin
	   fortfarande in i offsetpositionen (top:100% + margin-top:24px),
	   vilket gav ett 24px mellanrum med den mörka hero-sektionen
	   synlig igenom det, ovanför panelen. */
	margin-top: 0;
}

.donalds-megameny-panel.is-open {
	grid-template-rows: 1fr;
}

.donalds-megameny-panel:not(.is-open) {
	transition-duration: 200ms;
	transition-timing-function: ease-in;
}

.donalds-megameny-panel-inner {
	overflow: hidden;
	min-height: 0;
}

.donalds-megameny-col {
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 260ms ease, transform 260ms ease;
	transition-delay: calc(var(--i, 0) * 50ms);
}

.donalds-megameny-panel.is-open .donalds-megameny-col {
	opacity: 1;
	transform: none;
}

.donalds-megameny-panel:not(.is-open) .donalds-megameny-col {
	transition-delay: 0ms;
	transition-duration: 120ms;
}

.donalds-megameny-marker {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--foreground-secondary);
	margin: 0 0 22px 0;
}

.donalds-megameny-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.donalds-megameny-links li {
	margin-bottom: 2px;
}

.donalds-megameny-links a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 15px;
	color: var(--wp--preset--color--foreground);
	padding: 7px 0;
	border-bottom: 1px solid transparent;
	text-decoration: none;
	white-space: nowrap;
}

.donalds-megameny-links a:hover,
.donalds-megameny-links a:focus-visible {
	color: var(--wp--preset--color--accent);
	border-bottom-color: var(--wp--preset--color--accent);
}

.donalds-megameny-ext {
	font-size: 11px;
	vertical-align: super;
	opacity: 0.7;
}

/* Highlight-etiketter på enskilda länkar ("NY", "MEST BOKAD") — 2026-09,
   omgjord till en fylld badge efter användartest av den ursprungliga
   nakna varianten ("för osynlig"). Medveten, uttrycklig avvikelse från
   Tidningskiosken 2.2:s regel att kategorimarkörer/metadata aldrig får
   ha en behållare — samma typ av dokumenterat undantag som produkt-
   sidans svarta "Lägg i varukorg"-knapp redan är mot Primär-knappens
   röda spec (se "Produktsidan — theme.json-först"). Samma färgpar som
   knapparnas Primär-variant (tryckröd bakgrund, pappersfärgad text),
   2px radie som knapparna (aldrig pill, se Tidningskiosken 2.2).
   Bara EN delad stil nu, inte två — alla highlights är röda, bara
   texten ("Ny"/"Mest bokad") skiljer dem åt. `--ny`/`--mest-bokad`-
   klasserna finns kvar i markupen (från PHP, oförändrad) men har
   ingen egen regel längre — ren markör för vilken text som skrevs ut,
   inte längre en färgvariant. */
.donalds-megameny-highlight {
	display: inline-block;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-left: 8px;
	padding: 3px 7px;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	border-radius: 2px;
	vertical-align: middle;
}

/* ---------- Mega-variant — full bredd under headern ---------- */
.donalds-megameny-panel--mega {
	right: 0;
}

/* Bredare än mockupens ursprungliga 1180px (två länk-kolumner + teaser)
   — en tredje länk-kolumn ("Produkter", tillagd 2026-09 samma vecka)
   fick annars för lite plats per kolumn inom samma bredd. */
.donalds-megameny-panel-grid--mega {
	max-width: 1400px;
	margin: 0 auto;
	padding: 52px 32px 56px 32px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1.15fr;
	column-gap: 56px;
}

/* Delad av alla länk-kolumner utom den första (som inte behöver skiljas
   från något till vänster) — negativa marginalen drar linjen till mitten
   av mellanrummet mot grannkolumnen, samma trick oavsett hur många
   länk-kolumner det blir. */
.donalds-megameny-col-divider {
	border-left: 0.5pt solid var(--wp--preset--color--hairline);
	padding-left: 56px;
	margin-left: -56px;
}

.donalds-megameny-teaser {
	border-left: 0.5pt solid var(--wp--preset--color--hairline);
	padding-left: 64px;
}

.donalds-megameny-teaser-img {
	width: 100%;
	/* height:auto krävs uttryckligen — wp_get_attachment_image() skriver
	   ut bokstavliga width/height-attribut (bildens riktiga pixelmått,
	   768×960 för platshållaren), och utan ett eget height här vinner
	   den attributhärledda höjden över aspect-ratio istället för att
	   auto-räknas fram från den, vilket blåste upp hela panelen till
	   bildens fulla naturliga höjd (~960px) tvärs över alla tre kolumner. */
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	border: 0.5px solid var(--wp--preset--color--hairline);
	margin-bottom: 18px;
}

.donalds-megameny-teaser h3 {
	font-size: 19px;
	margin: 0 0 8px 0;
}

.donalds-megameny-teaser p {
	font-family: var(--wp--preset--font-family--body);
	font-style: italic;
	color: var(--wp--preset--color--foreground-secondary);
	font-size: 15px;
	margin: 0 0 16px 0;
}

.donalds-megameny-teaser-link {
	display: inline-block;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--foreground);
	border-bottom: 1px solid var(--wp--preset--color--foreground);
	text-decoration: none;
	padding-bottom: 2px;
}

.donalds-megameny-teaser-link:hover {
	color: var(--wp--preset--color--accent);
	border-bottom-color: var(--wp--preset--color--accent);
}

/* ---------- Enkel-variant — mega-menyn avstängd, samma länkar platt ---------- */
.donalds-megameny-panel--simple {
	min-width: 240px;
}

.donalds-megameny-panel-grid--simple {
	padding: 28px 32px 30px 32px;
}

/* Öppningsläget signaleras på triggern precis som ordinarie nav-länkar
   (.donalds-header-nav-wrap .wp-block-navigation-item__content:hover
   ovan) — aria-expanded="true" sätts av assets/js/megameny.js. */
.donalds-header-nav-wrap .donalds-megameny-trigger-item [aria-expanded="true"].wp-block-navigation-item__content {
	color: var(--wp--preset--color--foreground);
}

.donalds-header-nav-wrap .donalds-megameny-trigger-item [aria-expanded="true"].wp-block-navigation-item__content::after {
	background: var(--wp--preset--color--accent);
}

@media (prefers-reduced-motion: reduce) {
	.donalds-megameny-panel,
	.donalds-megameny-panel * {
		transition-duration: 0.01ms !important;
	}
}

/* "Endast desktop" — panelen injiceras utanför nav-blockets egen
   responsiva container (se filkommentaren i inc/megameny.php för
   varför), så den täcks inte av navigationens egen hamburger-
   kollapsregel (max-width:1023px, se Navigation-avsnittet högre upp).
   Döljs uttryckligen här istället, annars kunde tangentbordsfokus på
   triggern (som fortfarande finns kvar i DOM:en inuti den hopfällda
   mobilmenyn) öppna en full-bredd-panel bakom det hopfällda läget. */
@media (max-width: 1023px) {
	.donalds-megameny-panel {
		display: none;
	}
}

/* ---------- Företagsfoto-landningssidan (/foretagsfoto) ----------
   Bara det som core-blocken inte kan uttrycka själva — resten av sidan är
   vanliga block med theme.json-tokens (patterns/foretagsfoto-*.php). Alla
   regler är skopade till egna klasser, inget befintligt rörs. */

/* Faktaraden i hero: en vanlig core/list utan punkter, i rad. */
.donalds-ff-facts {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 32px;
}

/* Personalrutnätet: fyra rutor (tre porträtt + "Ny kollega") — 4 kolumner
   på desktop, 2 på surfplatta och mobil. Egen grid istället för
   core/group-gridens auto-fill. margin-block nollställs eftersom WP:s
   flow-layout annars lägger blockGap som margin-top på alla barn utom
   det första (samma fälla som .donalds-programforklaring-bildspalt). */
.donalds-ff-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--sm);
}
.donalds-ff-grid > * {
	margin-block: 0;
}
@media (max-width: 900px) {
	.donalds-ff-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Den medvetet tomma, streckade sista rutan ("Ny kollega"). */
.donalds-ff-slot {
	aspect-ratio: 4 / 5;
	box-sizing: border-box;
	border: 1px dashed var(--wp--preset--color--foreground-tertiary);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px;
	text-align: center;
}

/* FAQ — <details>/<summary>. "+" roterar till "×" när posten är öppen. */
.donalds-faq {
	border-top: 1px solid var(--wp--preset--color--foreground);
}
.donalds-faq details {
	border-bottom: 0.5px solid var(--wp--preset--color--hairline);
	padding: 20px 0;
}
.donalds-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 44px;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
}
.donalds-faq summary::-webkit-details-marker {
	display: none;
}
.donalds-faq summary::after {
	content: "+";
	flex: none;
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 400;
	color: var(--wp--preset--color--accent);
	transition: transform 0.2s;
}
.donalds-faq details[open] summary::after {
	transform: rotate(45deg);
}
.donalds-faq summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--foreground);
	outline-offset: 4px;
}
.donalds-faq details p {
	margin: 12px 0 0;
	max-width: 36em;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.65;
}
@media (prefers-reduced-motion: reduce) {
	.donalds-faq summary::after {
		transition: none;
	}
}

/* Radnumret i "Bra att skriva i meddelandet": fast kolumnbredd så att
   rubrikerna linjerar oavsett siffrornas (proportionella) bredd. */
.donalds-ff-num {
	flex: 0 0 2.2em;
	font-variant-numeric: tabular-nums;
}

/* Pris + etikett på samma rad (startsidans Företagsfoto-block, "1200 kr
   FRÅN PRIS"): flex-grupp med verticalAlignment "bottom" lägger etiketten
   vid den stora siffrans lådkant — under baslinjen, eftersom siffrans
   line-height ger luft under texten. Baslinjejustering får de att
   sitta på samma linje. */
.wp-block-group.donalds-price-baseline {
	align-items: baseline;
}

/* ---------- Infoblock / Enkel tjänstesida ----------
   Bara det core-blocken inte kan uttrycka. Vänsterkolumnen är max ~640px
   och bildkolumnen max 440px. Är bildkolumnen tom (bilden borttagen) döljs
   den helt — vänsterkolumnens flex-basis är fast, så texten ligger kvar
   på samma plats och med samma bredd. En tom bildtext tar ingen plats. */
.donalds-infoblock-text {
	max-width: 640px;
}
.donalds-infoblock-bild {
	max-width: 440px;
}
.donalds-infoblock .wp-block-column:empty,
.donalds-infoblock .wp-element-caption:empty {
	display: none;
}

/* Bilden fyller bildkolumnen (annars ligger en liten bild åt vänster i en
   bredare ram). */
.donalds-infoblock-bild .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* "Så går det till" (Företagsfoto): stegkort med sifferetikett i stället för
   bild. Korten har olika lång text — kolumnen blir flex-kolumn och kortet
   växer, så alla tre får samma höjd (samma mönster som .donalds-service-card). */
.wp-block-column:has(> .donalds-step-card) {
	display: flex;
	flex-direction: column;
}
.donalds-step-card {
	flex: 1 1 auto;
}


/* Footer (patterns/footer-default.php, ny design 2026-10-12, mot
   "Donalds footer.html"). Literala px-värden (15px/11px, 96/48/40px,
   gap 56/64/88px) är hämtade rakt ur designförslaget — samma undantag från
   skalan som produktsidan och kontaktmodalen gör, exakt matchning väger
   tyngre. Färger är paletten: papper-tonen (background-secondary) för
   text och länkar, foreground-tertiary för etiketter/kolofon, marker för
   kolumnrubrikerna. Raderna under är scopade till .donalds-footer så de
   inte rör något annat. */
.donalds-footer {
	padding: 96px 48px 40px;
}
.donalds-footer .donalds-footer-inner {
	margin: 0 auto;
}
.donalds-footer .donalds-footer-top {
	display: flex;
	flex-wrap: wrap;
	gap: 56px 64px;
	align-items: flex-start;
}
.donalds-footer .donalds-footer-top > * {
	margin-block: 0;
}
.donalds-footer .donalds-footer-brand {
	flex: 1 1 300px;
	max-width: 360px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.donalds-footer .donalds-footer-brand > * {
	margin-block: 0;
}
.donalds-footer .donalds-footer-brand .wp-block-image {
	align-self: flex-start;
}
.donalds-footer .donalds-footer-tagline {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	line-height: 1.6;
}
.donalds-footer .donalds-footer-tider {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 20px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	line-height: 1.5;
}
.donalds-footer .donalds-footer-tider dt {
	color: var(--wp--preset--color--foreground-tertiary);
}
.donalds-footer .donalds-footer-tider dd {
	margin: 0;
}
.donalds-footer .donalds-footer-tider .donalds-footer-hel {
	grid-column: 1 / -1;
}
.donalds-footer .donalds-footer-tider a {
	border-bottom: 1px solid var(--wp--preset--color--foreground-secondary);
}
.donalds-footer a {
	color: var(--wp--preset--color--background-secondary);
	text-decoration: none;
}
.donalds-footer a:hover,
.donalds-footer a:focus-visible {
	color: var(--wp--preset--color--marker);
}
.donalds-footer .donalds-footer-nav {
	flex: 2 1 560px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 48px 40px;
}
.donalds-footer .donalds-footer-kol {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.donalds-footer .donalds-footer-rubrik {
	margin: 0;
	color: var(--wp--preset--color--marker);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 16px;
	text-transform: uppercase;
}
.donalds-footer .donalds-footer-lankar {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 15px;
	line-height: 1.35;
}
.donalds-footer .donalds-footer-ext {
	color: var(--wp--preset--color--foreground-tertiary);
}
.donalds-footer .donalds-footer-social {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.donalds-footer .donalds-footer-social svg {
	color: var(--wp--preset--color--foreground-tertiary);
}
.donalds-footer .donalds-footer-kolofon {
	margin-top: 88px;
	border-top: 1px solid #eae3d629; /* låg-opacitets papper mot mörk yta, se tidigare kommentar i CLAUDE.md (footer) */
	padding-top: 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 32px;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 16px;
	text-transform: uppercase;
	color: var(--wp--preset--color--foreground-tertiary);
}
.donalds-footer .donalds-footer-kolofon > * {
	margin-block: 0;
}
.donalds-footer .donalds-footer-kolofon .wp-block-navigation,
.donalds-footer .donalds-footer-kolofon .wp-block-navigation-item__content {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 16px;
	text-transform: uppercase;
	color: var(--wp--preset--color--foreground-tertiary);
}
.donalds-footer .donalds-footer-kolofon .wp-block-navigation-item__content:hover,
.donalds-footer .donalds-footer-kolofon .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--marker);
}
@media (max-width: 600px) {
	.donalds-footer {
		padding: 64px 16px 32px;
	}
	.donalds-footer .donalds-footer-kolofon {
		margin-top: 56px;
	}
}