/*
  Det theme.json inte kan uttrycka: klibbig topp, en fot som stannar nederst
  nar innehallet ar kort, och navigeringens aktiva streck. Handoffen:
  .superpowers/sdd/2026-09-04-wordpress-plugin/handoff-README.md, avsnitten
  "Header, all routes" och "Footer, all routes".

  Varje matbart varde - farg, mellanrum, typsnittsstorlek, radie - kommer ur
  WordPress egna anpassade egenskaper (--wp--preset--... fran presets,
  --wp--custom--... fran settings.custom i theme.json). Ingen hex-kod och
  ingen pixelstorlek star har som litteral.
*/

/*
  Kolumnen star pa .wp-site-blocks och inte pa body. Karnans
  get_the_block_template_html() returnerar
  '<div class="wp-site-blocks">' . $content . '</div>', alltsa ar <main> ett
  barnbarn till body och inte ett barn. "body > main" matchade ingenting:
  body blev 100dvh hog, men dess enda flexobjekt var omslaget, som inte
  vaxte, och foten lag kvar direkt under innehallet med tom sidbotten under
  sig. Omslaget finns enligt karnans egen kommentar just for att teman ska
  kunna traffa ".wp-site-blocks > *".

  min-height: 100dvh, inte 100vh: pa mobil gor webblasarens egna falt
  (adressfalt, verktygsfalt) att 100vh blir hogre an det som faktiskt syns,
  och en kolumn som racker exakt till 100vh kan da hoppa nar falten visas
  eller doljs vid scroll. 100dvh foljer det faktiskt synliga.
*/
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/*
  Karnans WP_Theme_JSON skriver for roten
  ":where(.wp-site-blocks) > * { margin-block-start: <blockGap>; ... }" sa
  lange settings.spacing.blockGap ar satt - och "appearanceTools": true satter
  den via APPEARANCE_TOOLS_OPT_INS. Utan nollstallningen far <main> och
  <footer> en marginal ovanfor sig, sa toppens kant och bandens egen luft
  skiljs av en remsa sidbotten som handoffen inte namner. Regeln vager 0,1,0
  mot karnans 0,0,0 (:where() nollar specificiteten), sa den vinner oavsett
  laddningsordning.
*/
.wp-site-blocks > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/*
  Samma fel en niva in. Karnan ger varje wp:group utan eget layout-attribut
  flodeslayout, och med spacing.blockGap pasatt skriver den
  "> * + * { margin-block-start: var(--wp--style--block-gap) }" for gruppen,
  alltsa karnans standardvarde 24 px mellan barnen. I toppen sank da
  navigeringen och .site-header__actions 24 px, primarknappen ytterligare 24,
  och i foten den hogra raden - medan ordmarket och den vanstra fotraden stod
  still som forstabarn. Handoffens "vertically centered" holl inte langre, och
  snedstallningen syns bara nar WordPress renderar.

  Varje grupp som far sin layout harifran - bade delarna i parts/ och
  monstren i patterns/ - bar darfor klassen sk-layout. Selektorn vager 0,2,0
  mot karnans 0,1,0, sa den vinner oavsett i vilken ordning stilmallarna
  laddas.
*/
.wp-block-group.sk-layout > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/*
  <main> kommer fran templates/index.html, templates/page.html och
  templates/front-page.html (och senare uppgifters mallar) som mallens egen
  wp:group - den ar den enda delen som ska vaxa, sa att header och footer
  haller sin egen hojd och foten trycks till botten pa en kort sida.
*/
.wp-site-blocks > main {
  flex: 1 0 auto;
}

/*
  Toppen fastnar pa omslaget, inte pa diven inne i delen. Mallen drar in
  delen med wp:template-part {"tagName":"header"}, och karnans
  render_block_core_template_part() renderar den som
  <header class="wp-block-template-part"> runt just den diven. Ett klibbigt
  element ror sig bara inom sitt innehallande block, och for .site-header ar
  det blocket exakt lika hogt som elementet sjalvt - alltsa noll vagstracka,
  och toppen rullade bort med sidan precis som ett statiskt element. <header>
  ar daremot ett direkt barn till .wp-site-blocks, som ar hela sidan hog.

  Sticky, inte fixed: den ska lamna plats i flodet for sig sjalv (ingen
  overlappning med innehallet nar sidan laddas) men fasta sig vid toppen vid
  nedscrollning. z-index lyfter den over sidans eget innehall - inget tal i
  theme.json motsvarar z-index, och z-index ar varken en hex-kod eller en
  pixelstorlek, sa ett litet heltal har ar inte ett undantag fran nagon av de
  tva forbjudna formerna.
*/
.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* =========================================================================
   Fokus och hovring. Handoffen:
   .superpowers/sdd/2026-09-04-wordpress-plugin/handoff-README.md, avsnittet
   "Hover, focus and active states".

   Handoffen sager rakt ut varfor blocket finns: "Focus visible: a 2 px
   #9C4A2E outline with 2 px offset on every interactive element, not just
   inputs. This is a public multilingual site and keyboard access is a
   requirement." Prototypen definierar bara fokus pa falt, alltsa ar
   resten produktionens ansvar - och planen for temat namner varken fokus,
   hovring eller tangentbord, sa ingen uppgift byggde det. Det ar en lucka i
   planen, inte i en uppgift.

   **Selektorn ar avsiktligt svag.** :where() nollar sin egen specificitet,
   sa regeln vager 0,1,0 - bara pseudoklassen. Pluginen deklarerar samma ring
   under `.sk-calc :focus-visible`, alltsa 0,1,1, och vinner darmed alltid
   inuti kalkylatorn oavsett i vilken ordning de tva stilmallarna laddas.
   Temat namner ingen av pluginens klasser och pluginen ingen av temats: de
   tva rakar bara vara eniga om handoffens ring, vilket ar hela poangen med
   att handoffen ger den som ett tal. Webblasarens egen ring ar en
   UA-stilmall och forlorar mot vilken forfattarregel som helst, sa den svaga
   vikten kostar ingenting dar temat sjalvt ritar.

   :focus-visible och inte :focus: en musklickad knapp ska inte bara en ring,
   och det ar webblasarens heuristik som avgor det, inte temats.

   Ringen ar `outline` och inte `box-shadow`: en outline ritas utanfor
   layouten och kan darfor aldrig flytta nagot, vilket ar samma krav som
   handoffens "no elevation change" staller pa hovringen.
   ========================================================================= */
