/*
 Theme Name:   Ljunggrens Child
 Theme URI:    https://ljunggrensfonsterputs.se/
 Description:  Child theme till Astra för Ljunggrens Fönsterputs & Städservice AB. Byggt av Proud Media. Innehåller skissens formgivning.
 Author:       Proud Media
 Author URI:   https://proudmedia.se/
 Template:     astra
 Version:      1.21.3
 Text Domain:  ljunggrens-child
*/

/* ==========================================================================
   Ljunggrens Fönsterputs & Städservice AB — skiss fas 1 (v2)
   Proud Media · Tier 2 (30 000)
   Enkel, bilddriven layout. Rena rubriker utan etiketter. Pill-knappar.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  --djuphav:      #16293A;
  --djuphav-mjuk: #1E3849;
  --rod:          #D93A4A;
  --rod-mork:     #A82734;
  --klarglas:     #2E7FA3;
  --klarglas-ljus:#5BA6C7;
  --dagsljus:     #DCE9F0;
  --vit:          #FFFFFF;
  --papper:       #F6F9FA;
  --skiffer:      #4A5A66;
  --brodtext:     #14212A;
  --kantlinje:    #E4EDF2;

  --f-rubrik: "Familjen Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --f-brod:   "Instrument Sans", "Helvetica Neue", system-ui, sans-serif;

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
  --sektion: clamp(64px, 8vw, 118px);
  --radie: 20px;        /* kort och bilder */
  --radie-liten: 12px;
  --pill: 999px;        /* alla knappar */
  --header-h: 68px;
  --header-topp: 18px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --skugga: 0 10px 30px rgba(22,41,58,.08);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--f-brod);
  font-size:17px; line-height:1.62;
  color:var(--brodtext); background:var(--vit);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--klarglas); text-decoration:none; }
