@font-face { font-family: "Young Serif"; src: url("/assets/fonts/young-serif-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("/assets/fonts/albert-sans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --papir: #f5f1e6;
  --papir-2: #ece5d3;
  --streg: #d6ccb2;
  --blaek: #1d2a22;
  --blaek-2: #4a5a4f;
  --skov: #173d2b;
  --skov-2: #24563d;
  --fairway: #a7c76f;
  --flag: #b83d29;
  --sand: #ead8a4;
  --creme: #f5f1e6;
  --serif: "Young Serif", Georgia, serif;
  --sans: "Albert Sans", system-ui, sans-serif;
  --kort: "Barlow Condensed", "Albert Sans", sans-serif;
  --r: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0; background: var(--papir); color: var(--blaek);
  font: 400 1.0625rem/1.65 var(--sans);
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--fairway); color: var(--skov); }
img, svg { max-width: 100%; }
a { color: var(--skov-2); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
a:hover { color: var(--flag); }
:focus-visible { outline: 3px solid var(--flag); outline-offset: 2px; border-radius: 4px; }

.ramme { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 48rem) { .ramme { padding: 0 2rem; } }
.smal { max-width: 46rem; }

.spring { position: absolute; left: -9999px; top: .5rem; background: var(--creme); color: var(--skov); padding: .5rem .8rem; border-radius: 6px; z-index: 10; }
.spring:focus { left: .5rem; }
.skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Top */
.top { background: var(--skov); color: var(--creme); }
.top-ramme { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1.5rem; padding-top: .8rem; padding-bottom: .8rem; }
.ordmaerke { display: inline-flex; align-items: center; gap: .5rem; color: var(--creme); text-decoration: none; font-family: var(--serif); font-size: 1.45rem; line-height: 1; letter-spacing: -.01em; }
.ordmaerke:hover { color: var(--creme); }
.ordmaerke em { font-style: normal; color: #b9d58a; }
.ordmaerke-flag { width: 1.1rem; height: 1.5rem; color: var(--creme); }
.menu { display: flex; flex-wrap: wrap; gap: .1rem .2rem; margin: 0 -.5rem; }
.menu a { color: #dfe8d6; text-decoration: none; font-family: var(--kort); font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; padding: .45rem .5rem; border-radius: 6px; }
.menu a:hover { color: #fff; background: var(--skov-2); }
@media (max-width: 30rem) {
  .menu { width: calc(100% + .5rem); flex-wrap: nowrap; justify-content: space-between; margin: 0 -.25rem; overflow-x: auto; scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { padding: .45rem .25rem; letter-spacing: .03em; font-size: .95rem; white-space: nowrap; }
  .menu .menu-kort { display: none; }
}
.top-kort { display: none; }
@media (max-width: 30rem) {
  .top-ramme { column-gap: .5rem; }
  .top-kort { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .3rem .9rem; border-radius: 999px; background: #b9d58a; color: var(--skov); text-decoration: none; font: 600 1rem/1 var(--kort); letter-spacing: .06em; text-transform: uppercase; }
  .top-kort:hover, .top-kort[aria-current="page"] { background: var(--creme); color: var(--skov); }
}
.menu a[aria-current="page"] { color: #fff; box-shadow: inset 0 -3px 0 #b9d58a; border-radius: 0; }

/* Typografi */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--skov); text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: clamp(2.3rem, 7vw, 3.9rem); line-height: 1.05; margin: 0 0 1rem; }
h2 { font-size: clamp(1.45rem, 3.6vw, 1.95rem); line-height: 1.2; margin: 2.6rem 0 .7rem; }
p, li, dd { max-width: 68ch; }
.lead { font-size: 1.2rem; line-height: 1.55; color: var(--blaek-2); margin: 0 0 1.5rem; }
b { font-weight: 650; color: var(--blaek); }

.knapper { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0 0; }
.knap {
  display: inline-flex; align-items: center; min-height: 2.9rem; padding: .6rem 1.15rem;
  border-radius: 999px; border: 2px solid var(--skov); background: var(--skov); color: var(--creme);
  font: 600 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.knap:hover { background: var(--skov-2); border-color: var(--skov-2); color: #fff; }
.knap-lys { background: transparent; color: var(--skov); }
.knap-lys:hover { background: var(--papir-2); color: var(--skov); border-color: var(--skov); }
.knap.advar { background: var(--flag); border-color: var(--flag); color: #fff; }

/* Forside: intro med hullet */
.intro { padding: 2.2rem 0 3rem; }
.intro-ramme { display: grid; gap: 2rem; }
.intro-tekst h2 { margin-top: 3rem; }
.intro-hul { margin: 0; order: 2; }
.intro-hul .hul { display: block; width: 100%; height: auto; max-width: 30rem; margin: 0 auto; }
.intro-hul figcaption { text-align: center; font-size: .92rem; color: var(--blaek-2); margin-top: .6rem; }
@media (min-width: 60rem) {
  .intro { padding-top: 3.5rem; }
  .intro-ramme { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3.5rem; align-items: start; }
  .intro-hul { position: sticky; top: 1.5rem; order: 0; }
}
@media (max-width: 59.99rem) {
  .intro-tekst { display: contents; }
  .intro-tekst > h1, .intro-tekst > .lead, .intro-tekst > .knapper { order: 0; }
  .intro-tekst > h2, .intro-tekst > p:not(.lead):not(.knapper) { order: 1; }
  .intro-tekst > .dele { order: 3; }
  .intro-tekst > h2 { margin: 1rem 0 0; }
  .intro-tekst > .knapper { margin-top: 0; }
  .intro-ramme { gap: 1rem; }
  .intro-hul { margin: 1rem 0 0; }
}

.dele { list-style: none; counter-reset: del; padding: 0; margin: 1.2rem 0 0; border-top: 1px solid var(--streg); }
.dele li { counter-increment: del; position: relative; padding: .85rem 0 .85rem 3rem; border-bottom: 1px solid var(--streg); }
.dele li::before {
  content: counter(del); position: absolute; left: 0; top: .9rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--skov); color: var(--creme); font: 600 1.05rem/1 var(--kort);
}

/* Scoretavle (mørk sektion) */
.tavle { background: var(--skov); color: #e4ecdc; padding: 3rem 0 3.4rem; }
.tavle h2 { color: var(--creme); margin-top: 0; }
.tavle b { color: #fff; }
.tavle-lead { font-size: 1.12rem; margin: 0 0 1.6rem; }
.tavle-note { margin: 1.4rem 0 0; color: #cbd8c2; }
.tabel-ramme { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.scoretabel { width: 100%; max-width: 44rem; border-collapse: collapse; background: var(--creme); color: var(--blaek); border-radius: var(--r); overflow: hidden; }
.scoretabel th, .scoretabel td { padding: .6rem .8rem; text-align: center; border-bottom: 1px solid var(--streg); white-space: nowrap; }
.scoretabel thead th { font: 600 .92rem/1.2 var(--kort); letter-spacing: .07em; text-transform: uppercase; background: var(--papir-2); color: var(--skov); white-space: normal; }
.scoretabel tbody th { text-align: left; font-weight: 650; }
.scoretabel td { font: 600 1.25rem/1 var(--kort); }
.scoretabel tr.par { background: #e4eccf; }
.scoretabel tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 34rem) {
  .scoretabel thead th:nth-child(3), .scoretabel td:nth-child(3) { display: none; }
  .scoretabel th, .scoretabel td { padding: .55rem .5rem; }
}

/* Scoretegn: cirkel under par, firkant over par */
.tegn { display: inline-grid; place-items: center; min-width: 2.1rem; height: 2.1rem; padding: 0 .2rem; border: 1.5px solid transparent; position: relative; }
.tegn-u1, .tegn-u2 { border-color: currentColor; border-radius: 50%; }
.tegn-o1, .tegn-o2 { border-color: currentColor; border-radius: 2px; }
.tegn-u2::after, .tegn-o2::after { content: ""; position: absolute; inset: -5px; border: 1.5px solid currentColor; border-radius: inherit; pointer-events: none; }
.tegn-o2::after { border-radius: 3px; }

/* Videre */
.videre { padding: 3rem 0 3.5rem; }
.videre h2 { margin-top: 0; }
.videre-liste { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--skov); max-width: 46rem; }
.videre-liste li { border-bottom: 1px solid var(--streg); }
.videre-liste a { display: grid; gap: .15rem; padding: 1rem 2.4rem 1rem 0; text-decoration: none; color: var(--blaek); position: relative; }
.videre-liste a::after { content: ""; position: absolute; right: .4rem; top: 50%; width: .6rem; height: .6rem; border-top: 2px solid var(--skov); border-right: 2px solid var(--skov); transform: translateY(-50%) rotate(45deg); transition: right .15s ease; }
.videre-liste a:hover::after { right: .1rem; }
.videre-liste span { font-family: var(--serif); font-size: 1.3rem; color: var(--skov); line-height: 1.25; }
.videre-liste a:hover span { color: var(--flag); }
.videre-liste small { font-size: 1rem; color: var(--blaek-2); }

/* Tekstsider */
.tekstside { padding: 2.4rem 0 3.5rem; }
@media (min-width: 48rem) { .tekstside { padding-top: 3.5rem; } }
.tekstside ul { padding-left: 1.2rem; }
.tekstside li { margin: .4rem 0; }
.tekstside li::marker { color: var(--skov-2); }
.naeste { margin-top: 3rem; padding-top: 1.2rem; border-top: 2px solid var(--skov); font-weight: 600; }

.koeller { margin: 1.5rem 0 0; border-top: 1px solid var(--streg); }
.koeller > div { display: grid; gap: .2rem 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--streg); }
.koeller dt { font-family: var(--serif); font-size: 1.3rem; color: var(--skov); }
.koeller dd { margin: 0; }
@media (min-width: 40rem) { .koeller > div { grid-template-columns: 11rem 1fr; } }

.pointtabel { border-collapse: collapse; min-width: 18rem; margin: .5rem 0 1rem; }
.pointtabel th, .pointtabel td { padding: .55rem 1rem; border-bottom: 1px solid var(--streg); text-align: left; }
.pointtabel thead th { font: 600 .92rem/1.2 var(--kort); letter-spacing: .07em; text-transform: uppercase; color: var(--skov); border-bottom: 2px solid var(--skov); }
.pointtabel td:last-child { font: 600 1.25rem/1 var(--kort); text-align: right; color: var(--skov); }

/* Scorekort */
.kort-ramme { max-width: 52rem; }
.kort { background: #fffdf7; border: 1px solid var(--streg); border-radius: 14px; box-shadow: 0 10px 30px -18px rgba(23, 61, 43, .45); padding: 1rem; margin: 1.5rem 0 2rem; }
@media (min-width: 48rem) { .kort { padding: 1.5rem; } }
.kort-valg { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: 1.2rem; }
.vaelger { border: 0; padding: 0; margin: 0; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.vaelger legend { float: left; margin-right: .6rem; font: 600 .95rem/2.75rem var(--kort); letter-spacing: .07em; text-transform: uppercase; color: var(--skov); padding: 0; }
.vaelger label { position: relative; }
.vaelger input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vaelger span { display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 .6rem; border: 1.5px solid var(--streg); border-radius: 8px; font: 600 1.2rem/1 var(--kort); cursor: pointer; background: var(--papir); transition: background-color .15s ease, color .15s ease; }
.vaelger label:hover span { border-color: var(--skov-2); }
.vaelger input:checked + span { background: var(--skov); border-color: var(--skov); color: var(--creme); }
.vaelger input:focus-visible + span { outline: 3px solid var(--flag); outline-offset: 2px; }

.kort-tabel-ramme { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -.25rem; }
.kort-tabel { width: 100%; margin: 0 auto; max-width: max(26rem, calc(6rem + var(--spillere, 1) * 9rem)); border-collapse: collapse; table-layout: fixed; }
.kort-tabel th, .kort-tabel td { border-bottom: 1px solid var(--streg); padding: .2rem .15rem; text-align: center; vertical-align: middle; }
.kort-tabel .k-hul { width: 2.6rem; font: 600 1.15rem/1 var(--kort); color: var(--skov); }
.kort-tabel .k-par { width: 3.4rem; }
.kort-tabel thead th { border-bottom: 2px solid var(--skov); padding-bottom: .45rem; font: 600 .9rem/1.2 var(--kort); letter-spacing: .07em; text-transform: uppercase; color: var(--skov); }
.kort-tabel thead .k-spiller { padding-left: .2rem; padding-right: .2rem; }
.kort-tabel input.navn {
  width: 100%; min-width: 0; font: 600 16px/1.2 var(--sans); color: var(--blaek); text-align: center;
  border: 1px dashed var(--streg); border-radius: 6px; background: transparent; padding: .45rem .2rem; text-overflow: ellipsis;
}
.kort-tabel input.navn:focus { border-style: solid; border-color: var(--skov-2); background: #fff; outline: none; }
.kort-tabel select {
  font: 600 1.1rem/1 var(--kort); color: var(--blaek-2); background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: .35rem .1rem; -webkit-appearance: none; appearance: none; text-align: center; text-align-last: center; width: 2.6rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--blaek-2) 50%), linear-gradient(-45deg, transparent 50%, var(--blaek-2) 50%);
  background-position: right 2px top 55%, right -2px top 55%; background-size: 4px 4px; background-repeat: no-repeat;
}
.kort-tabel select:hover, .kort-tabel select:focus { border-color: var(--streg); }
.kort-tabel .k-slag .tegn { color: var(--skov); min-width: 2.5rem; height: 2.5rem; margin: .3rem 0; }
.kort-tabel .k-slag input {
  width: 2.3rem; height: 2.1rem; border: 0; background: transparent; text-align: center; padding: 0;
  font: 600 1.35rem/1 var(--kort); color: var(--blaek); border-radius: 50%;
}
.kort-tabel .k-slag .tegn:not([class*="tegn-"]) input { background: var(--papir); border: 1px solid var(--streg); border-radius: 6px; }
.kort-tabel .k-slag input:focus { outline: 2px solid var(--flag); outline-offset: 1px; background: #fff; }
.kort-tabel tbody tr:nth-child(odd):not(.k-sum) { background: rgba(236, 229, 211, .35); }
.kort-tabel .k-sum th, .kort-tabel .k-sum td { font: 600 1.25rem/1 var(--kort); padding: .7rem .15rem; }
.kort-tabel .k-sum { background: var(--papir-2); }
.kort-tabel .k-sum .k-par { color: var(--blaek-2); }
.kort-tabel .k-sum th.k-hul { font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; }
.kort-tabel .k-total th, .kort-tabel .k-total td { border-top: 2px solid var(--skov); font-size: 1.45rem; color: var(--skov); }
.kort-tabel .k-forskel { background: var(--skov); }
.kort-tabel .k-forskel th, .kort-tabel .k-forskel td { color: var(--creme); border-bottom: 0; font-size: 1.2rem; }
.kort-tabel .k-forskel th { font-size: .95rem; letter-spacing: .05em; text-transform: uppercase; text-align: left; padding-left: .6rem; }
.kort-tabel .k-forskel td.under { color: #c9e59a; }
.kort-tabel tfoot tr.k-forskel > :first-child { border-radius: 0 0 0 8px; }
.kort-tabel tfoot tr.k-forskel > :last-child { border-radius: 0 0 8px 0; }

.kort-bund { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem 1rem; margin-top: 1.2rem; }
.kort-status { margin: 0; font-size: .95rem; color: var(--blaek-2); }

/* Bund */
.bund { background: var(--papir-2); border-top: 1px solid var(--streg); padding: 1.6rem 0; font-size: .95rem; }
.bund-ramme { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.5rem; align-items: center; }
.bund p { margin: 0; }
.bund-navn { font-family: var(--serif); color: var(--skov); font-size: 1.1rem; }
.bund nav { display: flex; gap: 1.2rem; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }