inuti. Reglerna
måste därför peka på barnet, annars landar padding på fel box.
"Primär" är samma sak som knappens standardläge, men namngiven: utan den
har klienten bara "Sekundär" att välja och inget sätt att gå tillbaka. */
.wp-block-button.is-style-primar .wp-block-button__link {
background-color: var(--accent);
color: var(--wp--preset--color--grund);
border-color: transparent;
}
.wp-block-button.is-style-primar .wp-block-button__link:hover {
background-color: var(--accent-hover);
color: var(--wp--preset--color--grund);
}
.wp-block-button.is-style-stor .wp-block-button__link {
font-size: 20px; line-height: 1; padding: 19px 28px;
}
.wp-block-button.is-style-sekundar .wp-block-button__link {
background-color: transparent;
color: var(--text-heading);
border: var(--border-width) solid var(--border-strong);
}
.wp-block-button.is-style-sekundar .wp-block-button__link:hover {
background-color: var(--surface-tint);
border-color: var(--text-soft);
color: var(--text-heading);
}
.wp-block-button.is-style-ghost .wp-block-button__link {
background-color: transparent; color: var(--text-link);
padding-inline: 6px; border-color: transparent;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover { color: var(--text-link-hover); background-color: transparent; }
.wp-block-button.is-style-helbredd { width: 100%; }
.wp-block-button.is-style-helbredd .wp-block-button__link { width: 100%; }
.wp-block-button .wp-block-button__link:active { transform: scale(var(--press-scale)); }
/* Upplysningsraden i logotypraden ("+13 fler"): brödtextens lilla grad,
inte logotypernas versaler. */
p.is-style-notis {
font-size: var(--fs-small); color: var(--text-muted);
white-space: nowrap; margin: 0;
}
/* Bocklista. Bocken är ren ornamentik utan innehåll — inget att redigera —
och får därför vara en list-style-type i stället för ett ikonblock i
varje rad. */
:root ul.is-style-bocklista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
/* Förlagans rad är ett rutnät med en 24px-spalt för bocken och baslinje
justering, inte flex. Skillnaden syns: med flex blev raden 1px lägre än
förlagan, vilket blev 5px på en femradig lista. */
ul.is-style-bocklista li {
display: grid; grid-template-columns: 24px 1fr;
gap: var(--space-3); align-items: baseline;
}
/* Bocken. Förlagan ritar en streckad SVG, 18×18 med 2px linje och
margin-top 2px, märkt aria-hidden. Den är alltså ornamentik och ritas som
pseudoelement — samma undantag som brödsmulornas snedstreck. Ett tecken
ur teckensnittet (\2713) gav fel form och fel radlåda; en mask ger exakt
förlagans streck och tar färg från kickfärgen. */
ul.is-style-bocklista li::before {
content: ""; width: 18px; height: 18px; margin-top: 2px;
background-color: var(--aqua-ink);
-webkit-mask: var(--ag-bock) center / contain no-repeat;
mask: var(--ag-bock) center / contain no-repeat;
}
/* En nivå utan chip ska inte visa en tom ruta. */
p.is-style-chip:empty, p.is-style-chip-accent:empty, p.is-style-chip-kontur:empty { display: none; }
/* Logotypbricka. Kundmärkena renderas som ordbild i versaler tills
enfärgade SVG:er och skriftligt godkännande per kund finns. */
p.is-style-logotyp {
font-weight: 600; font-size: 14px; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--text-soft); line-height: 1.25;
margin: 0;
}
/* ---------------------------------------------------------------------
D. Komponenter. Porterade ur prototypens komponent-CSS, med de värden
som FAKTISKT renderar (mätt), inte de som står först i källan.
--------------------------------------------------------------------- */
/* --- Sidhuvud ------------------------------------------------------- */
/* core/template-part lindar alltid sitt innehåll i en . Den divven
blir sidhuvudets förälder och är bara lika hög som sidhuvudet, så
position:sticky har noll väg att röra sig i och rullar bort med sidan.
display:contents tar bort omslagets box utan att ta bort elementet, och
sidhuvudets förälder blir sidans egen behållare. */
.ag-plats-huvud, .ag-plats-fot { display: contents; }
/* position:sticky och z-index har inga reglage. Bakgrund, ram och padding
ligger som blockattribut på gruppen i parts/header.html.
Ingen backdrop-filter: den gör sidhuvudet till containing block för
position:fixed och fångar navigeringens overlay inuti huvudet. */
.ag-header { position: sticky; top: 0; z-index: 40; }
.ag-header__inner { gap: var(--space-6); }
/* Ordningen skiljer mellan lägena: på skrivbordet står menyn före
knappen, i den stängda mobilraden står knappen före hamburgaren.
Hamburgaren bor i navigeringsblocket, så DOM-ordningen är knapp först
och skrivbordet vänder på den med order. */
@media (min-width: 1061px) {
.ag-header__nav { order: 1; }
.ag-header__knapp { order: 2; }
}
/* Loggan får inte krympa i flexraden: på små skärmar trycker knappen
annars ihop den. */
.ag-header__brand { flex: 0 0 auto; }
.ag-header__brand img { width: auto; height: 30px; display: block; max-width: none; }
.ag-header__brand a { text-decoration: none; }
.ag-header__nav .wp-block-navigation-item__content {
font-size: var(--fs-small); font-weight: var(--weight-medium);
color: var(--text-body); text-decoration: none;
padding-block: 4px; border-bottom: 2px solid transparent;
transition: var(--transition-interactive); white-space: nowrap;
}
.ag-header__nav .wp-block-navigation-item__content:hover { color: var(--accent); }
.ag-header__nav .current-menu-item > .wp-block-navigation-item__content,
.ag-header__nav .current_page_item > .wp-block-navigation-item__content {
border-bottom-color: var(--accent); color: var(--text-heading);
}
/* Hamburgerknappen. Designen visar den som en ramad knapp med texten
"Meny", inte som en naken ikon. */
.ag-header__nav .wp-block-navigation__responsive-container-open {
align-items: center; gap: 10px;
border: var(--border-width) solid var(--border-subtle);
border-radius: var(--radius-button);
padding: 10px 14px; min-height: 44px;
font-size: var(--fs-small); font-weight: var(--weight-medium);
color: var(--text-heading);
}
.ag-header__nav .wp-block-navigation__responsive-container-open:hover { border-color: var(--border-strong); }
/* Ordet "Meny" är riktig text: den kommer ur navigeringsblockets
ariaLabel och går att ändra i redigeraren. Strecken är ren ornamentik
och ritas därför här. */
.ag-header__nav .wp-block-navigation__responsive-container-open::before {
content: ""; flex: 0 0 auto; width: 16px; height: 14px;
background:
linear-gradient(currentColor, currentColor) 0 0 / 16px 2px no-repeat,
linear-gradient(currentColor, currentColor) 0 6px / 16px 2px no-repeat,
linear-gradient(currentColor, currentColor) 0 12px / 16px 2px no-repeat;
}
/* Brytpunkten. Kärnans navigering växlar vid 600px, hårdkodat. Designen
växlar vid 1060px, och den vågräta menyn plus knappen får inte plats
under det. Därför tvingas overlayen på ända upp till 1060.
TA INTE BORT — utan detta ligger menyn kvar i en rad som spräcker
sidhuvudet mellan 600 och 1060px. */
@media (max-width: 1060px) {
.ag-header__nav .wp-block-navigation__responsive-container-open { display: flex !important; }
.ag-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
/* I bandet 600–1060px kör WP fortfarande sin SKRIVBORDS-CSS, så den
öppnade menyn får ingen overlaybehandling. Den måste återskapas här,
annars renderar den som en smal felplacerad panel. Designen vill ha
en panel under sidhuvudets rad, inte en helskärmsruta. */
.ag-header__nav .wp-block-navigation__responsive-container.is-menu-open {
display: block !important;
position: fixed !important;
inset: var(--ag-header-h, 77px) 0 0 0;
z-index: 100000;
background-color: var(--wp--preset--color--grund) !important;
border-top: var(--border-width) solid var(--border-subtle);
overflow-y: auto;
padding: 0;
}
.ag-header__nav .is-menu-open .wp-block-navigation__responsive-container-content {
display: flex !important; flex-direction: column;
width: 100%; max-width: var(--container); margin-inline: auto;
padding: var(--space-4) var(--gutter) var(--space-6);
}
/* Overlayns rader fyller bredden. Navigeringens vågräta justering
(höger) gäller annars även här och lämnar länkarna hopkrupna i
högerkanten i stället för som rader med en linje under. */
.ag-header__nav .is-menu-open .wp-block-navigation__container {
display: flex !important; flex-direction: column; gap: 0;
align-items: stretch !important; justify-content: flex-start !important;
width: 100%;
}
.ag-header__nav .is-menu-open .wp-block-navigation-item { width: 100%; }
.ag-header__nav .is-menu-open .wp-block-navigation-item__content {
width: 100%;
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-4); min-height: 52px;
border-bottom: var(--border-width) solid var(--border-subtle);
border-top: 0;
font-size: var(--fs-lead); font-weight: var(--weight-medium);
color: var(--text-heading); padding-block: 0;
}
.ag-header__nav .is-menu-open .wp-block-navigation__responsive-container-close {
display: none !important;
}
/* Åtgärdszonen i den öppna menyn. Flyttas in i overlayns egen behållare
av skriptet i functions.php, så den scrollar med och inte behöver
position:fixed. */
.ag-header__meny-cta { display: none !important; }
.wp-block-navigation__responsive-container-content .ag-header__meny-cta {
display: flex !important; flex-wrap: wrap; gap: var(--space-3);
align-items: center; width: 100%; margin-top: var(--space-5);
padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
}
}
@media (min-width: 1061px) {
.ag-header__nav .wp-block-navigation__responsive-container-open,
.ag-header__nav .wp-block-navigation__responsive-container-close { display: none !important; }
.ag-header__meny-cta { display: none !important; }
}
/* Under 520px döljer designen den primära knappen i den stängda raden.
!important eftersom knappraden bär is-layout-flex, som väger två
klasser och slår ett vanligt display:none. */
@media (max-width: 520px) {
.ag-header__knapp { display: none !important; }
}
/* --- Hjälte --------------------------------------------------------- */
/* Fotot och slöjan är core/cover: bild + fokuspunkt + gradient som
blockattribut. Kvar här är bara det kärnan inte når. */
/* Kärnan sätter width:auto på cover-blockets inre behållare så fort en
innehållsposition är vald. Spalten krymper då till sitt innehåll och
fäster i paddingkanten i stället för att centreras i sidans spalt —
hjältens text hamnade 100px till vänster om all annan text på sidan.
Designen vill ha BÅDE botten-position och sidans spalt. */
.ag-hero .wp-block-cover__inner-container {
width: 100% !important;
padding-top: clamp(96px, 13vw, 180px);
}
.ag-hero__rubrik { max-width: 13ch; }
.ag-hero__ingress { max-width: 42ch; }
.ag-hero__notis { max-width: 28ch; }
.ag-hero__notis a {
color: var(--text-on-dark); text-decoration: none;
border-bottom: 1px solid var(--border-strong);
}
@media (max-width: 900px) {
.ag-hero { min-height: 0 !important; }
.ag-hero .wp-block-cover__inner-container { padding-top: clamp(48px, 10vw, 88px); }
}
@media (max-width: 640px) {
.ag-hero__rubrik, .ag-hero__ingress { max-width: none; }
}
/* Logotypraden. Sex spalter, tre under 1000, två under 560. Kärnans
grid-layout har ingen brytpunktsstyrning, och auto-fill lägger till en
tom kolumn när raden rymmer en till — därför fast antal här. */
.ag-logorad { grid-template-columns: repeat(6, 1fr) !important; }
@media (max-width: 1000px) { .ag-logorad { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 560px) { .ag-logorad { grid-template-columns: repeat(2, 1fr) !important; } }
/* Logotypväggen fyller raden i stället för att hålla ett fast antal.
auto-FIT, inte auto-fill: den fäller ihop den tomma spalten i stället
för att lämna ett hål i högerkanten. */
.ag-logotypvagg { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; }
/* Kortraderna är nu ett rutnät med ag-rutnat-260, precis som förlagan:
auto-fit med minmax(260px, 1fr) ger en spalt under 600, två upp till
~860 och tre därefter. Tidigare låg de i kolumnblock med ett
mediefrågehack, för kärnans rutnätslayout använder auto-fill — men
:root [class*="ag-rutnat-"] tvingar redan auto-fit, så skälet är borta.
Hacket gav dessutom flex-grow:1, vilket sträckte det tredje kortet över
hela raden vid 600 och 768px. */
/* Punktrutnätet faller ihop till en spalt som designens tvåspalt. */
@media (max-width: 960px) { .ag-punktrutnat { grid-template-columns: minmax(0, 1fr) !important; } }
/* --- Måttkapning ----------------------------------------------------
Designen låter varje rubrik och ingress bryta på ett bestämt antal
tecken. Måttet mäts i ch, alltså nollans bredd: se anmärkningen om
unicode-range i theme.json — utan den faller ch tillbaka på 0,5em och
varje kapning här blir för snäv. */
/* --- Rutnätens spaltminimum -------------------------------------------- *
* Designen använder repeat(auto-fit, minmax(N, 1fr)); kärnans rutnätslayout
* skriver ALLTID auto-fill. Skillnaden syns bara när korten inte fyller
* raden: auto-fill lämnar den tomma spalten kvar och krymper korten, auto-fit
* fäller ihop den så de kvarvarande delar hela bredden. Tre kort på
* erbjudande blev 268px breda i stället för 365px av just det.
* Kärnan har ingen kontroll för auto-fit, så detta är CSS av nödvändighet.
* Minimivärdet står ändå kvar som blockattribut — panelen ska visa det — och
* mönstret sätter klass och attribut från SAMMA token, så de inte kan dra
* isär. Kärnans egen regel ligger i :where() och har noll vikt, därför
* behövs inget !important. */
.ag-rutnat-160 { --ag-rutnat-min: 160px; }
.ag-rutnat-200 { --ag-rutnat-min: 200px; }
.ag-rutnat-220 { --ag-rutnat-min: 220px; }
.ag-rutnat-240 { --ag-rutnat-min: 240px; }
.ag-rutnat-260 { --ag-rutnat-min: 260px; }
.ag-rutnat-280 { --ag-rutnat-min: 280px; }
.ag-rutnat-300 { --ag-rutnat-min: 300px; }
.ag-rutnat-320 { --ag-rutnat-min: 320px; }
.ag-rutnat-340 { --ag-rutnat-min: 340px; }
/* :root behövs: kärnans rutnätsregel ligger på .wp-container-… med samma
vikt som min attributväljare, och dess