:where(.wp-site-blocks) :focus-visible {
  outline: var(--wp--custom--focus--ring) solid var(--wp--preset--color--terracotta);
  outline-offset: var(--wp--custom--focus--offset);
}

/*
  Handoffen: "Buttons: darken the fill by roughly 8 % on hover, no elevation
  change, 120 ms ease-out." De tre knapparna - toppens terrakotta, heroens
  morka och heroens konturknapp - bar darfor var sin
  `transition: background-color ...` i sin egen regel langre ner, och var sin
  `:hover` intill den.

  **Overgangen star inte i en delad regel med de tre selektorerna, och det ar
  inte en stilfraga.** Testernas hjalpare `TemplatesTest::rule()` laser en
  regel med `/^<selektor>\s*\{/m`, alltsa forsta forekomsten av selektorn i
  kolumn noll. En gruppregel dar `.site-header__cta .wp-block-button__link`
  star sist pa sin egen rad hade darfor blivit den regel varje mattpastaende
  om toppens primarknapp laste - och luften, radien och vikten hade
  rapporterats som saknade fast de star kvar en bit ner i filen.

  Det ar samma slags fel som de flesta pa den har grenen: en andring som ser
  ut att bara flytta text bryter en mekanism nagon annanstans. Deklarationen
  hor dessutom hemma i knappens egen regel - det ar dar nasta lasare letar
  efter den.

  **Ingen prefers-reduced-motion-fraga, med flit.** Pluginen har en, men den
  galler dess egna overgangar pa storlek och lage. Det som overgar har ar bara
  background-color, alltsa ingen rorelse, och en fjarde @media hade tvingat om
  ResponsiveTest::test_the_stylesheet_declares_exactly_the_planned_breakpoints()
  - vars hela syfte ar att halla antalet mediefragor nere pa planens tre. En
  vakt som mjukas upp for en regel som inte ror nagonting ar ett daligt byte.
*/

/*
  Bakgrunden, kanten och luften star kvar pa diven inne i delen: den fyller
  <header> i bredd och hojd, sa ytan foljer med nar omslaget klibbar.
*/
.site-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  background-color: var(--wp--preset--color--page);
  border-bottom: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--border);
  padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--64);
}

.site-header__wordmark {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--wordmark);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.site-header__wordmark a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

.site-header__nav {
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--note);
  font-weight: 500;
}

/* wp-block-navigation__container ar WordPress egen klass for lankraden. */
.site-header__nav .wp-block-navigation__container {
  display: flex;
  gap: var(--wp--preset--spacing--32);
}

/*
  Den aktiva posten far en 2 px understrykning i terrakotta; de inaktiva far
  en genomskinlig kant av samma bredd sa att ingenting hoppar nar sidan
  byts. current-menu-item ar karnans egen klass pa <li>:et - se
  render_block_core_navigation_link() - och den kraver att posten bar ett
  numeriskt id, se header.html:s kommentar om platshallarlankarna.

  Handoffens 3 px luft under texten star som en egen token under
  settings.custom, intill radierna och linjebredderna. Forra versionen
  harledde den med calc(var(--wp--preset--spacing--6) / 2), vilket var en dold
  koppling: handoffen binder aldrig navigeringens 3 px till mellanrumsskalans
  6 px-steg, sa luften hade andrats tyst om nagon justerade den sluggen.
*/
.site-header__nav .wp-block-navigation-item {
  border-bottom: var(--wp--custom--rule--accent) solid transparent;
  padding-bottom: var(--wp--custom--space--nav-underline);
}

/*
  Handoffen: "Nav items: the underline appears at 40 % opacity on hover."
  Strecket ar redan ritat, genomskinligt, av regeln ovan - hovringen byter
  bara dess farg, sa ingenting hoppar och kanten behover ingen egen bredd.

  **Regeln star fore den aktiva posten och inte efter, och det ar inte
  kosmetik.** De tva selektorerna vager exakt lika mycket:
  `.site-header__nav .wp-block-navigation-item:hover` ar tva klasser plus en
  pseudoklass, alltsa 0,3,0, och `.site-header__nav
  .wp-block-navigation-item.current-menu-item` ar tre klasser, ocksa 0,3,0.
  Vid lika specificitet vinner den senare regeln. Stod hovringen sist skulle
  den bleka den aktiva postens streck till 40 procent nar musen rakade ligga
  dar, alltsa precis det handoffen forbjuder: "the selected state must stay
  clearly stronger than any hover state."

  color-mix mot transparent och inte `opacity`: opacity hade tonat hela
  posten, texten inkluderad. Det ar bara strecket som ska vara svagare.
*/
.site-header__nav .wp-block-navigation-item:hover {
  border-bottom-color: color-mix(
    in srgb,
    var(--wp--preset--color--terracotta) var(--wp--custom--hover--underline),
    transparent
  );
}

.site-header__nav .wp-block-navigation-item.current-menu-item {
  border-bottom-color: var(--wp--preset--color--terracotta);
}

.site-header__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--wp--preset--spacing--24);
}

.site-header__lang {
  margin: 0;
  color: var(--wp--preset--color--text-subtle);
  font-size: var(--wp--preset--font-size--note);
}

.site-header__cta .wp-block-button__link {
  background-color: var(--wp--preset--color--terracotta);
  color: var(--wp--preset--color--ink-on-dark);
  padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--20);
  border-radius: var(--wp--custom--radius--button);
  font-weight: 500;
  transition: background-color var(--wp--custom--hover--duration) ease-out;
}

/*
  Atta procent morkare, alltsa 92 procent av fyllningen blandat med svart.

  **Inte paletten terracotta-hover.** Den tokenen finns, men handoffens egen
  tabell ger den anvandningen "Link hover" - och #6E3320 ar ungefar 30 procent
  morkare an #9C4A2E, alltsa fyra ganger det knappen ska rora sig. Lankarnas
  hovring ligger redan pa den tokenen, genom theme.json:s elements.link, och
  det ar dar den hor hemma.

  `black` ar ett nyckelord och ingen hex-kod, sa litteralvakten galler inte -
  och det finns ingen svart i paletten att peka pa: handoffens morkaste farg
  ar `ink`, som ar knappens egen fyllning. Att blanda en farg med sig sjalv
  hade gett ingen andring alls.
*/
.site-header__cta .wp-block-button__link:hover {
  background-color: color-mix(
    in srgb,
    var(--wp--preset--color--terracotta) var(--wp--custom--hover--fill),
    black
  );
}

