/* Odense Sportsklub (eksempel). Idé: banen tegnet med kridt, holdene som magneter på en taktiktavle. */

:root {
  --troeje: #2238C9;      /* klubtrøjen, kobolt */
  --troeje-dyb: #17268F;  /* trøjen i skygge */
  --rosa: #FF9EC0;        /* udebanetrøjen */
  --rosa-lys: #FFE3EE;    /* rosa vasket mange gange */
  --kridt: #FFFFFF;       /* kridtstregen */
  --natkamp: #1E1035;     /* aftenhimmel over lysmasterne, tekst */

  --f-display: 'Anybody', 'Arial Black', sans-serif;
  --f-tekst: 'Sofia Sans', system-ui, sans-serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --reveal-dur: .9s;
  --reveal-y: 1.5rem;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --header-h: 4.5rem;
}

html { scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  font-family: var(--f-tekst);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  line-height: 1.55;
  color: var(--natkamp);
  background: var(--kridt);
}
h1, h2, h3 { font-family: var(--f-display); font-weight: 900; line-height: .95; letter-spacing: -.01em; }
h2 { font-size: clamp(2.2rem, 1.4rem + 4vw, 5rem); font-stretch: 112%; }
::selection { background: var(--rosa); color: var(--natkamp); }

/* ---------- Knapper ---------- */
.knapper { display: flex; flex-wrap: wrap; gap: .75rem; }
.knap {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: .8rem 1.5rem;
  font-family: var(--f-display); font-weight: 800; font-stretch: 105%; font-size: 1.0625rem;
  text-decoration: none; border-radius: 999px; border: 2px solid transparent;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), translate .4s var(--ease-out);
}
.knap:hover { translate: 0 -2px; }
.knap:active { translate: 0 1px; }
.knap-rosa { background: var(--rosa); color: var(--natkamp); }
.knap-rosa:hover { background: var(--kridt); }
.knap-kant { border-color: currentColor; color: var(--kridt); background: var(--troeje); }
.medlem .knap-kant { background: var(--natkamp); }
.knap-kant:hover { background: var(--kridt); color: var(--troeje); }
.knap-natkamp { background: var(--natkamp); color: var(--kridt); }
.knap-natkamp:hover { background: var(--troeje); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-inline: var(--gutter);
  background: var(--troeje); color: var(--kridt);
}
.logo { display: flex; align-items: center; gap: .7rem; min-height: 2.75rem; text-decoration: none; }
.logo-maerke { width: 2.4rem; height: 2.4rem; flex: none; }
.logo span { font-family: var(--f-display); font-weight: 900; font-stretch: 118%; font-size: .95rem; line-height: 1; }
.menu { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.menu a { position: relative; text-decoration: none; font-weight: 600; font-size: 1rem; padding-block: .4rem; }
.menu a:not(.menu-medlem)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rosa); scale: 0 1; transform-origin: left; transition: scale .4s var(--ease-out); }
.menu a:not(.menu-medlem):hover::after { scale: 1 1; }
.menu .menu-medlem { background: var(--rosa); color: var(--natkamp); padding: .55rem 1.1rem; border-radius: 999px; font-family: var(--f-display); font-weight: 800; transition: background-color .3s var(--ease-out); }
.menu .menu-medlem:hover { background: var(--kridt); }
.menu-knap { display: none; }
.site-header :focus-visible { outline-color: var(--rosa); }

