/* pakkeleg.dk - kraftpapir, granfarvet bånd og tranebærrød sløjfe */
@font-face { font-family: "Rokkitt"; src: url("/assets/fonts/rokkitt-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-latin.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }

:root {
  --kraft: #ece0c7;
  --kraft-2: #e2d2b2;
  --papir: #f8f2e4;
  --gran: #1d3a31;
  --gran-2: #26493d;
  --gran-tekst: #c9dccf;
  --tekst: #1f2823;
  --tekst-2: #574632;
  --tranebaer: #a3273a;
  --tranebaer-2: #8a1f30;
  --guld: #e0b45a;
  --linje: #cdb88f;
  --display: "Rokkitt", Georgia, serif;
  --brod: "Figtree", system-ui, sans-serif;
  --ramme: 72rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--gran-2) var(--kraft); }
body {
  margin: 0;
  font-family: var(--brod);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tekst);
  background-color: var(--kraft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  caret-color: var(--tranebaer);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
::selection { background: var(--tranebaer); color: var(--papir); }
a { color: var(--tranebaer); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--tranebaer-2); text-decoration-thickness: 2.5px; }
:focus-visible { outline: 3px solid var(--guld); outline-offset: 3px; border-radius: 2px; }
.ramme { width: 100%; max-width: var(--ramme); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .ramme { padding: 0 2rem; } }

.spring { position: absolute; left: -999px; top: 0; background: var(--guld); color: var(--gran); padding: .5rem 1rem; z-index: 10; }
.spring:focus { left: 1rem; }

/* Top: låget på pakken */
.top { background: var(--gran); color: var(--papir); }
.top-ramme { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; padding-top: .9rem; padding-bottom: .9rem; }
.ordmaerke { display: inline-flex; align-items: center; gap: .55rem; color: var(--papir); text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 1.75rem; line-height: 1; letter-spacing: -.01em; }
.ordmaerke:hover { color: var(--papir); }
.ordmaerke .tld { color: var(--guld); }
.maerke { width: 2.25rem; height: 2.25rem; flex: none; }
.menu { display: flex; flex-wrap: wrap; gap: .15rem 1.25rem; }
.menu a { color: var(--gran-tekst); text-decoration: none; font-weight: 600; font-size: .98rem; padding: .35rem 0; border-bottom: 2px solid transparent; }
.menu a:hover { color: var(--papir); border-bottom-color: var(--gran-tekst); }
.menu a[aria-current="page"] { color: var(--papir); border-bottom-color: var(--guld); }
.baand {
  height: 14px;
  background:
    linear-gradient(var(--guld), var(--guld)) 0 3px / 100% 1.5px no-repeat,
    linear-gradient(var(--guld), var(--guld)) 0 9.5px / 100% 1.5px no-repeat,
    var(--tranebaer);
}

/* Typografi */
h1, h2, h3 { font-family: var(--display); font-weight: 800; color: var(--gran); line-height: 1.05; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 8vw, 4.75rem); margin: 0 0 1.25rem; }
h2 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin: 2.75rem 0 .85rem; }
p { margin: 0 0 1rem; }
.indledning { font-size: clamp(1.15rem, 2.4vw, 1.3rem); line-height: 1.55; color: var(--tekst); max-width: 38rem; }
strong { font-weight: 700; color: var(--gran); }