/* Foten. Ingen position-regel behovs - .wp-site-blocks>main{flex:1 0 auto}
   ovan ar det som trycker den till botten nar innehallet ar kort. */
.site-footer {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  border-top: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--border);
  padding: var(--wp--preset--spacing--28) var(--wp--preset--spacing--64);
  font-size: var(--wp--preset--font-size--eyebrow);
  color: var(--wp--preset--color--text-subtle);
}

.site-footer p {
  margin: 0;
}

/* =========================================================================
   Uppgift 4: startsidan. Handoffen:
   .superpowers/sdd/2026-09-04-wordpress-plugin/handoff-README.md, avsnittet
   "1. Start page".

   Samma regel som ovan: varje matbart varde kommer ur en token. Rutnaten
   star har och inte i theme.json, eftersom theme.json inte kan uttrycka
   grid-template-columns.
   ========================================================================= */

/* Flodeslayoutens marginal nollas av .wp-block-group.sk-layout > * langre
   upp, den regel bade delarna och monstren delar. Varje grupp nedan bar
   darfor klassen sk-layout. */

/* --- Bildplatser ---------------------------------------------------------
   Handoffen: "Every image position is an empty, named drop slot with a
   written brief, and the business fills them." Platsens namn star som klass
   i monstret (w-home-hero och de tre w-svc-*), hojden kommer ur en token.
   Uppgift 8 byter platshallarna mot riktiga bilder och behaller namnen.
   ----------------------------------------------------------------------- */
.sk-slot {
  display: flex;
  align-items: flex-end;
  background-color: var(--wp--preset--color--canvas);
  border: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--border-faint);
  border-radius: var(--wp--custom--radius--card);
  padding: var(--wp--preset--spacing--16);
}

.sk-slot__brief {
  margin: 0;
  font-size: var(--wp--preset--font-size--caption);
  color: var(--wp--preset--color--text-faint);
}

.sk-slot--hero {
  height: var(--wp--custom--slot--hero);
}

.sk-slot--card {
  height: var(--wp--custom--slot--card);
}

/* --- Ogonbryn, delas av alla tre banden --------------------------------- */
.sk-eyebrow {
  margin: 0;
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--terracotta);
}

/* --- Band 1: hero ------------------------------------------------------- */
/*
  minmax(0, 1.1fr) och inte 1.1fr: en fr-spalt har automatisk minsta bredd,
  sa bildplatsen eller en lang sträng hade kunnat tvinga spalten bredare an
  sin andel och gett sidan vagrat overflod. Nollan tar bort det golvet.
  Handoffen kraver formen uttryckligen for varje flerspaltsrutnat.
*/
.sk-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--wp--preset--spacing--56);
  align-items: end;
  padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--64) var(--wp--preset--spacing--72);
}

.sk-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--26);
}

/* Familj, vikt, radavstand och teckenavstand star i theme.json:s elements.h1. */
.sk-hero__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--display);
}

.sk-hero__body {
  margin: 0;
  max-width: var(--wp--custom--measure--hero-body);
  font-size: var(--wp--preset--font-size--body-large);
  line-height: 1.55;
  color: var(--wp--preset--color--body-muted);
  text-wrap: pretty;
}

/* Karnans wp:buttons bar redan flexlayout ur sitt eget block.json, sa bara
   mellanrummet behover sagas. Tva klasser for att vinna over karnans
   .wp-block-buttons. */
.wp-block-buttons.sk-hero__actions {
  gap: var(--wp--preset--spacing--16);
}

.sk-btn-dark .wp-block-button__link {
  background-color: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--ink-on-dark);
  padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--26);
  border-radius: var(--wp--custom--radius--button);
  font-weight: 500;
  transition: background-color var(--wp--custom--hover--duration) ease-out;
}

/* Samma atta procent som toppens knapp, pa den morka fyllningen. */
.sk-btn-dark .wp-block-button__link:hover {
  background-color: color-mix(
    in srgb,
    var(--wp--preset--color--ink) var(--wp--custom--hover--fill),
    black
  );
}

/*
  Den lodrata luften ar 16 px minus den egna 1 px-kanten, alltsa handoffens
  15 px. Harledningen ar handoffens egen: den ger primarknappen 16 px utan
  kant och sekundarknappen 15 px med en 1 px-kant, sa att de tva knapparnas
  ytterlador blir lika hoga. Det vagrata talet, 24 px, ar daremot fritt valt
  av handoffen och star som sin egen token.
*/
.sk-btn-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--ink);
  border: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--ink);
  padding: calc(var(--wp--preset--spacing--16) - var(--wp--custom--rule--hairline)) var(--wp--preset--spacing--24);
  border-radius: var(--wp--custom--radius--button);
  font-weight: 500;
  transition: background-color var(--wp--custom--hover--duration) ease-out;
}

/*
  Samma atta procent, men knappen har ingen egen fyllning att morkna: den ar
  genomskinlig och visar sidbottnen. Den som morknar ar alltsa den ytan,
  atta procent mot ink - vilket ar samma rorelse och samma riktning som de
  tva fyllda knapparna gor, uttryckt pa det underlag knappen faktiskt star
  pa. Kanten och texten ror sig inte: handoffen andrar bara fyllningen.
*/
.sk-btn-outline .wp-block-button__link:hover {
  background-color: color-mix(
    in srgb,
    var(--wp--preset--color--page) var(--wp--custom--hover--fill),
    var(--wp--preset--color--ink)
  );
}

/* --- Band 2: tjanstekorten --------------------------------------------- */
.sk-services {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--32);
  padding: 0 var(--wp--preset--spacing--64) var(--wp--preset--spacing--80);
}

.sk-services__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--32);
  border-top: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--border);
  padding-top: var(--wp--preset--spacing--32);
}

.sk-services__title {
  margin: 0;
}

.sk-services__note {
  margin: 0;
  font-size: var(--wp--preset--font-size--note);
  color: var(--wp--preset--color--text-subtle);
  text-align: right;
}

.sk-services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--24);
}