@media (max-width: 860px) {
  .menu-knap {
    display: grid; place-items: center; width: 3rem; height: 3rem; position: relative; z-index: 2;
    border-radius: 999px; background: var(--rosa);
  }
  .menu-knap-streg, .menu-knap-streg::before, .menu-knap-streg::after {
    display: block; width: 1.25rem; height: 2px; background: var(--natkamp); transition: rotate .4s var(--ease-out), translate .4s var(--ease-out), opacity .2s;
  }
  .menu-knap-streg { position: relative; }
  .menu-knap-streg::before, .menu-knap-streg::after { content: ''; position: absolute; left: 0; }
  .menu-knap-streg::before { translate: 0 -6px; }
  .menu-knap-streg::after { translate: 0 6px; }
  .menu-open .menu-knap-streg { background: transparent; }
  .menu-open .menu-knap-streg::before { translate: 0 0; rotate: 45deg; }
  .menu-open .menu-knap-streg::after { translate: 0 0; rotate: -45deg; }

  .menu {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: .4rem;
    padding: var(--header-h) var(--gutter) 3rem;
    background: var(--troeje);
    opacity: 0; visibility: hidden; transition: opacity .4s var(--ease-out), visibility 0s .4s;
  }
  .menu-open .menu { opacity: 1; visibility: visible; transition: opacity .4s var(--ease-out); }
  .menu a { font-family: var(--f-display); font-weight: 900; font-stretch: 115%; font-size: clamp(2rem, 9vw, 3rem); line-height: 1.1; }
  .menu .menu-medlem { font-size: 1.25rem; margin-top: 1.25rem; padding: .8rem 1.5rem; }
  .menu-open .logo { position: relative; z-index: 2; }
}

