/* Bordics tema. Reviderad 2026-08-08 (fjärde vändan).

   Victor: vita rubriker, alla kort i samma vit/ljusblå som stödverktygskortet
   (utom herokortet), knapparna i den mörkblå som korten hade, rutnätet helt
   borta, och siffrorna i "Så går det till" helt vita.

   Det vänder polariteten: mörkt fält, ljusa kort. Fältet har ljusats upp i två
   steg på Victors begäran: #2C5070 -> #3A6084 -> #446E95 (relativ luminans
   0,074 -> 0,109 -> 0,152). Andra steget krävde att brödtexten på fältet gick
   från ljusgrå till HELT vit, annars hade den fallit under AA. Mätt på #446E95:
     vit rubrik och brödtext på fältet ... 5,37:1
     etikett #E4F1FA på fältet ........... 4,67:1
     ljust kort mot fältet ............... 3,24:1   (kortet syns som objekt)
     navytext på kortet .................. ~13:1
     brödtext på kortet (#35506A) ........ ~6:1
     vit siffra på mörkblå bricka ........ 13,45:1

   Taket är nära: vid #49759D faller etiketten till 4,23:1. Ska fältet ljusna
   mer måste texten på fältet bli mörk i stället, vilket samtidigt betyder att
   vita rubriker inte längre går.

   Siffrorna i processkorten var gradientfylld text direkt på kortet. Helt vita
   på ett ljust kort går inte, så de sitter nu på en mörkblå bricka. Då blir de
   vita på riktigt och läser samtidigt som stegmarkörer. */

/* ---------- 1. Fältet ---------- */

body { background-color: #447296 !important; }

/* Fältet definieras numera i bordic-remake.css så att alla tre sidorna delar
   exakt samma bakgrund. Den här filen sköter bara startsidans text och kort. */

/* ---------- 1b. Lager som annars bryter det genomgående fältet ---------- */

/* Heron målade en egen platta i #6B90AD som tonade ut i nederkanten. Det var
   den som såg ut som en ful ljus gradient direkt efter heron. Släckt, heron
   ärver det gemensamma fältet i stället. */
#hero > div:first-child { background-image: none !important; }
#hero::before,
#hero::after { content: none !important; }

/* Overrides A4 la en 55-procentig nästan vit skärm över #problemet. Samma sak. */
#problemet { background: none !important; }

/* Prickraster och sektionsavdelare. */
#process::after,
#resultat::after,
#process::before,
#om::before { content: none !important; }

/* ---------- 1c. Herons rörliga struktur genom hela sidan ---------- */

/* Vågdekoren låg absolut inuti #hero och tog därför slut med heron. Fixerad
   till vyn i stället, så samma struktur följer med hela vägen ner. Ingen
   förfader har transform eller filter, så fixed slipper ut ur heron. */
#hero > div:nth-child(2) {
  position: fixed !important;
  inset: 0 !important;
  height: 100vh !important;
  z-index: 0 !important;
  opacity: .75 !important;
}
#hero > div:nth-child(2) svg { height: 100% !important; }

/* Lagret har en inline mask som tonar bort strukturen i nederkanten. Den satt
   där för att dekoren skulle sluta innan heron tog slut. Nu ska den inte sluta
   alls, så masken bort. Inline style slås bara av !important. */
#hero > div:nth-child(2) {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* ---------- 2. Text direkt på fältet ---------- */