/*
  Hela kortet ar klickbart, inte bara lankraden. Lankens eget ::after tacker
  kortet, sa markupen bar en enda riktig lank: tabbordningen, fokusringen och
  skarmlasaren far samma mal som musen, och ingen JavaScript behovs. Det
  kraver att kortet ar ett positionerat element.

  **Klassen het .sk-card fram till granskningen, och det var en kollision.**
  Pluginen ager samma namn for sitt kalkylatorkort
  (sunny-key-tools/assets/src/ui/card.css) och satter dar
  `gap: var(--sk-space-8)`. Den variabeln ar deklarerad under `.sk-calc` och
  finns alltsa inte har - men ett ogiltigt var() gor inte deklarationen
  ogiltig vid parsning, den blir ogiltig vid *berakning*, och en sadan
  deklaration deltar anda i kaskaden och vinner over temats egen. Resultatet
  var matt i webblasaren: pa varje sida som bar bada stilmallarna - alltsa
  varje sida temat sjalvt bjuder in kalkylatorn pa - blev tjanstekortens
  mellanrum `normal` i stallet for handoffens 18 px.

  Namnet ar nu bandets eget, i samma form som .sk-services__grid och
  .sk-services__head: kortet ar en del av tjanstebandet och ingenting annat.
  Det ar ocksa den enda kollisionen mellan de tva stilmallarna - jamforelsen
  gjordes klass for klass over bada filerna. Kravet att temat och pluginen
  star var for sig galler namnrymden lika mycket som koden.
*/
.sk-services__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--18);
}

.sk-services__card-title {
  margin: 0;
}

.sk-services__card-body {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-small);
  line-height: 1.55;
  color: var(--wp--preset--color--body-muted);
}

/* Fargen kommer ur theme.json:s elements.link, alltsa terrakotta. */
.sk-services__card-link {
  margin: 0;
  font-size: var(--wp--preset--font-size--note);
  font-weight: 500;
}

.sk-services__card-link a {
  text-decoration: none;
}

.sk-services__card-link a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* --- Band 3: de tre stegen pa morkt ------------------------------------ */
.sk-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--wp--preset--spacing--64);
  padding: var(--wp--preset--spacing--72) var(--wp--preset--spacing--64);
  background-color: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--ink-on-dark);
}

.sk-steps__title {
  margin: 0;
}

.sk-steps__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--32);
}

/*
  Handoffens linje ar rgba(245, 239, 228, .25), vilket ar 25 procent av
  textfargen pa morkt. color-mix haller ihop de tva, sa hexen star bara en
  gang, i theme.json:s palett. En kopia som rgba-token hade kunnat bli
  inaktuell utan att nagot test sag det.
*/
.sk-step {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--12);
  border-top: var(--wp--custom--rule--hairline) solid
    color-mix(in srgb, var(--wp--preset--color--ink-on-dark) 25%, transparent);
  padding-top: var(--wp--preset--spacing--20);
}

.sk-step__numeral {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--h2);
  font-weight: 400;
  color: var(--wp--preset--color--terracotta-light);
}

/* 600 ar den tyngsta vikt uppgift 2 laddar av Albert Sans, alltsa
   handoffens "bold" utan att webblasaren far syntetisera den. */
.sk-step__label {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-medium);
  font-weight: 600;
}

.sk-step__body {
  margin: 0;
  font-size: var(--wp--preset--font-size--note);
  line-height: 1.55;
  color: var(--wp--preset--color--muted-on-dark);
}

/* =========================================================================
   Uppgift 5: tjanstesidan, poolservice och malning pa samma mall. Handoffen:
   .superpowers/sdd/2026-09-04-wordpress-plugin/handoff-README.md, avsnittet
   "2. Pool service page with embedded calculator".

   Temats del ar ramen runt kalkylatorn. Kortet, stegen och prislisten ritas
   av pluginens egen bunt, som bar sina egna klasser under .sk-calc. Det enda
   temat bidrar med i hogra spalten ar den vita ytan under verktyget och det
   klibbiga laget, se .sk-service__calculator nedan.
   ========================================================================= */

.sk-service {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--wp--preset--spacing--64);
  padding: var(--wp--preset--spacing--64);
}

.sk-service__copy {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--26);
}

/* Familj, vikt och teckenavstand star i theme.json:s elements.h1. Handoffen
   ger tjanstesidans rubrik ett eget radavstand, tatare an startsidans. */
.sk-service__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--h1-service);
  line-height: 1.05;
}

.sk-service__intro {
  margin: 0;
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.6;
  color: var(--wp--preset--color--body-muted);
  text-wrap: pretty;
}

/*
  Vad som ingar i ett besok, i tva spalter. Blocket ar en wp:list och inte
  atta stycken: det ar en upprakning, och skarmlasaren ska sagas hur manga
  poster den har.

  padding-inline-start nollas eftersom webblasarens standardstil ger varje
  <ul> en indragning. Utan nollan star spalterna indragna mot linjen ovanfor
  och mot resten av spalten, och handoffens vanstermarginal bryts.

  list-style: none - handoffen ritar posterna utan punkter, och den har
  medvetet varken ikoner eller punktmarkorer.
*/
.sk-service__included {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: var(--wp--preset--spacing--10);
  column-gap: var(--wp--preset--spacing--24);
  border-top: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--border);
  padding-top: var(--wp--preset--spacing--20);
  padding-inline-start: 0;
  list-style: none;
  margin: 0;
  font-size: var(--wp--preset--font-size--body-small);
  line-height: 1.5;
  color: var(--wp--preset--color--body-muted);
}

/*
  Notisen om vattenpafyllning. Ledet star i ink och resten i brodtextens
  dampade farg - handoffen ger just den delade betoningen, och den ar
  avsiktlig. <strong> ar prototypens eget element for ledet.
*/
.sk-service__notice {
  margin: 0;
  background-color: var(--wp--preset--color--warm-panel);
  border-radius: var(--wp--custom--radius--card);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--24);
  font-size: var(--wp--preset--font-size--note);
  line-height: 1.55;
  color: var(--wp--preset--color--body-muted);
}

.sk-service__notice strong {
  color: var(--wp--preset--color--ink);
}