/* ---------- Hero: banen ---------- */
.hero {
  position: relative; overflow: clip;
  min-height: calc(100svh - var(--header-h));
  display: grid; align-items: end;
  padding: clamp(3rem, 8vh, 6rem) var(--gutter) clamp(3rem, 9vh, 6.5rem);
  background: var(--troeje); color: var(--kridt);
}
.bane { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bane .kridt * { fill: none; stroke: var(--kridt); stroke-width: 3; stroke-opacity: .34; stroke-linecap: round; }
.bane-lodret .kridt * { stroke-width: 2.2; }
.bane .bold { fill: var(--rosa); }
.bane-lodret { display: none; }
@media (max-width: 700px) {
  .bane-vandret { display: none; }
  .bane-lodret { display: block; }
}

.hero-tekst { position: relative; max-width: 68rem; }
.hero h1 {
  font-size: clamp(3rem, .375rem + 12.8vw, 12rem);
  font-stretch: 128%; line-height: .86; letter-spacing: -.025em;
}
.hero h1 .nl { display: block; }
.hero-intro { max-width: 36ch; margin: clamp(1.5rem, 3vh, 2.25rem) 0 2rem; font-size: clamp(1.125rem, 1rem + .4vw, 1.3rem); }

/* Signatur: kridtet tegnes, og bolden lægges på midterpletten */
.js .bane .kridt * { stroke-dasharray: 1; stroke-dashoffset: 1; animation: kridt 1.8s var(--ease-in-out) forwards; }
.js .bane .kridt *:nth-child(2) { animation-delay: .25s; }
.js .bane .kridt *:nth-child(3) { animation-delay: .45s; }
.js .bane .kridt *:nth-child(n+4) { animation-delay: .7s; animation-duration: 1.2s; }
.js .bane .kridt *:nth-child(n+7) { animation-delay: .9s; }
.js .bane .kridt *:nth-child(n+10) { animation-delay: 1.15s; animation-duration: .8s; }
@keyframes kridt { to { stroke-dashoffset: 0; } }
.js .bane .bold { transform-box: fill-box; transform-origin: center; animation: bold-ned .9s var(--ease-out) 1.5s both; }
@keyframes bold-ned { from { opacity: 0; scale: 3.2; } to { opacity: 1; scale: 1; } }
.js .hero h1 { animation: op 1.2s var(--ease-out) .15s both; }
.js .hero-intro, .js .hero .knapper { animation: op 1.1s var(--ease-out) .55s both; }
@keyframes op { from { opacity: 0; translate: 0 2rem; } }

/* ---------- Find dit hold ---------- */
.hold {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: start;
  padding: clamp(4rem, 9vw, 8rem) var(--gutter) clamp(4rem, 8vw, 7rem);
  background: var(--rosa);
}
.hold h2 { max-width: 10ch; }
.hold-forklaring { max-width: 38ch; margin-top: 1.25rem; font-size: 1.15rem; }
.aar { margin-top: 2rem; }
.aar label { display: block; font-weight: 700; margin-bottom: .45rem; }
.aar-felt { display: flex; gap: .5rem; max-width: 26rem; }
.aar input {
  flex: 1; min-width: 0; height: 3.5rem; padding: 0 1.25rem;
  font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; font-variant-numeric: tabular-nums;
  background: var(--kridt); border: 2px solid var(--natkamp); border-radius: 999px;
}
.aar input::placeholder { color: color-mix(in srgb, var(--natkamp) 50%, transparent); font-weight: 600; }
.aar input:focus-visible { outline: 3px solid var(--troeje); outline-offset: 2px; }
.aar .knap { height: 3.5rem; }

.svar { margin-top: 2.25rem; min-height: 12rem; }
.svar-alder { font-weight: 700; font-size: 1.1rem; }
.svar-hold { display: grid; gap: 1rem; margin-top: 1rem; }
.svar-kort {
  background: var(--natkamp); color: var(--kridt); border-radius: 1.5rem 1.5rem 1.5rem .35rem;
  padding: 1.4rem 1.6rem 1.5rem; animation: op .7s var(--ease-out) both;
}
.svar-kort h3 { font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem); font-stretch: 120%; color: var(--rosa); }
.svar-kort .tid { display: block; margin-top: .6rem; font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.svar-kort p { margin-top: .4rem; color: color-mix(in srgb, var(--kridt) 86%, transparent); }

/* Taktiktavlen */
.tavle {
  position: relative; aspect-ratio: 5 / 7; width: 100%; max-width: 34rem; justify-self: end;
  background: var(--troeje); border-radius: 1.75rem; padding: 1.1rem;
  box-shadow: 0 0 0 .55rem var(--natkamp);
  rotate: 1.5deg;
  position: sticky; top: calc(var(--header-h) + 2rem);
}
.tavle-bane { position: absolute; inset: 1.1rem; width: calc(100% - 2.2rem); height: calc(100% - 2.2rem); }
.tavle-bane * { fill: none; stroke: var(--kridt); stroke-width: 2; stroke-opacity: .5; vector-effect: non-scaling-stroke; }
.magneter { position: absolute; inset: 1.1rem; }
.magneter li { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; }
.magnet {
  display: grid; place-items: center;
  min-width: 4.6rem; height: 4.6rem; padding: 0 .9rem; border-radius: 999px;
  background: var(--kridt); color: var(--troeje);
  font-family: var(--f-display); font-weight: 900; font-stretch: 90%; font-size: .95rem; line-height: 1; white-space: nowrap;
  box-shadow: 0 .3rem 0 var(--troeje-dyb);
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out), scale .5s var(--ease-out), box-shadow .35s var(--ease-out);
}
.magnet:hover { scale: 1.08; }
.magnet[aria-pressed="true"] { background: var(--rosa); color: var(--natkamp); scale: 1.18; box-shadow: 0 .3rem 0 var(--natkamp), 0 0 0 .3rem var(--kridt); }
.magnet:focus-visible { outline: 3px solid var(--rosa); outline-offset: 4px; }

@media (max-width: 860px) {
  .hold { grid-template-columns: 1fr; }
  .tavle { justify-self: center; max-width: 26rem; rotate: 0deg; position: relative; top: 0; }
  .magnet { min-width: 3.9rem; height: 3.9rem; font-size: .8rem; font-stretch: 75%; padding: 0 .6rem; }
}

/* ---------- Alle hold ---------- */
.holdkort { padding: clamp(4rem, 9vw, 8rem) var(--gutter) clamp(3rem, 6vw, 5rem); }
.holdkort h2 { max-width: 12ch; color: var(--troeje); }
.holdliste { margin-top: clamp(2rem, 4vw, 3.5rem); }
.holdrad {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: .5rem 3rem; align-items: baseline;
  padding: 1.4rem 0; border-top: 2px solid var(--natkamp);
  transition: background-color .5s var(--ease-out);
}
.holdrad:last-child { border-bottom: 2px solid var(--natkamp); }
.holdrad dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; }
.holdnavn { font-family: var(--f-display); font-weight: 900; font-size: clamp(2rem, 1.4rem + 3vw, 4rem); font-stretch: 120%; line-height: 1; color: var(--troeje); }
.holdalder { font-weight: 700; }
.holdrad dd { max-width: 44ch; }
.holdrad dd strong { display: block; margin-top: .3rem; font-variant-numeric: tabular-nums; }
.holdrad.er-valgt { background: linear-gradient(90deg, var(--rosa-lys), var(--rosa-lys)) no-repeat; }
.holdrad:nth-child(even) .holdnavn { font-stretch: 70%; }
@media (max-width: 700px) {
  .holdrad { grid-template-columns: 1fr; }
}

/* ---------- Ugen ---------- */
.ugen { background: var(--troeje); color: var(--kridt); padding-top: clamp(4rem, 8vw, 7rem); overflow: clip; }
.ugen-hoved { padding-inline: var(--gutter); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 3rem; }
.ugen-hoved h2 { max-width: 9ch; }
.ugen-hoved p { max-width: 34ch; font-size: 1.15rem; }
.ugen-vindue {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
.ugen-vindue::-webkit-scrollbar { display: none; }
.ugen-spor { display: flex; width: max-content; padding-inline: var(--gutter); }
.dag {
  scroll-snap-align: start;
  width: min(80vw, 24rem); min-height: 24rem; flex: none;
  padding: 1.5rem 1.75rem 2rem;
  border-left: 3px solid color-mix(in srgb, var(--kridt) 55%, transparent);
}
.dag:last-child { border-right: 3px solid color-mix(in srgb, var(--kridt) 55%, transparent); }
.dag h3 { font-size: clamp(2.6rem, 2rem + 2.6vw, 4.5rem); font-stretch: 62%; line-height: .9; }
.dag ul { margin-top: 1.75rem; display: grid; gap: .9rem; }
.dag li { font-size: 1.2rem; font-weight: 600; }
.dag time { display: inline-block; min-width: 3.6rem; font-family: var(--f-display); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--rosa); }
.dag-note { margin-top: 1.5rem; max-width: 22ch; color: color-mix(in srgb, var(--kridt) 82%, transparent); }
.dag-rosa { background: var(--rosa); color: var(--natkamp); border-radius: 1.5rem 1.5rem 0 0; border-left-color: transparent; }
.dag-rosa + .dag { border-left-color: transparent; }
.dag-rosa time { color: var(--troeje); }
.uge-pin .ugen-vindue { overflow: visible; }
.uge-pin .dag { width: min(30vw, 26rem); min-height: 28rem; }

/* ---------- Første træning ---------- */
.proev {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 6rem);
  padding: clamp(5rem, 10vw, 9rem) var(--gutter) clamp(3rem, 6vw, 5rem);
}
.proev h2 { font-size: clamp(2.6rem, 1.4rem + 5.6vw, 6.5rem); color: var(--troeje); max-width: 9ch; }
.proev-lead { font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); max-width: 32ch; font-weight: 500; }
.taske {
  margin-top: 2.25rem; padding: 1.75rem 1.75rem 1.9rem;
  background: var(--rosa-lys); border-radius: .4rem 1.75rem 1.75rem 1.75rem;
}
.taske h3 { font-size: 1.5rem; font-stretch: 110%; }
.taske ul { margin-top: 1rem; display: grid; gap: .55rem; }
.taske li { padding-left: 1.6rem; position: relative; }
.taske li::before { content: ''; position: absolute; left: 0; top: .45em; width: .75rem; height: .75rem; border-radius: 50%; border: 2px solid var(--troeje); }
.taske > p { margin-top: 1rem; font-weight: 700; }
@media (max-width: 800px) { .proev { grid-template-columns: 1fr; } }

/* ---------- Det sker ---------- */
.sker { padding: clamp(2rem, 4vw, 3rem) var(--gutter) clamp(5rem, 9vw, 8rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem clamp(2rem, 6vw, 6rem); }
.sker h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); }
.sker-liste { display: grid; gap: 0; }
.sker-liste li { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr; gap: .25rem 2rem; padding: 1.1rem 0; border-bottom: 2px dotted color-mix(in srgb, var(--natkamp) 35%, transparent); }
.sker-hvornaar { font-family: var(--f-display); font-weight: 800; color: var(--troeje); }
@media (max-width: 800px) {
  .sker { grid-template-columns: 1fr; }
  .sker-liste li { grid-template-columns: 1fr; }
}

/* ---------- Bliv medlem ---------- */
.medlem {
  position: relative; overflow: clip;
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 3rem clamp(2rem, 6vw, 6rem); align-items: end;
  padding: clamp(5rem, 10vw, 9rem) var(--gutter);
  background: var(--natkamp); color: var(--kridt);
}
.medlem::before {
  /* et hjørne af banen, kridtet går ud over kanten */
  content: ''; position: absolute; right: -9rem; top: -9rem; width: 22rem; height: 22rem;
  border: 3px solid color-mix(in srgb, var(--kridt) 30%, transparent); border-radius: 50%; pointer-events: none;
}
.medlem h2 { font-size: clamp(2.6rem, 1.3rem + 6vw, 7rem); color: var(--rosa); max-width: 10ch; }
.medlem-indhold > p { max-width: 42ch; margin: 1.5rem 0 2rem; font-size: 1.2rem; }
.kontakt { position: relative; display: grid; gap: .9rem; font-size: 1.15rem; }
.medlem .kontakt-titel { font-size: 1.5rem; font-stretch: 110%; }
.kontakt p { display: grid; }
.kontakt-label { font-size: .95rem; color: color-mix(in srgb, var(--kridt) 72%, transparent); }
.kontakt a { font-weight: 700; text-underline-offset: .2em; text-decoration-color: var(--rosa); text-decoration-thickness: 2px; }
.kontakt a:hover { color: var(--rosa); }
.medlem :focus-visible { outline-color: var(--rosa); }
@media (max-width: 800px) { .medlem { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer {
  display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; justify-content: space-between;
  padding: 2rem var(--gutter) 4.5rem;
  background: var(--troeje); color: var(--kridt); font-size: 1rem;
}
.site-footer a { text-underline-offset: .2em; }
.footer-lille { color: color-mix(in srgb, var(--kridt) 80%, transparent); }

/* ---------- Eksempel-mærke ---------- */
.eksempel-maerke {
  position: fixed; left: .75rem; bottom: .75rem; z-index: 40;
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px;
  background: var(--kridt); color: var(--natkamp);
  font-size: .8125rem; font-weight: 700; line-height: 1.1; text-decoration: none;
  box-shadow: 0 0 0 2px var(--natkamp);
  transition: background-color .3s var(--ease-out);
}
.eksempel-maerke:hover { background: var(--rosa); }
.eksempel-maerke:focus-visible { outline: 3px solid var(--troeje); outline-offset: 3px; }
.menu-open .eksempel-maerke { opacity: 0; pointer-events: none; }

/* ---------- 404 ---------- */
.fejl { min-height: calc(100svh - var(--header-h)); }
.fejl .hero-tekst p { max-width: 34ch; margin: 1.5rem 0 2rem; font-size: 1.25rem; }
.fejl h1 { font-size: clamp(3rem, 1rem + 9vw, 9rem); }