/* ============================================================= */
/* NM TENNIS 2026 – designsystem (oppdatert)                     */
/* ------------------------------------------------------------- */
/* Farger og kontrast                                            */
/* ------------------------------------------------------------- */
:root{
  /* Bakgrunn og tekstfarver – bedre lesbarhet */
  --grunn:#faf8f5;          /* lys, varm papir‑bakgrunn (etterlyset fra #f4f1e8)   */
  --ink:#0d2b21;            /* mørk grønn tekst – original */
  --mork:#0b2e24;           /* mørk grønn for hero / footer (etterlyset fra #0c352a) */
  --morkere:#08241c;        /* litt lysere footer‑bakgrunn                        */
  --gronn:#1e6f4c;          /* aksent‑grønn – original                         */
  --ball:#d8e02a;           /* tennisball‑gul (CTA)                           */
  --leire:#b1502e;          /* teglstein‑rød, hentet fra det faktiske banedekket på Gjøvik Tennishall */
  --kort:#fffdf6;           /* kort‑bakgrunn                                    */
  --linje:rgba(13,43,33,.2);
  --radius:4px;
  --font-display:'Anton',sans-serif;
  --font-body:'Public Sans',system-ui,sans-serif;
}

/* ------------------------------------------------------------- */
/* Generelle reset og grunnleggende stylings                       */
/* ------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--grunn);
  color:var(--ink);
  line-height:1.65;
}
img{max-width:100%;display:block}
a{color:var(--gronn)}
:focus-visible{outline:3px solid var(--ball);outline-offset:2px}
::selection{background:var(--ball)}
.wrap{width:min(1100px,92%);margin-inline:auto}
section[id]{scroll-margin-top:5rem}

/* ------------------------------------------------------------- */
/* Header / navigasjon                                            */
/* ------------------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--mork);
  color:var(--grunn);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.7rem 5%;
  transition:box-shadow .3s;
}
.site-header.scrolled{box-shadow:0 4px 0 rgba(0,0,0,.3)}
.brand{
  font-family:var(--font-display);
  font-size:1.2rem;
  letter-spacing:.05em;
  color:var(--grunn);
  text-decoration:none;
}
.brand span{color:var(--ball)}
.main-nav{
  display:flex;
  gap:1.4rem;
}
.main-nav a{
  color:var(--grunn);
  text-decoration:none;
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:.4rem 0;
  border-bottom:2px solid transparent;
}
.main-nav a:hover,.main-nav a.active{border-color:var(--ball);color:#fff}
.nav-cta{
  background:var(--ball);
  color:var(--ink)!important;
  padding:.45rem .95rem;
  border-radius:var(--radius);
  border-bottom:none!important;
}
.menu-btn{
  display:none;
  align-items:center;
  gap:.6rem;
  background:none;
  border:2px solid var(--grunn);
  color:var(--grunn);
  padding:.5rem .9rem;
  border-radius:var(--radius);
  font-weight:700;
  text-transform:uppercase;
  font-size:.8rem;
  letter-spacing:.08em;
  cursor:pointer;
}
.menu-ikon{
  display:inline-flex;
  flex-direction:column;
  gap:4px;
}
.menu-ikon i{width:18px;height:2px;background:currentColor;display:block}

/* ------------------------------------------------------------- */
/* Hero                                                          */
/* ------------------------------------------------------------- */
.hero{
  background:var(--mork);
  color:var(--grunn);
  position:relative;
  overflow:hidden;
  padding-top:5rem;
}
.hero::before,.hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.hero::before{
  width:56vmin;height:56vmin;
  right:-12vmin;top:-18vmin;
  border:2px solid rgba(216,224,42,.2);
}
.hero::after{
  width:30vmin;height:30vmin;
  right:8vmin;top:24vmin;
  border:2px solid rgba(177,80,46,.32); /* --leire */
}
.hero-inner{
  position:relative;
  z-index:1;
  padding-bottom:4.5rem;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.78rem;
  font-weight:700;
  color:var(--ball);
  margin-bottom:1.2rem;
}
.hero-tittel{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(2.8rem,9vw,6.4rem);
  line-height:.98;
  letter-spacing:.01em;
}
.hero-tittel em{display:block;font-style:normal;color:var(--ball)}
.hero-meta{
  list-style:none;
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  margin:1.7rem 0 2.1rem;
}
.hero-aksjoner{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

/* Tennisball‑animation – beholdes, men med lettere skygge */
.ball{
  position:absolute;
  right:9%;
  bottom:12rem;
  width:64px;height:64px;
  background:var(--ball);
  border-radius:50%;
  box-shadow:inset -8px -10px 0 rgba(0,0,0,.14);
  z-index:1;
  animation:hopp 2.6s ease-in-out infinite;
}
.ball::before,.ball::after{
  content:"";
  position:absolute;
  width:150%;height:150%;
  left:-25%;top:-25%;
  border-radius:50%;
  border:3px solid transparent;
}
.ball::before{border-left-color:#f4f1e8;transform:rotate(-25deg)}
.ball::after{border-right-color:#f4f1e8;transform:rotate(155deg)}
@keyframes hopp{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-26px)}
}

/* Marquee‑stripe */
.marquee{
  position:relative;
  background:var(--ball);
  overflow:hidden;
  transform:rotate(-1.2deg) scale(1.05);
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
}
.marquee-spor{
  display:flex;
  white-space:nowrap;
  width:max-content;
  padding:.65rem 0;
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:1rem;
  color:var(--ink);
  animation:rull 24s linear infinite;
}
@keyframes rull{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------- */
/* Knapper og chips                                              */
/* ------------------------------------------------------------- */
.btn{
  display:inline-block;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.88rem;
  padding:.95rem 1.7rem;
  border-radius:var(--radius);
  text-decoration:none;
  border:2px solid var(--ink);
  transition:transform .15s,box-shadow .15s;
}
.btn--ball{
  background:var(--ball);
  color:var(--ink);
  box-shadow:5px 5px 0 rgba(0,0,0,.35);
}
.btn--ball:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(0,0,0,.35)}
.btn--ghost{
  background:transparent;
  color:var(--grunn);
  border-color:var(--grunn);
}
.btn--ghost:hover{background:rgba(255,255,255,.12)}
.chip{
  display:inline-block;
  border:2px solid currentColor;
  padding:.3rem .85rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.chip--tba{
  border-style:dashed;
  color:var(--ball);
}
/* Gul er for lys på lyse kort – terrakotta (--leire) gir ca. 5,1:1 */
.card .chip--tba{color:var(--leire)}

/* ------------------------------------------------------------- */
/* Seksjonsskall                                                */
/* ------------------------------------------------------------- */
.section{padding:4.5rem 0}
.sec-head{
  display:flex;
  align-items:baseline;
  gap:1.1rem;
  border-bottom:2px solid var(--ink);
  padding-bottom:1rem;
  margin-bottom:2.4rem;
}
.sec-num{
  font-family:var(--font-display);
  color:var(--leire);
  font-size:1.5rem;
}
.sec-head h2{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:clamp(1.8rem,4vw,2.6rem);
}

/* mørk tema */
.section--dark{background:var(--mork);color:var(--grunn)}
.section--dark .sec-head{border-color:rgba(244,241,232,.35)}
.section--dark .sec-num{color:var(--ball)}
.section--dark a{color:var(--ball)}

/* tekst og merknader */
.lead{
  font-size:1.18rem;
  max-width:62ch;
  margin-bottom:2rem;
}
.merknad{
  font-size:.85rem;
  opacity:.7;
  margin-top:.6rem;
}

/* ------------------------------------------------------------- */
/* Kort / card                                                   */
/* ------------------------------------------------------------- */
.card{
  background:var(--kort);
  color:var(--ink);
  border:2px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:6px 6px 0 var(--ink);
  padding:1.4rem;
}
.section--dark .card{box-shadow:6px 6px 0 rgba(0,0,0,.45)}
.card h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:1.25rem;
  margin-bottom:.6rem;
}

/* ------------------------------------------------------------- */
/* Grid‑basert layout                                            */
/* ------------------------------------------------------------- */
.om-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:2rem;
  align-items:start;
}
.org-kort .org-navn{font-size:1.3rem;font-weight:700;margin-bottom:.5rem}