/* Forside */
.forside { display: grid; gap: 2.5rem; padding-top: 2.5rem; padding-bottom: 1rem; }
.forside .tidsur { margin: 1rem 0 0; }
.forside-tekst .indledning { margin-bottom: 0; }
@media (min-width: 960px) {
  .forside { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-areas: "tekst ur" "vej ur"; column-gap: 4rem; row-gap: 0; padding-top: 4rem; align-items: start; }
  .forside-tekst { grid-area: tekst; }
  .forside .tidsur { grid-area: ur; margin-top: .5rem; }
  .forside .vej { grid-area: vej; margin-top: 2rem; }
}
.vej { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--gran); }
.vej li { border-bottom: 1px solid var(--linje); }
.vej a { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; padding: 1.1rem 0; text-decoration: none; color: var(--tekst); }
.vej a::after {
  content: ""; grid-row: 1 / span 2; grid-column: 2; align-self: center; width: 1.6rem; height: 1.6rem;
  background: var(--tranebaer);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.vej a:hover::after { transform: translateX(4px); }
.vej-titel { font-family: var(--display); font-weight: 800; font-size: 1.6rem; line-height: 1.1; color: var(--gran); }
.vej a:hover .vej-titel { color: var(--tranebaer); }
.vej-tekst { color: var(--tekst-2); margin-top: .25rem; }

.gang { padding-top: 1.5rem; padding-bottom: 4rem; }
.gang h2 { margin-top: 2rem; }
.trin { list-style: none; counter-reset: trin; margin: 0; padding: 0; display: grid; gap: 1.5rem 2.5rem; }
@media (min-width: 720px) { .trin { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .trin { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trin li { counter-increment: trin; position: relative; padding-top: 3.25rem; color: var(--tekst-2); }
.trin li::before {
  content: counter(trin); position: absolute; top: 0; left: 0;
  font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--tranebaer);
}
.trin strong { display: block; font-size: 1.1rem; margin-bottom: .2rem; }

/* Artikel */
.artikel { max-width: calc(44rem + 4rem); padding-top: 2.5rem; padding-bottom: 4.5rem; }
@media (min-width: 960px) { .artikel { padding-top: 4rem; } }
.artikel p, .artikel li { max-width: 68ch; }
.artikel ul, .artikel ol { margin: 0 0 1.25rem; padding: 0; list-style: none; }
.artikel li { position: relative; padding-left: 2rem; margin-bottom: .7rem; }
.artikel ul > li::before {
  content: ""; position: absolute; left: .3rem; top: .55em; width: .7rem; height: .7rem; border-radius: 2px;
  background:
    linear-gradient(var(--papir), var(--papir)) center / 2px 100% no-repeat,
    linear-gradient(var(--papir), var(--papir)) center / 100% 2px no-repeat,
    var(--tranebaer);
}
.artikel ol { counter-reset: nr; }
.artikel ol > li { counter-increment: nr; }
.artikel ol > li::before {
  content: counter(nr); position: absolute; left: 0; top: .05em;
  font-family: var(--display); font-weight: 800; font-size: 1.3rem; line-height: 1.2; color: var(--tranebaer);
}
.videre { margin-top: 2.75rem; padding-top: 1.25rem; border-top: 2px solid var(--gran); }

/* Knapper */
.knap {
  font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; border-radius: 999px;
  padding: .8rem 1.6rem; min-height: 3rem; border: 2px solid transparent;
  transition: background-color .15s, color .15s, transform .1s;
}
.knap:active { transform: translateY(1px); }
.knap-link { display: inline-block; background: var(--gran); color: var(--papir); text-decoration: none; }
.knap-link:hover { background: var(--gran-2); color: var(--papir); }

/* Tidsur */
.tidsur {
  position: relative; background: var(--gran); color: var(--papir);
  border-radius: 6px; padding: 2.75rem 1.25rem 1.6rem;
  box-shadow: 0 18px 40px -18px rgba(40, 28, 10, .55), 0 2px 6px rgba(40, 28, 10, .18);
  text-align: center; margin: 3rem 0 1rem;
  transition: background-color .4s ease-out;
}
.forside .tidsur { margin-bottom: 0; }
@media (min-width: 640px) { .tidsur { padding: 3rem 2rem 2rem; } }
.tidsur::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background:
    linear-gradient(var(--guld), var(--guld)) 0 3px / 100% 1.5px no-repeat,
    linear-gradient(var(--guld), var(--guld)) 0 9.5px / 100% 1.5px no-repeat,
    var(--tranebaer);
  border-radius: 6px 6px 0 0;
}
.tidsur-sloejfe {
  position: absolute; top: -20px; left: 50%; margin-left: -36px; width: 72px; height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 44'%3E%3Cpath d='M36 22C28 6 8 2 8 14c0 10 16 9 28 8Z' fill='%23a3273a'/%3E%3Cpath d='M36 22C44 6 64 2 64 14c0 10-16 9-28 8Z' fill='%23a3273a'/%3E%3Cpath d='M33 22 24 42h7l5-12 5 12h7l-9-20Z' fill='%238a1f30'/%3E%3Cpath d='M14 12c3-3 10-1 17 7' stroke='%23e0b45a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M58 12c-3-3-10-1-17 7' stroke='%23e0b45a' stroke-width='1.5' fill='none'/%3E%3Crect x='31' y='17' width='10' height='10' rx='3' fill='%238a1f30'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tidsur h2 { color: var(--papir); font-size: 1.35rem; margin: 0; letter-spacing: 0; }
.tidsur-visning {
  font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: clamp(4.5rem, 22vw, 7.5rem); line-height: 1; margin: .6rem 0 .3rem; letter-spacing: -.02em;
  color: var(--papir);
}
.tidsur-status { color: var(--gran-tekst); min-height: 1.6em; margin: 0 0 1.25rem; }
.tidsur-valg { border: 0; margin: 0 0 1.25rem; padding: 0; min-width: 0; }
.tidsur-valg legend { padding: 0; margin: 0 auto .6rem; font-size: .9rem; font-weight: 600; color: var(--gran-tekst); }
.valg-raekke { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.valg-raekke label { position: relative; }
.valg-raekke input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.valg-raekke span {
  display: inline-flex; align-items: center; min-height: 2.6rem; padding: .3rem .95rem; border-radius: 999px;
  border: 1.5px solid rgba(248, 242, 228, .35); color: var(--papir); font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.valg-raekke span:hover { border-color: var(--papir); }
.valg-raekke input:checked + span { background: var(--guld); border-color: var(--guld); color: var(--gran); }
.valg-raekke input:focus-visible + span { outline: 3px solid var(--guld); outline-offset: 2px; }
.skjul { display: inline-flex; align-items: center; gap: .55rem; margin-top: .9rem; font-size: .95rem; color: var(--gran-tekst); cursor: pointer; text-align: left; }
.skjul input { width: 1.2rem; height: 1.2rem; accent-color: var(--guld); flex: none; }
.tidsur-knapper { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; }
.knap-start { background: var(--guld); color: var(--gran); min-width: 9rem; }
.knap-start:hover { background: #ebc574; }
.knap-nul { background: transparent; color: var(--papir); border-color: rgba(248, 242, 228, .5); }
.knap-nul:hover { border-color: var(--papir); }
.tidsur.koerer .tidsur-valg { opacity: .45; pointer-events: none; }
.tidsur.slut { background: var(--tranebaer); }
.tidsur.slut .tidsur-status { color: var(--papir); font-weight: 700; }
.tidsur.slut .tidsur-valg legend, .tidsur.slut .skjul { color: var(--papir); }
.tidsur.slut::before { background: linear-gradient(var(--guld), var(--guld)) 0 3px / 100% 1.5px no-repeat, linear-gradient(var(--guld), var(--guld)) 0 9.5px / 100% 1.5px no-repeat, var(--gran); }
.tidsur.slut .tidsur-visning { animation: puls 1s cubic-bezier(.16, 1, .3, 1) 3; }
@keyframes puls { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .tidsur.slut .tidsur-visning { animation: none; } .vej a::after { transition: none; } }

/* Bund */
.bund { background: var(--gran); color: var(--gran-tekst); font-size: .95rem; }
.bund-ramme { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.4rem; padding-bottom: 1.4rem; }
.bund p { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--papir); }
.bund a { color: var(--gran-tekst); }
.bund a:hover { color: var(--papir); }