/* ---------- Globala färger/variabler ---------- */
:root{
  --navy:#0F2A57;
  --lime:#3AA14C;
  --gray:#F9FAFB;
  --hl:#FEF9C3;          /* highlight-gul */
}

/* ---------- Sektionstitlar ---------- */
.section-title{
  font-family:Poppins,Inter,system-ui;
  font-weight:800;
  color:var(--navy);
  font-size:clamp(2.25rem,4vw,3rem);   /* 4xl–5xl */
  margin-bottom:3.5rem;                /* mb-14 */
}

/* ---------- Våg-divider mellan sektioner ---------- */
.divider{position:relative;padding-bottom:60px;}
.divider::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:60px;
  background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDYwIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMCwwIEM0OCwyMCAxMjAsNjAgMjQwLDYwIHMxOTItNDAgMjg4LTQwIHMyMjAsNDAgMjg4LDQwIHMxOTItNDAgMjg4LTQwIHMxOTIsNDAgMzM2LDQwIGwtLjAwMS02MCBILDBaIi8+PC9zdmc+')
             bottom/100% 60px repeat-x;
}

/* ---------- Highlight-box med vågig nederkant ---------- */
.highlight{
  background:var(--hl);
  padding:1rem 1.75rem;
  border-radius:.75rem;
  display:inline-block;
  margin-bottom:2rem;
  position:relative;
}
.highlight::after{
  content:"";position:absolute;left:0;bottom:-1px;width:100%;height:30px;
  background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMwIj48cGF0aCBmaWxsPSIjRkVGOUMzIiBkPSJNMCwwIEM0OCwxMiAxMjAsMzAgMjQwLDMwIHMxOTItMTggMjg4LTE4IHMyMjAsMTggMjg4LDE4IHMxOTItMTggMjg4LTE4IHMxOTIsMTggMzM2LDE4IGwtLjAwMS0zMCBILDBaIi8+PC9zdmc+')
             bottom/100% 30px repeat-x;
}

/* ---------- Diskret rut-bakgrund ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:#fff;
}
body.grid::before{
  background-image:
    linear-gradient(to right,rgba(0,0,0,.04) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(0,0,0,.04) 1px,transparent 1px);
  background-size:32px 32px;
}

/* -- Färg- / bild-bakgrunder styrs via JS -- */
body.color::before{/* färg sätts av bgApply.js */}
body.image::before{
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}

/* ---------- Hjälpregler ---------- */
.hero-btn{transition:.2s;}
.hero-btn:hover{filter:brightness(110%);}

/* ---------- Labyrint-mönstrad bakgrund ---------- */
body.maze::before{
  /* ljusgrå linjer (#e0e0e0) på vit botten */
  background:
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2MCcgaGVpZ2h0PSc2MCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjZTBkMGQwJyBzdHJva2Utd2lkdGg9JzQnPjxwYXRoIGQ9J000IDRoNTJ2NTJINFY0em04IDhoMzZ2MzZIMTJWMTJ6bTggOGgyMHYyMEgyMFYyMHonLz48L3N2Zz4=') center/60px 60px repeat;
}

/* ---------- Diagonal-stripe bakgrund (mycket diskret) ---------- */
body.diagonal::before{
  /* 4 px bred, 4 px mellanrum, 3 % svart = nästan vit */
  background:
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,.03) 0px,
      rgba(0,0,0,.03) 2px,
      transparent      2px,
      transparent      6px
    );
}

/* Dölj vågen just under #priser */
#priser.divider::after{ display:none; }