/* ══════════════════════════════════════════════════════════════════
   Zealand Labs – fælles stylesheet
   Sider: index, about, contact, wetza, tidva, privacy
   Rækkefølge: tokens → base → menulinje → footer → fælles blokke
               → forside → produktsider → kontaktside → bevægelse → mobil
   ══════════════════════════════════════════════════════════════════ */

/* ── Skrift ──────────────────────────────────────────────────────
   Schibsted Grotesk hostes lokalt (SIL OFL, se assets/fonts/OFL.txt),
   så besøgende ikke rammer Googles servere. Variabel vægt 400–900.
   latin-ext hentes kun hvis siden faktisk bruger tegn derfra. */
@font-face{
  font-family:"Schibsted Grotesk";
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url("assets/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Schibsted Grotesk";
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url("assets/fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --paper:#F6FAF7;
  --ink:#182720;
  --moss:#24603F;
  --leaf:#3F8B63;
  --mint:#A9E3C1;
  --fee:#C7D5CC;
  --line:#DCE7E0;
  /* Tidva's three degrees of urgency, the same as the app's status badges:
     out of stock, reorder now, reorder soon. Kept apart in hue (≈11°, 26°,
     45°) so they still read as three steps next to each other. */
  --crit:#B4482F;
  --warn:#C9702C;
  --soon:#D9B443;
  --measure:34rem;
  --bar-h:4.25rem;
}

/* ── Base ───────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{
  font-family:"Schibsted Grotesk",system-ui,-apple-system,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  font-size:1.0625rem;
  -webkit-text-size-adjust:100%;
  overflow-wrap:break-word;
}
img,svg{max-width:100%}
a{color:var(--moss)}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:3px solid var(--leaf);outline-offset:3px;border-radius:2px}
.wrap{max-width:66rem;margin:0 auto;padding:0 1.5rem}

/* Springlink for tastaturbrugere – synligt kun ved fokus */
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:.75rem 1rem;z-index:40;border-radius:0 0 .4rem 0}
.skip:focus{left:0}

/* ══ Menulinje ══════════════════════════════════════════════════ */
.topbar{
  position:sticky;top:0;z-index:30;
  background:#fff;border-bottom:1px solid var(--line);
}
.topbar-row{
  display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;
  min-height:var(--bar-h);
}
.wordmark{display:flex;align-items:center;text-decoration:none}
.wordmark img{display:block;height:1.75rem;width:auto}

.menu{display:flex;align-items:center;gap:.2rem;margin-right:-.8rem}
.menu-link{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.5rem .8rem;border-radius:.45rem;
  font:inherit;font-size:.95rem;font-weight:600;
  color:var(--ink);text-decoration:none;
  background:none;border:0;cursor:pointer;
  white-space:nowrap;
}
.menu-link:hover{color:var(--moss);background:#EDF5F0}
.menu-link.current{color:var(--moss)}
.menu-link.current::after{
  content:"";position:absolute;left:.8rem;right:.8rem;bottom:.35rem;
  height:2px;border-radius:1px;background:var(--leaf);
}
.menu-link{position:relative}
.menu-link.contact{
  margin-left:.5rem;border:1px solid var(--line);background:#fff;color:var(--moss);font-weight:700;
}
.menu-link.contact:hover{border-color:var(--leaf);background:#fff}
.menu-link.contact.current::after{display:none}
.menu-link.contact.current{border-color:var(--leaf);background:#EDF5F0}

/* Pil på Products */
.caret{width:.6rem;height:.6rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.15em) rotate(45deg);transition:transform .15s ease}
.menu-link[aria-expanded="true"] .caret{transform:translateY(.05em) rotate(-135deg)}

/* Undermenu.
   Uden JavaScript: Products-knappen skjules og de to links står i linjen.
   Med JavaScript (html.js): knappen viser en svævende undermenu. */
.menu-group{display:flex;align-items:center;gap:.2rem}
.menu-link.has-sub{display:none}
.submenu a{
  display:inline-flex;align-items:center;
  padding:.5rem .8rem;border-radius:.45rem;
  font-size:.95rem;font-weight:600;text-decoration:none;color:var(--ink);
}
.submenu a:hover{background:#EDF5F0;color:var(--moss)}
.sm-desc{display:none}

.js .menu-group{position:relative;display:block}
.js .menu-link.has-sub{display:inline-flex}
.js .submenu{
  position:absolute;top:calc(100% + .55rem);right:0;z-index:31;
  min-width:19rem;padding:.5rem;
  background:#fff;border:1px solid var(--line);border-radius:.7rem;
  box-shadow:0 12px 32px -18px rgba(24,39,32,.45);
}
.js .submenu[hidden]{display:none}
.js .submenu a{display:block;padding:.7rem .8rem;border-radius:.5rem;font-weight:400}
.js .submenu a[aria-current="page"]{background:#EDF5F0}
.js .sm-name{display:block;font-weight:700;color:var(--moss)}
.js .sm-desc{display:block;font-size:.88rem;color:#33473C}

/* ── Footer ─────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:2.5rem 0 3rem;font-size:.95rem;color:#33473C;margin-top:1rem}
footer .wrap{display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap}
footer nav{display:flex;gap:1.25rem;flex-wrap:wrap}

/* ══ Fælles blokke ══════════════════════════════════════════════ */
.eyebrow{font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--leaf)}
.section{padding-block:3.5rem;border-top:1px solid var(--line)}
.section h2{font-size:1.6rem;font-weight:800;letter-spacing:-.02em}
.section > p{margin-top:1rem;max-width:var(--measure);color:#33473C}
.section .more-link{display:inline-block;margin-top:1.5rem;font-weight:700}
.section .more-link::after{content:" →"}

/* Sidehoved på under­sider */
.page-head{padding-block:3.5rem 1rem}
.page-head h1{font-size:clamp(2rem,4.2vw,3rem);line-height:1.1;font-weight:800;letter-spacing:-.025em;max-width:17ch;margin-top:.5rem}
.page-head p{margin-top:1.15rem;max-width:var(--measure);font-size:1.125rem;color:#33473C}

/* Rolige linjer, ikke kort */
.features{padding-block:2.5rem .5rem}
.feature{display:grid;grid-template-columns:16rem 1fr;gap:1.5rem;padding:1.4rem 0;border-top:1px solid var(--line)}
.feature:last-child{border-bottom:1px solid var(--line)}
.feature h3{font-size:1.1rem;font-weight:700;letter-spacing:-.01em}
.feature p{max-width:var(--measure);color:#33473C}

/* Knapper */
.cta-row{margin-top:1.75rem;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.cta{
  display:inline-block;background:var(--moss);color:#fff;text-decoration:none;
  font-weight:700;font-size:1.05rem;padding:.85rem 1.5rem;border-radius:.55rem;
  border:1px solid var(--moss);cursor:pointer;font-family:inherit;
}
.cta:hover{background:#1B4C31;border-color:#1B4C31}
.cta.ghost{background:#fff;color:var(--moss)}
.cta.ghost:hover{background:#EDF5F0}
.pricenote{font-size:.95rem;color:#33473C}
.status{margin-top:1rem;font-size:.9rem;color:var(--leaf);font-weight:500}

/* ══ Forside ════════════════════════════════════════════════════ */
.intro{padding-block:3.5rem 1rem}
.intro h1{
  font-size:clamp(2.1rem,4.6vw,3.3rem);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.025em;
  max-width:17ch;
}
.intro p{margin-top:1.25rem;max-width:var(--measure);font-size:1.125rem;color:#33473C}
.apps-head{padding-top:2.5rem}

/* Produktkort */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;padding-block:2.5rem 0}
.card{
  display:flex;flex-direction:column;
  padding:1.75rem;border:1px solid var(--line);border-radius:.9rem;background:#fff;
  text-decoration:none;color:inherit;
}
.card:hover{border-color:var(--leaf)}
/* Appikon – samme mærke på kort og i produktheroen.
   Ikonfilerne har selv runde hjørner, så ingen border-radius her. */
.app-icon{display:block;width:2.75rem;height:2.75rem;margin-bottom:1rem}
.app-icon.lg{width:4rem;height:4rem;margin-bottom:1.25rem}
.card .name{font-size:1.35rem;font-weight:800;letter-spacing:-.02em}
.card .tag{margin-top:.35rem;font-weight:600;max-width:26ch}
.card .desc{margin-top:.8rem;font-size:.95rem;color:#33473C}
.card .card-visual{height:3.5rem;margin:1.5rem 0 1.25rem}
.card .meta{margin-top:auto;font-size:.9rem;color:#33473C}
.card .more{margin-top:.6rem;font-weight:700;color:var(--moss)}
.card .more::after{content:" →"}

/* Minivisual: Wetza – kanaler */
.spark{display:flex;align-items:flex-end;gap:.4rem;height:100%;border-bottom:2px solid var(--ink)}
.spark i{flex:1;background:var(--leaf);border-radius:.2rem .2rem 0 0}
.spark i:first-child{background:var(--mint)}
.spark i:last-child{background:var(--fee)}

/* Minivisual: Tidva – dækning */
.minicover{display:flex;flex-direction:column;justify-content:center;gap:.6rem;height:100%}

/* ══ Produktsider ═══════════════════════════════════════════════ */
.phero{padding-block:3rem 3.5rem;display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:center}
.phero h1{
  margin-top:.5rem;
  font-size:clamp(2rem,4.2vw,3rem);
  line-height:1.1;
  font-weight:800;
  letter-spacing:-.025em;
  max-width:16ch;
}
.phero .sub{margin-top:1.15rem;max-width:var(--measure);font-size:1.125rem;color:#33473C}

/* Wetza-diagrammet: gebyr som mat top-skive, netto massivt */
.chart{--chart-h:15rem}
.chart-title{font-size:.95rem;font-weight:700;margin-bottom:1rem}
.bars{display:flex;align-items:flex-end;gap:.7rem;height:var(--chart-h);border-bottom:2px solid var(--ink);padding-bottom:0}
.bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-width:0}
.bar .net,.bar .feecut{width:100%;transform-origin:bottom}
.bar .feecut{background:var(--fee);border-radius:.3rem .3rem 0 0}
.bar .net{background:var(--leaf)}
.bar .net.solo{border-radius:.3rem .3rem 0 0}
.bar.win .net{background:var(--mint)}
.bar .val{font-size:.8rem;font-weight:700;text-align:center;margin-bottom:.35rem;white-space:nowrap}
.labels{display:flex;gap:.7rem;margin-top:.6rem}
.labels span{flex:1;font-size:.75rem;text-align:center;color:#33473C;overflow-wrap:break-word}

/* Tidva-visualen: genbestillingslisten */
.rtable{border-top:2px solid var(--ink)}
.rrow{
  display:grid;grid-template-columns:1fr 7rem 3.5rem;gap:.75rem;align-items:center;
  padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.85rem;
}
.rrow.rhead{font-weight:700;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:#33473C;padding:.5rem 0}
.rrow .item{font-weight:600;overflow-wrap:break-word}
.rrow .item em{font-style:normal;font-weight:400;color:#33473C}
.rrow .cover{display:flex;flex-direction:column;gap:.3rem}
.rrow .days{color:#33473C;white-space:nowrap;font-variant-numeric:tabular-nums}
.rrow .qty{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.rrow .qty.none{font-weight:400;color:#7A8C82}

/* Dækningsbjælke – bruges både i tabellen og i minivisualen på forsiden */
.track{display:block;height:.45rem;background:#E8F0EA;border-radius:.25rem;overflow:hidden}
.cbar{display:block;height:100%;border-radius:.25rem;background:var(--leaf);transform-origin:left}
.cbar.crit{background:var(--crit)}
.cbar.warn{background:var(--warn)}
.cbar.soon{background:var(--soon)}
.cbar.dead{background:var(--fee)}

/* Signaturforklaring */
.legend{margin-top:1.1rem;font-size:.85rem;color:#33473C;display:flex;gap:1.25rem;flex-wrap:wrap}
.legend i{display:inline-block;width:.8rem;height:.8rem;border-radius:.2rem;margin-right:.4rem;vertical-align:-.05rem}
.legend .k-net i{background:var(--leaf)}
.legend .k-fee i{background:var(--fee)}
.legend .k-crit i{background:var(--crit)}
.legend .k-warn i{background:var(--warn)}
.legend .k-soon i{background:var(--soon)}
.legend .k-ok i{background:var(--leaf)}

/* Pris */
.pricing{padding-block:3rem 0}
.pricing h2{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;margin-bottom:1.5rem}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:46rem}
.plan{padding:1.5rem;border:1px solid var(--line);border-radius:.7rem;background:#fff}
.plan.pro{background:var(--mint);border-color:var(--mint)}
.plan h3{font-size:1.05rem;font-weight:800}
.plan .price{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;margin:.4rem 0 .8rem}
.plan .price small{font-size:.9rem;font-weight:500}
.plan ul{padding-left:1.1rem;font-size:.95rem;color:#22352B}
.plan li{margin:.3rem 0}

/* Krydslink nederst på en produktside */
.crosslink{padding-block:3.5rem;border-top:1px solid var(--line)}
.crosslink .cards{grid-template-columns:1fr;padding-top:1.5rem;max-width:32rem}

/* ══ Kontaktside ════════════════════════════════════════════════ */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;padding-block:2.5rem 3.5rem;align-items:start}
.form{display:grid;gap:1rem;max-width:34rem}
.form h2{font-size:1.05rem;font-weight:800}
.form .cta-row{margin-top:.25rem}
.form-note{font-size:.9rem;color:#33473C;max-width:34rem}

.contact-aside{display:grid;gap:2rem;padding-block:.5rem 0}
.contact-aside h2{font-size:1.05rem;font-weight:800}
.contact-aside p{margin-top:.5rem;color:#33473C;font-size:.95rem}
.contact-aside dl{margin-top:.5rem;font-size:.95rem;color:#33473C}
.contact-aside dt{font-weight:600;color:var(--ink);margin-top:.6rem}

/* ── Bevægelse ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .bar .net,.bar .feecut{animation:grow .7s cubic-bezier(.2,.7,.2,1) backwards}
  .bar:nth-child(2) .net,.bar:nth-child(2) .feecut{animation-delay:.06s}
  .bar:nth-child(3) .net,.bar:nth-child(3) .feecut{animation-delay:.12s}
  .bar:nth-child(4) .net,.bar:nth-child(4) .feecut{animation-delay:.18s}
  .bar:nth-child(5) .net,.bar:nth-child(5) .feecut{animation-delay:.24s}
  .bar:nth-child(6) .net,.bar:nth-child(6) .feecut{animation-delay:.3s}
  .bar .val{animation:appear .4s ease .75s backwards}
  .rrow .cbar{animation:stretch .7s cubic-bezier(.2,.7,.2,1) backwards}
  .rrow:nth-child(3) .cbar{animation-delay:.06s}
  .rrow:nth-child(4) .cbar{animation-delay:.12s}
  .rrow:nth-child(5) .cbar{animation-delay:.18s}
  .rrow:nth-child(6) .cbar{animation-delay:.24s}
}
@keyframes grow{from{transform:scaleY(0)}}
@keyframes appear{from{opacity:0}}
@keyframes stretch{from{transform:scaleX(0)}}

/* ── Smalle skærme ──────────────────────────────────────────────── */
@media (max-width:47rem){
  .topbar-row{flex-wrap:wrap;padding-block:.85rem;min-height:0}
  .wordmark img{height:1.5rem}
  .menu{margin:0 -.8rem;flex-wrap:wrap}
  /* Undermenuen svæver stadig, men holdes inden for skærmen */
  .js .submenu{min-width:min(19rem,calc(100vw - 3rem))}
  .intro{padding-block:2rem .5rem}
  .page-head{padding-block:2rem .5rem}
  .section,.crosslink{padding-block:2.5rem}
  .cards{grid-template-columns:1fr}
  .phero{grid-template-columns:1fr;gap:2.5rem;padding-block:1.5rem 2.5rem}
  .feature{grid-template-columns:1fr;gap:.4rem}
  .plans{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:2.5rem;padding-block:1.5rem 2.5rem}
  .card{padding:1.4rem}
  .bar .val{font-size:.65rem}
  .labels span{font-size:.65rem}
  /* Genbestillingslisten: smallere talkolonner, så varenavnet får plads */
  .rrow{grid-template-columns:1fr 5.5rem 2.75rem;gap:.5rem;font-size:.8rem}
  .legend{gap:.5rem 1rem;font-size:.8rem}
  footer .wrap{gap:1.25rem}
}

/* Meget smalle telefoner */
@media (max-width:24rem){
  .wrap{padding:0 1.15rem}
  .rrow{grid-template-columns:1fr 4.75rem 2.5rem}
  .rrow .days{font-size:.75rem}
}