/* Vårlia — delt stilark. Én kilde for palett, typografi og komponenter.
   Alle stier er relative: malen serveres under /nettsidemaler/vaarlia/. */

/* ---------- Fonter ---------- */
@font-face{font-family:"Vaarlia Display";src:url("fonter/display.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Vaarlia Skrift";src:url("fonter/skrift.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Vaarlia Brod";src:url("fonter/brod.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --gronn:#03594d;      /* bærefarge: all tekst, alle konturer */
  --gronn-dyp:#04463d;
  --mint:#82eda6;       /* sidebakgrunn */
  --gul:#ffff94;
  --rosa:#fccddc;
  --cyan:#aefbff;
  --lilla:#f6bbfd;
  --oransje:#fdc068;
  --korall:#fc5681;
  --krem:#f9f8f4;
  --dus:#51786f;        /* dempet grønn til hjelpetekst, kontrast 4.6:1 mot krem */

  --f-display:"Vaarlia Display",system-ui,sans-serif;
  --f-skrift:"Vaarlia Skrift","Segoe Script",cursive;
  --f-brod:"Vaarlia Brod",system-ui,-apple-system,"Segoe UI",sans-serif;

  --radius:44px;
  --radius-liten:22px;
  --skygge:-3px 3px 0 var(--gronn);
  --skygge-hev:-5px 5px 0 var(--gronn);
  --topphoyde:76px;
  --bredde:1220px;
}

/* ---------- Grunn ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--mint);color:var(--gronn);
  font-family:var(--f-brod);font-size:17px;line-height:1.6;font-weight:450;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--gronn);outline-offset:3px;border-radius:6px}
section[id],div[id]{scroll-margin-top:calc(var(--topphoyde) + 20px)}

/* Display-typografi. Bowlby One har høy ring på Å, så line-height under .9 klipper. */
.display{
  font-family:var(--f-display);text-transform:uppercase;font-weight:400;
  line-height:1;letter-spacing:-.005em;color:var(--gronn);margin:0;
  overflow-wrap:break-word;
}
.d-hero{font-size:clamp(2.35rem,7.4vw,5.6rem)}
.d-stor{font-size:clamp(1.95rem,5.6vw,4.2rem)}
.d-mid{font-size:clamp(1.5rem,3.6vw,2.6rem)}
.d-liten{font-size:clamp(1.15rem,2.4vw,1.6rem)}
.d-gigant{font-size:clamp(2.8rem,10.5vw,8rem);line-height:.98}

.skrift{
  font-family:var(--f-skrift);text-transform:none;font-weight:400;
  font-size:clamp(1rem,2.1vw,1.45rem);line-height:1.75;color:var(--gronn);
  margin:0;letter-spacing:0;
}

.ingress{font-size:clamp(1rem,1.5vw,1.18rem);font-weight:500;line-height:1.65;margin:0}
.brod p{margin:0 0 1.05em}
.brod p:last-child{margin-bottom:0}

/* ---------- Layout ---------- */
.ramme{width:100%;max-width:var(--bredde);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
.smal{max-width:820px}
.seksjon{padding-block:clamp(3.2rem,8vw,6rem)}
.midt{text-align:center}
.stables{display:flex;flex-direction:column;align-items:center;gap:clamp(1.2rem,2.6vw,1.9rem)}
.stables>*{width:100%}
/* Absolutt posisjonerte barn skal IKKE arve full bredde, ellers strekkes
   klistremerkene til bånd tvers over panelet. Må stå etter regelen over. */
.stables>.merkelapp,.stables>.pille{width:auto}
.knapperad{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.knapperad.venstrestilt{justify-content:flex-start}

/* Store avrundede fargepaneler, signaturgrepet i dette designet */
.panel{
  border-radius:var(--radius);
  padding:clamp(2.4rem,6vw,5rem) clamp(1.3rem,4vw,3.6rem);
  position:relative;
}
.panel-gul{background:var(--gul)}
.panel-rosa{background:var(--rosa)}
.panel-krem{background:var(--krem)}
.panel-cyan{background:var(--cyan)}
.panel-mint{background:var(--mint)}
.panel-utsnitt{margin-inline:clamp(.6rem,2.2vw,1.7rem)}

/* ---------- Pilleknapper ---------- */
.pille{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.6rem 1.15rem;border:2px solid var(--gronn);border-radius:999px;
  background:var(--krem);color:var(--gronn);cursor:pointer;
  font-family:var(--f-display);font-size:.83rem;letter-spacing:.03em;
  text-transform:uppercase;line-height:1.15;white-space:nowrap;
  box-shadow:var(--skygge);
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease;
}
.pille:hover{transform:translate(2px,-2px);box-shadow:var(--skygge-hev)}
.pille:active{transform:translate(-1px,1px);box-shadow:-1px 1px 0 var(--gronn)}
.pille-stor{padding:.85rem 1.7rem;font-size:.98rem}
.pille-gul{background:var(--gul)}
.pille-rosa{background:var(--rosa)}
.pille-cyan{background:var(--cyan)}
.pille-lilla{background:var(--lilla)}
.pille-mint{background:var(--mint)}
.pille-oransje{background:var(--oransje)}
.pille-klar{background:transparent}
.pille[aria-current="page"]{background:var(--gronn);color:var(--krem)}

/* Mørke flater: footeren er mørk i kraft av egen bakgrunn, ikke av .baand-mork.
   Derfor må begge selektorene stå, ellers blir piller nesten-svarte på nesten-svart. */
.baand-mork,footer.bunn{color:var(--krem)}
.baand-mork .pille,footer.bunn .pille{border-color:var(--krem);box-shadow:-3px 3px 0 var(--krem)}
.baand-mork .pille:hover,footer.bunn .pille:hover{box-shadow:-5px 5px 0 var(--krem)}
.baand-mork .pille-klar,footer.bunn .pille-klar{color:var(--krem)}

/* ---------- Topp og meny ---------- */
.topp{position:sticky;top:0;z-index:60;background:var(--mint);border-bottom:2px solid var(--gronn)}
.topp-inner{
  position:relative;display:flex;align-items:center;gap:.6rem;
  min-height:var(--topphoyde);
  width:100%;max-width:var(--bredde);margin-inline:auto;
  padding-inline:clamp(1.1rem,4vw,2rem);
}
.merke{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border:2px solid var(--gronn);border-radius:50%;
  background:var(--mint);box-shadow:var(--skygge);z-index:2;
  transition:transform .16s ease,box-shadow .16s ease;
}
.merke:hover{transform:translate(calc(-50% + 2px),calc(-50% - 2px));box-shadow:var(--skygge-hev)}
.merke svg{width:24px;height:24px;display:block}

.topp nav{flex:1}
.topp nav ul{display:flex;align-items:center;gap:.55rem;margin:0;padding:0;list-style:none}
.topp nav li:nth-child(2){margin-right:auto}

.meny-boks{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.hamburger{
  display:none;margin-left:auto;cursor:pointer;
  width:44px;height:44px;flex:0 0 44px;align-items:center;justify-content:center;
  border:2px solid var(--gronn);border-radius:50%;background:var(--krem);
  box-shadow:var(--skygge);z-index:2;
}
.hamburger span{position:relative;display:block;width:17px;height:2.5px;background:var(--gronn);border-radius:2px}
.hamburger span::before,.hamburger span::after{
  content:"";position:absolute;left:0;width:17px;height:2.5px;background:var(--gronn);border-radius:2px}
.hamburger span::before{top:-6px}
.hamburger span::after{top:6px}

/* ---------- Fotokort ---------- */
.fotokort{
  border:3px solid var(--gronn);border-radius:var(--radius-liten);
  overflow:hidden;background:var(--krem);box-shadow:-7px 9px 0 var(--gronn);
}
.fotokort img{width:100%;height:100%;object-fit:cover}
.vipp-v{transform:rotate(-2.2deg)}
.vipp-h{transform:rotate(2deg)}

/* ---------- Klistremerker (dekor) ---------- */
.merkelapp{
  position:absolute;display:inline-flex;align-items:center;
  padding:.42rem .95rem;border:2px solid var(--gronn);border-radius:999px;
  font-family:var(--f-display);font-size:.76rem;text-transform:uppercase;
  letter-spacing:.03em;box-shadow:-2px 2px 0 var(--gronn);z-index:3;
  pointer-events:none;
}

/* ---------- Skjema ---------- */
.skjema{display:flex;flex-direction:column;gap:1.35rem;text-align:left}
.felt{display:flex;flex-direction:column;gap:.35rem}
.felt label{font-size:.83rem;font-weight:700;letter-spacing:.01em}
.felt input,.felt textarea,.felt select{
  width:100%;font-family:var(--f-brod);font-size:1rem;color:var(--gronn);
  background:transparent;border:0;border-bottom:2px solid rgba(3,89,77,.35);
  padding:.6rem .1rem;border-radius:0;
  transition:border-color .16s ease;
}
.felt textarea{
  border:2px solid rgba(3,89,77,.35);border-radius:16px;padding:.8rem .9rem;
  min-height:118px;resize:vertical;
}
.felt select{border-bottom:2px solid rgba(3,89,77,.35);cursor:pointer}
.felt input:focus,.felt textarea:focus,.felt select:focus{outline:none;border-color:var(--gronn)}
.felt input::placeholder,.felt textarea::placeholder{color:var(--dus)}
.felt-feil{font-size:.82rem;font-weight:700;color:#a3123f;margin:0}
.skjema-hjelp{font-size:.86rem;color:var(--dus);margin:0}

.skille{border:0;border-top:2px solid rgba(3,89,77,.2);margin:0}

.takk{
  border:3px solid var(--gronn);border-radius:var(--radius-liten);
  background:var(--mint);padding:1.6rem 1.4rem;text-align:center;
  box-shadow:-5px 6px 0 var(--gronn);
}

/* ---------- Karusell ---------- */
.karusell{position:relative}
.karusell-spor{
  display:flex;gap:clamp(.9rem,2vw,1.5rem);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:.4rem;
}
.karusell-spor::-webkit-scrollbar{display:none}
.karusell-lysbilde{flex:0 0 100%;scroll-snap-align:center;min-width:0}
.karusell-styring{display:flex;gap:.7rem;justify-content:center;align-items:center;margin-top:clamp(1.3rem,3vw,2rem)}
.rundknapp{
  width:52px;height:52px;flex:0 0 52px;border-radius:50%;
  border:2px solid var(--gronn);background:var(--gul);color:var(--gronn);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:var(--skygge);transition:transform .16s ease,box-shadow .16s ease;
}
.rundknapp:hover{transform:translate(2px,-2px);box-shadow:var(--skygge-hev)}
.rundknapp.neste{background:var(--oransje)}
.rundknapp svg{width:20px;height:20px}
.prikker{display:flex;gap:.45rem;align-items:center}
.prikk{
  width:11px;height:11px;padding:0;border-radius:50%;cursor:pointer;
  border:2px solid var(--gronn);background:transparent;
}
.prikk[aria-current="true"]{background:var(--gronn)}

/* ---------- Bunn ---------- */
footer.bunn{background:var(--gronn);color:var(--krem);padding-top:clamp(2.6rem,6vw,4rem)}
footer.bunn a{color:var(--krem)}
.bunn-lenker{display:flex;flex-wrap:wrap;gap:2.4rem clamp(2rem,7vw,5rem);justify-content:space-between}
.bunn-kolonne h2{font-family:var(--f-display);font-size:1rem;text-transform:uppercase;
  letter-spacing:.04em;margin:0 0 .8rem;font-weight:400}
.bunn-kolonne ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.bunn-kolonne a:hover{text-decoration:underline;text-underline-offset:4px}
.bunn-kolonne p{margin:0 0 .4rem}
.ordmerke{
  font-family:var(--f-display);text-transform:uppercase;color:var(--krem);
  font-size:19.2vw;line-height:1;text-align:center;letter-spacing:-.02em;
  margin:clamp(2.4rem,6vw,4rem) 0 0;user-select:none;
}
.bunn-rad{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  padding-block:1.4rem;border-top:2px solid rgba(249,248,244,.28);margin-top:.6rem;
}
.bunn-rad .skrift{color:var(--krem)}
.bunn-smatt{font-size:.83rem;opacity:.85;margin:0}

/* ---------- Seksjonsflater ---------- */
.seksjon-tett{padding-top:0}
.krem-flate{background:var(--krem);padding-block:clamp(3.2rem,8vw,6rem)}
.krem-topp{border-radius:var(--radius) var(--radius) 0 0}
.krem-bunn{border-radius:0 0 var(--radius) var(--radius)}

/* Cyan bue, den store myke formen midt på forsiden */
.bue-seksjon{background:var(--mint)}
.bue{
  background:var(--cyan);
  border-radius:50% 50% 0 0 / 20% 20% 0 0;
  padding:clamp(4.2rem,12vw,9rem) 0 clamp(3rem,8vw,5.5rem);
  margin-top:clamp(1.8rem,5vw,3.2rem);
}

/* ---------- Hero ---------- */
.hero-bilde{position:relative;max-width:430px;margin-inline:auto;padding:16px 18px 8px}
.hero-bilde .fotokort{width:100%}
.hero-bilde img{aspect-ratio:3/4}
.lapp-1{top:9%;left:-4px;background:var(--gul);transform:rotate(-7deg)}
.lapp-2{bottom:13%;right:-4px;background:var(--lilla);transform:rotate(6deg)}

/* Klistremerker rundt det gule panelet */
.lappflate .merkelapp{display:none}
.l-a{top:7%;left:4%;background:var(--cyan);transform:rotate(-8deg)}
.l-b{top:15%;right:5%;background:var(--rosa);transform:rotate(7deg)}
.l-c{bottom:26%;left:6%;background:var(--mint);transform:rotate(5deg)}
.l-d{bottom:13%;right:7%;background:var(--lilla);transform:rotate(-6deg)}
.l-e{top:45%;left:2%;background:var(--oransje);transform:rotate(3deg)}
.l-f{bottom:44%;right:2%;background:var(--krem);transform:rotate(-4deg)}
@media (min-width:1000px){.lappflate .merkelapp{display:inline-flex}}

/* ---------- Karusell-innhold ---------- */
.lysbilde-inner{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.3rem,3vw,2.6rem);align-items:center;text-align:left;
}
.lysbilde-inner img{aspect-ratio:4/3}
.lysbilde-tekst p{margin:0 0 .85rem}
.lysbilde-tekst .display{margin-bottom:.7rem}
.pris{font-family:var(--f-display);font-size:.92rem;text-transform:uppercase;letter-spacing:.02em}

/* ---------- Bredt foto som henger opp i seksjonen over ---------- */
.bred-foto{
  position:relative;z-index:2;max-width:1000px;margin-inline:auto;
  margin-top:calc(-1 * clamp(3.5rem,9vw,7rem));
}
.bred-foto img{aspect-ratio:16/9}

/* ---------- Innholdskort på undersider ---------- */
.kort-side{background:var(--krem);border-radius:var(--radius);
  padding:clamp(2rem,5vw,4rem) clamp(1.3rem,4vw,3.4rem)}
.kort-rad{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;justify-content:center}
.info-rutenett{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(1.2rem,3vw,2rem);text-align:left}
.info-boks h3,.info-boks h2{font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:1rem;letter-spacing:.03em;margin:0 0 .5rem}
.info-boks p{margin:0 0 .3rem}
.tekstside h2{font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.15rem,2.4vw,1.5rem);letter-spacing:.01em;line-height:1.1;
  margin:2.1rem 0 .7rem}
.tekstside h2:first-of-type{margin-top:0}
.tekstside ul{margin:0 0 1.05em;padding-left:1.25rem}
.tekstside li{margin-bottom:.35rem}

/* ---------- Mobil ---------- */
@media (max-width:860px){
  :root{--radius:30px;--radius-liten:18px}
  .topp-inner{flex-wrap:wrap;padding-block:.7rem}
  .merke{position:static;transform:none;order:1}
  .merke:hover{transform:translate(2px,-2px)}
  .hamburger{display:inline-flex;order:2}
  .topp nav{order:3;flex:0 0 100%;max-height:0;overflow:hidden;
    transition:max-height .28s ease}
  #menyknapp:checked ~ nav{max-height:70vh}
  .topp nav ul{flex-direction:column;align-items:stretch;gap:.5rem;padding:.85rem 0 1.1rem}
  .topp nav li:nth-child(2){margin-right:0}
  .topp nav .pille{width:100%}

  /* Retningsvariantene må nulles med SAMME spesifisitet som de settes,
     ellers står annethvert kort skjevt på mobil. */
  .vipp-v,.vipp-h{transform:none}
  .panel-utsnitt{margin-inline:0}
  .bunn-lenker{gap:1.9rem}
  .ordmerke{font-size:21vw}

  .lysbilde-inner{grid-template-columns:1fr;text-align:center}
  .bred-foto{margin-top:calc(-1 * clamp(2rem,7vw,3.5rem))}
  .info-rutenett{text-align:center}
  .bunn-kolonne{flex:1 1 100%}
}

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

.karusell-ramme{margin-top:clamp(1.6rem,4vw,2.6rem)}
.tekstside a,.skjema-hjelp a,.info-boks a{text-decoration:underline;text-underline-offset:3px}
.knapperad-topp{margin-top:1.6rem}
.tekst-h1{margin-bottom:1.3rem}
.bred-foto-om{max-width:1000px;margin-inline:auto;margin-top:clamp(1.6rem,4vw,2.6rem)}
.bred-foto-om img{aspect-ratio:16/9}