/* Påmelding */
.klasse-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1.2rem;
  margin-bottom:2.2rem;
}
.klasse,.dag,.fas{
  transition:transform .18s ease,box-shadow .18s ease;
}
.klasse:hover,.dag:hover,.fas:hover{
  transform:translate(-3px,-3px);
  box-shadow:9px 9px 0 var(--ink);
}
.section--dark .klasse:hover,
.section--dark .fas:hover{box-shadow:9px 9px 0 rgba(0,0,0,.45)}
.paamelding-bunn{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.4rem;
}
.paamelding-info{
  margin-top:1.2rem;
  display:grid;
  gap:.4rem;
  font-size:.95rem;
}

/* Program */
.dag-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
}

/* Lokasjon */
.lok-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:2rem;
  align-items:start;
}
.adresse{
  font-style:normal;
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:1.6rem;
  line-height:1.2;
  margin-bottom:1.4rem;
}
.reise-liste{
  list-style:none;
  display:grid;
  gap:.9rem;
  font-size:.95rem;
}
.reise-liste li{
  padding-left:1.4rem;
  position:relative;
}
.reise-liste li::before{
  content:"▸";
  position:absolute;
  left:0;
  color:var(--gronn);
  font-weight:700;
}
.kart{
  border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
}
.kart iframe{display:block;width:100%;height:360px;border:0}
.kart figcaption{
  font-size:.78rem;
  padding:.5rem .8rem;
  border-top:2px solid var(--ink);
  opacity:.7;
}

/* Fasiliteter */
.fas-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
}
.fas-ikon{
  width:52px;height:52px;
  display:grid;
  place-items:center;
  font-size:1.5rem;
  background:var(--ball);
  border:2px solid var(--ink);
  border-radius:var(--radius);
  margin-bottom:.9rem;
}
.fas p{font-size:.88rem}

/* Overnatting / sponsorer */
.hotel-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
}
.hotel-slot{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:1rem;
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:1.2rem;
  min-height:130px;
}
.sponsor-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.2rem;
}
.sponsor-slot{
  aspect-ratio:3/2;
  border:2px dashed var(--linje);
  border-radius:var(--radius);
  display:grid;
  place-items:center;
  text-transform:uppercase;
  font-size:.78rem;
  letter-spacing:.1em;
  opacity:.6;
}

/* ------------------------------------------------------------- */
/* Kontakt / footer                                              */
/* ------------------------------------------------------------- */
.kontakt-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:2rem;
  align-items:start;
}
.kontakt p{margin-bottom:.4rem}
.site-footer{
  background:var(--morkere);
  color:rgba(244,241,232,.85);
  padding:2.6rem 0;
  font-size:.9rem;
}
.footer-grid{
  display:flex;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}
.personvern{
  max-width:58ch;
  font-size:.78rem;
  color:rgba(244,241,232,.55);
}

/* Til-topp‑lenke */
.til-topp{
  color:var(--ball);
  text-decoration:none;
  font-weight:700;
}

/* ------------------------------------------------------------- */
/* Avsløring ved scroll (reveal)                                 */
/* ------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease,transform .6s ease;
}
.reveal.in{opacity:1;transform:none}

/* ------------------------------------------------------------- */
/* Responsivt                                                    */
/* ------------------------------------------------------------- */
@media (max-width:980px){
  .om-grid,
  .lok-grid,
  .kontakt-grid{
    grid-template-columns:1fr;
  }
  .klasse-grid,
  .fas-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .sponsor-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:880px){
  .menu-btn{display:inline-flex}
  .main-nav{
    position:fixed;
    inset:0;
    z-index:40;
    background:var(--mork);
    flex-direction:column;
    justify-content:center;
    padding:2rem 8%;
    gap:1.6rem;
    transform:translateY(-102%);
    transition:transform .4s cubic-bezier(.2,.8,.2,1);
    visibility:hidden;
  }
  .main-nav.open{
    transform:none;
    visibility:visible;
  }
  .main-nav a{
    font-family:var(--font-display);
    font-size:1.5rem;
    border-bottom:none;
  }
  .ball{display:none}
}
@media (max-width:560px){
  .klasse-grid,
  .dag-grid,
  .fas-grid,
  .hotel-grid{
    grid-template-columns:1fr;
  }
  .section{padding:3.2rem 0}
}

/* ------------------------------------------------------------- */
/* Reduseret bevegelse (prefers-reduced-motion)                  */
/* ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
  .ball,
  .marquee-spor{
    animation:none;
  }
  .klasse:hover,
  .dag:hover,
  .fas:hover,
  .btn--ball:hover{
    transform:none;
    box-shadow:6px 6px 0 var(--ink);
  }
}