/* Rubriker vita. */
main h2,
section[data-theme="hero"]:not(#hero) h2 { color: #ffffff !important; }

#hero h1 {
  background: linear-gradient(180deg, #ffffff 62%, #eaf3fa 86%, #cfe3f2 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

#hero .hero-tagline { color: #ffffff !important; }
#hero span.font-mono.uppercase { color: #eff7fd !important; }
#hero span[class*="rounded-full"][class*="border"] {
  background: rgba(143, 188, 217, .14) !important;
  border-color: rgba(143, 188, 217, .32) !important;
}

/* Pulspunkten i heropillret var bordic-primary, i stort sett samma ljushet som
   det uppljusade fältet. Ljusas upp så den syns. */
#hero span[class*="w-2"][class*="rounded-full"] { background-color: #9fd8f5 !important; }

/* Etiketter och ingresser på fältet. Reglerna är breda med flit: allt som
   ligger på fältet blir ljust, och de ljusa korten tar tillbaka mörk text
   längre ner med högre specificitet. */
#hero ~ section span.font-mono { color: #eff7fd !important; }
#hero ~ section .text-bordic-navy { color: #ffffff !important; }
#hero ~ section .text-bordic-muted,
#hero ~ section > div > p { color: #ffffff !important; }
/* Accenten är avfärgad. Komponenten sätter #456F8A som inline style, och inline
   slås bara av !important, därför inherit i stället för att bara ta bort regeln.
   Rubriken blir en enda vit mening. */
#om h2 span { color: inherit !important; }

/* Kortblocket är 85 px kortare än textkolumnen och satt i items-start, så det
   låg och hängde i överkanten. Centrerat mot kolumnen flyttas det ned 43 px och
   raderna ramar in texten symmetriskt. */
#om div[class*="md:grid-cols-2"] { align-items: center !important; }

/* Navigationen mot mörkt fält. */
nav.fixed a,
nav.fixed span,
nav.fixed button { color: #ffffff !important; }
nav.fixed a[class*="btn-magnetic"],
nav.fixed a[class*="btn-magnetic"] span { color: #ffffff !important; }
nav.fixed svg path,
nav.fixed svg circle { fill: #ffffff !important; }
nav.fixed svg line { stroke: #ffffff !important; }

/* ---------- 3. Korten: vit/ljusblå, som stödverktygskortet ---------- */

#hero ~ section .card-surface,
#hero ~ section form.card-surface,
#hero ~ section div[class*="bg-white/50"],
section[data-theme="hero"]:not(#hero) .grid > div:last-child .rounded-2xl {
  background: linear-gradient(135deg, rgba(238, 244, 249, .92) 0%, rgba(213, 230, 244, .78) 100%) !important;
  border: 1px solid rgba(255, 255, 255, .58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    0 24px 60px -32px rgba(3, 16, 30, .58) !important;
}
#hero ~ section div[class*="bg-white/50"] button { background: transparent !important; }

/* Stödverktygskortet är också ett ljust kort och bär sin egen rubrik. */
#hero ~ section div[class*="rounded-3xl"] h2,
#hero ~ section div[class*="rounded-3xl"] .text-bordic-navy { color: #001026 !important; }
#hero ~ section div[class*="rounded-3xl"] p,
#hero ~ section div[class*="rounded-3xl"] .text-bordic-muted { color: #35506a !important; }
#hero ~ section div[class*="rounded-3xl"] span.font-mono { color: #1c3a56 !important; }

/* ...men den mörka panelen inuti det kortet behåller ljus text. */
#hero ~ section div[class*="rounded-3xl"] div[class*="rounded-2xl"] p,
#hero ~ section div[class*="rounded-3xl"] div[class*="rounded-2xl"] span { color: rgba(255, 255, 255, .86) !important; }
#hero ~ section div[class*="rounded-3xl"] div[class*="rounded-2xl"] div { color: #ffffff !important; }

/* Text på de ljusa korten. */
#hero ~ section .card-surface h3,
#hero ~ section .card-surface h4,
#hero ~ section .card-surface .text-bordic-navy,
#hero ~ section div[class*="bg-white/50"] button span,
#hero ~ section div[class*="bg-white/50"] .text-bordic-navy,
section[data-theme="hero"]:not(#hero) .rounded-2xl h3,
section[data-theme="hero"]:not(#hero) .rounded-2xl strong { color: #001026 !important; }

#hero ~ section .card-surface p,
#hero ~ section .card-surface li,
#hero ~ section .card-surface .text-bordic-muted,
#hero ~ section div[class*="bg-white/50"] p,
#hero ~ section div[class*="bg-white/50"] div,
section[data-theme="hero"]:not(#hero) .rounded-2xl,
section[data-theme="hero"]:not(#hero) .rounded-2xl p,
section[data-theme="hero"]:not(#hero) .rounded-2xl li,
section[data-theme="hero"]:not(#hero) .rounded-2xl span:not(.font-mono) { color: #35506a !important; }

section[data-theme="hero"]:not(#hero) .rounded-2xl span.font-mono { color: #1c3a56 !important; }
#hero ~ section:not(#process) .card-surface span.font-mono { color: #1c3a56 !important; }
#hero ~ section .card-surface .text-bordic-navy,
#hero ~ section .card-surface p.text-bordic-navy { color: #001026 !important; }

/* Ikonbrickorna: ljus bricka, navystreck i ikonerna fungerar. */
#hero ~ section .card-surface div[class*="w-14"][class*="rounded-2xl"],
#hero ~ section .card-surface div[class*="w-12"][class*="rounded-2xl"] {
  background: linear-gradient(140deg, rgba(29, 100, 154, .12), rgba(46, 134, 193, .05) 60%, rgba(212, 230, 244, .30)) !important;
  border: 1px solid rgba(29, 100, 154, .26) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85) !important;
}

/* Formulärfälten. */
#hero ~ section form.card-surface input,
#hero ~ section form.card-surface textarea {
  background: rgba(255, 255, 255, .96) !important;
  color: #0c2340 !important;
  border-color: rgba(29, 100, 154, .28) !important;
}

/* Avdelare inne i korten. */
#hero ~ section .card-surface [class*="border-bordic-primary"] { border-color: rgba(29, 100, 154, .20) !important; }

/* Punkter, ikonbricka och knapptext i Bordic Löpande-kortet var byggda för
   ett mörkt kort och blev osynliga när kortet blev ljust. */

/* Punktmarkörerna i listan. */
section[data-theme="hero"]:not(#hero) .rounded-2xl li span[class*="rounded-full"] {
  background-color: #1a3348 !important;
}

/* Ikonbrickan uppe till vänster: mörk bricka, den vita ikonen fungerar då. */
section[data-theme="hero"]:not(#hero) .rounded-2xl div[class*="w-11"][class*="rounded-xl"] {
  background: linear-gradient(158deg, #1f3c53 0%, #14293a 100%) !important;
  border: 1px solid rgba(160, 200, 226, .24) !important;
}

/* Knappens etikett och pil ska vara vita, inte kortets mörka brödtextfärg.
   Kortregeln ".rounded-2xl span:not(.font-mono)" har (1,3,2) i specificitet och
   vann över en knappregel på (1,2,3), eftersom klassantalet väger tyngre än
   elementantalet. Därför måste .rounded-2xl med i selektorn här också. */
section[data-theme="hero"]:not(#hero) .rounded-2xl a.btn-magnetic span,
section[data-theme="hero"]:not(#hero) .rounded-2xl a.btn-magnetic svg { color: #ffffff !important; }
section[data-theme="hero"]:not(#hero) .rounded-2xl a.btn-magnetic svg [stroke] { stroke: #ffffff !important; }

/* Prispillret sitter på det ljusa kortet och behöver mörk text. */
section[data-theme="hero"]:not(#hero) .rounded-2xl span[class*="rounded-full"][class*="border"] {
  background: rgba(255, 255, 255, .70) !important;
  border-color: rgba(29, 100, 154, .26) !important;
}

/* ---------- 4. Siffrorna i "Så går det till" ---------- */

/* Var gradientfylld monosiffra med inledande nolla. Nollan är borttagen i
   bundlen och siffran satt i Outfit i stället för IBM Plex Mono, på en rund
   mörkblå bricka. En ensam siffra i displaysnittet läser renare än "01" i
   monospace, och den runda brickan gör den till en tydlig stegmarkör. */
#process .card-surface span.font-mono {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.35rem !important;
  height: 2.35rem !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(158deg, #1f3c53 0%, #14293a 100%) !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  font-family: Outfit, system-ui, sans-serif !important;
  font-size: 1.28rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 8px 20px -12px rgba(3, 16, 30, .8) !important;
}

/* ---------- 5. Knapparna: samma ton som footern ---------- */

/* Victor 2026-08-08: allt som bar den mörkblå tonen ska ha footerns färg.
   Footern är linear-gradient(180deg, #1F3C53, #1A3348, #14293A), så knappar,
   brickor och band går på #1F3C53 -> #14293A i sin egen vinkel. */

main a.btn-magnetic,
main button[type="submit"],
main a[href="/boka/"],
main a[href="/kostnadsrontgen"] {
  background-image: linear-gradient(158deg, #1f3c53 0%, #14293a 100%) !important;
  background-color: #1a3348 !important;
  border-color: rgba(160, 200, 226, .28) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 14px 32px -18px rgba(3, 16, 30, .8) !important;
}
main a.btn-magnetic span,
main button[type="submit"] span,
main a[href="/boka/"] span,
main a[href="/kostnadsrontgen"] span { color: #ffffff !important; }
/* Den synliga fyllningen sitter i ett absolut .btn-bg-lager inuti knappen,
   inte på ankaret. Det är det lagret som måste vara mörkblått. */
main a.btn-magnetic .btn-bg,
main button[type="submit"] .btn-bg {
  background: linear-gradient(158deg, #1f3c53 0%, #14293a 100%) !important;
  opacity: 1 !important;
}
main a.btn-magnetic:hover,
main button[type="submit"]:hover { filter: brightness(1.12); }

/* Bara sekundärknappen är kontur. Båda heroknapparna har "border-white" i
   klasslistan, så den måste pekas ut på href, annars blir primären också ihålig. */
#hero a.hero-cta[href="#process"],
#hero a.hero-cta[href="#process"] .btn-bg {
  background-image: none !important;
  background-color: rgba(255, 255, 255, .05) !important;
  border-color: rgba(190, 220, 240, .46) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
#hero a.hero-cta[href="#process"]:hover { background-color: rgba(255, 255, 255, .13) !important; }

#hero a.hero-cta[href="/boka/"],
#hero a.hero-cta[href="/boka/"] .btn-bg {
  background-image: linear-gradient(158deg, #1f3c53 0%, #14293a 100%) !important;
  background-color: #1a3348 !important;
  border-color: rgba(160, 200, 226, .28) !important;
  color: #ffffff !important;
}

/* Knappen i Bordic Löpande-kortet: overrides A6 fyller den med vit 16 % med
   hög specificitet, och kortets .btn-bg-lager renderas 0x0 så det syns inte.
   Fyllningen måste därför sitta på ankaret och slå A6. */
section[data-theme="hero"]:not(#hero) .grid a.btn-magnetic[href="/boka/"],
section[data-theme="hero"]:not(#hero) .grid a.btn-magnetic.w-full[href="/boka/"] {
  background-image: linear-gradient(158deg, #1f3c53 0%, #14293a 100%) !important;
  background-color: #1a3348 !important;
  border: 1px solid rgba(160, 200, 226, .28) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 14px 32px -18px rgba(3, 16, 30, .8) !important;
}

/* ---------- 6. Herokortet lämnas mörkt (Victors undantag) ---------- */

#hero .card-surface-dark {
  background: linear-gradient(158deg, #1f3c53 0%, #14293a 100%) !important;
}
#hero .card-surface-dark p.font-mono { color: rgba(255, 255, 255, .82) !important; }

/* Herokortet tog footerns ljusare ton, så de dova etiketterna och värdena
   inuti behövde en knuff. De låg på 4,17 respektive 4,20. */
#hero .card-surface-dark span.font-mono,
#hero .card-surface-dark .font-body { color: rgba(255, 255, 255, .90) !important; }

/* ---------- 7. Processens informationsband och footern ---------- */

#process .rounded-2xl.px-8.py-6.text-center.relative.overflow-hidden {
  background: linear-gradient(158deg, #1f3c53 0%, #14293a 100%) !important;
  border-color: rgba(160, 200, 226, .24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 14px 34px -20px rgba(3, 16, 30, .7) !important;
}

/* Footern ska fortfarande läsa som en mörkare avslutning på fältet. */
footer.bg-bordic-navy,
footer[class*="bg-bordic-navy"] {
  background: linear-gradient(180deg, #1f3c53 0%, #1a3348 46%, #14293a 100%) !important;
}

/* Prissektionens ingress och disclaimer låg på vit 85 respektive 82 procent,
   vilket ger 4,39 och 4,22 mot det uppljusade fältet, strax under AA. Helt vita.
   Kortets egen regel (.rounded-2xl p) har högre specificitet och påverkas inte. */
section[data-theme="hero"]:not(#hero) p[class*="text-white"]:not(.rounded-2xl p) { color: #ffffff !important; }

/* Navets egen knapp låg kvar på den ljusare stålgradienten och ska också ha
   footerns ton. Källan sitter utanför den här filen, så den överskrivs här. */
nav.fixed a[class*="btn-magnetic"],
nav.fixed a[class*="btn-magnetic"] .btn-bg {
  background-image: linear-gradient(158deg, #1f3c53 0%, #14293a 100%) !important;
  background-color: #1a3348 !important;
  border-color: rgba(160, 200, 226, .26) !important;
}

/* ---------- 8. Navpillret: frostat glas ---------- */

/* React-komponenten byter till "bg-white/60 backdrop-blur-2xl" vid scroll, vilket
   blev en nästan opak vit platta mot det blå fältet. Ersätts med tunt glas.
   VARNING om mättnaden: hög saturate gör pillret till en mättad blå platta som
   sticker ut MER än en vit fyllning, alltså tvärtemot avsikten. Provkört på
   2,1, då läste pillret som en egen färgruta. 1,12 håller det genomskinligt. */
nav.fixed[class*="bg-white"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .025) 100%) !important;
  backdrop-filter: blur(22px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 14px 36px -26px rgba(3, 16, 30, .35) !important;
}

/* Fyllningen är nu så tunn att pillret ibland passerar över ett ljust kort med
   vit text ovanpå. Blurren tar inte den skillnaden, så etiketterna får en svag
   mörk skugga. Den syns inte mot fältet och räddar dem mot det ljusa. */
nav.fixed a,
nav.fixed span,
nav.fixed button { text-shadow: 0 1px 3px rgba(4, 18, 32, .45); }
nav.fixed a[class*="btn-magnetic"],
nav.fixed a[class*="btn-magnetic"] span { text-shadow: none; }

/* Högst upp ska pillret inte finnas visuellt alls. Helt genomskinligt är det
   enda som EXAKT matchar bakgrunden bakom, oavsett var på fältet det ligger,
   och då försvinner konturen med. Glaset tänds först vid scroll. */
nav.fixed[class*="bg-transparent"] {
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* ---------- 9. Två kontrastmissar som mätningen fångade ---------- */

/* Spökknappen i heron låg på 4,19:1. Ytan tonades ned till .05 i regeln ovan,
   där selektorn har klassen med och vinner. Vit text landar då på 4,64:1. */
/* Länken i kontaktkortet låg på 4,42:1 mot det ljusa kortet. Mörkare blå ger 5,7:1. */
#kontakt a[href^="mailto:"] { color: #17547f !important; }