a:hover{ color:var(--djuphav); }
button{ font:inherit; }
:focus-visible{ outline:3px solid var(--klarglas); outline-offset:3px; border-radius:6px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--rod); color:#fff; padding:12px 20px; font-weight:600;
}
.skip-link:focus{ left:0; color:#fff; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container--smal{ max-width:860px; }

.sektion{ padding-block:var(--sektion); }
.bg-papper{ background:var(--papper); }
.bg-djuphav{ background:var(--djuphav); color:#C5D4DE; }

/* --------------------------------------------------------------------------
   3. Typografi — rena rubriker, inga etiketter ovanför
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--f-rubrik); font-weight:600;
  line-height:1.06; letter-spacing:-.028em;
  margin:0 0 .45em; color:var(--djuphav);
}
h1{ font-size:clamp(2.7rem, 6.2vw, 4.9rem); letter-spacing:-.035em; }
h2{ font-size:clamp(2rem, 3.9vw, 3.15rem); }
h3{ font-size:1.22rem; line-height:1.25; letter-spacing:-.015em; }
h4{ font-size:1rem; letter-spacing:0; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
.bg-djuphav h1,.bg-djuphav h2,.bg-djuphav h3,.bg-djuphav h4{ color:#fff; }

.lead{ font-size:clamp(1.05rem,1.3vw,1.18rem); line-height:1.58; color:var(--skiffer); max-width:52ch; }
.bg-djuphav .lead{ color:#B4C6D3; }
.finstilt{ font-size:.85rem; line-height:1.5; color:var(--skiffer); }
.bg-djuphav .finstilt{ color:#8497A6; }

/* Sektionshuvud: rubrik vänster, en kort rad höger */
.sek-huvud{ margin-bottom:clamp(34px,4vw,54px); }
.sek-huvud h2{ max-width:16ch; }
.sek-huvud--delad{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:30px; align-items:end;
}
.sek-huvud--delad .lead{ padding-bottom:.4em; }

/* --------------------------------------------------------------------------
   4. Knappar — helt rundade pills, alltid solid bakgrund
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:54px; padding:0 30px;
  font-size:1rem; font-weight:600; letter-spacing:-.005em;
  border:1.5px solid transparent; border-radius:var(--pill);
  cursor:pointer; text-align:center; white-space:nowrap;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.btn:active{ transform:translateY(1px); }

/* Astras knappstilar skrivs ut efter barntemat och ger CF7:s submit
   fyrkantiga 4 px-hörn trots att den har klassen .btn. */
.wpcf7 input[type="submit"].btn,
.wpcf7 button[type="submit"].btn{
  border-radius:var(--pill) !important;
  padding:0 30px !important;
}
.btn--primar{ background:var(--rod); color:#fff; border-color:var(--rod); }
.btn--primar:hover{ background:var(--rod-mork); border-color:var(--rod-mork); color:#fff; }
.btn--sekundar{ background:var(--vit); color:var(--rod); border-color:var(--rod); }
.btn--sekundar:hover{ background:#FFF1F2; color:var(--rod-mork); border-color:var(--rod-mork); }
.btn--liten{ min-height:46px; padding:0 22px; font-size:.95rem; }
.btn-rad{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

.lank-pil{ display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--klarglas); min-height:44px; }
.lank-pil svg{ transition:transform .2s var(--ease); }
.lank-pil:hover svg{ transform:translateX(4px); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:calc(var(--header-topp) + var(--header-h) + 24px);
  padding-bottom:clamp(48px,9vw,120px);
  overflow:hidden; background:var(--djuphav);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media video,.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:58% 50%; }
.hero-tona{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(22,41,58,.92) 0%, rgba(22,41,58,.76) 34%, rgba(22,41,58,.34) 64%, rgba(22,41,58,.1) 100%),
    linear-gradient(180deg, rgba(22,41,58,.5) 0%, rgba(22,41,58,0) 26%, rgba(22,41,58,.45) 100%);
}
.hero .container{ position:relative; z-index:2; }
.hero-innehall{ max-width:700px; }
.hero h1{ color:#fff; margin-bottom:20px; }
.hero .lead{ color:#CFDCE5; max-width:44ch; font-size:clamp(1.08rem,1.35vw,1.24rem); }
.hero .btn-rad{ margin-top:32px; }

/* Recos betygsskala: fyllda cirklar, inte stjärnor */
.betyg{ display:inline-flex; gap:4px; align-items:center; }
.betyg img{ width:15px; height:15px; }
.betyg--stor img{ width:19px; height:19px; }
.reco-marke{
  display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-top:26px; color:#fff; font-size:.94rem;
}
.reco-marke .ordmarke{ width:70px; height:auto; }
.reco-marke .avdelare{ color:rgba(255,255,255,.35); }

/* Förtroenderad längst ned i heron */
.hero-fakta{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  border-top:1px solid rgba(255,255,255,.16);
  padding-block:20px;
}
.hero-fakta ul{
  display:flex; gap:clamp(20px,4vw,56px); flex-wrap:wrap;
  list-style:none; margin:0; padding:0;
}
.hero-fakta li{
  display:flex; align-items:center; gap:9px;
  color:#E3EBF1; font-size:.92rem; font-weight:500;
}
.hero-fakta svg{ width:17px; height:17px; color:var(--klarglas-ljus); flex:none; }

/* --------------------------------------------------------------------------
   7. Kundloggor — i färg
   -------------------------------------------------------------------------- */
.loggor{ padding-block:clamp(36px,4.5vw,54px); }
.loggor p{
  text-align:center; font-size:.82rem; color:var(--skiffer);
  margin:0 0 26px; font-weight:500;
}
.logg-rad{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(22px,3vw,44px);
}
.logg-rad img{
  flex:0 0 calc(20% - 36px); width:calc(20% - 36px); min-width:0;
  object-fit:contain; opacity:.92;
  transition:opacity .25s ease, transform .25s ease;
}
.logg-rad img:hover{ opacity:1; transform:translateY(-2px); }

/* --------------------------------------------------------------------------
   8. Tjänster — fotokort
   -------------------------------------------------------------------------- */
.tjanster{
  display:grid; gap:14px;
  grid-template-columns:repeat(5,1fr);
}
.kort{
  display:flex; flex-direction:column;
  background:var(--vit); border:1px solid var(--kantlinje);
  border-radius:var(--radie); overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s var(--ease);
}
.kort:hover{ border-color:#C9DCE7; box-shadow:var(--skugga); transform:translateY(-3px); }
.kort-bild{ position:relative; overflow:hidden; background:var(--dagsljus); }
.kort-bild img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.kort-text{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.kort h3{ margin:0 0 7px; font-size:1.08rem; }
.kort p{ color:var(--skiffer); font-size:.91rem; line-height:1.5; margin:0 0 16px; }
.kort .lank-pil{ margin-top:auto; font-size:.92rem; min-height:32px; }

.tagg{
  position:absolute; top:12px; left:12px; z-index:2;
  display:inline-flex; align-items:center;
  padding:6px 13px; border-radius:var(--pill);
  background:var(--rod); color:#fff;
  font-size:.72rem; font-weight:600; letter-spacing:.03em;
}
.pris-etikett{
  display:inline-block; margin:-6px 0 14px;
  font-size:.86rem; font-weight:600; color:var(--klarglas);
}

/* --------------------------------------------------------------------------
   9. Split — bild + text
   -------------------------------------------------------------------------- */
.split{
  display:grid; gap:clamp(32px,4.5vw,64px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
}
.split--bild-vanster .split-bild{ order:-1; }
.split--fyll{ align-items:stretch; }
.split--fyll .split-bild{ display:flex; }
.split--fyll .split-bild img{ aspect-ratio:auto; height:100%; min-height:440px; }
.split-bild img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radie); }
.split-bild--hog img{ aspect-ratio:3/4; }

.punkter{ list-style:none; margin:24px 0 30px; padding:0; }
.punkter li{
  display:flex; gap:12px; align-items:flex-start;
  padding:8px 0; color:var(--skiffer); font-size:1rem;
}
.punkter svg{ width:19px; height:19px; flex:none; margin-top:4px; color:var(--klarglas); }
.bg-djuphav .punkter li{ color:#B4C6D3; }
.bg-djuphav .punkter svg{ color:var(--klarglas-ljus); }

/* Priskort */
.pris-kort{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 26px; margin-bottom:12px;
  background:var(--vit); border:1px solid var(--kantlinje);
  border-radius:var(--radie-liten);
  transition:border-color .25s ease;
}
.pris-kort:hover{ border-color:var(--klarglas); }
.pris-kort .typ{ font-family:var(--f-rubrik); font-size:1.1rem; font-weight:600; color:var(--djuphav); margin:0 0 3px; letter-spacing:-.015em; }
.pris-kort .villkor{ font-size:.82rem; color:var(--skiffer); margin:0; }
.pris-kort .belopp{
  font-family:var(--f-rubrik); font-size:clamp(1.4rem,2.1vw,1.85rem); font-weight:600;
  color:var(--djuphav); white-space:nowrap; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.bg-papper .pris-kort{ background:var(--vit); }

/* --------------------------------------------------------------------------
   10. Varför oss — 2×2 skäl bredvid en bild
   -------------------------------------------------------------------------- */
.skal{ display:grid; grid-template-columns:1fr 1fr; gap:26px 30px; margin-top:32px; }
.skal > div .ikon{ width:30px; height:30px; color:var(--klarglas); margin-bottom:12px; }
.skal h3{ font-size:1.06rem; margin:0 0 6px; }
.skal p{ font-size:.95rem; color:var(--skiffer); margin:0; }

/* --------------------------------------------------------------------------
   11. Så går det till — tre kort
   -------------------------------------------------------------------------- */
.steg-rad{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.steg{
  background:var(--vit); border:1px solid var(--kantlinje);
  border-radius:var(--radie); padding:30px 28px 32px;
}
.steg .nr{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--pill);
  background:var(--dagsljus); color:var(--djuphav);
  font-family:var(--f-rubrik); font-weight:600; font-size:1rem;
  margin-bottom:18px;
}
.steg--ett .nr{ background:var(--rod); color:#fff; }
.steg h3{ margin:0 0 8px; }
.steg p{ color:var(--skiffer); font-size:.96rem; margin:0; }

/* --------------------------------------------------------------------------
   12. Omdömen — Reco
   -------------------------------------------------------------------------- */
.reco-grid{
  display:grid; gap:18px;
  grid-template-columns:minmax(0,.72fr) repeat(3,minmax(0,1fr));
  align-items:stretch;
}
.reco-panel{
  background:var(--djuphav); color:#fff;
  border-radius:var(--radie); padding:30px 28px;
  display:flex; flex-direction:column;
}
.reco-panel .toppen{ display:flex; align-items:center; gap:10px; margin-bottom:auto; }
.reco-panel .toppen .symbol{ width:22px; height:auto; }
.reco-panel .toppen .ordmarke{ width:88px; height:auto; }
.reco-panel .snitt{
  font-family:var(--f-rubrik); font-size:3.2rem; font-weight:600; line-height:1;
  letter-spacing:-.04em; margin:26px 0 10px; font-variant-numeric:tabular-nums;
}
.reco-panel .antal{ font-size:.92rem; color:#9FB4C2; margin:12px 0 20px; }
.reco-panel .betyg{ margin-bottom:0; }
.reco-panel .lank-pil{ color:#fff; margin-top:0; }
.reco-panel .lank-pil:hover{ color:var(--klarglas-ljus); }

.omdome{
  background:var(--vit); border:1px solid var(--kantlinje);
  border-radius:var(--radie); padding:26px 26px 28px;
  display:flex; flex-direction:column;
}
.omdome .betyg{ margin-bottom:14px; }
.omdome blockquote{ margin:0 0 20px; font-size:.98rem; line-height:1.58; color:var(--brodtext); }
.omdome .fot{ margin-top:auto; display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.omdome .namn{ font-weight:600; color:var(--djuphav); font-size:.93rem; }
.omdome .datum{ font-size:.82rem; color:var(--skiffer); }

/* --------------------------------------------------------------------------
   13. CTA-band med bild
   -------------------------------------------------------------------------- */
.cta-band{ position:relative; overflow:hidden; background:var(--djuphav); }
.cta-band .bakgrund{ position:absolute; inset:0; z-index:0; }
.cta-band .bakgrund img{ width:100%; height:100%; object-fit:cover; }
.cta-band .tona{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(22,41,58,.96) 0%, rgba(22,41,58,.9) 48%, rgba(22,41,58,.62) 100%);
}
.cta-band .container{ position:relative; z-index:2; }
.cta-band-inner{ padding-block:clamp(60px,7.5vw,100px); max-width:620px; }
.cta-band h2{ margin-bottom:14px; }
.cta-band .btn-rad{ margin-top:28px; }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.footer{ background:var(--djuphav); color:#A0B4C2; padding-block:clamp(54px,6.5vw,82px) 0; }
.footer-grid{ display:grid; gap:clamp(30px,4vw,54px); grid-template-columns:1.6fr 1fr 1fr 1.2fr; }
.footer h4{ color:#fff; font-size:.92rem; font-weight:600; margin:0 0 16px; letter-spacing:-.01em; }
.footer ul{ list-style:none; margin:0; padding:0; }
.footer a{ color:#A0B4C2; display:inline-flex; align-items:center; min-height:38px; font-size:.96rem; }
.footer a:hover{ color:#fff; }
.footer .footer-logo img{ height:30px; margin-bottom:20px; }
.footer address{ font-style:normal; font-size:.96rem; line-height:1.85; }
.footer .org{ margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); font-size:.85rem; color:#7B91A2; }
.social{ display:flex; gap:10px; margin-top:14px; }
.social a{
  width:42px; height:42px; min-height:42px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.16); border-radius:var(--pill); color:#A0B4C2;
}
.social a:hover{ background:var(--klarglas); border-color:var(--klarglas); color:#fff; }

.fortroende{
  margin-top:clamp(40px,5vw,60px); padding:22px clamp(20px,3vw,32px);
  background:var(--vit); border-radius:var(--radie);
  display:flex; align-items:center; justify-content:center;
  gap:clamp(24px,4vw,54px); flex-wrap:wrap;
}
.fortroende img{ width:180px; max-width:42%; object-fit:contain; }
.true-original{ display:block; line-height:0; }
.true-original img{ width:74px; border-radius:8px; }

.footer-botten{
  margin-top:clamp(32px,4vw,48px); padding-block:22px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:8px 24px;
  align-items:center; justify-content:space-between;
  font-size:.86rem; color:#7B91A2;
}
.footer-botten nav{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-botten a{ min-height:30px; font-size:.86rem; }

/* --------------------------------------------------------------------------
   15. Undersida
   -------------------------------------------------------------------------- */
.sub-hero{
  position:relative; overflow:hidden; background:var(--djuphav); color:#C5D4DE;
  padding-top:calc(var(--header-topp) + var(--header-h) + clamp(52px,6vw,88px));
  padding-bottom:clamp(64px,7vw,104px);
}
.sub-hero .bakgrund{ position:absolute; inset:0; z-index:0; }
.sub-hero .bakgrund img{ width:100%; height:100%; object-fit:cover; }
.sub-hero .tona{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(22,41,58,.95) 0%, rgba(22,41,58,.86) 42%, rgba(22,41,58,.5) 100%);
}
.sub-hero .container{ position:relative; z-index:2; }
.sub-hero h1{ color:#fff; font-size:clamp(2.3rem,4.8vw,3.7rem); max-width:15ch; }
.sub-hero .lead{ color:#C5D4DE; }
.sub-hero .btn-rad{ margin-top:30px; }

.fakta-rad{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  margin-top:clamp(-44px,-3vw,-30px); position:relative; z-index:5;
}
.fakta-rad > div{
  background:var(--vit); border:1px solid var(--kantlinje);
  border-radius:var(--radie-liten); padding:24px 24px 26px;
}
.fakta-rad .tal{
  display:block; font-family:var(--f-rubrik); font-size:clamp(1.4rem,2vw,1.75rem);
  font-weight:600; color:var(--djuphav); line-height:1.05; margin-bottom:6px; letter-spacing:-.03em;
}
.fakta-rad .etikett{ font-size:.88rem; color:var(--skiffer); }

/* FAQ */
.faq{ max-width:840px; margin-inline:auto; }
.faq-item{
  background:var(--vit); border:1px solid var(--kantlinje);
  border-radius:var(--radie-liten); margin-bottom:10px; overflow:hidden;
}
.faq-knapp{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  width:100%; min-height:44px; padding:22px 24px;
  background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--f-rubrik); font-size:1.08rem; font-weight:600;
  color:var(--djuphav); letter-spacing:-.015em;
}
.faq-knapp:hover{ color:var(--klarglas); }
.faq-ikon{
  width:30px; height:30px; flex:none; border-radius:var(--pill);
  background:var(--papper);
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease), background-color .25s ease;
}
.faq-ikon svg{ width:14px; height:14px; color:var(--klarglas); }
.faq-knapp[aria-expanded="true"] .faq-ikon{ transform:rotate(180deg); background:var(--djuphav); }
.faq-knapp[aria-expanded="true"] .faq-ikon svg{ color:#fff; }
.faq-svar{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-svar-inner{ padding:0 24px 24px; color:var(--skiffer); }

/* Formulär */
.form-grid{
  display:grid; gap:clamp(30px,4vw,54px);
  grid-template-columns:minmax(0,.78fr) minmax(0,1fr); align-items:start;
}
.form-kort{
  background:var(--vit); border:1px solid var(--kantlinje);
  border-radius:24px; overflow:hidden;
  box-shadow:0 18px 48px rgba(22,41,58,.10);
}
.form-kropp{ padding:clamp(22px,3vw,34px); }

/* Contact Form 7 lägger in Turnstile-rutan som allra första element i
   formuläret. Den är osynlig (0 px hög) men ärver blockmarginalen, och
   tryckte därmed ner prispanelen ~20 px – det syntes som en vit remsa i
   kortets överkant. Blir den synlig vid en utmaning får den sin luft av
   formulärkroppen i stället. */
.wpcf7-form > .wpcf7-turnstile{ margin:0 !important; }

/* Prispanel som alltid ligger överst i kortet */
.pris-panel{
  background:var(--djuphav); color:#fff;
  padding:26px clamp(22px,3vw,34px) 24px;
  position:relative; overflow:hidden;
}
.pris-panel::after{
  content:""; position:absolute; right:-60px; top:-70px;
  width:230px; height:230px; border-radius:50%;
  background:radial-gradient(circle, rgba(46,127,163,.4), transparent 68%);
  pointer-events:none;
}
.pris-panel .inner{ position:relative; z-index:1; }
.pris-panel .etikett{
  display:block; font-size:.8rem; letter-spacing:.06em;
  text-transform:uppercase; color:#8FA8B8; margin-bottom:8px;
}
.pris-panel .summa{
  display:block; font-family:var(--f-rubrik);
  font-size:clamp(2.1rem,4vw,2.9rem); font-weight:600; line-height:1;
  letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
.pris-panel .villkor{ margin:12px 0 0; font-size:.86rem; color:#A8BDCB; }

/* Valgrupper — pills och kort istället för rullgardiner */
/* fieldset/legend nollställs så de beter sig som vanliga block */
.valgrupp{ margin:0 0 20px; padding:0; border:0; min-width:0; }
.valgrupp > .rubrik{
  display:block; float:none; width:100%; padding:0;
  font-size:.9rem; font-weight:600;
  color:var(--djuphav); margin-bottom:10px;
}
.valgrupp .hjalp{ font-size:.83rem; color:var(--skiffer); margin:10px 0 0; }
.villkorsfalt > .hjalp,
.wpcf7cf-group > .hjalp{ font-size:.83rem; color:var(--skiffer); margin:10px 0 0; }
/* Samma selektorer fungerar i skissen och i Contact Form 7.
   CF7 genererar: .wpcf7-list-item > label > input + .wpcf7-list-item-label
   Skissen genererar: .val-item      > label > input + .val-etikett          */
.val{ display:flex; flex-wrap:wrap; gap:8px; }
/* CF7 nästlar wrap > control > list-item, så båda nivåerna måste
   lösas upp för att list-item ska bli barn i rutnätet. */
.val .wpcf7-form-control-wrap,
.val .wpcf7-form-control,
.form-kropp .val .wpcf7-form-control-wrap,
.form-kropp .val .wpcf7-form-control{ display:contents; }
.val .val-item,
.val .wpcf7-list-item{ display:block; margin:0; }
.val label{ display:block; cursor:pointer; margin:0; }
.val input[type="radio"]{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.val .val-etikett,
.val .wpcf7-list-item-label{
  display:flex; align-items:center; justify-content:center; gap:7px;
  min-height:46px; padding:0 18px;
  background:var(--papper); border:1.5px solid var(--kantlinje);
  border-radius:var(--pill);
  font-size:.94rem; font-weight:500; color:var(--brodtext);
  transition:all .18s ease;
}
.val label:hover .val-etikett,
.val label:hover .wpcf7-list-item-label{ border-color:#BBD3E0; background:var(--vit); }
.val input:checked + .val-etikett,
.val input:checked + .wpcf7-list-item-label{
  background:var(--djuphav); border-color:var(--djuphav); color:#fff;
}
.val input:focus-visible + .val-etikett,
.val input:focus-visible + .wpcf7-list-item-label{ outline:3px solid var(--klarglas); outline-offset:2px; }

/* Bredare kortval med pristext under namnet */
.val--kort{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.val--kort .wpcf7-form-control-wrap,
.val--kort .wpcf7-form-control,
.form-kropp .val--kort .wpcf7-form-control-wrap,
.form-kropp .val--kort .wpcf7-form-control{ display:contents; }
.val--kort .val-etikett,
.val--kort .wpcf7-list-item-label{
  flex-direction:column; align-items:flex-start; justify-content:center;
  gap:3px; min-height:70px; padding:14px 16px;
  border-radius:var(--radie-liten); text-align:left;
}
.val--kort .namn{ font-weight:600; font-size:.96rem; }
.val--kort .pris{ font-size:.82rem; color:var(--skiffer); }
.val--kort input:checked + .val-etikett .pris,
.val--kort input:checked + .wpcf7-list-item-label .pris{ color:#A8BDCB; }
.val--tva{ grid-template-columns:repeat(2,1fr); }

/* Dolda bärare av prisvillkor och uppmaningar – läses av script.js */
.uppmaning,.prisnot{ display:none; }

/* Stegare för antal */
.stegare{ display:flex; align-items:center; gap:10px; }
.stegare button{
  width:46px; height:46px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--papper); border:1.5px solid var(--kantlinje);
  border-radius:var(--pill); cursor:pointer; color:var(--djuphav);
  transition:all .18s ease;
}
.stegare button:hover{ background:var(--djuphav); border-color:var(--djuphav); color:#fff; }
.stegare input{ text-align:center; max-width:110px; }
.stegare .wpcf7-form-control-wrap{ display:block; max-width:110px; }
.stegare svg{ width:17px; height:17px; }

.rakna-bild{
  margin:0 0 18px; padding:16px; background:var(--papper);
  border:1px solid var(--kantlinje); border-radius:var(--radie-liten);
}
.rakna-bild img{ width:100%; max-width:380px; margin-inline:auto; }
.rakna-bild figcaption{ font-size:.83rem; color:var(--skiffer); text-align:center; margin-top:10px; }

.form-avdelare{
  display:flex; align-items:center; gap:14px;
  margin:26px 0 20px; font-size:.82rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--skiffer);
}
.form-avdelare::after{ content:""; flex:1; height:1px; background:var(--kantlinje); }
.falt{ margin-bottom:16px; }
/* CF7 lindar varje fält i en span – låt den bete sig som ett block */
.form-kropp .wpcf7-form-control-wrap{ display:block; }
.form-kropp .wpcf7-not-valid-tip{
  font-size:.83rem; color:var(--rod); margin-top:6px; display:block;
}
.form-kropp .wpcf7-response-output{
  margin:18px 0 0; padding:16px 18px;
  border:1px solid var(--kantlinje); border-radius:var(--radie-liten);
  font-size:.94rem;
}
.form-kropp .wpcf7-spinner{ margin:12px auto 0; display:block; }
.falt label{ display:block; font-size:.9rem; font-weight:600; color:var(--djuphav); margin-bottom:6px; }
.falt .krav{ color:var(--rod); }
.falt input,.falt select,.falt textarea{
  width:100%; min-height:50px; padding:13px 16px;
  font-family:var(--f-brod); font-size:16px; color:var(--brodtext);
  background:var(--papper); border:1px solid var(--kantlinje); border-radius:var(--radie-liten);
  transition:border-color .2s ease, background-color .2s ease;
}
.falt textarea{ min-height:112px; resize:vertical; }
.falt select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7FA3' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:19px; padding-right:44px;
}
.falt input:focus,.falt select:focus,.falt textarea:focus{ background:var(--vit); border-color:var(--klarglas); }
.falt .hjalp{ font-size:.83rem; color:var(--skiffer); margin:6px 0 0; }
.falt .fel{ font-size:.83rem; color:var(--rod); margin:6px 0 0; display:none; }
.falt.har-fel input,.falt.har-fel select,.falt.har-fel textarea{ border-color:var(--rod); }
.falt.har-fel .fel{ display:block; }
.falt-par{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* Godkännanderutan i förfrågan. Den ärver inte .falt – de reglerna stylar
   textfält och gjorde kryssrutan 22 × 50 px med rutan själv 1 px bred. */
.godkann{ margin:2px 0 18px; }
.godkann .wpcf7-list-item{ margin:0; }
.godkann label{
  display:flex; align-items:flex-start; gap:10px; margin:0; cursor:pointer;
  font-size:.9rem; font-weight:400; line-height:1.55; color:var(--skiffer);
}
.godkann input[type="checkbox"]{
  flex:0 0 auto; width:18px; height:18px; min-width:18px;
  margin:2px 0 0; padding:0; accent-color:var(--rod);
}
.godkann a{ color:var(--djuphav); text-decoration:underline; }
.godkann a:hover{ color:var(--rod); }
.godkann .wpcf7-not-valid-tip{
  display:block; margin-top:6px; font-size:.83rem; color:var(--rod);
}

.villkorsfalt,.underval{ display:none; }
.villkorsfalt.is-visible,.underval.is-visible{ display:block; }

.rakna-bild{
  margin:0 0 16px; padding:16px; background:var(--papper);
  border:1px solid var(--kantlinje); border-radius:var(--radie-liten);
}
.rakna-bild img{ width:100%; max-width:380px; margin-inline:auto; }
.rakna-bild figcaption{ font-size:.83rem; color:var(--skiffer); text-align:center; margin-top:10px; }

.form-kvitto{
  display:none; align-items:flex-start; gap:13px;
  padding:20px 22px; margin-bottom:4px;
  background:var(--dagsljus); border-radius:var(--radie-liten);
  color:var(--djuphav); font-size:.98rem;
}
.form-kvitto.is-visible{ display:flex; }
.form-kvitto svg{ width:21px; height:21px; flex:none; color:var(--klarglas); margin-top:2px; }

.kontakt-info{ list-style:none; margin:26px 0 0; padding:0; }
.kontakt-info li{
  display:flex; gap:13px; align-items:flex-start;
  padding:14px 0; border-bottom:1px solid var(--kantlinje);
}
.kontakt-info li:last-child{ border-bottom:0; }
.kontakt-info svg{ width:19px; height:19px; flex:none; color:var(--klarglas); margin-top:4px; }
.kontakt-info .etikett{ display:block; font-size:.82rem; color:var(--skiffer); margin-bottom:1px; }
.kontakt-info a,.kontakt-info span:not(.etikett){ font-weight:600; color:var(--djuphav); }
.kontakt-info a:hover{ color:var(--rod); }

/* --------------------------------------------------------------------------
   16. Rörelse — bara en mjuk intoning
   -------------------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease-out, transform .6s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* --------------------------------------------------------------------------
   17. Responsivt
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
  .nav-lank{ padding:0 9px; font-size:.9rem; }
  .tel-lank{ display:none; }
}

@media (max-width:1023px){
  .nav{ display:none; }
  .burger{ display:inline-flex; }
  .header-cta{ margin-left:auto; }

  .sek-huvud--delad{ grid-template-columns:1fr; align-items:start; }
  .tjanster{ grid-template-columns:repeat(6,1fr); }
  .tjanster > .kort{ grid-column:span 2; }
  .tjanster > .kort:nth-child(4),
  .tjanster > .kort:nth-child(5){ grid-column:span 3; }
  .split--fyll .split-bild img{ min-height:0; aspect-ratio:4/3; height:auto; }
  .split,.form-grid{ grid-template-columns:1fr; }
  .split--bild-vanster .split-bild{ order:0; }
  .split-bild--hog img{ aspect-ratio:4/3; }
  .reco-grid{ grid-template-columns:1fr 1fr; }
  .reco-panel{ grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; }
  .reco-panel .toppen{ margin-bottom:0; }
  .reco-panel .snitt{ margin:0; }
  .reco-panel .antal{ margin:0; }
  .steg-rad{ grid-template-columns:1fr; }
  .fakta-rad{ grid-template-columns:1fr 1fr; margin-top:-30px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .logg-rad img{ flex-basis:calc(33.333% - 30px); width:calc(33.333% - 30px); }
  .hero-fakta{ display:none; }
}

@media (max-width:719px){
  body{ font-size:16px; }
  :root{ --sektion:clamp(54px,12vw,76px); --header-topp:12px; --radie:18px; }

  .hero-tona{
    background:
      linear-gradient(180deg, rgba(22,41,58,.7) 0%, rgba(22,41,58,.84) 52%, rgba(22,41,58,.95) 100%),
      linear-gradient(90deg, rgba(22,41,58,.78), rgba(22,41,58,.46));
  }
  .hero-media video,.hero-media img{ object-position:64% 50%; }

  /* Flera knappar på mobil: alltid staplade, aldrig för breda */
  .btn-rad{ flex-direction:column; align-items:stretch; }
  .btn-rad .btn{ width:100%; max-width:300px; }

  .tjanster{ grid-template-columns:1fr; }
  .tjanster > .kort,
  .tjanster > .kort:nth-child(4),
  .tjanster > .kort:nth-child(5){ grid-column:span 1; }
  .val--kort{ grid-template-columns:1fr; }
  .reco-grid{ grid-template-columns:1fr; }
  .reco-panel{ flex-direction:column; align-items:flex-start; }
  .reco-panel .snitt{ margin:18px 0 8px; }
  .fakta-rad{ grid-template-columns:1fr; margin-top:-24px; }
  .footer-grid{ grid-template-columns:1fr; }
  .skal{ grid-template-columns:1fr; gap:22px; }
  .falt-par{ grid-template-columns:1fr; gap:0; }
  .logg-rad{ gap:18px 24px; }
  .logg-rad img{ flex-basis:calc(50% - 16px); width:calc(50% - 16px); }
  .pris-kort{ flex-direction:column; align-items:flex-start; gap:8px; }
  .cta-band .tona{ background:linear-gradient(180deg, rgba(22,41,58,.9), rgba(22,41,58,.96)); }
  .footer-botten{ justify-content:flex-start; }
}

/* --------------------------------------------------------------------------
   Personkort vid formuläret
   -------------------------------------------------------------------------- */
.person-kort{
  margin-top:28px; padding:20px;
  display:flex; gap:18px; align-items:center;
  background:var(--vit); border:1px solid var(--kantlinje);
  border-radius:var(--radie);
}
.person-kort img{
  width:96px; flex:none; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--radie-liten);
}
.person-text{ min-width:0; }
.person-namn{ display:block; font-family:var(--f-rubrik); font-weight:600; color:var(--djuphav); }
.person-roll{ display:block; font-size:.82rem; color:var(--skiffer); margin-bottom:8px; }
.person-text p{ margin:0; font-size:.92rem; line-height:1.55; color:var(--skiffer); }

/* --------------------------------------------------------------------------
   Före och efter — jämförelsereglage
   -------------------------------------------------------------------------- */
.ff-rad{
  display:grid; gap:clamp(16px,2.2vw,26px);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.ff{ margin:0; }
.ff-bild{
  position:relative; overflow:hidden;
  border-radius:var(--radie); background:var(--dagsljus);
  touch-action:pan-y;
}
.ff-bild img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.ff-mask{
  position:absolute; inset:0;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
}
.ff-tagg{
  position:absolute; bottom:14px; z-index:3;
  padding:5px 12px; border-radius:var(--pill);
  background:rgba(22,41,58,.72); color:#fff;
  font-size:.72rem; font-weight:600; letter-spacing:.03em;
  backdrop-filter:blur(4px);
  transition:opacity .2s ease;
}
.ff-tagg--fore{ left:14px; }
.ff-tagg--efter{ right:14px; }
.ff-handtag{
  position:absolute; top:0; bottom:0; z-index:2;
  left:var(--pos); width:3px; margin-left:-1.5px;
  background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.ff-handtag svg{
  width:20px; height:20px; flex:none; max-width:none;
  padding:8px; box-sizing:content-box;
  border-radius:var(--pill);
  background:var(--vit); color:var(--djuphav);
  box-shadow:0 6px 18px rgba(22,41,58,.26);
}
.ff-reglage{
  position:absolute; inset:0; z-index:4;
  width:100%; height:100%; margin:0; padding:0;
  -webkit-appearance:none; appearance:none;
  background:transparent; cursor:ew-resize;
}
.ff-reglage::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:46px; height:100%; background:transparent; cursor:ew-resize;
}
.ff-reglage::-moz-range-thumb{
  width:46px; height:999px; border:0; background:transparent; cursor:ew-resize;
}
.ff-reglage:focus-visible{ outline:3px solid var(--klarglas); outline-offset:3px; }
.ff figcaption{
  margin-top:14px; font-weight:600; color:var(--djuphav); font-size:.98rem;
}
.ff figcaption span{
  display:block; font-weight:400; font-size:.88rem; color:var(--skiffer); margin-top:1px;
}

@media (max-width:860px){
  .ff-rad{ grid-template-columns:1fr; gap:26px; }
  .person-kort{ padding:16px; gap:14px; }
  .person-kort img{ width:84px; }
}

/* --------------------------------------------------------------------------
   Prisblock på tjänstesidorna
   -------------------------------------------------------------------------- */
.pris-par{
  display:grid; gap:clamp(16px,2vw,22px);
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
}
.pris-block{
  background:var(--vit); border:1px solid var(--kantlinje);
  border-radius:var(--radie); padding:clamp(22px,2.6vw,30px);
}
.pris-block h3{ margin:0 0 4px; font-size:1.08rem; }
.pris-block .villkor{ margin:0 0 14px; font-size:.86rem; color:var(--skiffer); }
.pris-tabell{ list-style:none; margin:0; padding:0; }
.pris-tabell li{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:11px 0; border-bottom:1px solid var(--kantlinje);
}
.pris-tabell li:last-child{ border-bottom:0; padding-bottom:0; }
.pris-tabell .namn{ color:var(--brodtext); font-size:.96rem; }
.pris-tabell .belopp{ font-weight:600; color:var(--djuphav); white-space:nowrap; }

/* Tillval — enkel chip-lista */
.tillval{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.tillval li{
  padding:9px 16px; border-radius:var(--pill);
  background:var(--vit); border:1px solid var(--kantlinje);
  font-size:.92rem; color:var(--djuphav);
}

@media (max-width:860px){
  .pris-par{ grid-template-columns:1fr; }
}


/* ==========================================================================
   WordPress-anpassning (Astra + Gutenberg)
   Skissens CSS ovanför är oförändrad. Här nedanför ligger bara det som
   behövs för att blocken ska bete sig som skissens markup.
   ========================================================================== */

/* Astras sidmallar lägger egen padding och maxbredd – våra sektioner är
   helbredd och sköter sin egen container. */
.ast-page-builder-template .site-content .ast-container{ max-width:none; padding:0; display:block; }
.ast-page-builder-template .entry-content{ margin:0; }
.entry-content > .wp-block-group{ margin-block:0; }
.entry-content > *:first-child{ margin-top:0; }
.entry-content figure{ margin:0; }
.entry-content p:last-child{ margin-bottom:0; }
.ast-page-builder-template .entry-header{ display:none; }

/* Gutenberg-grupper ärver våra sektionsregler via klassnamn */
.wp-block-group.sektion{ margin-block:0; }
.wp-block-group.container{ margin-inline:auto; }
.wp-block-columns{ margin-bottom:0; gap:0; }
.wp-block-column{ min-width:0; }

/* Bilder i block ska bete sig som skissens */
.wp-block-image img{ display:block; width:100%; height:auto; }
.kort-bild .wp-block-image,
.split-bild .wp-block-image{ margin:0; }

/* Rubriker och brödtext i block */
.entry-content h1, .entry-content h2, .entry-content h3{ margin-top:0; }
.wp-block-heading{ margin-bottom:.4em; }

/* FAQ byggd med core/details */
.faq .wp-block-details{
  background:var(--vit); border:1px solid var(--kantlinje);
  border-radius:var(--radie-liten); margin-bottom:10px; overflow:hidden;
}
.faq .wp-block-details summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:19px 24px; font-weight:600; color:var(--djuphav);
}
.faq .wp-block-details summary::-webkit-details-marker{ display:none; }
.faq .wp-block-details summary::after{
  content:""; flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--dagsljus) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7FA3' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/14px no-repeat;
  transition:transform .3s var(--ease);
}
.faq .wp-block-details[open] summary::after{ transform:rotate(180deg); background-color:var(--djuphav); }
.faq .wp-block-details > *:not(summary){ padding:0 24px 22px; color:var(--skiffer); margin:0; }

/* --------------------------------------------------------------------------
   Blockmotsvarigheter till skissens sektioner
   -------------------------------------------------------------------------- */

/* Cover-blockets media ska täcka ytan, inte växa fritt */
.wp-block-cover .wp-block-cover__video-background,
.wp-block-cover .wp-block-cover__image-background{
  position:absolute; inset:0; margin:0;
  width:100% !important; height:100% !important; max-width:none;
  object-fit:cover;
}
.wp-block-cover{ padding:0; }

/* Hero */
.hero-wp{
  display:flex; align-items:flex-end;
  padding-block:clamp(120px,16vh,180px) clamp(70px,9vh,110px);
  color:#fff;
}
.hero-wp .wp-block-cover__inner-container{
  width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);
}
.hero-wp h1{
  color:#fff; margin:0 0 18px; max-width:15ch;
  font-size:clamp(2.6rem,6vw,4.4rem); line-height:1.02; letter-spacing:-.025em;
}
.hero-wp .lead{
  color:rgba(255,255,255,.88); max-width:54ch; margin:0 0 30px;
  font-size:clamp(1.04rem,1.5vw,1.2rem);
}
.hero-wp .reco-marke{ margin:26px 0 0; }

/* Faktabandet under heron */
.hero-fakta--wp{ background:var(--djuphav); color:#C5D4DE; padding-block:20px; }
.hero-fakta--wp ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:14px clamp(24px,4vw,56px); justify-content:space-between;
}
.hero-fakta--wp li{ display:flex; align-items:center; gap:10px; font-size:.94rem; font-weight:500; }
.hero-fakta--wp svg{ width:19px; height:19px; flex:none; color:var(--klarglas-ljus); }

/* Knappar */
.wp-block-buttons.btn-rad{ gap:12px; margin-top:4px; }
.wp-block-button__link{
  border-radius:var(--pill); padding:14px 28px;
  font-weight:600; font-size:.98rem; line-height:1.2;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--primar .wp-block-button__link{ background:var(--rod); color:#fff; border:1.5px solid var(--rod); }
.btn--primar .wp-block-button__link:hover{ background:var(--rod-mork); border-color:var(--rod-mork); color:#fff; }
.btn--sekundar .wp-block-button__link{ background:var(--vit); color:var(--djuphav); border:1.5px solid var(--rod); }
.btn--sekundar .wp-block-button__link:hover{ background:var(--rod); color:#fff; }
.btn--sekundar-vit .wp-block-button__link{ background:rgba(255,255,255,.08); color:#fff; border:1.5px solid rgba(255,255,255,.55); }
.btn--sekundar-vit .wp-block-button__link:hover{ background:#fff; color:var(--djuphav); }

/* Tjänstekorten */
.wp-block-columns.tjanster{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.tjanster .wp-block-column{ display:flex; margin:0; }
.tjanster .kort{ width:100%; display:flex; flex-direction:column; }
.kort > .kort-bild{ position:relative; overflow:hidden; background:var(--dagsljus); }
.kort .kort-bild .wp-block-image{ margin:0; }
.kort .kort-bild img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.kort .kort-text{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.kort .kort-text h3{ margin:0 0 7px; font-size:1.08rem; }
.kort .kort-text p{ color:var(--skiffer); font-size:.91rem; line-height:1.5; margin:0 0 14px; }
.kort .tagg{ position:absolute; top:12px; left:12px; z-index:2; margin:0; }
.kort .pris-etikett{ display:inline-block; margin:0 0 12px; }
.kort .lank-pil{ margin:auto 0 0; }
.kort .lank-pil a{ color:var(--klarglas); font-weight:600; font-size:.92rem; }

/* Split i kolumner */
.wp-block-columns.split{ gap:clamp(32px,4.5vw,64px); align-items:center; }
.wp-block-columns.split .wp-block-column{ margin:0; }
.split .split-bild .wp-block-image{ margin:0; }
.split .split-bild img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radie); }
.split .skal{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px 30px; margin-top:30px; }
.split .skal h3{ margin:10px 0 5px; font-size:1.02rem; }
.split .skal p{ color:var(--skiffer); font-size:.92rem; line-height:1.55; margin:0; }
.split .skal .ikon{ width:26px; height:26px; color:var(--klarglas); }

/* Så går det till */
.wp-block-columns.steg-rad{ gap:14px; }
.steg-rad .wp-block-column.steg{
  background:var(--vit); border:1px solid var(--kantlinje);
  border-radius:var(--radie); padding:26px 26px 28px; margin:0;
}
.steg-rad .steg .nr{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; margin:0 0 14px;
  background:var(--dagsljus); color:var(--djuphav);
  font-weight:600; font-size:.92rem;
}
.steg-rad .steg--ett .nr{ background:var(--rod); color:#fff; }
.steg-rad .steg h3{ margin:0 0 6px; font-size:1.05rem; }
.steg-rad .steg p{ color:var(--skiffer); font-size:.93rem; line-height:1.55; margin:0; }

/* CTA-bandet */
.cta-band-wp{ padding-block:clamp(70px,9vw,110px); color:#fff; }
.cta-band-wp .wp-block-cover__inner-container{
  max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);
}
.cta-band-wp h2{ color:#fff; margin:0 0 12px; }
.cta-band-wp .lead{ color:rgba(255,255,255,.85); margin:0 0 26px; max-width:48ch; }

@media (max-width:980px){
  .wp-block-columns.tjanster{ grid-template-columns:repeat(2,1fr); }
  .wp-block-columns.split{ gap:30px; }
  .split .skal{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .wp-block-columns.tjanster{ grid-template-columns:1fr; }
  .hero-fakta--wp ul{ justify-content:flex-start; }
}

/* Bakgrund och vänsterjustering i cover-blocken */
body, .site, .ast-page-builder-template .site-content{ background-color:var(--vit); }
.hero-wp .wp-block-cover__inner-container > *,
.cta-band-wp .wp-block-cover__inner-container > *{ margin-left:0 !important; margin-right:auto !important; }
.loggor .loggor-rubrik{ color:var(--skiffer); }

/* Rättningar mot Astras egna regler */
.hero-fakta--wp{ position:static; width:auto; }
.entry-content .hero-wp h1,
.entry-content .cta-band-wp h2{ color:#fff !important; }
.entry-content .hero-wp .lead,
.entry-content .cta-band-wp .lead{ color:rgba(255,255,255,.88) !important; }
.entry-content .hero-wp .reco-marke span{ color:rgba(255,255,255,.9); }

/* Loggan i rätt storlek, inget sidnamn bredvid */
.site-logo-img img, .custom-logo-link img{ max-width:200px !important; width:200px !important; height:auto; }
.ast-site-identity .site-title, .ast-site-identity .site-description{ display:none !important; }
.main-header-bar .site-branding{ padding-block:6px; }

/* Astra stylar alla inputs – reglaget måste vara osynligt */
.ff-reglage{
  -webkit-appearance:none !important; appearance:none !important;
  background:transparent !important; border:0 !important; padding:0 !important;
  box-shadow:none !important; min-height:0 !important;
}
.ff-reglage::-webkit-slider-runnable-track{ background:transparent !important; border:0 !important; }
.ff-reglage::-webkit-slider-thumb{
  -webkit-appearance:none !important; appearance:none !important;
  width:46px; height:100%; border-radius:0 !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
.ff-reglage::-moz-range-track{ background:transparent !important; border:0 !important; }
.ff-reglage::-moz-range-thumb{
  width:46px; height:999px; border-radius:0 !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
}

/* Tjänstekortens bilder i samma format */
.kort-bild{ margin:0 !important; }
.kort-bild img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }

/* Punktlistor i blockform – bock i stället för punkt */
.entry-content .punkter{ list-style:none; margin:0; padding:0; }
.entry-content .punkter li{
  display:flex; align-items:flex-start; gap:12px;
  padding-left:0; margin:0 0 12px;
  line-height:1.6;
  color:inherit;          /* blockets egen textfärg styr, inte skissens grå */
}
.entry-content .punkter--ljus{ color:#FFFFFF; }
.entry-content .punkter li::before{
  content:""; flex:0 0 18px; width:18px; height:1.6em; /* lika hög som radhöjden */
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7FA3' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") left center/18px no-repeat;
}
.entry-content .punkter--ljus li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235BA6C7' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Spectras videobakgrund ska täcka containern, inte växa fritt
   (skissens reset sätter height:auto på video) */
.uagb-container__video-wrap{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:hidden; z-index:0;
}
.uagb-container__video-wrap video{
  width:100% !important; height:100% !important;
  object-fit:cover; display:block; max-width:none;
}

/* Spectras stackade knappar centreras alltid (align-items:center är
   hårdkodat i blockets CSS). Vänsterställ dem i mobil i stället. */
@media (max-width:767px){
  .uagb-buttons__outer-wrap .uagb-buttons__wrap{ align-items:flex-start !important; }
}

/* Kundloggor – samma rutnät och optiska storlek som skissen */
.logg-rad-wp{
  display:grid !important; grid-template-columns:repeat(5,1fr);
  gap:34px 36px; align-items:center; width:100%;
}
.logg-rad-wp .wp-block-image{
  margin:0 !important; width:auto !important;
  display:flex; align-items:center; justify-content:center;
}
.logg-rad-wp .wp-block-image img{
  width:auto !important; max-width:100%; height:auto;
  max-height:44px; object-fit:contain; opacity:.92;
  transition:opacity .25s ease, transform .25s ease;
}
.logg-rad-wp .wp-block-image img:hover{ opacity:1; transform:translateY(-2px); }
@media (max-width:860px){ .logg-rad-wp{ grid-template-columns:repeat(3,1fr); gap:26px; } }
@media (max-width:520px){ .logg-rad-wp{ grid-template-columns:repeat(2,1fr); gap:22px; } }

/* Telefonnummer och Boka nu i menyn, som i skissen */
.main-header-menu .meny-tel > .menu-link{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--djuphav); font-weight:600;
}
.main-header-menu .meny-tel > .menu-link::before{
  content:""; width:17px; height:17px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D93A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E") center/17px no-repeat;
}
.main-header-menu .meny-boka{ display:flex; align-items:center; }
.main-header-menu .meny-boka > .menu-link{
  background:var(--rod); color:#fff !important; font-weight:600;
  border-radius:var(--pill);
  padding:12px 26px !important; line-height:1.2 !important; height:auto !important;
  transition:background .2s ease;
}
.main-header-menu .meny-tel{ display:flex; align-items:center; }
.main-header-menu .meny-tel > .menu-link{ height:auto !important; line-height:1.2 !important; }
.main-header-menu .meny-boka > .menu-link:hover{ background:var(--rod-mork); }
.main-header-menu .meny-boka{ margin-left:6px; }
.main-header-menu .meny-boka > .menu-link::after{ display:none; }

/* Telefonen och Se ditt pris står i headerns högerkolumn, inte i den
   centrerade menyn. Markupen skrivs ut av barntemat (se functions.php)
   med samma klasser, så reglerna ovan gäller där också. */
@media (min-width:922px){
  .ast-primary-header-bar .site-header-primary-section-right{
    justify-content:flex-end !important;
  }
  .meny-hoger-wrap{ display:flex; align-items:center; }
  .main-header-menu.meny-hoger{
    display:flex !important; align-items:center;
    margin:0; padding:0; list-style:none;
    background:none !important; box-shadow:none !important;
  }
  .main-header-menu.meny-hoger > li{ border:0 !important; }
}

/* Astras header stylas som skissens flytande pill */
.site-header{ background:transparent; }
.ast-above-header-wrap, .ast-main-header-wrap{ background:transparent; }
.ast-main-header-wrap .main-header-bar{
  max-width:1240px; margin:18px auto 0; border-radius:999px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(14px);
  border:1px solid var(--kantlinje); box-shadow:0 10px 30px rgba(22,41,58,.08);
  padding-inline:26px;
}
.ast-sticky-active .ast-main-header-wrap .main-header-bar{ margin-top:10px; }
.main-header-menu > .menu-item > .menu-link{ font-weight:600; color:var(--djuphav); }
.main-header-menu > .menu-item > .menu-link:hover{ color:var(--klarglas); }

@media (max-width:921px){
  .ast-main-header-wrap .main-header-bar{ margin-inline:16px; padding-inline:18px; }
}

/* --------------------------------------------------------------------------
   Headern exakt som skissens flytande pill – och fast i toppen (2026-10-22)
   -------------------------------------------------------------------------- */
.site-header#masthead{
  position:fixed !important; top:0; left:0; right:0; z-index:200;
  padding-inline:20px;
}
.admin-bar .site-header#masthead{ top:32px; }
@media (max-width:782px){ .admin-bar .site-header#masthead{ top:46px; } }

.ast-main-header-wrap .main-header-bar,
#ast-mobile-header .ast-mobile-header-wrap .main-header-bar{
  max-width:1240px; margin:18px auto 0;
  min-height:68px;
  padding:8px 8px 8px 26px !important;
  border-radius:999px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 6px 26px rgba(22,41,58,.12);
  transition:box-shadow .3s ease;
}
.site-header.is-fast .main-header-bar{ box-shadow:0 10px 34px rgba(22,41,58,.18); }

/* Loggan i skissens storlek – höjd styr, inte bredd */
.site-logo-img img, .custom-logo-link img,
.ast-theme-transparent-header #masthead .site-logo-img .transparent-custom-logo img{
  width:auto !important; max-width:none !important; height:28px !important;
}
.main-header-bar .site-branding{ padding-block:0; }

/* Menylänkar – samma mått och vikt som skissen */
.main-header-menu > .menu-item > .menu-link{
  min-height:44px; height:auto !important; padding:0 12px !important;
  font-size:.95rem; font-weight:500; line-height:1.2 !important;
  color:var(--djuphav); border-radius:999px;
  transition:background-color .2s ease, color .2s ease;
}
.main-header-menu > .menu-item > .menu-link:hover{ background:var(--papper); color:var(--djuphav); }
/* Tjänstesidorna ligger i rullgardinen, så toppnivån får current-menu-ancestor
   i stället för current-menu-item – utan de raderna står "Tjänster" omarkerad
   på alla fem tjänstesidor. Den aktiva posten i rullgardinen markeras också. */
.main-header-menu > .current-menu-item > .menu-link,
.main-header-menu > .current-menu-ancestor > .menu-link,
.main-header-menu > .current-menu-parent > .menu-link{ color:var(--rod); }

.main-header-menu .meny-tel > .menu-link{
  font-size:.95rem; font-weight:600; padding-inline:8px !important;
}
.main-header-menu .meny-tel > .menu-link:hover{ background:none; color:var(--rod); }

.main-header-menu .meny-boka > .menu-link{
  min-height:46px; padding:0 22px !important;
  display:inline-flex; align-items:center;
  font-size:.95rem; font-weight:600;
}
.main-header-menu .meny-boka > .menu-link:hover{ background:var(--rod-mork) !important; color:#fff !important; }

/* Undermenyn som skissens dropdown */
.main-header-menu .sub-menu{
  border-radius:18px; padding:8px; border:1px solid var(--kantlinje);
  box-shadow:0 18px 40px rgba(22,41,58,.14); background:var(--vit);
}
.main-header-menu .sub-menu .menu-item .menu-link{
  display:flex; align-items:center;      /* annars klistras texten mot överkanten */
  min-height:44px; height:auto !important; padding:0 14px !important;
  border-radius:12px; font-size:.96rem; line-height:1.2 !important;
  color:var(--brodtext); border-bottom:0;
}
.main-header-menu .sub-menu .menu-item .menu-link:hover{ background:var(--papper); color:var(--djuphav); }
/* Markerar vilken tjänst man står på. Måste ligga efter regeln ovan – de har
   samma specificitet, så den som kommer sist vinner. */
.main-header-menu .sub-menu .current-menu-item > .menu-link{ color:var(--rod); }

/* Astras radhöjd är 80 px – skissens pill är 68 px (52 + 8 px luft) */
.ast-primary-header-bar .site-primary-header-wrap,
.ast-mobile-header-wrap .ast-primary-header-bar{ min-height:52px !important; }
.ast-desktop .ast-primary-header-bar .main-header-menu > .menu-item{ line-height:1.2 !important; }

/* Ankarlänkar (#forfragan) ska inte hamna under den fasta headern */
html{ scroll-padding-top:128px; }
/* Med adminfältet inloggad ligger headern 32–46 px längre ner, annars
   hamnar ankarmålet bakom den. */
html:has(body.admin-bar){ scroll-padding-top:176px; }
@media (max-width:782px){
  html:has(body.admin-bar){ scroll-padding-top:190px; }
}

/* Dolt beräkningsfält – skriptet lägger beloppet här så det följer med i mejlet */
.dolt-falt,
.wpcf7-form-control-wrap[data-name="berakning"]{ display:none !important; }

/* Stegvis ifyllnad i Contact Form 7 ------------------------------------- */
.steg-panel[aria-hidden="true"]{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.steg-nav{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:24px; padding-top:20px; border-top:1px solid var(--kantlinje);
}
.steg-nav .steg-rakn{ font-size:.85rem; color:var(--skiffer); text-align:center; flex:1; }
.steg-nav .btn{ min-height:46px; padding:0 24px; font-size:.95rem; flex:none; }
.steg-nav [hidden]{ display:none !important; }
.valgrupp.saknar-val > .rubrik{ color:var(--rod); }
.valgrupp.saknar-val .wpcf7-list-item-label{ border-color:#F0BCC2; }

/* CF7:s autop lägger <p> och <br> inuti stegaren – håll den vågrät ändå */
.stegare p{ display:flex; align-items:center; gap:10px; margin:0; }
.stegare br{ display:none; }

/* Bilder med egen bredd i en Spectra-rad ska behålla den.
   Utan detta krymper flexlayouten t.ex. profilbilden i kontaktkortet. */
.wp-block-uagb-container > .wp-block-image.is-resized{ flex:none; }

/* Hero-USParna som i skissen: hårfin linje, små ikoner, ligger över heron */
.hero-usp{
  background:transparent !important;
  border-top:1px solid rgba(255,255,255,.16);
  margin-top:-66px; position:relative; z-index:3;
}
.hero-usp .uagb-ifb-title{ display:flex; align-items:center; gap:9px; }
.hero-usp .uagb-ifb-title::before{
  content:""; width:17px; height:17px; flex:none;
  background-position:center; background-size:17px; background-repeat:no-repeat;
}
.hero-usp .uagb-container-inner-blocks-wrap > div > .wp-block-uagb-info-box:nth-child(1) .uagb-ifb-title::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235BA6C7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2.5M9 2h6'/%3E%3C/svg%3E"); }
.hero-usp .uagb-container-inner-blocks-wrap > div > .wp-block-uagb-info-box:nth-child(2) .uagb-ifb-title::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235BA6C7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 3 6v6c0 5 3.8 9.4 9 10 5.2-.6 9-5 9-10V6l-9-4Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.hero-usp .uagb-container-inner-blocks-wrap > div > .wp-block-uagb-info-box:nth-child(3) .uagb-ifb-title::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235BA6C7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-7.6 7-13a7 7 0 0 0-14 0c0 5.4 7 13 7 13Z'/%3E%3Ccircle cx='12' cy='8' r='2.4'/%3E%3C/svg%3E"); }
.hero-usp .uagb-container-inner-blocks-wrap > div > .wp-block-uagb-info-box:nth-child(4) .uagb-ifb-title::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235BA6C7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 19 14-14'/%3E%3Ccircle cx='7.5' cy='7.5' r='2.5'/%3E%3Ccircle cx='16.5' cy='16.5' r='2.5'/%3E%3C/svg%3E"); }
@media (max-width:921px){
  .hero-usp{ background:#16293A !important; margin-top:0; border-top:0; }
}

/* Heroens toning som i skissen: videon i fullt ljus, gradienter ovanpå
   i stället för Spectras platta dimmer (som annars sänker hela bilden). */
.hero-wp .uagb-container__video-wrap{ background:transparent !important; }
.hero-wp .uagb-container__video-wrap video{ opacity:1 !important; }
.hero-wp .uagb-container__video-wrap::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(22,41,58,.92) 0%, rgba(22,41,58,.76) 34%, rgba(22,41,58,.34) 64%, rgba(22,41,58,.1) 100%),
    linear-gradient(180deg, rgba(22,41,58,.5) 0%, rgba(22,41,58,0) 26%, rgba(22,41,58,.45) 100%);
}
@media (max-width:921px){
  .hero-wp .uagb-container__video-wrap::after{
    background:
      linear-gradient(180deg, rgba(22,41,58,.7) 0%, rgba(22,41,58,.84) 52%, rgba(22,41,58,.95) 100%),
      linear-gradient(90deg, rgba(22,41,58,.78), rgba(22,41,58,.46));
  }
}

/* Undersidornas hero: samma vänstertoning som skissen i stället för
   Spectras platta täckfärg. Gäller första sektionen på alla sidor utom start. */
body:not(.home) .entry-content > .uagb-is-root-container:first-child::before{
  background-color:transparent !important;
  background-image:linear-gradient(90deg, rgba(22,41,58,.95) 0%, rgba(22,41,58,.86) 42%, rgba(22,41,58,.5) 100%) !important;
}
@media (max-width:921px){
  body:not(.home) .entry-content > .uagb-is-root-container:first-child::before{
    background-image:linear-gradient(180deg, rgba(22,41,58,.8) 0%, rgba(22,41,58,.9) 100%) !important;
  }
}

/* Kundloggorna: de fyra tyngsta namnen får mer plats, DIF-skölden mest
   eftersom den är hög och smal och annars blir optiskt minst. */
.logg-rad-wp img.wp-image-284,  /* Riksbyggen */
.logg-rad-wp img.wp-image-285,  /* SJ */
.logg-rad-wp img.wp-image-286{  /* ICA Fastigheter */
  max-height:52px;
}
.logg-rad-wp img.wp-image-287{  /* Djurgårdens IF – hög sköld, behöver mer höjd */
  max-height:64px;
}
@media (max-width:860px){
  .logg-rad-wp img.wp-image-284,
  .logg-rad-wp img.wp-image-285,
  .logg-rad-wp img.wp-image-286{ max-height:46px; }
  .logg-rad-wp img.wp-image-287{ max-height:58px; }
}

/* Tjänstekorten är klickbara i hela ytan. "Läs mer"-länken får ett
   osynligt skikt över kortet (stretched link) i stället för att kortet
   blir en <a> – nästlade länkar är ogiltig HTML. */
.tjanstekort{
  position:relative;
  transition:transform .22s var(--ease), box-shadow .22s ease, border-color .22s ease;
}
/* Spectra sätter position:relative på knappomslaget – nollställ det,
   annars täcker överlägget bara knappen i stället för hela kortet. */
.tjanstekort .wp-block-uagb-container,
.tjanstekort .wp-block-uagb-buttons.uagb-buttons__outer-wrap,
.tjanstekort .wp-block-uagb-buttons-child.uagb-buttons__outer-wrap,
.tjanstekort .uagb-buttons__wrap,
.tjanstekort .uagb-button__wrapper{ position:static !important; }
.tjanstekort .uagb-buttons-repeater::after{
  content:""; position:absolute; inset:0; z-index:2;
}
.tjanstekort:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(22,41,58,.12);
  border-color:#BBD3E0;
}
.tjanstekort:hover .kort-bild img{ transform:scale(1.03); }
.tjanstekort .kort-bild img{ transition:transform .4s var(--ease); }
.tjanstekort:focus-within{ outline:3px solid var(--klarglas); outline-offset:3px; }

/* ==========================================================================
   MOBILSLIPNING 3 – sista genomgången av marginaler och ojämnheter
   ========================================================================== */

/* Loggrubriken på Om oss är en vanlig paragraf och saknade formgivning.
   Nu samma små versaler och centrering som motsvarande rubrik på startsidan. */
.loggor-rubrik{
  margin:0 0 6px; text-align:center;
  font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--skiffer);
}

/* Fristående brödtext (Om oss) centreras i mobil som resten av sidan.
   Finstilta noter under listorna behåller sin vänsterställning. */
@media (max-width:921px){
  .entry-content .wp-block-paragraph:not(.finstilt):not(.loggor-rubrik){ text-align:center; }
}

/* Kundloggorna får mer luft mellan raderna i mobil – annars står de tätt
   på varandra och blocket läses som en grå klump i stället för logotyper. */
@media (max-width:520px){
  /* Flexrad i stället för tvåkolumnsrutnät: loggorna centreras som grupp,
     och den sista ensamma loggan hamnar i mitten i stället för i vänsterspalten.
     Spectra skriver ut sin egen row-gap efter barntemats stilmall, därav !important. */
  .logg-rad-wp{
    display:flex !important; flex-direction:row !important; flex-wrap:wrap;
    justify-content:center !important; align-items:center !important;
    row-gap:30px !important; column-gap:26px !important;
  }
  .logg-rad-wp .wp-block-image{ flex:0 0 auto; }
  .logg-rad-wp .wp-block-image img{ max-height:38px; }
  .logg-rad-wp img.wp-image-284,
  .logg-rad-wp img.wp-image-285,
  .logg-rad-wp img.wp-image-286{ max-height:44px; }
  .logg-rad-wp img.wp-image-287{ max-height:54px; }
}

/* Avslutande uppmaning ligger på ett ljust foto av bilen. I mobil blir
   textytan bredare än på desktop och den vita texten hamnar mitt på
   bilens ljusa sida – dimmern behöver vara mörkare där. */
@media (max-width:921px){
  .uagb-block-lj000110::before,
  .uagb-block-om000080::before{ background-color:rgba(22,41,58,.88) !important; }
}

/* E-postadressen är en lång knapptext i en 240 px-container. Mindre
   grad och mindre sidopadding i mobil så texten inte tar i kanterna. */
@media (max-width:520px){
  .uagb-block-fo000009 .uagb-button__link{ font-size:13px !important; }
  .uagb-block-fo000009 .uagb-buttons-repeater{
    padding-left:16px !important; padding-right:16px !important;
  }
}

/* Reco-loggan i omdömeskortet: containern centrerar sina barn i mobil,
   men figuren är full bredd – så bilden behöver centreras i figuren. */
@media (max-width:921px){
  .uagb-block-lj000033 > figure.wp-block-image img,
  .uagb-block-om000004 > figure.wp-block-image img{
    display:block; margin-left:auto; margin-right:auto;
  }
}

/* ==========================================================================
   MOBILHEADERNS UPPMANING – som i skissen ligger "Se ditt pris" bredvid
   hamburgaren. Markupen skrivs av ljunggrens_mobil_cta() i functions.php.
   Raden är trång på 390 px, så loggan, mellanrummen och hamburgarens
   padding krymps för att få plats med knappen.
   ========================================================================== */
.mobil-cta{ display:none; }

@media (max-width:921px){
  .mobil-cta{ display:flex; align-items:center; margin-right:12px; padding-right:0 !important; }
  .mobil-cta-knapp{
    display:inline-flex; align-items:center; justify-content:center;
    padding:10px 15px; border-radius:var(--pill);
    background:var(--rod); color:var(--vit) !important;
    font-family:var(--f-brod); font-size:13px; font-weight:600; line-height:1;
    white-space:nowrap; text-decoration:none;
    transition:background .2s var(--ease);
  }
  .mobil-cta-knapp:hover,
  .mobil-cta-knapp:focus{ background:var(--rod-mork); color:var(--vit) !important; }

  /* Astra ger headerraden 26 px vänsterpadding men bara 8 px höger, så
     hamburgaren hamnade i princip i kanten på pillret. Samma luft på båda sidor. */
  #ast-mobile-header .ast-primary-header-bar{ padding-right:26px !important; }
  #ast-mobile-header .ast-builder-grid-row{ column-gap:12px; }
  /* Ikonen renderas som 20 px av Astra, vilket är i minsta laget bredvid
     knappen. 26 px väger upp mot "Se ditt pris". */
  #ast-mobile-header .menu-toggle .ast-mobile-svg,
  #ast-mobile-header .mobile-menu-toggle-icon{ width:26px !important; height:26px !important; }
  #ast-mobile-header .custom-logo{ width:100px !important; max-width:100px !important; }
  #ast-mobile-header [data-section="section-header-mobile-trigger"]{ padding-left:8px !important; }
  #ast-mobile-header .menu-toggle{ padding-inline:0 !important; position:relative; }
  /* Utan sidopadding blir hamburgaren bara 20 px bred. Träffytan förstoras
     med ett osynligt skikt i stället, så layouten inte växer. */
  #ast-mobile-header .menu-toggle::after{
    content:""; position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%); width:44px; height:44px;
  }
}

@media (max-width:380px){
  .mobil-cta-knapp{ font-size:12.5px; padding:9px 13px; }
  #ast-mobile-header .custom-logo{ width:88px !important; max-width:88px !important; }
}

/* En ensam knapp i en knappgrupp ska ha sin naturliga bredd i mobil.
   Grupper med två knappar (Se ditt pris + Ring) är kvar på full bredd i
   sin 240 px-container, så de blir lika breda och ligger snyggt under
   varandra. Spectras alignMobile:"full" sätter width:100% på barnet. */
@media (max-width:921px){
  .uagb-buttons__wrap:has(> .wp-block-uagb-buttons-child:only-child){
    justify-content:center !important;
  }
  .uagb-buttons__wrap:has(> .wp-block-uagb-buttons-child:only-child) > .wp-block-uagb-buttons-child{
    width:auto !important;
  }
  /* Knappomslaget är inline-flex och krymper till knappens bredd. Containrar
     med align-items:flex-start lade då knappen i vänsterkanten av sin
     240 px-ruta i stället för mitt i. */
  .wp-block-uagb-buttons:has(.uagb-buttons__wrap > .wp-block-uagb-buttons-child:only-child){
    align-self:center !important;
  }
}

/* Heroens rubrik ska rymmas på en rad – 15ch bröt "ut!" till egen rad.
   I mobil fattas bara några pixlar, så spärren dras ihop något i stället
   för att grada ner rubriken. text-wrap:balance gör att de smalaste
   telefonerna bryter mitt i meningen i stället för att lämna "ut!" ensamt. */
.hero-wp h1{ max-width:19ch; text-wrap:balance; }
@media (max-width:921px){
  .hero-wp h1{ letter-spacing:-.042em; }
}

/* ==========================================================================
   ASTRAS "TILL TOPPEN"-KNAPP – låg som en blå fyrkant med en tunn,
   hoptryckt pil (Astras svg har en beskuren viewBox). Ersätts av en rund
   knapp i djuphavsblått med en ren vinkel ritad i CSS.
   OBS: display rörs inte – Astra tonar in och ut knappen med inline-style.
   ========================================================================== */
#ast-scroll-top{
  width:46px !important; height:46px !important;
  right:18px !important; bottom:18px !important;
  padding:0 !important; border-radius:var(--pill) !important;
  /* Vit knapp – mörkblått försvann mot de mörka sektionerna och såg ut
     som en lös pil utan knapp. */
  background:#fff !important;
  border:1px solid var(--kantlinje);
  box-shadow:0 8px 22px rgba(22,41,58,.22);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
#ast-scroll-top:hover,
#ast-scroll-top:focus{ background:var(--djuphav) !important; border-color:var(--djuphav); }
#ast-scroll-top .ast-icon{ display:none; }
#ast-scroll-top::before{
  content:""; position:absolute; left:50%; top:50%;
  width:11px; height:11px; margin:-2px 0 0 -6px;
  border-left:2.5px solid var(--djuphav); border-top:2.5px solid var(--djuphav);
  transform:rotate(45deg);
  transition:border-color .2s var(--ease);
}
#ast-scroll-top:hover::before,
#ast-scroll-top:focus::before{ border-color:#fff; }

/* ==========================================================================
   FOOTERN – byggd som Astra Site Builder-layout (astra-advanced-hook 338)
   med Spectra-containrar, info-boxar, core/list och core/image, precis som
   Alprix. Färger och typografi ligger här; innehåll och struktur ändras i
   blockredigeraren under Utseende → Astra → Site Builder.
   ========================================================================== */
.ljunggrens-footer{ color:rgba(255,255,255,.78); }
.ljunggrens-footer .uagb-ifb-title{
  text-transform:uppercase; letter-spacing:.12em; font-weight:700;
}
.ljunggrens-footer p,
.ljunggrens-footer li{
  color:rgba(255,255,255,.78); font-size:15px; line-height:1.75; margin:0;
}
.ljunggrens-footer a{ color:rgba(255,255,255,.78); text-decoration:none; }
.ljunggrens-footer a:hover,
.ljunggrens-footer a:focus{ color:#fff; text-decoration:underline; }

.ljunggrens-footer .footer-lankar{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:9px;
}
.ljunggrens-footer .footer-org{
  font-size:13px; color:rgba(255,255,255,.52); line-height:1.6;
}
.ljunggrens-footer .footer-logga{ margin:0 0 4px; }
.ljunggrens-footer .footer-sigill img{ opacity:.92; }

@media (max-width:921px){
  .ljunggrens-footer .footer-lankar{ align-items:center; }
  .ljunggrens-footer p,
  .ljunggrens-footer .footer-adress,
  .ljunggrens-footer .footer-org{ text-align:center; }
}

/* ==========================================================================
   USP-BANDET under heron – två och två i mobil i stället för en per rad
   ========================================================================== */
@media (max-width:921px){
  .hero-usp .uagb-container-inner-blocks-wrap > .wp-block-uagb-container{
    display:grid !important; grid-template-columns:1fr 1fr;
    gap:16px 18px; align-items:start;
  }
  .hero-usp .uagb-ifb-title{ font-size:13px; line-height:1.35; align-items:flex-start; }
  .hero-usp .uagb-ifb-title::before{ margin-top:1px; }
}

/* ==========================================================================
   FOOTERN – större sigill och Proud Media-taggen vid copyrightraden
   ========================================================================== */
/* Blockets inline-bredd på 120 px gjorde sigillen nästan oläsliga – höjden
   får styra i stället, så bredden följer med. */
.ljunggrens-footer .footer-sigill img{
  height:58px !important; width:auto !important; max-width:none !important;
  max-height:none !important;
}
/* Spectra ger containerns barn width:100%. Figurerna blev då 1184 px breda
   flexobjekt som i en nowrap-rad sköt ut UC-sigillet åt vänster och ID06 åt
   höger, utanför det vita kortet. Bredden måste komma från bilden. */
.ljunggrens-footer .footer-sigill{
  justify-content:center !important; align-items:center !important;
  flex-wrap:wrap !important;
}
.ljunggrens-footer .footer-sigill figure{
  width:auto !important; max-width:none !important;
  flex:0 0 auto !important; margin:0 !important;
}
.ljunggrens-footer .footer-proud{
  margin:0 auto !important; line-height:0; text-align:center;
}
.ljunggrens-footer .footer-proud img{ display:block; margin-inline:auto; }
.ljunggrens-footer .footer-proud img{ opacity:.78; transition:opacity .2s var(--ease); }
.ljunggrens-footer .footer-proud a:hover img{ opacity:1; }

@media (max-width:921px){
  .ljunggrens-footer .footer-sigill img{ height:46px !important; }
  /* loggan stod kvar i vänsterkant medan resten av kolumnen centrerades */
  .ljunggrens-footer .footer-logga{ text-align:center !important; }
  .ljunggrens-footer .footer-logga img{
    margin-left:auto !important; margin-right:auto !important;
  }
}

/* ==========================================================================
   HEROVIDEON syns lite mer i mobil – dimmern var i tyngsta laget
   ========================================================================== */
@media (max-width:921px){
  .hero-wp .uagb-container__video-wrap::after{
    background:
      linear-gradient(180deg, rgba(22,41,58,.5) 0%, rgba(22,41,58,.68) 52%, rgba(22,41,58,.88) 100%),
      linear-gradient(90deg, rgba(22,41,58,.6), rgba(22,41,58,.28));
  }
}


/* ==========================================================================
   MOBILMENYN – fullskärm

   Astras mobilmenytyp står på Full Width, alltså en panel som täcker hela
   skärmen. Panelen (#ast-mobile-popup) skrivs ut av barntemat (se
   functions.php) och saknar därför Astras egen positionering – den läggs
   därför som overlay här. Headern ligger kvar ovanpå (z-index 200) så att
   loggan syns och krysset går att klicka.

   Den inbyggda menyn i headern döljs: annars fälls två menyer ut.
   ========================================================================== */
@media (max-width:921px){
  .ast-header-break-point #ast-mobile-header .ast-mobile-header-content{
    display:none !important;
  }

  .ast-header-break-point #ast-mobile-popup{
    display:block !important;
    position:fixed !important; inset:0 !important;
    z-index:150;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .28s var(--ease), visibility .28s;
  }
  .ast-header-break-point #ast-mobile-popup.active{
    opacity:1; visibility:visible; pointer-events:auto;
  }
  .ast-header-break-point #ast-mobile-popup .ast-mobile-popup-overlay{ display:none !important; }
  .ast-header-break-point #ast-mobile-popup .ast-mobile-popup-header{ display:none !important; }
  .ast-header-break-point #ast-mobile-popup .ast-desktop-popup-content{ display:none !important; }

  .ast-header-break-point #ast-mobile-popup .ast-mobile-popup-inner{
    position:absolute; inset:0;
    width:100% !important; max-width:none !important;
    height:100% !important; max-height:none !important;
    margin:0 !important; border-radius:0 !important; box-shadow:none !important;
    background:var(--vit);
    display:flex !important; flex-direction:column;
    align-items:center; justify-content:center;
    padding:104px 26px 48px !important;
    overflow-y:auto; overscroll-behavior:contain;
  }
  .ast-header-break-point #ast-mobile-popup .ast-mobile-popup-content{
    width:100%; max-width:420px;
  }
  .ast-header-break-point #ast-mobile-popup .main-navigation,
  .ast-header-break-point #ast-mobile-popup .main-header-menu{
    width:100%; padding:0 !important; background:transparent !important;
  }

  /* Menyraderna */
  .ast-header-break-point #ast-mobile-popup .menu-item{
    border:0 !important; background:transparent !important;
  }
  .ast-header-break-point #ast-mobile-popup .menu-item .menu-link{
    display:flex !important; align-items:center !important; justify-content:center !important;
    text-align:center !important; padding:15px 18px !important;
    font-family:var(--f-rubrik) !important; font-size:26px !important;
    font-weight:700 !important; letter-spacing:-.02em;
    color:var(--djuphav) !important; background:transparent !important;
  }
  .ast-header-break-point #ast-mobile-popup .menu-item .menu-link:hover{
    color:var(--rod) !important;
  }
  .ast-header-break-point #ast-mobile-popup .current-menu-item > .menu-link,
  .ast-header-break-point #ast-mobile-popup .current-menu-ancestor > .menu-link{
    color:var(--rod) !important;
  }

  /* Dragspelet under Tjänster. Astras pil ligger normalt absolut i högerkant
     och undermenyn absolut positionerad – i en centrerad meny hamnade listan
     då som en låda vid sidan om. Raden görs därför till en flexrad där pilen
     står bredvid ordet och undermenyn tar en egen rad under. Visningen sköter
     Astras JS med inline-display, så display rörs inte här. */
  .ast-header-break-point #ast-mobile-popup .menu-item-has-children{
    display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
    align-items:center !important; justify-content:center !important;
  }
  .ast-header-break-point #ast-mobile-popup .menu-item-has-children > .menu-link{
    width:auto !important; flex:0 1 auto; order:1;
  }
  .ast-header-break-point #ast-mobile-popup .ast-menu-toggle{
    position:static !important; order:2;
    display:flex !important; align-items:center; justify-content:center;
    width:28px !important; height:26px !important; min-height:26px !important;
    padding:0 !important; margin:0 -28px 0 4px;
    background:transparent !important; border:0 !important; box-shadow:none !important;
    color:var(--skiffer) !important;
  }
  .ast-header-break-point #ast-mobile-popup .ast-menu-toggle:focus:not(:focus-visible){
    outline:none !important;
  }
  .ast-header-break-point #ast-mobile-popup .sub-menu{
    position:static !important; order:3;
    flex:0 0 100% !important; width:100% !important; min-width:0 !important;
    background:transparent !important; border:0 !important; box-shadow:none !important;
    margin:14px 0 8px !important; padding:0 !important; border-radius:0;
    opacity:1 !important; visibility:visible !important; transform:none !important;
  }
  .ast-header-break-point #ast-mobile-popup .sub-menu .menu-item{ border:0 !important; }
  .ast-header-break-point #ast-mobile-popup .sub-menu .menu-link{
    font-family:var(--f-brod) !important; font-size:16px !important;
    font-weight:500 !important; padding:9px 18px !important;
    color:var(--skiffer) !important; letter-spacing:0;
  }
  .ast-header-break-point #ast-mobile-popup .sub-menu .menu-link:hover{
    color:var(--rod) !important;
  }
  /* Markerar vilken tjänst man står på. Måste ligga efter .sub-menu .menu-link
     ovan – den regeln har samma specificitet och skulle annars vinna på att
     komma sist, precis som i desktopmenyn. */
  .ast-header-break-point #ast-mobile-popup .sub-menu .current-menu-item > .menu-link{
    color:var(--rod) !important;
  }

  /* "Se ditt pris" ligger redan i headern */
  .ast-header-break-point #ast-mobile-popup .menu-item.meny-boka{ display:none !important; }

  /* Telefonnumret som röd knapp sist */
  .ast-header-break-point #ast-mobile-popup .menu-item.meny-tel{ padding:22px 0 0; }
  .ast-header-break-point #ast-mobile-popup .menu-item.meny-tel > .menu-link{
    background:var(--rod) !important; color:var(--vit) !important;
    border-radius:var(--pill); padding:15px 30px !important;
    margin:0 auto; width:max-content; min-width:230px;
    font-family:var(--f-brod) !important; font-size:17px !important;
    font-weight:600 !important; letter-spacing:0;
  }
  .ast-header-break-point #ast-mobile-popup .menu-item.meny-tel > .menu-link::before{
    display:none !important;
  }

  /* Sidan bakom ska inte gå att scrolla när menyn är öppen */
  body.ast-popup-nav-open{ overflow:hidden; }
}

/* Hamburgaren ska bli ett kryss när fullskärmsmenyn är öppen. Astra styr
   det med klassen .toggled; här säkras båda ikonerna. */
@media (max-width:921px){
  /* Astras egen klickhanterare nollställer .toggled efter oss, så ikonbytet
     styrs i stället av kroppsklassen som sätts när menyn öppnas. */
  body.ast-header-break-point.ast-popup-nav-open #ast-mobile-header .menu-toggle .ast-menu-svg{
    display:none !important;
  }
  body.ast-header-break-point.ast-popup-nav-open #ast-mobile-header .menu-toggle .ast-close-svg{
    display:block !important;
  }
  body.ast-header-break-point:not(.ast-popup-nav-open) #ast-mobile-header .menu-toggle .ast-menu-svg{
    display:block !important;
  }

}

/* Hamburgaren kollapsar till noll bredd när panelen är öppen (Astra räknar
   med att panelens eget kryss används). Vi vill ha krysset kvar i headern,
   så knappen tvingas synlig. */
@media (max-width:921px){
  /* Knappen kollapsade till noll bredd både när panelen var öppen och efter
     att den stängts. Den tvingas synlig i båda lägena. */
  .ast-header-break-point #ast-mobile-header [data-section="section-header-mobile-trigger"],
  .ast-header-break-point #ast-mobile-header .ast-button-wrap{
    display:flex !important; visibility:visible !important; opacity:1 !important;
  }
  .ast-header-break-point #ast-mobile-header .menu-toggle{
    display:flex !important; align-items:center; justify-content:center;
    width:26px !important; height:44px !important;
    visibility:visible !important; opacity:1 !important;
  }
  .ast-header-break-point #ast-mobile-header .menu-toggle .mobile-menu-toggle-icon{
    display:flex !important; align-items:center; justify-content:center;
  }
  .ast-header-break-point #ast-mobile-header .menu-toggle:focus:not(:focus-visible){
    outline:none !important;
  }
}

/* Astra ritar en liten pil framför varje undermenypunkt. Den gör raderna
   optiskt ocentrerade och tillför inget när listan redan ligger framme. */
@media (max-width:921px){
  .ast-header-break-point #ast-mobile-popup .sub-menu .menu-link .ast-icon{
    display:none !important;
  }
}