/*
  Hogra spalten, dar kalkylatorn star.

  align-self: start ar inte kosmetik. Ett rutnatsbarn stracks som standard
  over hela radens hojd, och ett klibbigt element kan bara rora sig inom sitt
  innehallande block - ar blocket exakt lika hogt som elementet blir
  vagstrackan noll och position: sticky gor ingenting alls. Det ar samma fel
  som granskningen av uppgift 3 hittade i toppen, en niva ner. Med
  align-self: start blir spalten sa hog som sitt innehall, och den vanstra
  spaltens hojd blir vagstrackan.
*/
.sk-service__tool {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
  align-self: start;
  position: sticky;
  top: var(--wp--custom--offset--sticky);
}

/*
  Kalkylatorns omslutande block. Vitt mot sidans varma botten, ur paletten -
  designens enda vita yta, och det som avgransar verktyget fran texten.

  **Bara botten och radien, medvetet.** Handoffens kalkylatorkort har ocksa
  en hairline och 32 px luft, men de ritas av pluginens eget .sk-card inuti
  det har blocket. Skrev temat dem en gang till skulle sidan visa tva ramar
  utanpa varandra sa fort pluginen ar aktiv. Temat bidrar med ytan, pluginen
  med kortets kant - och utan pluginen star kortkoden som text pa den vita
  ytan, vilket ar fult men inte trasigt, enligt planens globala krav.
*/
.sk-service__calculator {
  background-color: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--radius--card);
}

/* =========================================================================
   Malningssidans band. Handoffen:
   .superpowers/sdd/2026-09-04-wordpress-plugin/handoff-README.md, avsnittet
   "3. Painting and renovation, quick estimate".

   **Ett eget band och inte .sk-service med annan text.** Handoffens avsnitt 3
   ar en annan komposition an avsnitt 2: en flodeskolumn med 40 px luft i
   stallet for ett tvaspaltigt rutnat, ett rubrikblock som star for sig sjalvt
   och hogst 760 px brett, ingen bildplats, ingen lista, ingen notis och ingen
   vit kalkylatoryta. Se patterns/service-intro-painting.php for tabellen over
   skillnaderna.

   **Varfor klassen inte heter .sk-paint.** Den ar pluginens: den star i
   sunny-key-tools/assets/src/modules/painting/painting.css for det detaljerade
   sparets fargfragor. Att aterta den hade varit exakt samma fel som
   .sk-card-kollisionen granskningen hittade, en gang till - och `.sk-painting`
   vore bara en bokstav ifran, alltsa lika latt att lasa fel. `estimate` ar
   handoffens eget ord for sidan ("quick estimate") och kolliderar inte med
   nagot av pluginens 66 klassnamn.

   Rutnatet under rubrikblocket, alltsa fragorna till vanster och
   uppskattningen till hoger, ar kalkylatorns insida. Temat ritar det inte.
   ========================================================================= */

.sk-estimate {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40);
  padding: var(--wp--preset--spacing--64);
}

/*
  Handoffen ger rubrikblocket en bredd men ingen inre luft. 26 px ar samma
  mellanrum som varje annan textspalt i designen (.sk-hero__copy,
  .sk-service__copy, .sk-key__copy) och alltsa designens egen rytm, inte ett
  nytt tal.
*/
.sk-estimate__head {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--26);
  max-width: var(--wp--custom--measure--estimate-head);
}

/* Familj, vikt och teckenavstand star i theme.json:s elements.h1. Handoffen
   ger malningssidans rubrik ett eget radavstand, en aning tatare an
   poolsidans 1.05. */
.sk-estimate__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--h1-service);
  line-height: 1.04;
}

.sk-estimate__intro {
  margin: 0;
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.6;
  color: var(--wp--preset--color--body-muted);
  text-wrap: pretty;
}

/* =========================================================================
   Uppgift 6: nyckelforvaringen. Handoffen:
   .superpowers/sdd/2026-09-04-wordpress-plugin/handoff-README.md, avsnittet
   "4. Key holding".

   Presentation, ingen kalkylator. Uppmaningen leder till kontakt, eftersom
   tjansten prissatts individuellt - notisen sager det rakt ut, och sidan far
   inte latsas om nagot annat.
   ========================================================================= */

.sk-key {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--wp--preset--spacing--64);
  padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--64);
}

.sk-key__copy {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--26);
}

/* Familj, vikt och teckenavstand star i theme.json:s elements.h1. Handoffen
   ger nyckelsidans rubrik en egen storlek och ett eget radavstand. */
.sk-key__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--h1-key);
  line-height: 1.03;
}

/*
  Textbredden och bildplatsens hojd ar bada 560 px i handoffen, men de ar tva
  olika ting - en radlangd och en bildhojd - och bar darfor var sin token. En
  delad token hade andrat bilden nar nagon justerade radlangden, samma dolda
  koppling som granskningens fynd 8 om navigeringens 3 px.
*/
.sk-key__body {
  margin: 0;
  max-width: var(--wp--custom--measure--key-body);
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.6;
  color: var(--wp--preset--color--body-muted);
  text-wrap: pretty;
}

/*
  De fyra punkterna. En wp:list och inte fyra stycken: det ar en upprakning,
  och skarmlasaren ska sagas hur manga poster den har.

  padding-inline-start nollas eftersom webblasarens standardstil ger varje
  <ul> en indragning; utan nollan star posterna indragna mot linjen ovanfor.
  list-style: none - handoffen ritar posterna utan punkter, och designen har
  medvetet varken ikoner eller punktmarkorer.
*/
.sk-key__list {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--14);
  border-top: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--border);
  padding-top: var(--wp--preset--spacing--24);
  padding-inline-start: 0;
  list-style: none;
  margin: 0;
  font-size: var(--wp--preset--font-size--body-small);
  color: var(--wp--preset--color--body-muted);
}

/*
  Notisen. Ledet "Priced on request." star i ink och resonemanget efter i
  brodtextens dampade farg. Den delade betoningen ar avsiktlig: besokaren
  laser prisbeskedet forst och skalet sedan. <strong> ar prototypens eget
  element for ledet.
*/
.sk-key__notice {
  margin: 0;
  background-color: var(--wp--preset--color--warm-panel);
  border-radius: var(--wp--custom--radius--card);
  padding: var(--wp--preset--spacing--22) var(--wp--preset--spacing--26);
  max-width: var(--wp--custom--measure--key-body);
  font-size: var(--wp--preset--font-size--note);
  line-height: 1.6;
  color: var(--wp--preset--color--body-muted);
}

