/* site.css — implementeringslag oven på designsystemet.
 *
 * Her ligger to ting:
 *   1. De regler prototypen satte som inline style attributter. Handoff'en
 *      beskriver dem som besluttede designværdier, så de hører hjemme i CSS.
 *   2. De få ting prototypen ikke havde: videokortene som rigtige klasser,
 *      fejlbeskeder i kontaktformularen og et spring-til-indhold-link.
 *
 * Intet her overskriver en farve- eller kontrastbeslutning fra designsystemet.
 * Filen indlæses sidst. */

html{scroll-behavior:smooth}

.page{min-height:100vh}

/* Ankersektioner. Topbaren er 100px høj; 88px er den besluttede afstand. */
[id="ring-mig-op"],
[id="forlob"],
[id="videoer"],
[id="workshops"],
[id="om-david"],
[id="faq"],
[id="tidslinje"],
[id="ultra4charity"],
[id="kontakt"]{scroll-margin-top:88px}

/* ---- Topbar ---- */
.topbar{position:sticky;top:0;z-index:30;height:100px;box-shadow:0 4px 12px rgba(0,0,0,.15)}
/* Designet sætter 61px. Logoet er en guldring om et portræt, og under ca. 70px
 * mister ringen sin form, så mærket bare ligner et lille foto. Den lodrette
 * padding sættes ned tilsvarende, så baren stadig er 100px. */
.topbar{padding-block:var(--space-3)}
.topbar__avatar{width:72px;height:72px}
/* Wordmarket er et link til toppen, men skal se ud som ren tekst. */
.wordmark{font-size:21px;letter-spacing:.1em;line-height:1.05;gap:0;white-space:nowrap;text-decoration:none}
.topbar a.wordmark,.topbar a.wordmark:hover{color:var(--ink-900)}
.nav a{font-size:16px}

/* Spring til indhold — synligt kun ved tastaturfokus. */
.skip-link{position:absolute;left:var(--space-4);top:-100px;z-index:40;display:inline-flex;align-items:center;min-height:48px;padding:0 var(--space-6);border-radius:6px;background:var(--cta-on-light);color:var(--ink-0);font-weight:var(--weight-bold);text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:var(--space-2)}

/* ---- Hero ----
 * Hvid, ikke --surface-light: heroen skal stå et trin lysere end resten. */
.hero{background:var(--ink-0)}

/* ---- Priskort ----
 * "Se alle N punkter" er en knap, ikke et link — den skal se ud som tekst. */
.price-card__more{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-align:left}

/* ---- Videoer ----
 * Strukturplaceholder for et kommende medlemsområde. Sektionen er skjult
 * indtil videotitler og et rigtigt tilmeldingsflow foreligger. */
.videos__intro{margin:0 0 var(--space-8);font-size:var(--text-h3);font-weight:var(--weight-medium);line-height:1.35;color:var(--green-900)}
.video-card{display:flex;flex-direction:column;background:var(--ink-0);border:1px solid var(--border-soft);border-radius:20px;overflow:hidden}
.video-card--featured{border-color:var(--gold-500);box-shadow:0 18px 40px rgba(20,57,42,.10)}
.video-card__thumb{position:relative;aspect-ratio:16/9;display:grid;place-items:center;background:repeating-linear-gradient(135deg,#EDE7DC 0 14px,#E2DACB 14px 28px)}
.video-card__lock{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--overlay-photo)}
.video-card__body{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);flex:1}
.video-card__body h3{margin:0;font-size:var(--text-h3);font-weight:var(--weight-bold);line-height:1.1}
.video-card__body .btn{margin-top:auto}

/* ---- Fotos ----
 * Designsystemets billedfelter er stribede pladsholdere med en label. Ligger
 * der et rigtigt foto i feltet, skal striberne væk — feltet står stadig for
 * format, radius og beskæring, så layoutet er det samme med og uden foto. */
.topbar__avatar:has(img),
.hero__photo:has(img),
.textmedia__media:has(img),
.quotes__media:has(img),
.tl-card__img:has(img){background:none}
.topbar__avatar{overflow:hidden}
.topbar__avatar img,
.hero__photo img,
.textmedia__media img,
.quotes__media img,
.tl-card__img img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* ---- Logoer ----
 * Sponsorlogoerne foreligger som PNG. Mediernes logoer gør ikke — de felter
 * står med stiplet kant og navnet som tekst, indtil filerne kommer. */
.logo-grid li:has(img){border-style:solid;border-color:var(--border-soft)}
.logo-grid img{max-width:100%;max-height:56px;width:auto;height:auto;object-fit:contain}
/* Sponsorlogoerne spænder fra kvadratiske mærker til meget brede wordmarks.
 * Ved en fælles højde ser de kvadratiske for små ud, så feltet får lov at
 * vokse lidt ud over sin min-height. */
.logo-grid--dense img{max-height:52px}

/* ---- Tidslinje ---- */
.timeline__track{scrollbar-width:thin;scrollbar-color:#3C6A54 transparent}
/* Grab-markøren sættes først når JavaScript har koblet træk på. */
.timeline__track.is-draggable{cursor:grab}
.timeline__track[data-dragging]{cursor:grabbing;scroll-snap-type:none}

/* ---- Citater ----
 * Tre kort på række må stå tættere end den almindelige sektionsgutter. */
@media (min-width:768px){
  .quotes__grid{gap:var(--space-4)}
}

/* ---- Kontaktformular ----
 * Fejl vises under feltet, aldrig som alert. Rust er sidens signalfarve og
 * står 5,3:1 på både lys flade og sandfladen. */
.field__error{margin:0;font-size:var(--text-sm);line-height:1.4;color:var(--sun-700)}
.field__error:empty{display:none}
.input[aria-invalid="true"]{border-color:var(--sun-700)}
.contact__form .btn[disabled]{cursor:progress}
/* Honeypot — skal være usynlig for mennesker, men ikke display:none, da en
 * del bots springer skjulte felter over. */
.field--trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- Footer ----
 * <dl> kræver dt og dd inde i samme <div>; luften mellem linjerne kommer
 * derfor herfra i stedet for fra listens egen gap. */
.footer dl>div{display:flex;flex-direction:column;gap:var(--space-3)}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}