/*
Theme Name: Bricks Child
Template: bricks
Description: Child-tema för SIMAB Smide. Innehåller endast det som inte kan
             ställas in i ACSS eller Bricks.
Author: Umify
Version: 1.0.0
*/

/* ==========================================================================
   RÖR INTE RADERNA OVANFÖR

   Blocket överst är WordPress temahuvud. Raden "Template: bricks" är den som
   talar om att det här är ett child-tema till Bricks. Saknas den säger
   WordPress "Detta tema är trasigt — Template is missing" och temat går inte
   att aktivera.

   Huvudet måste ligga FÖRST i filen, före all annan kommentar och all CSS.
   Klistrar du in en ny version av filen: kontrollera att de sju raderna
   ovanför finns kvar överst.
   ========================================================================== */


/* ==========================================================================
   SIMAB — child-temats style.css
   simabsmide.se · WordPress + Bricks 2.3.13 + Automatic.css 4.0.1

   Ersätter alla tidigare versioner. Klistra in hela filen.

   TRE REGLER FÖR DEN HÄR FILEN
   1. Här ligger BARA det som inte kan ställas in i ACSS eller Bricks.
      Färger, typskala, avstånd och knapputseende hör hemma i ACSS.
   2. Inga !important. Behövs högre specificitet upprepas klassnamnet
      (.brxe-button.brxe-button) — det är dubbel specificitet utan att
      låsa kaskaden.
   3. Varje var() har ett reservvärde. ACSS 4 tog bort merparten av
      utility-modulerna, och alla variabelnamn från 3.x finns inte kvar.
      Med fallback fungerar regeln även om variabeln saknas.

   LJUSA TERMER — LÄS INNAN DU ÄNDRAR FÄRG
   Sajten kör color-scheme: dark only. ACSS skriver varje nyans som
   light-dark(ljus, mörk) och VÄNDER trappan i mörkt läge:
   --neutral-ultra-light renderar MÖRKT, --neutral-ultra-dark renderar LJUST.
   Skriv därför färger som de ser ut i LJUST läge. Sajten vänder dem.
   Verifierat i installationen 28 sep 2026: bakgrund L 0.218, text L 0.961.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. EGNA VARIABLER
   -------------------------------------------------------------------------- */

:root{
  /* Ordmärkets orange. Ligger utanför ACSS-paletten med flit — den ska
     aldrig kunna väljas i en färgväljare och får bara förekomma i loggan. */
  --simab-orange: #d86d2e;

  /* Slöjan över hero-fotot. Ljusa termer, se rutan överst. */
  --simab-hero-veil: linear-gradient(90deg,
    color-mix(in oklab, var(--neutral-ultra-light, #efece9) 94%, transparent)   0%,
    color-mix(in oklab, var(--neutral-ultra-light, #efece9) 86%, transparent)  38%,
    color-mix(in oklab, var(--neutral-ultra-light, #efece9) 34%, transparent)  78%,
    color-mix(in oklab, var(--neutral-ultra-light, #efece9) 15%, transparent) 100%);
}


/* --------------------------------------------------------------------------
   2. RUBRIKER — riktning B:s tyngd
   Ingen ACSS-panel erbjuder versaler plus negativ spärr per rubriknivå,
   därför ligger det här och inte i en inställning.

   RUBRIKSTORLEKARNA ÄR SATTA HÄR SEDAN 13 OKT 2026 — och det är nytt.
   Mätt på https://vegi.a.vaia.cloud/tjanster/legosvetsning/ den 13 oktober:
   H1 renderade 39,06 px och H2 31,25 px.

   Det är ACSS rubrikskala rakt av. ACSS → Typography → Headings står på
   Desktop Base Size 20 px och Desktop Ratio 1.25, och basen är H4:

     H4 = 20 · H3 = 25 · H2 = 31,25 · H1 = 39,06

   Skisserna vill något annat:

                    startsidan      undersidorna     ACSS skala
     H1               58 px            48 px           39,06 px
     H2               36 px            32 px           31,25 px
     H3               18 px            16,5 px            25 px

   Alltså 33 % för liten H1 på startsidan och 19 % på tjänstesidorna.
   Det var den avvikelse som rapporterades som "typografin stämmer inte".

   HÖJ INTE BASSTORLEKEN FÖR ATT RÄTTA DET. Bas 24 ger H1 46,88 — nära
   skissens 48 — men samtidigt H2 37,5 där skissen vill ha 32, och H3 30
   där skissen vill ha 16,5. En nivå rättas, två spricker.

   Skalan går överhuvudtaget inte att uttrycka som ett ACSS-förhållande.
   Förhållandet H1/H2 är 1,5 i skissen men 1,25 i en geometrisk skala,
   H2/H3 är 1,94 där skalan säger 1,25, och de två sidtyperna har olika
   skala. Därför står storlekarna som skissens egna värden här, och
   ACSS-basen lämnas på 20 — den styr numera bara H4 och nedåt.

   VIKTEN LIGGER OCKSÅ HÄR. ACSS → Typography → Headings → Default Font
   Weight ska stå på 700. Skissen sätter 800 på H1 och ingenting annat;
   sätts 800 som ACSS grundvikt blir H3–H6 också 800. Allt som rör
   rubrikernas utseende bor i det här avsnittet — ett ställe, inte tre.

   Startsidan träffas via body.home, som WordPress sätter själv. Ingen
   klass att komma ihåg och inget att glömma. Kontrollera ändå att
   <body> har klassen home — se byggmanualens steg 5.1.

   Selektorn är body h1 och inte h1, så att regeln vinner över ACSS
   oavsett i vilken ordning stilmallarna laddas.
   -------------------------------------------------------------------------- */

h1, h2, h3{
  text-transform: uppercase;
  text-wrap: balance;
}

/* Undersidornas skala — gäller tjänstesidor, om, jobb och kontakt. */
body h1{
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #fff;
}

body h2{
  font-size: clamp(22px, 3.1vw, 32px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.025em;
}

body h3{
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Startsidan går en nivå upp. Skissen gör hero-rubriken till sidans
   största element med avsikt — det är varumärkesögonblicket. */
body.home h1{
  font-size: clamp(34px, 5.2vw, 58px);
  line-height: 1.03;
}

body.home h2{
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.06;
}

body.home h3{
  font-size: 18px;
}

/* H1 är ren vit i skissen, inte benvit som brödtexten — en medveten
   kontrast i heron. På ljus botten gäller den ljusa sektionens färg. */
.simab-ljus :is(h1, h2, h3){
  color: #141313;
}


/* --------------------------------------------------------------------------
   2a. VARFÖR SKISSENS STORLEKAR STÅR I PX OCH INTE I REM
   Ändrat 13 okt 2026.

   OBS: det här var INTE orsaken till den rapporterade avvikelsen.
   Rotstorleken mättes till 16 px på skarp sajt samma dag, så filens
   rem-värden räknades rätt hela tiden. Felet låg i rubrikstorlekarna,
   se avsnitt 2. Den här ändringen tar bort ett latent beroende — den
   rättar ingenting som var fel just nu.

   Filen angav skissens mått i rem: 0.9375rem för 15 px och så vidare,
   trettiosju deklarationer. Det räknas mot rotstorleken, och
   rotstorleken var inte bestämd i projektet — Bricks standard är 62,5 %
   (10 px), ACSS standard är 100 % (16 px), och byggmanualens steg 1.9
   tillät uttryckligen båda så länge de var lika. Hade installationen
   stått på 62,5 % hade varje mått blivit 37,5 % för litet. Den
   motsägelsen i steg 1.9 är nu borta: 100 % är enda tillåtna värdet.

   Skissen är specificerad i px. Måtten är absoluta designvärden som inte
   ska skala med något, så de står nu i px och ger samma resultat oavsett
   vad rotstorleken är satt till. Ett fel mindre att kunna göra.

   ACSS egna variabler — var(--space-*), var(--text-*) — är kvar som de
   är. De SKA skala, och de räknas om av ACSS, inte av oss.

   REGEL: nya mått som kommer ur en designskiss skrivs i px här.
   Mått som ska följa ACSS skala tas från en ACSS-variabel.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2b. BRÖDTEXT — BORTTAGEN 13 OKT 2026. Läs det här innan du lägger
   tillbaka något som liknar den.

   Här stod en svepande regel som satte 16 px på body, .brxe-text,
   .brxe-text-basic, .brxe-post-content och .brxe-rich-text. Alltså på i
   princip varje textelement på sajten.

   DEN VAR ORSAKEN till rapporten "brödtexten är för liten". ACSS →
   Typography → Text står på Desktop Base Size 18 px och Mobile 16 px.
   Child-temat skrev över det och tvingade ned allt till 16 px vid alla
   bredder. Sajten visade 16 där designsystemet sa 18, och ingen hittade
   det eftersom ACSS-panelen såg rätt ut — det var CSS:en som ljög.

   Regeln kom in som lappning för canvas-buggen (avsnitt 2c) och läckte
   ut på frontend. Avsnitt 2c är avgränsat till .brx-body.iframe och
   löser canvasen på egen hand. Den här behövdes aldrig där ute.

   Den bröt dessutom mot filens egen regel överst: child-temat ska bara
   innehålla det som INTE går att ställa in i ACSS. Brödtextens storlek
   går att ställa in i ACSS. Den var redan inställd.

   Beslut 13 okt: ACSS äger brödtextens storlek. 18 px på desktop.
   Skissens övriga lästexter är lyfta med samma faktor, se avsnitt 5.

   LÄGG INTE TILLBAKA EN REGEL PÅ body ELLER .brxe-*. Ser brödtexten fel
   ut är det ACSS Text-fliken som ska ändras, inte den här filen.

   Här låg också en regel som satte font-size: revert på rubriker inuti
   rich text. Den fanns bara för att mildra regeln ovan, och den är
   borttagen med den. Hade den stått kvar hade en H2 i ett rich
   text-block hoppat till webbläsarens 1.5em i stället för avsnitt 2:s
   32 px.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2c. LÖSNING FÖR BRICKS BUILDER-CANVAS — ska bort när felet är åtgärdat
   -------------------------------------------------------------------------- */

/*  PROBLEMET
    I builder-canvasen får varje .brxe-*-klass font-size: 0. Element med
    egen storlek klarar sig; alla andra blir 0 x 0, ritas inte, och går
    inte att markera. Frontend är opåverkad och renderar korrekt.

    Mätt 28 sep 2026: P.brxe-text-basic (täckt av vår CSS) = 16px och
    228 x 25. NAV.brxe-block, UL.brxe-div och A.brxe-text-link = 0px
    och 0 x 0. En regel på body räddar dem inte — varje klass bär sin
    egen nolla.

    LÖSNINGEN
    Regeln gäller BARA inuti .brx-body.iframe, alltså builderns canvas.
    Frontend rörs inte alls — där är ingenting fel och ingenting ändras.
    Rubriker undantas så ACSS typskala lämnas orörd.

    Rader ovanför med högre specificitet — knappar, brödtext — vinner
    fortfarande, så designade storlekar står kvar.

    TA BORT HELA AVSNITT 2c när ACSS eller Bricks åtgärdat grundfelet,
    och kontrollera canvasen igen innan det stryks.                       */

/*  Om :where() — avgränsningen ligger inuti :where() därför att den
    bidrar med NOLL specificitet. Utan den vore regeln så stark att den
    skulle vinna över knappregeln ovan och göra knappar 18 px i canvasen
    men 14 px på frontend. Nu landar regeln på (0,1,1): stark nog att slå
    Bricks font-size: 0, svag nog att våra egna storlekar står kvar.

    Talet är ACSS brödtextstorlek på desktop, så canvasen visar samma
    storlek som frontend. Ändras ACSS Text → Desktop Base Size ska det
    här talet följa med. Det är enda stället i filen där en ACSS-satt
    storlek upprepas, och det är med vilje: regeln ska fungera även om
    variabeln inte är laddad i canvasen.                                  */

:where(.brx-body.iframe) [class*="brxe-"]:not(h1,h2,h3,h4,h5,h6){
  font-size: 18px;
}


/* --------------------------------------------------------------------------
   3. KNAPPAR
   Träffar .brxe-button, som ALLA Bricks knappelement får automatiskt —
   inklusive mallbibliotekens. Ingen klass behöver skapas eller läggas på.

   Klassnamnet är dubblerat för att gå före Bricks egna
   .bricks-background-primary (gul) och .bricks-background-secondary (rosa),
   som annars vinner. Fast font-size i rem gör att knappen aldrig kan
   kollapsa till noll storlek.
   -------------------------------------------------------------------------- */

.brxe-button.brxe-button,
.brxe-form .bricks-button,
.brxe-form button[type="submit"],
.brxe-form input[type="submit"]{
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px 20px;          /* 12 × 20 px */
  font-family: inherit;
  font-size: 14px;               /* skissens värde, i px — se 2a */
  font-weight: 600;
  line-height: 1.2;

  background-color: var(--primary, #cb3525);
  color: #fff;

  border: 0;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease;
}

/*  HOVER LJUSNAR, den mörknar inte. Rättat 14 okt 2026.

    Här stod var(--base) — oxblod #5a211c. På en mörk sida läser en
    mörkare knapp som avstängd snarare än som aktiv, och texten tappar
    kontrast mot ytan. Nu blandas koncernrött med vitt i stället, vilket
    ger ett tydligt och förutsägbart steg uppåt oavsett palett.

    Textfärgen upprepas med flit: utan den kan ACSS egen hover-färg
    vinna och göra texten mörkröd mot mörkröd botten.                 */
.brxe-button.brxe-button:hover,
.brxe-form .bricks-button:hover,
.brxe-form button[type="submit"]:hover,
.brxe-form input[type="submit"]:hover{
  background-color: color-mix(in oklab, var(--primary, #cb3525) 80%, #fff);
  color: #fff;
}

/* Sekundärknapp: ram i stället för fyllning.
   Träffar både Bricks egen secondary-variant och vår modifierare. */
.brxe-button.bricks-background-secondary,
.brxe-button.simab-btn--sekundar{
  background-color: transparent;
  color: var(--text-color, var(--neutral-ultra-dark, #efece9));
  border: 1px solid var(--neutral-semi-light, #6b625f);   /* skissens ghost-ram */
}

.brxe-button.bricks-background-secondary:hover,
.brxe-button.simab-btn--sekundar:hover{
  background-color: transparent;
  border-color: var(--simab-rod-ljus);
  color: var(--simab-rod-ljus);   /* mörk botten — se rutan vid --simab-rod-ljus */
}


/* --------------------------------------------------------------------------
   4. BRICKS FORMULÄRELEMENT
   ACSS formulärstyling gäller bara WS Form, och vi bygger offertformuläret
   i Bricks eget element. Därför stylas fälten här.
   Kräver ingen egen klass — .brxe-form kommer från Bricks.

   VIKTIGT OM SEKTIONEN: formuläret är ritat på LJUS botten (skissens
   .light = #F2F2F2). Sektionen som formuläret ligger i måste därför ha
   klassen simab-ljus. Ligger formuläret på den mörka sidbotten blir
   fältramen (#DDDEDF mot nästan vitt fält) osynlig och fälten ser ut som
   lösa vita klossar. Det var felet på bilden från bygget 2026-10-14.

   SKISSENS VÄRDEN (mätta i skisser/undersidor.html, kontaktfliken):
     .fgrid  display:grid · 1fr 1fr · gap 18px 20px  (mobil: 1fr)
     .field  display:flex · column · gap 6px
     label   10px · letter-spacing .13em · VERSALT · vikt 400 · #6C7377 · mono
     .box    bg #FAFAFA · ram 1px #DDDEDF · pad 11px 13px · 14px · minhöjd 42px
     .box.tall                                         minhöjd 96px
     .field.full  grid-column 1 / -1   (Beskriv uppdraget + Ritning eller foto)
     knappen ligger UTANFÖR rutnätet, i .formfoot, med noten vid sin sida
   -------------------------------------------------------------------------- */

/* Rutnätet. Gridden läggs på formuläret självt i stället för att förlita sig
   på Bricks procentbreddar per fält — ett grid-item fyller sitt spår, så
   layouten blir densamma oavsett vad fältens breddfält råkar stå på.
   GAP SÄTTS EXPLICIT. ACSS lägger ett eget gap på allt som är flex/grid,
   och uteblivet gap är det fel som återkommit flest gånger i det här bygget. */
.brxe-form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
  align-items: start;
}

/* Fälten som går över båda spalterna: fritexten, filbilagan och knappraden.
   Urvalet är strukturellt (:has) och inte klassbaserat, så det håller även
   om Bricks byter namn på sina omslag. Regeln är verkningslös på element
   som inte är grid-items, därför kan både barn- och ättlingvarianten stå. */
.brxe-form > :has(textarea),
.brxe-form > :has(input[type="file"]),
.brxe-form > :has([type="submit"]),
.brxe-form .form-group:has(textarea),
.brxe-form .form-group:has(input[type="file"]){
  grid-column: 1 / -1;
}

/* Etikett över fält, med skissens 6px mellan dem. Omslaget per fält är
   .form-group i Bricks; urvalet nedan tar både det och ett eventuellt
   annat omslag som innehåller en label. */
.brxe-form > :has(> label),
.brxe-form .form-group{
  display: flex;
  flex-direction: column;
  gap: 6px;                          /* skissens .field gap */
}

.brxe-form :is(
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="url"], input[type="number"], input[type="date"],
  textarea, select
){
  width: 100%;
  box-sizing: border-box;            /* se rutan nedan — utan den spiller
                                        fälten 28px ut över sin spalt */
  padding: 11px 13px;                /* skissens fältpaddning */
  min-height: 47px;                  /* skissens 42 × 1,125 */
  font-family: inherit;
  font-size: 16px;                   /* se noten nedan — INTE skissens 14 */
  line-height: 1.4;
  background-color: #fafafa;         /* skissens fältbotten */
  color: var(--neutral-ultra-dark, #141313);
  border: 1px solid #8b8c8d;         /* skissens #DDDEDF gav 1,20:1 mot
                                        sektionen — fältens kant syntes knappt.
                                        3,01:1 nu, WCAG-kravet för kontroller. */
  border-radius: 0;
}

/* VARFÖR box-sizing MÅSTE STÅ DÄR. Webbläsarens förval för <input> och
   <textarea> är content-box: då räknas width: 100% på INNEHÅLLET, och
   padding och ram läggs utanpå. Fältet blir 100 % + 13 + 13 + 1 + 1 =
   28 px bredare än sin spalt.

   Mätt 15 okt 2026 i 390 px: spalten 358 px, fältet 386 px, sidan fick
   12 px vågrätt överskott och fälten stack ut över högerkanten. Det syntes
   tydligast i mobilen eftersom marginalen där bara är 16 px, men felet
   fanns på skrivbordet också — där rymdes överskottet i rutnätets glapp.

   <select> hade inte problemet. Den är border-box i de flesta webbläsare,
   vilket är varför just tjänstväljaren såg rätt ut medan textfälten inte
   gjorde det. Lita inte på webbläsarens förval här — sätt det själv. */

/* Varför 16px och inte skissens 14px:
   Safari på iOS zoomar in hela sidan när man sätter markören i ett fält
   med font-size under 16px, och zoomar inte ut igen. Det är inget vi kan
   stänga av annat än med maximum-scale, som i sin tur låser nypzoomen för
   den som behöver den. 16px är alltså den undre gränsen för inmatningsfält
   på en sida som ska fungera i mobilen. Skissens 14 gäller fortfarande för
   knappar och noter — de skriver man inte i. */

.brxe-form ::placeholder{
  color: #686d70;                    /* skissens #8A9296 gav 3,03:1 mot
                                        fältbotten — under AA. 5,02:1 nu. */
  opacity: 1;                        /* Firefox dämpar annars en gång extra */
}

.brxe-form :is(input, textarea, select):focus-visible{
  outline: 2px solid var(--primary, #cb3525);
  outline-offset: 2px;
  border-color: var(--primary, #cb3525);
}

/* Etiketten. Färgen ärvs från sektionen och dämpas i stället för att
   spikas till skissens #6C7377. Den dämpade ärvda färgen landar på samma
   gråton på ljus botten, men följer med om formuläret någon gång hamnar
   på mörk botten — en spikad mörkgrå etikett blir osynlig där, och det är
   förmodligen därför etiketterna såg ut att saknas helt på bilden. */
.brxe-form label{
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 11.5px;                 /* skissens 10 × 1,125 */
  font-weight: 400;                  /* skissen, inte 600 */
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.70;        /* 0,55 gav 4,00:1 mot ljus sektion — under AA.
                           0,70 ger 6,57:1 och håller på mörk botten med. */
  margin: 0;
}

.brxe-form textarea{
  min-height: 108px;                 /* skissens 96 × 1,125 */
  resize: vertical;
}

/* FILFÄLTET. Bricks ritar INTE det inbyggda filfältet — det döljs med
   opacity: 0 och ersätts av en egen etikettknapp, <label class="choose-files">.

   Här stod tidigare padding, min-height, bakgrund och streckad ram på
   input[type="file"]. Det var fel på två sätt: utseendet syntes aldrig
   (elementet har opacity 0), men min-height: 47px tog ändå 47 px i höjd.
   Resultatet var ett tomt band mellan etiketten och knappen. Mätt på skarp
   sajt 14 okt 2026: det dolda fältet låg på y 1072→1119.

   Fältet fälls ihop i stället för att döljas med display: none, så att det
   fortfarande går att nå med tangentbord — etikettknappen öppnar filväljaren
   via sitt for-attribut, men fältet självt ska kunna ta emot fokus. */
.brxe-form input[type="file"]{
  height: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

/* Knappen juniorn och besökaren faktiskt ser. Samma formspråk som fälten:
   ljus botten, tunn ram, ingen rundning. */
.brxe-form .choose-files{
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  align-self: flex-start;
  min-height: 47px;
  padding: 0 18px;
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--neutral-ultra-dark, #141313);
  background-color: #fafafa;
  border: 1px solid #dddedf;
  cursor: pointer;
}

.brxe-form .choose-files:hover{
  border-color: var(--primary, #cb3525);
  color: var(--primary, #cb3525);
}

/* Knappraden. Knappen ska stå på egen rad, vänsterställd och i sin egen
   bredd — inte sträckt över hela spalten och inte inklämd vid sista fältet.
   På bilden från bygget låg Skicka inne i rutnätet vid sidan av ett fält. */
/* Urvalet är :has([type="submit"]) och INGET annat.
   Här stod tidigare också :has(button). Den träffade filbilagans grupp,
   eftersom Bricks lägger en <button class="bricks-button remove"> inuti
   .file-result för att ta bort en vald fil. Filgruppen fick då
   align-items: center och etiketten "Ritning eller foto" hamnade i mitten
   medan alla andra etiketter stod till vänster. Mätt 14 okt: etiketten låg
   på x=243 i stället för x=64. */
.brxe-form > :has([type="submit"]){
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 6px;
}

.brxe-form :is(button, input[type="submit"], .bricks-button){
  width: auto;
  flex: 0 0 auto;
}

/* HONEYPOT — klassen simab-honeypot är BORTTAGEN 14 okt 2026.
   Bricks har en egen honeypot-inställning per fält, och den är bättre
   än klassen vi hade. Mätt på skarp sajt samma dag — Bricks lägger in
   en egen style-tagg:

     div.form-group:has(input#form-field-7c3835){
       position:absolute!important; width:1px!important; height:1px!important;
       padding:0!important; margin:0!important; overflow:hidden!important;
       clip:rect(0 0 0 0)!important; clip-path:inset(50%)!important;
       white-space:nowrap!important; opacity:0!important;
       pointer-events:none!important }

   och sätter dessutom tabindex="-1", autocomplete="off" och
   spellcheck="false" på själva fältet. Attributen är minst lika viktiga
   som gömslet: utan tabindex kan den som tabbar sig genom formuläret
   hamna i fällan utan att se den, och utan autocomplete kan webbläsaren
   fylla i den åt en riktig besökare. Det kan en CSS-klass inte göra.

   Slå alltså på honeypot PÅ FÄLTET i Bricks — se steg 6.4.
   Lägg inte tillbaka någon klass här.                                 */

@media (max-width: 767px){
  .brxe-form{ grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   5. KLASSER SOM MÅSTE SKAPAS FÖR HAND I BRICKS
   Bricks klassfält listar bara klasser Bricks känner till. De fyra nedan
   finns bara i den här filen och måste därför SKRIVAS IN i klassfältet
   på elementet — de går inte att välja ur listan.
   -------------------------------------------------------------------------- */

/* 4b. HEADERNS MENY OCH UNDERMENY. Tillagt 14 okt 2026, utökat samma dag.

   Mätt på skarp sajt: undermenyn är ul.brx-dropdown-content med
   bakgrund rgb(255,255,255) — Bricks fabriksvita — noll padding på
   både listan och posterna, länkar på 17,6 px i koncernrött, och
   display: flex.

   TRE RUNDOR AV SAMMA FEL, värt att läsa innan du ändrar något:

   1. Vit panel på mörk sajt, ingen padding, fel textstorlek. Rättat.

   2. Toppnivåns poster fick olika storlek. "Tjänster" har en undermeny
      och renderas då INTE som <a> utan som en toggle, så en regel på
      a träffade alla utom den. Storleken sätts därför på behållaren
      och ärvs ned, i stället för att räknas upp per elementtyp.

   3. Panelen var gles. Den är display: flex, och ACSS lägger ett
      standardgap på flexbehållare — samma fel som tjänstekorten och
      punktlistan hade. gap: 0 nu.

   Länkfärgen var koncernröd på båda nivåerna. Det kommer från ACSS
   Color Assignments där länkfärgen är primary — rätt i löptext, fel i
   en meny. Skissen har benvitt med rött på hover och aktuell sida.

   simab-meny sätts på Nav Menu-elementet i headern, steg 2.1.
   Undermenyn behöver ingen klass — brx-dropdown-content är Bricks egen.
   -------------------------------------------------------------------- */

/* Storleken sätts EN gång och ärvs. Toggle, länk eller span spelar
   ingen roll — allt i menyn blir lika stort. */
.simab-meny{
  font-size: 17px;
  font-weight: 600;
}

.simab-meny :is(a, button, span, .brx-submenu-toggle){
  font-size: inherit;
  font-weight: inherit;
  color: var(--neutral-ultra-dark, #efece9);
  text-decoration: none;
}

.simab-meny :is(a, button, .brx-submenu-toggle):hover,
.simab-meny .current-menu-item > a,
.simab-meny .current_page_item > a{
  color: var(--simab-rod-ljus);   /* mörk header */
}

/* Undermenyn. Panelen svävar över innehållet och är det ENDA stället i
   designen som har en skugga — allt annat är platt med 1 px ram. Utan
   den försvinner panelens kant mot ett foto i heron. */
.brx-dropdown-content{
  display: flex;
  flex-direction: column;
  gap: 0;                       /* ACSS standardgap gjorde panelen gles */
  background-color: var(--simab-yta);
  border: 1px solid var(--simab-linje);
  border-radius: 0;
  padding-block: 6px;
  min-width: 240px;
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.4);
}

.brx-dropdown-content :is(a, .brxe-text-link){
  display: block;
  padding: 11px 20px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--neutral-ultra-dark, #efece9);
  text-decoration: none;
}

.brx-dropdown-content :is(a, .brxe-text-link):hover{
  background-color: var(--simab-linje);
  color: var(--simab-rod-ljus);   /* mörk panel */
}


/* 4c. MENYN I MOBILT LÄGE.
   Omskrivet 14 okt efter mätning. Läs hela rutan innan du ändrar.

   MÄTT under 1024 px:
     nav   = NAV.brxe-nav-nested.simab-meny, display: flex, position: static
     panel = .brx-dropdown-content, position: absolute, bredd 177 px,
             döljs med visibility: hidden och opacity: 0
     toggle = .brx-submenu-toggle och .brxe-toggle finns båda

   Menyn är alltså Bricks **Nav (nested)**, inte det klassiska
   Nav Menu-elementet. Nav (nested) har en EGEN mobilmeny med egna
   inställningar för hur undermenyer ska bete sig.

   DÄRFÖR GÖR DEN HÄR FILEN MEDVETET LITE:
   Ett tidigare försök satte width: 100% och tog bort panelens bakgrund
   under 1024 px. Det hjälpte inte — panelen är absolut positionerad, så
   100 % räknas mot posten den hänger under och inte mot skärmen, och
   resultatet blev 177 px ändå. Att i stället tvinga position: static
   vore värre: panelen döljs med visibility, inte med display, och skulle
   då ta plats i menyn även när den är stängd.

   Reglerna nedan gör bara två saker, och ingen av dem kan krocka med
   Bricks öppna/stäng-mekanik:
     1. panelen får aldrig gå utanför skärmkanten
     2. varje träffyta blir minst 48 px hög

   VILL NI HA PANELEN I FLÖDET i stället för svävande på mobil — alltså
   som ett dragspel inuti mobilmenyn — är det en INSTÄLLNING på Nav
   (nested)-elementet i Bricks, inte CSS. Leta under elementets
   mobilmeny-flik. Lös det där; lappa det inte här.                   */
/* MÄTT PÅ SKARP SAJT 14 OKT 2026, i mobilläge 375 px med menyn öppen.
   Det här är facit — ändra inget här utan att mäta om:

     nav öppen   NAV.brxe-nav-nested.simab-meny.brx-open
     panelen     UL.brxe-block.brx-nav-nested-items
                 position: fixed · 375×812 · flex column
                 background-color: rgb(255, 255, 255)   ← Bricks fabriksvita
                 gap: 24,1023px                         ← ACSS standardgap
                 justify-content: safe center · padding 0
     posterna    5 st LI, 48 px höga
     länken      A.brxe-text-link · 16 px · padding 11px 20px
     "Tjänster"  DIV.brx-submenu-toggle · 17 px
     hamburgaren BUTTON.brxe-toggle.brx-toggle-div
                 strecken = SPAN.brxa-wrap > SPAN.brxa-inner, 4 px höga,
                 background-color ärvd från color
     undermenyn  UL.brx-dropdown-content · position: absolute · 209 px

   DÄRFÖR VAR MENYN OLÄSLIG: panelen är Bricks fabriksvita, och
   avsnitt 4b ger all menytext benvitt — rätt mot den mörka headern,
   osynligt mot en vit panel. Hamburgarens streck har samma färg och
   försvann av exakt samma skäl. Det var alltså vår egen regel som
   slog fel i ett läge ingen hade tittat på.

   OCH GAPET IGEN. Panelen är ett Bricks-block, alltså en flexbehållare,
   och ACSS lade 24,1 px mellan posterna. Femte gången samma fel i det
   här bygget: punktlistan, tjänstekorten, undermenyn, formuläret,
   mobilpanelen. Granskaren fångar det numera.                        */
@media (max-width: 1024px){

  /* PANELEN. Mörk yta i stället för Bricks vita — sajten är mörk, och
     texten är redan benvit. Samma yta som undermenyn i 4b, så menyn
     har en enda ytfärg oavsett läge. */
  .simab-meny .brx-nav-nested-items{
    gap: 0;                            /* mätt 24,1px — se rutan ovan */
    background-color: var(--simab-yta);
    color: var(--neutral-ultra-dark, #efece9);
    padding-block: 8px;
  }

  /* Skiljelinjer mellan posterna. Utan dem flyter raderna ihop när
     gapet är borta. Ingen linje efter sista posten. */
  .simab-meny .brx-nav-nested-items > li + li{
    border-top: 1px solid var(--simab-linje);
  }

  /* Storleken. 16 px är läsbart i en rad högst upp på skärmen, men för
     litet i en meny som fyller hela skärmen och är det enda som syns. */
  .simab-meny .brx-nav-nested-items :is(a, button, span, .brx-submenu-toggle){
    font-size: 19px;
  }

  .brx-dropdown-content{
    min-width: 0;
    max-width: calc(100vw - 32px);
  }

  /* Undermenyn inuti mobilpanelen ska inte se ut som en svävande ruta
     ovanpå menyn — den ligger redan på mörk botten. Ram och skugga bort,
     och en aning ljusare yta så att nivåskillnaden ändå syns.
     Att få den att fällas ut i flödet i stället är en INSTÄLLNING på
     Nav (nested) i Bricks, inte CSS — se rutan längre upp. */
  .simab-meny .brx-dropdown-content{
    border: 0;
    box-shadow: none;
    background-color: var(--simab-linje);
  }

  .simab-meny .brx-dropdown-content :is(a, .brxe-text-link){
    font-size: 17px;
    padding-inline: 24px 20px;
  }

  .simab-meny :is(a, button, .brx-submenu-toggle),
  .brx-dropdown-content :is(a, .brxe-text-link){
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    min-height: 48px;
  }

  /* Posterna i toppnivån får lite mer luft än 48 px minimum. */
  .simab-meny .brx-nav-nested-items > li > :is(a, .brx-submenu-toggle, .brxe-text-link){
    min-height: 56px;
    padding-inline: 24px;
  }

  /* STÄNG-KNAPPEN. Menyn har TVÅ Toggle-element — det är Bricks mönster
     för Nav (nested), inte ett byggfel:
         utanför panelen   aria-label="Öppna"   hamburgaren i headern
         inuti panelen     aria-label="Stäng"   i en egen <li class="menu-item">

     Den andra ligger alltså som en femte post i menylistan och läses som
     ett menyval med tom text — så såg den ut på bilden från bygget.
     Panelen är position: fixed, så knappen kan lyftas ur flödet och
     läggas i hörnet utan att något annat flyttar sig.                  */
  .simab-meny .brx-nav-nested-items > li:has(> .brxe-toggle){
    position: absolute;
    top: 10px;
    right: 10px;
    width: auto;
    border-top: 0;             /* ingen skiljelinje — den är ingen post */
  }

  .simab-meny .brx-nav-nested-items > li > .brxe-toggle{
    min-width: 48px;
    min-height: 48px;
    justify-content: center;
  }
}


/* 5-1. ETIKETTERNA ÄR LYFTA MED SAMMA FAKTOR SOM BRÖDTEXTEN.
   Ändrat 14 okt 2026 på begäran — "Se tjänsten-länkarna känns för små".

   När brödtexten gick från 16 till 18 px den 13 oktober lämnade jag
   de versala monoetiketterna på skissens värden med motiveringen att
   de är märkning och inte lästext. Det var fel tänkt: skissens
   proportion mellan etikett och brödtext ändrades då, och etiketterna
   blev relativt mindre än designen avsåg.

   Alla är nu lyfta med samma faktor 1,125, så förhållandena i skissen
   återställs:

     eyebrow, processnummer, punktnummer   11   → 12,5
     kick, brödsmula, "Se tjänsten"        10,5 → 12
     label                                 12   → 13,5
     etiketten i närliggande-kortet        10   → 11,5
     punktnumrets kolumnbredd              26   → 29

   Lägger du till en ny etikett: utgå från skissens värde gånger 1,125.

   -------------------------------------------------------------------- */

/* 5-0. MARGINALNOLLNING — måste stå FÖRE klasserna nedan.
   Tillagt 13 okt 2026.

   Ett Bricks textelement renderar som <p> och bär då webbläsarens egna
   marginal på 1em upp och ned. Designskissen använder span och div utan
   marginaler, så varje sådan marginal är ett avstånd som inte finns i
   skissen: etiketten trycks ned från kortets överkant, raden i
   punktlistan hamnar ur centrum, "Läs mer" får luft under sig.

   Blocket nollar bara de marginaler skissen inte har. Klassernas egna
   avstånd sätts längre ned och står kvar, eftersom de rör en annan
   egenskap eller kommer senare i filen.

   Lägger du till en ny textklass: ta med den här också.             */
:is(.simab-eyebrow,
    .simab-kick,
    .simab-label,
    .simab-services__more,
    .simab-processkort__nr){
  margin-top: 0;
}

:is(.simab-kick,
    .simab-label,
    .simab-services__more){
  margin-bottom: 0;
}


/* 5a. Etiketter — eyebrows över rubriker och kortmeta. */
.simab-label{
  display: inline-block;
  font-size: 13.5px;              /* skiss 12 × 1,125 */
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--neutral-semi-dark, #2b2726);
}

/* 5b. Tjänstekorten på startsidan — hela utseendet enligt designskissen.
   Värdena är hämtade ur skissen "SIMAB startsida" och ska inte ändras utan
   att skissen ändras först. Juniorkonsulten sätter EN klass på kortet och
   fyller i innehåll — inga färger, storlekar eller avstånd i Bricks. */
/* gap: 0 och padding: 0 är INTE överflödiga rader.

   Ett Bricks-block är en flexbehållare, och ACSS lägger ett
   standardgap på flexbehållare. Utan gap: 0 får alltså varje mellanrum
   i kortet ett påslag som ingen satt med flit — mellan bild och rubrik,
   mellan rubrik och text, mellan text och bottenrad.

   Mätt i skissen 14 okt 2026 på ett kort som är 373 px brett:
     bild    1 → 249      (3:2)
     rubrik  275 → 303    26 px efter bilden
     text    314 → 417    11 px efter rubriken
     botten  437 → 454    20 px efter texten, 30 px till underkant
   Summa 485 px. Varje avstånd kommer ur marginalerna nedan. Inget
   avstånd ska komma från ett gap och inget från padding.

   Samma fel fanns i punktlistan, se avsnitt 5d. Regeln som följer:
   varje klass här som sätter display: flex eller grid sätter också
   gap uttryckligen, även när svaret är noll. Granskaren kontrollerar
   det.                                                                 */
.simab-services__card{
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background-color: var(--simab-yta);     /* RÄTTAT 14 okt — se nedan */
  border: 1px solid var(--simab-linje);
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, border-color .18s ease;
}

/*  Kortet låg tidigare på var(--neutral-ultra-light), vilket renderar
    som EXAKT sidans grund — kortet och sidan fick samma färg och
    rutnätet upplevdes som en enda platt yta. Mätt i skissen 14 okt:
    sidan #141313, kortet #1B1918, ramen #2B2726. Skillnaden är liten
    med flit, men den ska finnas.

    --simab-yta och --simab-linje räknas fram i avsnitt 5e och ger
    steget oavsett färgläge. Sidans grund ska INTE göras svart — den är
    #141313 i skissen och det är kortet som ska lyftas.               */

.simab-services__card:hover{
  transform: translateY(-2px);
  border-color: var(--primary, #cb3525);
}

/*  Skissen dämpar hovern till #4a4341. Vi använder koncernrött i
    stället, samma beslut som för närliggande-kortet 14 okt: kortet är
    en länk och ska svara tydligt. Ett hoverläge som knappt syns är
    inget hoverläge.                                                  */

/* Bildytan. Fast 3:2 så att korten blir lika höga oavsett bildformat.

   RÄTTAT 14 okt 2026. Här stod height: 100% på bilden. Bricks renderar
   Image-elementet som en bar <img class="brxe-image">, alltså UTAN
   omslag, och då har bilden ingen förälder med bestämd höjd att räkna
   procenten mot. Höjden föll tillbaka på bildens egen — mätt 351 px
   där 3:2 skulle gett 160 — och korten blev olika höga och sköt isär
   rutnätet. Safari och Chrome löser dessutom det här fallet olika, så
   felet syntes i den ena men inte i den andra.

   Rätt kombination är width: 100% + aspect-ratio + height: auto. Den
   behöver ingen förälderhöjd alls och ger samma resultat i alla
   webbläsare. height: 100% får bara användas när föräldern har en
   bestämd höjd — vilket omslagsfallet längre ned har, via sin egen
   aspect-ratio.                                                        */
.simab-services__card > :is(img, figure, .brxe-image){
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  margin: 0;
  overflow: hidden;
  object-fit: cover;          /* gäller när elementet SJÄLVT är <img> */
}

/* Renderar Bricks i stället ett omslag med en bild inuti har omslaget
   bestämd höjd från raden ovan, och då är 100 % säkert. */
.simab-services__card :is(figure, .brxe-image) > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* INNERMARGINALERNA LIGGER I MARGIN, INTE I PADDING. Tillagt 14 okt 2026.

   Skissen har en omslagsdiv runt texterna med padding 26/28/30, medan
   Bricks lägger elementen direkt i kortet utan omslag. Padding på
   kortet skulle då också putta in bilden, som ska gå kant i kant.
   Marginal på varje textelement ger samma indrag utan omslag.

   Det betyder också att inget av textelementen ska ha padding satt i
   Bricks. Lämna fälten tomma. */
/*  Indraget sätts på ALLA barn utom bilden, inte på varje klass för sig.

    Skälet: Bricks "Enkel text" renderar som .brxe-text-basic, inte som
    .brxe-text eller <p>. Den gamla regeln räknade upp klassnamn och
    missade därför brödtexten, som hamnade kant i kant med kortet medan
    rubriken låg indragen. Mätt på startsidan 14 okt.

    margin-inline här och margin-block nedan krockar inte med varandra,
    så varje avstånd har exakt ett ställe det kommer ifrån.           */
.simab-services__card > :not(img, figure, .brxe-image){
  margin-inline: 28px;
}

.simab-services__card h3{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-block: 26px 11px;
  transition: color .18s ease;
}

/* Rubriken blir vit när kortet hovras — skissens .svc a:hover h3. */
.simab-services__card:hover h3{
  color: #fff;
}

.simab-services__card > :is(p, .brxe-text, .brxe-text-basic):not(.simab-services__more){
  font-size: 16px;                 /* skiss 14 × 1,125 */
  line-height: 1.6;
  color: var(--neutral-semi-dark, #9e9793);
  margin-block: 0 20px;
}

/* Raden längst ned i kortet. margin-top: auto håller den i underkant
   även när texterna är olika långa.

   TEXTEN ÄR "Se tjänsten →", INTE "Läs mer". Rättat 14 okt 2026 —
   manualen sa fel och bygget följde manualen. Pilen ingår i texten och
   ritas alltså inte av CSS här, till skillnad från kortet för
   närliggande tjänster. */
/* "Se tjänsten". Ändrat 15 okt 2026 på Nils anmärkning: för liten i
   mobilen och svårläst röd mot den mörka kortytan.
   Mätt: --primary gav 3,00:1 mot kortet och 2,44:1 mot frågekortets
   oxblod. Den ljusa röda ger 6,51:1 respektive 5,30:1. */
.simab-services__more{
  margin-block: auto 30px;
  font-size: 13px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--simab-rod-ljus);
}

@media (max-width: 767px){
  .simab-services__more{ font-size: 14px; }
}

/* Sjätte kortet, "Vet du inte vad det heter?".

   Det skiljer sig från de fem andra på FYRA punkter, och alla fyra
   ligger här så att junioren bara behöver sätta modifieraren:

     1. ingen bild — kortet har bara rubrik, text och bottenraden
     2. innehållet centreras lodrätt, eftersom bildytan saknas
     3. rubriken är ren vit och texten laxtonad, inte kortens vanliga
     4. bottenraden är vit och lyder "Beskriv ditt jobb →"

   Kortet markeras med en oxblodsfärgad RAM, aldrig med bakgrund.      */
.simab-services__card--ask{
  border-color: #7a3830;
  justify-content: center;
}

/*  Hovern fyller kortet med oxblod. Skissen ändrar bara ramfärgen, men
    kortet är sektionens uppmaning och ska svara som en knapp snarare än
    som ett kort. Beslutat 14 okt. Skissen är ändrad till samma. */
.simab-services__card--ask:hover{
  background-color: var(--base, #5a211c);
  border-color: var(--primary, #cb3525);
}

/*  Texterna behåller sin kontrast mot den fyllda ytan. */
.simab-services__card--ask:hover :is(p, .brxe-text, .brxe-text-basic){
  color: #f0d8d4;
}

.simab-services__card--ask h3{
  margin-top: 38px;
  color: #fff;
}

.simab-services__card--ask :is(p, .brxe-text){
  color: #ddafa9;
}

.simab-services__card--ask .simab-services__more{
  margin-block-end: 38px;
  color: #fff;
}


/* 5d. Punktlistan på tjänstesidorna — "vad vi gör".
   Värdena kommer ur designskissen "SIMAB undersidor" och ska inte ändras
   utan att skissen ändras först.

   TVÅ klasser, och båda behövs:
     .simab-punkter     på blocket som HÅLLER punkterna
     .simab-punkt-rad   på den loopade raden

   Numret sätts på en namngiven klass, inte på "alla barn". En regel som
   numrerar alla barn sätter ett nummer på vad som helst som ligger i
   behållaren, och missar raderna helt om Bricks lägger ett lager emellan. */
/* RÄTTAT 14 okt 2026 — gap: 0 är inte kosmetika.
   Mätt på legosvetsningssidan: listan hade gap 25,46 px, satt i Bricks
   enligt manualens dåvarande instruktion "Gap: var(--space-s)".

   Raderna var samtidigt helt rätt: 14 px padding, 27 px text, 14 px
   padding = 56 px, precis skissens värde. Problemet var mellanrummet
   MELLAN dem. Varje rad har sin avdelarlinje i underkant, så ett gap
   lägger tomrummet bara på ena sidan av linjen: 14 px från texten
   ovanför, 14 + 25 = 39 px till texten under. Det är därför listan
   lästes som "inte centrerad" — texten var centrerad i sin rad, men
   raden satt inte centrerad mellan linjerna.

   Skissens .doeslist har inget gap alls. Raderna ligger kant i kant och
   avdelaren får då 14 px på var sida.

   Display och riktning sätts också här, så att listan inte kan byggas
   fel i Bricks. Lämna Display, Direction och Gap TOMMA på blocket. */
.simab-punkter{
  counter-reset: simab-punkt;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--neutral-light, #2b2726);
}

/* Raden läggs om till vågrät här, inte i Bricks. Ett Block i Bricks är som
   standard en lodrät flexbehållare, och då hamnar numret OVANFÖR texten. */
.simab-punkter .simab-punkt-rad{
  counter-increment: simab-punkt;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 16px;                                       /* 16 px */
  padding: 14px 2px;                      /* 14 px 2 px */
  border-bottom: 1px solid var(--neutral-light, #2b2726);
}

/* Numret: rött, i monospace, med fast bredd så att texterna linjerar. */
.simab-punkter .simab-punkt-rad::before{
  content: counter(simab-punkt, decimal-leading-zero);
  flex: none;
  width: 29px;                                /* skiss 26 × 1,125 */
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 12.5px;                          /* skiss 11 × 1,125 */
  letter-spacing: 0.08em;
  color: var(--simab-rod-ljus);
}

/* Texten i raden. margin: 0 och line-height är skrivna ut som försäkring,
   inte som rättelse: mätning på skarp sajt 13 okt 2026 gav redan
   marginTop = 0px och fontSize = 15px, alltså skissens värden. ACSS egen
   återställning nollar <p>-marginalen åt oss. Raderna står kvar därför
   att regeln inte ska vila på att en annan stilmall gör jobbet — men de
   löste INTE den rapporterade snedställningen. Står punktlistan fel även
   efter rubrikrättelsen i avsnitt 2: mät radhöjden och hör av dig, gissa
   inte. 15 px × 1,6 + 14 px padding × 2 ska ge exakt 52 px radhöjd. */
.simab-punkter .simab-punkt-rad > *{
  margin: 0;
  font-size: 17px;                            /* skiss 15 × 1,125 */
  line-height: 1.6;                           /* 24 px, ger 52 px radhöjd */
  text-wrap: pretty;                          /* inga ensamma slutord */
}

/* PUNKTLISTAN I MOBILEN. Tillagt 15 okt 2026 på rapporten om konstig
   radbrytning.

   Numret tar 29 px och gapet 16 px, alltså 45 px av radens bredd. Kvar i
   390 px blir 313 px till texten, och på den bredden blir brytningen ojämn:
   en nästan full rad följd av två ord. Mätt i provrendering 15 okt.

   Två saker rättar det. Numret och gapet krymper, vilket ger texten 36 px
   till, och text-wrap: balance jämnar ut raderna i stället för att fylla
   den första så långt det går. Webbläsare som inte kan balance bryter som
   förut — ingen går sönder av raden. */
@media (max-width: 767px){
  .simab-punkter .simab-punkt-rad{
    gap: 10px;
  }
  .simab-punkter .simab-punkt-rad::before{
    width: 23px;
  }
  .simab-punkter .simab-punkt-rad > *{
    text-wrap: balance;
  }
}


/* 5d-0c. SMAL TEXTSPALT — Om SIMAB på startsidan, steg 5.4.
   Ny klass 14 okt 2026.

   Manualen sa "Container → Max width 68ch". En Bricks-container
   centrerar sig själv, så en smalare container hamnar i MITTEN av
   sidan i stället för vid vänsterkanten — Om-sektionen linjerade inte
   med korten ovanför.

   Mätt i skissen: sektionens innehåll börjar på x=132, exakt samma som
   tjänstekorten, och blocket har margin: 0 med max-width 772 px.
   Alltså vänsterställt, inte centrerat.

   Klassen sätts på ett BLOCK inuti containern. Containern lämnas
   orörd — den behåller sin fulla bredd och sin centrering, precis som
   på alla andra sektioner.

   Radlängden inuti kommer från ACSS 65ch och ska inte sättas här.   */
.simab-smalspalt{
  max-width: 772px;
  margin-inline: 0 auto;
}


/* 5d-0b. SEKTIONSHUVUDET med knapp till höger — startsidans tjänstesektion.
   Ny klass 14 okt 2026.

   Mätt i skissen: huvudet är en vågrät flexrad med textblocket till
   vänster (vinjett, H2, intro) och ghost-knappen till höger, bottenlinjerad
   mot intron. Knappen låg i manualen EFTER rutnätet — den ska ligga
   före, i huvudet.

   align-items: flex-end gör att knappen linjerar med intron nederkant
   och inte med rubriken. gap: 24px, och textblocket tar resten.

   Under 768 px bryter raden och knappen hamnar under texten.          */
.simab-sektionshuvud{
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 34px;
}

.simab-sektionshuvud > :first-child{
  flex: 1 1 320px;
}


/* 5d-0. Sektionsintron — meningen under H2 i en sektions huvud.
   Skissens .sechead p. Utan klassen får den brödtextens färg och full
   radlängd; med den blir den dämpad och bryter vid 58 tecken, som i
   skissen. Tillagd 14 okt 2026. */
.simab-sektionsintro{
  margin: 12px 0 0;
  font-size: 17.5px;                               /* skiss 15,5 × 1,125 */
  max-width: 58ch;
  color: var(--neutral-semi-dark, #9e9793);
}


/* 5d-1. Brödsmulorna över heron på tjänstesidorna.
   Tillagt 13 okt 2026. Manualen sa tidigare "inget, Bricks eget element"
   om brödsmulan, vilket gav den brödtextens 16 px i sidans vanliga färg.
   Skissen har 10,5 px versal monospace i dämpad grå — alltså 50 % för
   stor och för ljus i bygget, på varje tjänstesida. */
.simab-brodsmulor{
  margin: 0;
  padding-block: 12px;
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 12px;                                /* skiss 10,5 × 1,125 */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7c7572;
}

.simab-brodsmulor a{
  color: inherit;
  text-decoration: none;
}

.simab-brodsmulor a:hover{
  color: var(--simab-rod-ljus);   /* mörk sidbotten */
}


/* 5d-2. Etiketter — två olika, och de är inte utbytbara.
   simab-eyebrow  står över H1 i heron        — ljus laxton
   simab-kick     står över H2 i en sektion   — koncernröd */
.simab-eyebrow{
  display: block;
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 12.5px;                          /* skiss 11 × 1,125 */
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--simab-rod-ljus);
  margin-bottom: 18px;                         /* 18 px */
}

.simab-kick{
  display: block;
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 12px;                             /* skiss 10,5 × 1,125 */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary, #cb3525);
}


/* 5d-3. Ingressen under H1 på tjänstesidorna. */
.simab-ingress{
  font-size: 19px;                            /* skiss 17 × 1,125 */
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 0 28px;                             /* 28 px */
  color: var(--neutral-semi-dark, #c3bcb8);
}


/* 5d-4. Processkorten 01–04. Ligger på den ljusa sektionen och är VITA kort
   med egen ram — inte genomskinliga rutor. */
.simab-processkort{
  background-color: #fff;
  border: 1px solid #dddedf;
  padding: 22px 22px 26px;             /* 22 22 26 */
}

.simab-processkort__nr{
  display: block;
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 12.5px;                          /* skiss 11 × 1,125 */
  letter-spacing: 0.14em;
  color: var(--primary, #cb3525);
  margin-bottom: 12px;                          /* 12 px */
}

.simab-processkort h3{
  font-size: 16.5px;                           /* 16.5 px */
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: #141313;
}

.simab-processkort p,
.simab-processkort .brxe-text{
  margin: 0;
  font-size: 15.5px;                           /* skiss 13,8 × 1,125 */
  line-height: 1.55;
  color: #41474a;
}


/* 5e. YTOR — kort och paneler.
   Designbeslutet har två mörka nivåer: grafit #141313 är sidans grund och
   kol #1B1918 är kort och paneler. Skillnaden är liten med flit, men utan
   den ser sidan platt ut — det är därför kortsektionerna upplevs som att
   de "saknar färg".

   Steget räknas fram i stället för att skrivas som en nyans ur paletten.
   color-mix() blandar FÄRDIGRENDERADE värden, så uttrycket nedan ger
   grunden ett litet steg mot textfärgen oavsett läge: i mörkt läge blir
   det ljusare (kol på grafit), i ljust läge mörkare. Det kan alltså inte
   bli osynligt om paletten ändras, och det kräver ingen nyans vars
   exakta namn skiljer sig mellan ACSS-versioner. */
:root{
  --simab-yta: color-mix(in oklab,
    var(--neutral-ultra-light, #efece9) 94%, var(--neutral-ultra-dark, #141313));
  --simab-linje: color-mix(in oklab,
    var(--neutral-ultra-light, #efece9) 82%, var(--neutral-ultra-dark, #141313));

  /* RÖTT PÅ MÖRK BOTTEN. Koncernröda --primary är gjord för ljus botten
     och faller igenom på mörk: mätt 15 okt 2026 ger den 3,00:1 mot
     kortytan och 2,44:1 mot oxblod. WCAG AA kräver 4,5:1 för text.

     Den här tonen är inte påhittad — det är exakt den ljusa röd skissen
     redan använder i vinjetten. Designen hade alltså löst problemet en
     gång; den lösningen gäller nu överallt där rött ligger på mörkt.

     REGELN, kort: --primary på ljus botten, --simab-rod-ljus på mörk.
     De är inte utbytbara åt andra hållet — den ljusa röda ger bara
     2,12:1 mot den ljusa sektionen och ska aldrig användas där. */
  --simab-rod-ljus: #e8927f;
}


/* 5f. Tjänstekortet i loopen — närliggande tjänster, steg 3.7.
   Omskrivet 13 okt 2026 i två omgångar. Så här ser kortet ut nu:

     ┌──────────┬────────────────────────┬───┐
     │          │  TJÄNST                │   │
     │  foto    │  Industrimontage       │ → │
     │          │                        │   │
     └──────────┴────────────────────────┴───┘

   Vågrät rad med foto till vänster, liten versal etikett och tjänstens
   namn i mitten, röd pil till höger. Rutnätet är 120px 1fr auto.

   Fotot är en miniatyr i 4:3, inte en bildyta i kortets bredd. Kortet
   ska läsas som en navigeringsrad i foten av en tjänstesida — stora
   bilder här konkurrerar med heron högre upp på samma sida.

   PILEN RITAS AV CSS. Lägg inte in ett eget element för den.

   Kortet har alltså TRE element: bilden, etiketten och rubriken.
   Höjden är 126 px: 90 px foto plus 18 px padding upp och ned. Den
   står inte skriven någonstans utan faller ut av fotots proportion,
   så ett kort med lång rubrik blir aldrig högre än ett med kort.      */
.simab-kort{
  position: relative;                /* krävs för länkoverlayen längre ned */
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 5px 20px;
  padding: 18px 24px;
  background-color: var(--simab-yta);
  border: 1px solid var(--simab-linje);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease;
}

/* HOVER — koncernrött, inte skissens #4a4341.
   Ändrat 14 okt 2026 på begäran. Skissen dämpar ramen till en gråbrun
   ton som knappt syns mot kortets egen yta; kortet är en länk och ska
   svara tydligt. Rött knyter dessutom ihop hovern med pilen och med
   knapparna, som redan är koncernröda. Designskissen är ändrad till
   samma värde — skissen först, filen efter. */
.simab-kort:hover{
  border-color: var(--primary, #cb3525);
}

/* Pilen flyttar sig en aning och mörknar. Rörelsen är liten med flit:
   den ska läsas som "det här går att klicka", inte som en animation. */
.simab-kort::after{
  transition: transform .18s ease, color .18s ease;
}

.simab-kort:hover::after{
  transform: translateX(4px);
}

/* LÄNKEN TÄCKER HELA KORTET — inklusive pilen.
   Pilen ritas med ::after och är därmed en del av kortet, inte ett eget
   element. Ett pseudoelement kan aldrig vara en egen länk. Klick på
   pilen fungerar alltså bara om HELA kortet är länken.

   Sätter du Link på blocket lägger Bricks antingen ut blocket som <a>
   eller skjuter in en genomskinlig överliggande länk. Reglerna nedan ser
   till att den överliggande varianten verkligen täcker hela ytan, pilen
   inräknad, oavsett vilken väg Bricks väljer.

   Sitter Link på RUBRIKEN i stället för på blocket är bara rubriktexten
   klickbar, och pilen blir död yta. Det är det vanligaste felet här. */
.simab-kort > a[class*="link"],
.simab-kort > .bricks-link-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* VÄG 2: Link på rubriken i stället för på blocket.
   Går Link inte att sätta på blocket i din Bricks-version, sätt den på
   rubriken — regeln nedan sträcker ut den länken över hela kortet ändå.
   Tekniken kallas stretched link: ett tomt ::after på länken läggs
   absolut över kortets hela yta. Kortet blir klickbart överallt, pilen
   inräknad, men bara rubriktexten står i tabbordningen. Det är rätt
   beteende — en skärmläsare ska läsa upp "Industrimontage", inte hela
   kortet inklusive etiketten.

   Kortet har position: relative högst upp i regeln, så utsträckningen
   stannar innanför kortet.

   BÅDA VÄGARNA FUNGERAR. Använd EN av dem, aldrig två — en länk inuti
   en länk är ogiltig HTML och webbläsaren bryter isär den på egen hand,
   med oförutsägbart resultat.                                          */
.simab-kort h3 a::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Rubriklänken ärver kortets textfärg — den ska inte se ut som en länk
   i texten, eftersom hela kortet är klickytan. */
.simab-kort h3 a{
  color: inherit;
  text-decoration: none;
}

/* Fotot. Spänner över båda textraderna i kolumn 1. */
.simab-kort > :is(img, figure, .brxe-image){
  grid-column: 1;
  grid-row: 1 / 3;
  display: block;
  width: 120px;
  aspect-ratio: 4 / 3;
  height: auto;               /* inte 100 % — se 5b för hela resonemanget */
  margin: 0;
  overflow: hidden;
  object-fit: cover;
}

.simab-kort :is(figure, .brxe-image) > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pilen. Spänner över båda raderna i kolumn 3. */
.simab-kort::after{
  content: "\2192";
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 28px;                 /* skissen hade 14 — fördubblat 14 okt
                                      på begäran, pilen är kortets enda
                                      signal om att raden är klickbar */
  color: var(--simab-rod-ljus)   /* mörkt kort — 3,00:1 förut */;
}

/* Etiketten — översta raden i kolumn 2. Satt på elementtyp så att den
   inte kan glömmas bort i loopen. */
.simab-kort p,
.simab-kort .brxe-text{
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 11.5px;               /* skiss 10 × 1,125 */
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--neutral-semi-dark, #9e9793);
}

/* Rubriken — andra raden i kolumn 2. */
.simab-kort h3{
  grid-column: 2;
  grid-row: 2;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--neutral-ultra-dark, #141313);   /* ljusa termer — renderar benvitt */
}


/* 5f-2. HERO-SLÖJAN — steg 5.2, startsidan.
   OMSKRIVEN 14 okt 2026. Klassen sitter nu på SEKTIONEN, inte på ett
   block inuti den.

   FELET SOM RÄTTAS
   Klassen lade slöjan som background-image på ett vanligt block i
   flödet. Ett sådant block är bara så stort som sitt innehåll plus sin
   padding, och ligger dessutom innanför sektionens egen padding — så
   toningen täckte en rektangel mitt i heron med fotot synligt runt om.
   Designskissen har slöjan som ett absolut positionerat lager över hela
   heron (position:absolute; inset:0). Det var den detaljen jag tappade
   när jag översatte skissen till en klass.

   VAD SLÖJAN ÄR
   Hero-sektionen har ett foto som bakgrund och texten ligger ovanpå.
   Ett foto har ljusa och mörka partier, så vit text blir läsbar på ett
   ställe och försvinner på ett annat — och det ändrar sig så fort fotot
   byts. Slöjan är ett lager mellan fotot och texten: nästan
   heltäckande till vänster där texten står, nästan genomskinlig till
   höger där fotot ska synas.

   Fyra hållpunkter ur skissen:
     0 %   94 % täckning   texten börjar här
     38 %  86 %            fortfarande lugn botten
     78 %  34 %            fotot tar över
     100 % 15 %            nästan rent foto

   HUR DEN ÄR BYGGD
   ::before med inset: 0 täcker sektionens hela ruta — hela bredden,
   hela höjden, oavsett vilken padding ACSS lägger på sektionen. Barnen
   lyfts ett steg i z-led så att texten hamnar ovanpå toningen.

   Det betyder också att det extra blocket mellan sektionen och
   containern INTE behövs längre. Ett element mindre att bygga och ett
   mindre att sätta fel klass på.

   Bricks overlay-funktion ska fortfarande inte användas: den lägger en
   jämn ton över hela ytan, och då tappar fotot sin verkan.

   Tjänstesidornas hero har INGEN slöja. Där ligger foto och text sida
   vid sida i ett rutnät, inte ovanpå varandra.                         */
.simab-hero-sloja{
  position: relative;
}

.simab-hero-sloja::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--simab-hero-veil);
  pointer-events: none;
}

/* Innehållet över toningen. Gäller sektionens direkta barn, alltså
   containern — inte varje element inuti den. */
.simab-hero-sloja > *{
  position: relative;
  z-index: 1;
}


/* 5f-3. JOBBKORTET på startsidan — steg 5.5. Ny klass 14 okt 2026.

   Sektionen låg direkt på sidans grund utan yta och utan ram, med ett
   gap mellan foto och text. Mätt i skissen: blocket är ett KORT precis
   som tjänstekorten — bakgrund #1B1918, ram #2B2726, och fotot går
   kant i kant mot textspalten utan mellanrum.

     rutnät    528 / 646 px av 1176   ≈ 0,82fr 1fr
     gap       0
     textens padding  34 / 36 / 38

   Samma fel som tjänstekorten hade: ytan låg på sidans grund och
   sektionen blev platt. Klassen sätter allt — lämna Display, Grid
   template columns, Gap, bakgrund och ram TOMMA i Bricks.            */
.simab-jobbkort{
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  gap: 0;
  background-color: var(--simab-yta);
  border: 1px solid var(--simab-linje);
}

/*  Fotot. aspect-ratio i stället för height: 100 % — samma skäl som i
    avsnitt 5b: en procenthöjd kräver en förälder med bestämd höjd, och
    den finns inte här. */
.simab-jobbkort > :is(img, figure, .brxe-image){
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  min-height: 280px;
  margin: 0;
  object-fit: cover;
}

.simab-jobbkort :is(figure, .brxe-image) > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*  Textspalten. Centreras lodrätt mot fotot. */
.simab-jobbkort > :not(img, figure, .brxe-image){
  align-self: center;
  padding: 34px 36px 38px;
}


/* 5g. CTA-bandet — steg 3.7.
   UNDANTAG FRÅN LJUSA TERMER: oxblod är en huvudfärg och vänder INTE med
   färgschemat. Bandet är därför mörkt även i ljust läge, och texten på det
   måste vara ljus i BÅDA lägena. Den skrivs som ett fast värde med flit —
   en vändande variabel skulle göra texten mörk på mörkt den dag sajten
   visas i ljust läge. */
.simab-cta{
  background-color: var(--base, #5a211c);
  color: #efece9;
  padding-block: 44px;                            /* 44 px — skissens värde */
}

.simab-cta p,
.simab-cta .brxe-text{
  margin: 10px 0 0;
  font-size: 17.5px;                           /* skiss 15,5 × 1,125 */
  max-width: 52ch;
  color: #e4c0ba;
}

/* Raden i bandet. Klassen ersätter fyra inställningar i Bricks —
   Display, Direction, Justify content och Align items — och sätter
   dessutom min-width på textblocket, vilket inte går att nå i Bricks
   utan att öppna ett fält till. Tillagd 14 okt 2026.

   Första barnet är textblocket med rubrik och brödtext, resten är
   knappar. flex: 1 1 300px betyder: ta all plats som blir över, men
   bryt till egen rad under 300 px i stället för att klämmas ihop. */
.simab-cta__rad{
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 34px;
}

.simab-cta__rad > :first-child{
  flex: 1 1 300px;
}

.simab-cta h2{
  margin: 0;
  color: inherit;
  font-size: clamp(22px, 3.1vw, 32px);               /* skissens h2-skala */
  line-height: 1.1;
}


/* 5h. LJUS SEKTION — process och kontakt.
   Ersätter den tidigare instruktionen om enbart scheme--light.

   scheme--light säger bara VILKEN halva av light-dark() som ska gälla.
   Den målar ingenting. En sektion utan egen bakgrund förblir därför
   genomskinlig och visar sidans mörka grund — klassen ser ut att inte
   fungera, fast den gör precis det den ska.

   ACSS egen dokumentation: sektionen "should have explicitly defined
   background and foreground colors".

   Klassen nedan gör båda sakerna i ett namn: byter schema OCH sätter yta
   och text. Inuti den plockar varje light-dark() sin ljusa halva, så
   ACSS nyanser fortsätter att gälla — inget är hårdkodat utom reservvärdena. */
.simab-ljus{
  color-scheme: light;
  background-color: var(--bg-ultra-light, #f2f2f2);
  color: var(--neutral-ultra-dark, #141313);
}


/* 5i. KONTAKTSIDAN — kontaktkort, nyckelrader och kartrad. Steg 6.5.

   Fyra klasser i stället för ett trettiotal handsatta Bricks-fält. Skälet
   är detsamma som för punktlistan och tjänstekorten: varje rad som juniorn
   sätter i Bricks är en rad som kan bli fel, och nyckelraden återkommer sex
   gånger på sidan — tre i kontaktkortet, tre i adressblocket.

   GAP SÄTTS EXPLICIT PÅ ALLA FYRA. Ett Bricks-block är en flexbehållare
   och ACSS lägger ett standardgap på flexbehållare. Uteblivet gap är det
   fel som återkommit flest gånger i det här bygget.

   Värdena är mätta i skissen (kontaktfliken i skisser/undersidor.html)
   den 14 oktober 2026:
     .card    bg #fff · ram 1px #DDDEDF · padding 24px 26px 28px
     .person  flex · gap 16px · align center · margin-bottom 16px
     .avatar  56×56 · oxblood · vit text · Onest 700 20px
     .kv      flex · gap 16px · align baseline · padding 12px 0 · ram-topp 1px
     .kv .k   mono 11,5px · .13em · VERSALT · #8B9296 · bredd 104px · krymper ej
     .kv .v   17px · vikt 500
     .kv .v small  13px · vikt 400 · #41474A · egen rad
     .maprow  grid 1.25fr .75fr · gap 2px · bg #DDDEDF · ram 1px
     .mapbox  minhöjd 280px
   -------------------------------------------------------------------------- */

/* Kortet. Ligger på en simab-ljus-sektion, så ytan är vit mot den ljusgrå. */
.simab-kontaktkort{
  display: flex;
  flex-direction: column;
  gap: 0;                            /* raderna har egen padding — se .simab-kv */
  background-color: #fff;
  border: 1px solid #dddedf;
  padding: 24px 26px 28px;
}

/* Kortets och adressrutans överrubrik använder den BEFINTLIGA klassen
   simab-label — juniorn skriver alltså samma klassnamn som i sidfoten.

   Inuti de här två rutorna får den dock skissens kortetikett: mono,
   11,5px, dämpad grå. Det är samma form som nyckeln i .simab-kv, vilket
   är meningen — etiketten över raderna och nycklarna i raderna är ett och
   samma uttryck i skissen.

   Överskrivningen är AVSIKTLIGT begränsad till de här två behållarna.
   Sidfotens simab-label ska fortsätta vara 13,5px Figtree 600, och skulle
   ändras här om regeln inte var inskränkt. Därför ingen ändring i 5a. */
.simab-kontaktkort > .simab-label,
.simab-kartrad > :last-child > .simab-label{
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: #8b9296;
  margin-bottom: 12px;
}

/* Personraden: initialrutan till vänster, namn och roll till höger.
   Raden har exakt TVÅ barn — rutan först, textblocket sedan. Det är
   därför barnen går att styla på position i stället för på egna klasser. */
.simab-kontaktkort__person{
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}

/* Initialrutan. flex: none gör att den inte krymper när namnet blir långt. */
.simab-kontaktkort__person > :first-child{
  flex: none;
  width: 56px;
  height: 56px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  background-color: var(--base, #5a211c);
  color: #fff;
  font-family: var(--font-heading, "Onest", sans-serif);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
}

/* Namn och roll. Textblocket är ett Block med två Text-element. */
.simab-kontaktkort__person > :last-child{
  display: flex;
  flex-direction: column;
  gap: 0;
}

.simab-kontaktkort__person > :last-child > :first-child{
  font-family: var(--font-heading, "Onest", sans-serif);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: #141313;
  margin: 0;
}

.simab-kontaktkort__person > :last-child > :last-child{
  font-size: 13.5px;
  color: #41474a;
  margin: 0;
}

/* Nyckelraden. Används både i kontaktkortet och i adressblocket.
   Exakt TVÅ barn: nyckeln först, värdet sedan.
   align-items: baseline gör att den lilla versala nyckeln linjerar med
   värdets första rad i stället för att flyta i mitten av en hög rad. */
.simab-kv{
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid #dddedf;
}

/* I KONTAKTKORTET har varje nyckelrad linje ovanför, även den första —
   den skiljer raderna från personraden. Så ser skissen ut.

   I ADRESSRUTAN ligger första raden direkt under etiketten och ska INTE
   ha linje ovanför. Urvalet är "nyckelraden som följer direkt på
   etiketten", vilket är precis vad det ser ut att vara.

   Här stod tidigare :first-of-type. Det var fel: :first-of-type räknar
   på TAGGNAMN, inte på klass. Första div:en i rutan är etiketten, så
   regeln träffade ingenting — mätt och verifierat 14 okt 2026. */
.simab-kartrad > :last-child > .simab-label + .simab-kv{
  border-top: 0;
  padding-top: 0;
}

.simab-kv > :first-child{
  flex: none;
  width: 104px;
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8b9296;
  margin: 0;
}

/* Värdet. flex-direction och gap sätts även här, för värdet är ibland ett
   Block med två Text-element (adressens andra rad, noten om e-posten) och
   ett Bricks-block är flex MED column och ACSS gap. Utan de två raderna
   får underraden ett påslag ingen satt med flit — mätt till 34px i
   provrenderingen 14 okt 2026. */
.simab-kv > :last-child{
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 17px;
  font-weight: 500;
  color: #141313;
  margin: 0;
}

/* Telefon och e-post är länkar men ska se ut som text — skissen har dem i
   samma ton som övriga värden, inte i ACSS länkfärg. Understrykningen
   kommer vid hover så att det ändå syns att de går att klicka. */
.simab-kv a{
  color: inherit;
  text-decoration: none;
}

.simab-kv a:hover,
.simab-kv a:focus-visible{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Underraden i ett värde — postadressens andra rad, en not om e-posten.
   Byggs som ett eget Text-element under värdet, alltså ett värdeblock med
   två Text-element i stället för ett. */
.simab-kv > :last-child > :not(:first-child),
.simab-kv > :last-child small{
  display: block;
  font-weight: 400;
  font-size: 13px;
  color: #41474a;
  margin-top: 2px;
}

/* Kartraden. Hårstrecken mellan rutorna är rutnätets 2px gap med en grå
   bakgrund under — inte sex ramar som ska linjera. Flyttar man en ruta
   följer linjerna med av sig själva. */
.simab-kartrad{
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 2px;
  background-color: #dddedf;
  border: 1px solid #dddedf;
  margin-top: 28px;
}

/* Kartrutan: fyller sitt spår och är minst 280px hög. iframe:en från
   OpenStreetMap har egna width/height i sin kod — de skrivs över här,
   annars blir kartan 425px bred mitt i en bredare ruta.

   Både rutan och Code-elementets eget omslag är rutnät. Ett rutnätsbarn
   sträcks som standard, så iframe:en fyller höjden utan att någon
   höjd behöver räknas ut. Det är med flit och inte en omväg:
   height: 100% kräver att föräldern har en bestämd höjd, och på ett
   element vars höjd kommer av innehållet löser Safari och Chrome det
   olika. Exakt det felet gjorde tjänstekortets bild 351px hög i Safari
   den 14 oktober. Rutnätet har inte det problemet — height nedan är
   bälte och hängslen, inte det som bär. */
.simab-kartrad > :first-child,
.simab-kartrad > :first-child > *{
  display: grid;
  gap: 0;
}

.simab-kartrad > :first-child{
  min-height: 280px;
  background-color: #e8eaea;
}

.simab-kartrad iframe{
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  border: 0;
}

/* Adressrutan vid kartans sida. */
.simab-kartrad > :last-child{
  display: flex;
  flex-direction: column;
  gap: 0;
  background-color: #fff;
  padding: 24px 26px;
}

/* Adressrutans överrubrik stylas tillsammans med kortets, längre upp
   i det här avsnittet — en regel för båda. */

@media (max-width: 767px){
  .simab-kartrad{ grid-template-columns: 1fr; }
  .simab-kv{ flex-direction: column; gap: 2px; }
  .simab-kv > :first-child{ width: auto; }
}


/* 5j. SEKTIONSLINJERNA. Tillagt 14 okt 2026 efter frågan "hur kommer de
   grå linjerna fram?". Svaret var: de gjorde de inte. Varken child-temat
   eller Bricks satte någon ram — linjerna fanns bara på de sidor där någon
   råkat sätta en ram för hand på sektionen i Bricks. Därför spretade de.

   DESIGNEN HAR INTE EN LINJE MELLAN VARJE SEKTION. Mätt i alla tre
   skisserna sitter den på fyra ställen, och bara där:

     header            border-bottom      (header.site / header.top)
     brödsmulebandet   border-bottom      (.crumbs)
     heron             border-bottom      (.thero / .chero / .phero)
     sidfoten          border-top         (footer.site / footer.bot)

   Mellan innehållssektionerna — "Vad vi gör", "Så går det till",
   närliggande tjänster — finns INGEN linje. Lägg inte till någon.
   Startsidan har varken brödsmula eller linje under sitt fotohero.

   Header och sidfot behöver ingen klass: Bricks ger dem #brx-header och
   #brx-footer. De två andra får klassen simab-bandlinje, se steg 2.1. */

#brx-header{
  border-bottom: 1px solid var(--simab-linje);
}

#brx-footer{
  border-top: 1px solid var(--simab-linje);
}

/* Sätts på SEKTIONEN, inte på brödsmuleelementet — annars blir linjen
   bara så bred som texten.

   ETT KLASSNAMN, TVÅ LINJER. Klassen sätts på brödsmulebandet, och
   sektionen DIREKT EFTER — heron — får sin linje automatiskt.

   Skälet är erfarenhet, inte elegans: första versionen krävde klassen på
   båda sektionerna, och den andra glömdes bort redan samma dag. Två
   handgrepp per sida gånger nio sidor är arton tillfällen att missa ett.
   Ordningen brödsmula → hero → innehåll är densamma på varje undersida
   (steg 3.4, 6.5, 7.1, 7.2, 7.3), så granneregeln kan inte träffa fel.

   Startsidan har ingen brödsmula, får alltså ingen klass, och ska heller
   inte ha någon linje under sitt fotohero. Det stämmer av sig självt.

   Behöver något annat band en linje: sätt klassen där också. Den fungerar
   fristående. */
.simab-bandlinje,
.simab-bandlinje + .brxe-section,
.simab-bandlinje + section{
  border-bottom: 1px solid var(--simab-linje);
}


/* 5k. SOCIAL IKON I SIDFOTEN. Tillagt 15 okt 2026 — Facebook-sidan.

   Fanns varken i skissen eller i manualen tidigare; Facebook nämndes bara
   i steg 8.2 som företagets enda sociala kanal. Formgivningen nedan följer
   sidans befintliga språk: platt, 1px ram, ingen rundning, benvit text som
   blir röd på hover.

   VARFÖR IKONEN BLEV RÖD I BYGGET: den ärvde länkfärgen. Två saker rättar
   det — regeln nedan sätter färgen, och juniorn ska välja rätt glyf:
   bokstaven f ensam (fa-facebook-f), inte den fyllda kvadratlogotypen
   (fa-facebook / fa-facebook-square). Den fyllda kvadraten blir en röd
   platta med ett urstansat f, vilket är det som syns på bilden.

   Mätt mot sidfotens botten: benvit 14,86:1, ljus röd 7,37:1. Kravet för
   grafik är 3:1, så båda har god marginal.

   RUTAN är med för att ikonen inte ska bli ensam och vilsen i en sidfot
   som annars bara har textlänkar — och för att ge 48px träffyta. */
.simab-social{
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 48px;
  height: 48px;
  color: var(--neutral-ultra-dark, #efece9);
  border: 1px solid var(--simab-linje);
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease;
}

.simab-social:hover,
.simab-social:focus-visible{
  color: var(--simab-rod-ljus);
  border-color: var(--simab-rod-ljus);
}

/* Bricks ikonelement renderar antingen ett <i> med ikonfont eller en
   inline-SVG. Båda ska ärva färgen och ha samma storlek. */
.simab-social :is(i, svg){
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 1;
  color: inherit;
  fill: currentColor;
}


/* 5c. Loggan — enda stället --simab-orange får förekomma.
   Gäller bara om loggan ligger som inline-SVG. Är den en <img> behövs
   ingenting: filen har färgen inbakad. */
.simab-logo path{
  fill: var(--simab-orange);
}


/* --------------------------------------------------------------------------
   6. TILLGÄNGLIGHET
   -------------------------------------------------------------------------- */

/* Synlig fokusmarkering överallt där ingen egen är satt. */
:focus-visible{
  outline: 2px solid var(--primary, #cb3525);
  outline-offset: 2px;
}

/* Respektera systeminställningen för reducerad rörelse. */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: .01ms !important;   /* undantag: tillgänglighetskrav */
    animation-iteration-count: 1 !important;    /* undantag: tillgänglighetskrav */
    transition-duration: .01ms !important;      /* undantag: tillgänglighetskrav */
    scroll-behavior: auto !important;           /* undantag: tillgänglighetskrav */
  }
}


/* ==========================================================================
   LJUSA SEKTIONER — RÄTTAD 12 OKTOBER 2026
   Tidigare stod här att scheme--light räcker och att ingen CSS behövs.
   Det var fel, och det är orsaken till att ljusa sektioner inte blivit ljusa.

   scheme--light sätter color-scheme: light på sektionen. Det avgör vilken
   halva av varje light-dark() som gäller — det målar ingen bakgrund. Utan
   egen bakgrund är sektionen genomskinlig och visar sidans mörka grund.

   ACSS dokumentation: sektionen "should have explicitly defined background
   and foreground colors".

   Använd därför klassen .simab-ljus (avsnitt 5h). Den byter schema och
   sätter yta och text i ett och samma klassnamn.

   Använd INTE Force Light Scheme i ACSS-dashboarden för det här — det
   fältet pekar ut en selektor och kräver att klassen redan finns.
   ========================================================================== */