.sk-key__notice strong {
  color: var(--wp--preset--color--ink);
}

/* Knappen bredvid adressen, lodratt centrerade - handoffens "beside". */
.sk-key__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--16);
}

/* Farg, luft och radie kommer ur .sk-btn-dark. Handoffen ger den har knappen
   en egen textstorlek, till skillnad fran startsidans tva. */
.sk-key__contact .wp-block-button__link {
  font-size: var(--wp--preset--font-size--body-small);
}

.sk-key__address {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-small);
  color: var(--wp--preset--color--text-subtle);
}

.sk-slot--key {
  height: var(--wp--custom--slot--key);
}


/* =========================================================================
   Uppgift 8: bildplatserna blir riktiga bildblock. Handoffen:
   .superpowers/sdd/2026-09-04-wordpress-plugin/handoff-README.md, avsnittet
   "Assets".

   Platsens namn, dess ruta och dess hojdtoken star kvar oforandrade fran
   uppgifterna 4 till 6. Det som tillkommer ar bilden inuti rutan, och de tva
   reglerna som gor att rutan - och inte filen - bestammer hur stor platsen ar.

   Avsnittet star fore uppgift 7:s mediefragor och inte sist i filen. Basregler
   maste sta fore de mediefragor som skriver over dem; en basregel efterat hade
   vunnit pa lika specificitet och tyst slagit ut en brytpunkt.
   ========================================================================= */

/*
  Platsen blir bildens innehallande block. Utan det skulle bilden nedan raknas
  mot narmaste positionerade forfader, vilket for tjanstekorten ar .sk-services__card -
  och bilden hade da tackt hela kortet, rubriken och lanken inkluderade.

  Kortets egen klickyta pafverkas inte: .sk-services__card-link a::after ar ocksa
  positionerad och star senare i tradet, sa den malas over platsen.
*/
.sk-slot {
  position: relative;
}

/*
  Bilden fyller rutan i stallet for att satta den.

  Det ar handoffens "set explicit dimensions to avoid layout shift" i den form
  ett blocktema kan ge den. Rutan har redan sin hojd ur en token, sa utrymmet
  ar reserverat innan bilden finns; med bilden i flodet hade filens egna matt
  bestamt hojden i stallet, och ett portrattfoto hade tryckt isar bandet nar
  det laddade. Nu kan bilden inte flytta nagot alls.

  Uttryckliga width- och height-attribut skrivs inte har, och det ar med flit.
  Karnans bildblock renderar sina egna width/height som *inline style* sedan
  WordPress 6.3, alltsa pixellitteraler i ett monster, vilket planens globala
  krav forbjuder - och skrivs de i stallet direkt pa <img> matchar markupen
  inte det blocket sparar, sa redigeraren flaggar blocket som ogiltigt forsta
  gangen verksamheten oppnar sidan. Samma fel som den pahittade klassen
  wp-block-paragraph gav i uppgift 3. Attributen kommer i stallet fran karnan
  sjalv: wp_filter_content_tags() skriver width, height, srcset och sizes ur
  bildstorlekens metadata nar sidan renderas, och det ar
  add_image_size()-anropen i functions.php som gor att de matten finns.

  object-fit: cover och inte contain: rutan ar handoffens komposition, och en
  bild som lamnar tomrum i den bryter bandets rytm.
*/
.sk-slot__image {
  margin: 0;
  position: absolute;
  inset: 0;
}

.sk-slot__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--wp--custom--radius--card);
}

/*
  Platshallarnamnet forsvinner nar fotografiet ar pa plats.

  Bilden ligger over texten sa fort den finns, sa den syns inte anda - men den
  star kvar i tillganglighetstradet och lases upp av en skarmlasare som en
  ledig bildtext. img[src] och inte img: ett bildblock utan vald bild sparas
  som <img alt=""> helt utan src, vilket ar precis det tillstand texten ska
  synas i.
*/
.sk-slot:has(.sk-slot__image img[src]) .sk-slot__brief {
  display: none;
}

/* =========================================================================
   Uppgift 7: mobilen och surfplattan.

   **Handoffen har ingen mobildesign.** Den sager det rakt ut under
   "Fidelity": "Mobile and tablet layouts are not designed. The prototype is
   desktop-first and only degrades gracefully. Breakpoint behavior is
   described below as intent, not as a finished design." Verksamheten har bett
   om att den byggs efter omdome, sa varje val nedan som inte star i handoffen
   ar utforarens - och star darfor motiverat intill regeln det galler, sa att
   en granskare kan saga emot nagot konkret.

   **Tre intervall, tva mediefragor.** Over 1024 px star handoffens layout
   ostyrd hogre upp i filen; den har delen ror den inte. Intervallsyntaxen
   (width <= 1024px) och inte max-width plus 599.98px: planens tabell sager
   "under 600 px" och "600 till 1024 px", och 599.98 hade varit ett tredje tal
   som varken handoffen eller planen kanner.

   **En tredje mediefraga, tillagd av granskningen i uppgift 9.** Toppens
   egen brytpunkt, 967 px, star for sig sjalv nedanfor och ror bara
   .site-header. Den kommer inte fran planens tabell och inte fran handoffen -
   den kommer fran matning av toppens eget innehall, se kommentaren vid
   regeln. De tva ovanstaende ar layoutens brytpunkter; den tredje ar
   toppens egen, och de tre far leva sida vid sida eftersom de svarar pa
   olika fragor.

   **Brytpunkten ar den enda pixellitteral temat far skriva**, och bara i
   villkoret. En mediefraga kan inte lasa en custom property, sa talet kan
   inte komma ur en token. Allt inne i blocken kommer daremot ur theme.json,
   precis som resten av filen. tests/php/Theme/ResponsiveTest.php haller bada
   halvorna: villkoren far bara innehalla 600, 967 och 1024, och kroppen ingen
   pixel alls.

   **Flytande typografi ar avstangd i theme.json, och det ar en forutsattning
   for det har avsnittet.** Med fluid pa skriver WordPress ut varje storlek
   som ett eget clamp mellan sina standardbredder 320 och 1600 px - det galler
   variabeln sjalv, sa var(--wp--preset--font-size--display) ar da inte 76 px
   utan ett clamp. Handoffens varden ar exakta, och med karnans clamp kvar
   renderas 76 px forst vid 1600 px bredd; pa den 1440 px-skarm uppgift 9
   granskar star rubriken pa omkring 74 px utan att nagon fil visar varfor.
   Dessutom hade clamp-raderna nedan blivit ett clamp i ett clamp, med karnans
   brytpunkter inuti vara. Skalningen sker darfor har, dar den star skriven,
   med bada gransvardena som tokens. Se ResponsiveTest.
   ========================================================================= */

/*
  600 till 1024 px, och allt smalare - telefonens block nedan skriver over
  det som skiljer.
*/
@media (width <= 1024px) {
  /*
    **Tva spalter blir en redan har, inte forst vid 600 px.** Planens tabell
    namner bara tre-till-tva, sa valet ar utforarens. Vid 1024 px minus tva
    64 px-marginaler aterstar 896 px, och handoffens tvaspaltiga band delar
    det i tva om cirka 416 px efter mellanrummet. Startsidans rubrik om 76 px,
    tjanstesidans kalkylatorkort och nyckelsidans 560 px hoga bild far inte
    plats i den bredden. Handoffens egen avsikt sager samma sak: "below about
    1100 px, collapse every two-column grid to one column."
  */
  .sk-hero,
  .sk-service,
  .sk-key,
  .sk-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  /*
    **Fynd 2 fran uppgift 9: nyckelsidans bildplats star kvar pa 560 px har.**
    Handoffen ritar ingen surfplatta - se avsnittets inledning - sa det har
    ar utforarens bedomning, inte ett tal ur planen.

    Regeln ovan gor just nu .sk-key till en spalt redan vid 1024 px, sa
    bildplatsen slutar sta bredvid texten och bor gora det den gor pa en
    telefon: sta under en text som redan tagit sin egen hojd. Vid 768 px ar
    spalten 625 px bred (matt i webblasaren, 768 minus sidans tva 64 px-
    marginaler minus rullningslistens bredd) - nastan lika bred som den
    egentliga tvaspaltens hoger kolumn pa dator (587 px) - men 560 px hog
    star kvar oforandrad fran regeln ovanfor det har avsnittet, och blir da
    over halften av en 1024 px hog vy, direkt under ett textstycke som redan
    ar langt. Det ar just den kombinationen - full bredd och datorns hojd -
    som uppgift 9 matte och kallade fult.

    Talet 360 ar en egen token, inte harledd ur nagon av de tre befintliga
    (560 dator, 260 telefonens kort): en delad token med nagon av dem hade
    varit den dolda koppling den har filens ovriga kommentarer varnar for
    tva ganger redan. 360 pa en 625 px bred spalt ger ett bredformat pa
    ungefar 1,7:1 - en bildproportion som liknar ett fotografi liggande i
    landskapslage, i stallet for datorlagets nastan kvadratiska 587:560. Det
    ar en medveten avvikelse fran datorns proportion, motiverad av att
    bilden inte langre star bredvid nagot: den star ensam i sin egen rad, och
    en nastan kvadratisk yta i den positionen laser som ett tomt fonster i
    stallet for ett fotografi.

    Under 600 px tar telefonens egen regel langre ner i filen over igen och
    satter samma hojd som de ovriga korten (260 px) - se
    test_the_tall_image_slots_fall_back_to_the_card_height_on_the_phone. De
    tva reglerna kolliderar inte: den har star forst i filen, sa telefonens
    senare regel vinner vid lika specificitet, precis som blockets egen
    inledande kommentar beskriver.
  */
  .sk-slot--key {
    height: var(--wp--custom--slot--key-tablet);
  }

  /* Planens tabell, ordagrant: "Tva spalter dar handoffen har tre". */
  .sk-services__grid,
  .sk-steps__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /*
    **Beslut 4: kalkylatorns kort.** Planen: "Kalkylatorns kort har sin egen
    responsivitet i pluginen. Temat ska inte overstyra den, bara ge den
    plats." Ingen regel i det har avsnittet naer in i verktyget - ingen
    .sk-calc, ingen omritning av kalkylatorns yta. Det enda temat gor ar att
    slappa den klibbiga spalten: den finns for att kortet ska synas bredvid
    texten, och i en spalt star det redan efter texten. Ett position: sticky
    hade da last fast ett kort som ar hogre an skarmen. Handoffens avsikt
    foreslar en sammanfattningslist langst ned i stallet - den listen ar
    pluginens komponent, och temat far inte hitta pa den.
  */
  .sk-service__tool {
    position: static;
  }

  /*
    **Beslut 1: rubriken om 76 px.** Planen: "clamp() mot en lasbar undre
    grans, inte en fast mindre siffra, sa att skalningen ar jamn."

    Taket ar handoffens exakta storlek ur theme.json, sa vid 1024 px och
    uppat star rubriken precis dar handoffen satter den. Golvet ar en egen
    token, --wp--custom--heading--floor, och inte h2:ans 40 px-preset aven om
    talet ar detsamma: en delad token hade andrat rubriken tyst nar nagon
    justerade h2. Talet ar handoffens eget mobiltal, "below about 720 px,
    drop the h1 scale to about 40 px".

    Det foredragna vardet ar valt sa att taket nas precis vid den ovre
    brytpunkten, alltsa 7.5vw for 76 px (taket vid 1013 px), 6vw for 60 px
    (1000 px) och 6.25vw for 64 px (1024 px). Da finns inget hopp i storlek
    nar mediefragan slar till. Golvet nas vid 533, 667 respektive 640 px.

    Ett rent vw-tal och inte calc(rem + vw): hela designen ar satt i px, sa en
    rem-andel hade gett en enda rubrik ett beteende resten av sidan inte har.
  */
  .sk-hero__title {
    font-size: clamp(var(--wp--custom--heading--floor), 7.5vw, var(--wp--preset--font-size--display));
  }

  /* Malningssidans rubrik ar samma 60 px-token som poolsidans och skalar
     darfor med samma foredragna varde. Radavstandet skiljer dem at, inte
     storleken. */
  .sk-service__title,
  .sk-estimate__title {
    font-size: clamp(var(--wp--custom--heading--floor), 6vw, var(--wp--preset--font-size--h1-service));
  }

  .sk-key__title {
    font-size: clamp(var(--wp--custom--heading--floor), 6.25vw, var(--wp--preset--font-size--h1-key));
  }
}

/*
  **Fynd 1 fran uppgift 9: toppen ar trang mellan 600 och 1024 px.** Grund-
  regeln langre upp i filen ger .site-header flex-wrap: nowrap, sa fram till
  600 px klams ordmarket, de tre menyposterna, sprakraden och knappen in i en
  enda rad. Uppgift 7:s eget beslut - en tvaradig topp i stallet for att
  dolja sprakraden eller knappen - star kvar. Det som andras ar bara *var*
  den bryter.

  967 ar inte planens tabell och inte handoffen - det talet finns inte i
  nagon av dem. Det ar uppmatt i webblasaren, sa har:

  Vid en bred vy (1440 px, dar allt star pa en rad) ger getBoundingClientRect
  ordmarkets bredd till 127.5 px, navigeringens tre poster tillsammans med
  sina mellanrum till 356.02 px, och sprakraden med knappen tillsammans med
  sitt mellanrum till 292.39 px - alltsa 775.91 px text- och knappinnehall,
  som inte kan krympa: en text kan bara byta rad, inte bli tunnare. Lagg pa
  toppens egna 64 px-marginaler pa varje sida, 128 px, och summan blir
  903.91 px. Det ar den absoluta undre gransen: vid en vy smalare an det finns
  inte rum for allt pa en rad langre, oavsett mellanrum, och just dar - provat
  genom att krympa webblasarfonstret pixel for pixel - byter varje del av
  toppen rad samtidigt, fran 903 till 904 px klientbredd.

  Att bryta exakt vid den gransen hade lamnat noll mellanrum mellan
  ordmarket, navigeringen och atgardsraden - tekniskt en rad, men lika
  klamt som fyndet klagar pa. Toppens egen minsta luft nagon annanstans ar
  24 px (.site-header__actions mellan sprakraden och knappen), sa det ar den
  luft som kravs har ocksa, pa bade vanster och hoger sida av navigeringen:
  2 x 24 = 48 px till. 903.91 + 48 = 951.91 px klientbredd.

  Mediefragans (width)-varde ar fonstrets hela bredd, rullningslisten
  inkluderad - matt med matchMedia i samma webblasare: vid 952 px
  klientbredd (967 px fonsterbredd i den har miljon) ar mellanrummet pa
  bada sidor 24.05 px, exakt malet. 967 ar alltsa 951.91 avrundat uppat till
  ett heltal, plus rullningslistens 15 px i den har miljon. Rullningslistens
  bredd varierar mellan operativsystem - noll med en overlagg-rullningslist,
  storre med en gammal Windows-list - men marginalen (48 px fordelat pa bada
  sidor) tacker den variationen at bada hall: bytet sker alltid nagonstans
  ovanfor den verkliga klippgransen pa 903.91 px klientbredd, aldrig under.

  Talet star bara i det har villkoret, som planens egna brytpunkter.
  Kroppen ar tokens, som resten av filen. Se
  ResponsiveTest::test_the_header_wraps_before_its_own_content_would_break()
  och dess klassdockblock for den fullstandiga harledningen i tabellform.
*/
@media (width <= 967px) {
  .site-header {
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--12);
  }
}

/* Under 600 px. */
@media (width < 600px) {
  /*
    **Beslut 5: sidmarginalen.** Planen: "Sidmarginalen kommer ur tokens och
    ska andras dar, inte i en mediefraga som kringgar dem." Regeln byter
    darfor vilken token som galler - 24 i stallet for handoffens 64, bada ur
    mellanrumsskalan i theme.json - och skriver aldrig ett tal. Listan ar
    varje band som bar sidans marginal; ett band som glommer sig blir rott i
    ResponsiveTest.

    padding-inline och inte padding: banden har olika lodrat luft (80 och 72,
    72, 64, 24, 28), och den ar handoffens och ska sta kvar.
  */
  .site-header,
  .site-footer,
  .sk-hero,
  .sk-services,
  .sk-steps,
  .sk-service,
  .sk-estimate,
  .sk-key {
    padding-inline: var(--wp--preset--spacing--24);
  }

  /* Planens tabell, ordagrant: "En spalt". */
  .sk-services__grid,
  .sk-steps__list,
  .sk-service__included {
    grid-template-columns: minmax(0, 1fr);
  }

  /*
    Toppen bryter redan rad har - se @media (width <= 967px) langre upp, dit
    regeln flyttade nar uppgift 9:s granskning visade att 600 px var for
    sent. Ordmarket, menyposterna, sprakraden och primarknappen far aldrig
    plats bredvid varandra pa en telefon, sa den vidare brytpunkten tacker
    ocksa den har bredden - ingen egen rad behovs.
  */

  /* Foten staplar av samma skal: de tva textraderna far inte plats bredvid
     varandra i 327 px. */
  .site-footer {
    flex-direction: column;
    gap: var(--wp--preset--spacing--10);
  }

  /* Rubriken och noten i tjanstebandet staplar, och noten slutar vara
     hogerstalld nar den inte langre star till hoger om nagot. */
  .sk-services__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .sk-services__note {
    text-align: left;
  }

  /*
    **Beslut 3: heroens bild, och de hoga platsernas hojd.**

    Bilden star *under* texten, inte ovanfor. Handoffen sager inget. Skalet ar
    att heroens vanstra spalt ar bade budskapet och bada uppmaningarna, och en
    500 px hog bild forst hade tryckt rubriken och knapparna under vecket pa
    en telefon om 375 gonger 667 px - sidans hela syfte ar att fa besokaren in
    i ett prisflode inom en skarm. Det billigaste sattet att fa det ar att
    inte skriva nagon regel alls: monstret har redan texten forst och
    bildplatsen sist, sa en spalt ger ratt ordning av sig sjalv. Ingen
    order-egenskap nagonstans i det har avsnittet, och darmed ingen skillnad
    mellan den ordning en skarmlasare foljer och den ogat ser.

    De tva hoga platserna sjunker daremot till kortens hojd. Handoffen ger
    500 px at startsidans hero och 560 px at nyckelsidan for att de star
    *bredvid* texten pa dator; under den ar 560 px nastan hela synytan pa en
    telefon, en ruta besokaren maste rulla forbi for att komma vidare. Hojden
    kommer ur handoffens egen kort-token, inte ur ett nytt tal.
  */
  .sk-slot--hero,
  .sk-slot--key {
    height: var(--wp--custom--slot--card);
  }
}