/* Extreme Health — träningsstudio i Örebro.
   Palett: järn, tall, mossa, krita, sand, signalgult. Typsnitt: Archivo för
   rubriker, Source Serif 4 för brödtext, IBM Plex Mono för siffror och tider.
   Allt serverrenderas; JavaScript lägger bara till rörelse och de två
   inloggade vyerna. */

:root {
  --jarn: #14171a;
  --jarn-mjuk: #23282c;
  --tall: #1c4a3a;
  --mossa: #2f6b4f;
  --krita: #f6f4ef;
  --krita-dim: #ebe7de;
  --sand: #cbbba4;
  --signal: #e0b33c;
  --text: #191d1b;
  --dim: #5a625e;
  --lin: #ddd8cd;
  --bg: #fdfcfa;
  --radie: 3px;
  --mat: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --rubrik: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --brod: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font: 18px/1.65 var(--brod);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--tall); text-underline-offset: 3px; }
a:hover { color: var(--mossa); }

:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }

/* ---------------------------------------------------------------- topp */

.topp {
  position: sticky; top: 0; z-index: 40;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px;
  padding: 14px 28px;
  background: rgba(253, 252, 250, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--lin);
}
.logo {
  font-family: var(--rubrik); font-weight: 800; font-size: 19px;
  letter-spacing: -0.03em; color: var(--jarn); text-decoration: none;
  display: flex; align-items: center; gap: 9px;
}
.logo::before {
  content: ""; width: 13px; height: 13px; border-radius: 2px;
  background: var(--signal); box-shadow: 5px 0 0 var(--tall);
  margin-right: 5px;
}
.topp nav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-right: auto; }
.topp nav a {
  font-family: var(--rubrik); font-size: 14.5px; font-weight: 500;
  color: var(--dim); text-decoration: none; padding: 5px 0;
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.topp nav a:hover { color: var(--text); }
.topp nav a[aria-current] { color: var(--jarn); border-bottom-color: var(--signal); }

.knapp {
  display: inline-block; font-family: var(--rubrik); font-weight: 600;
  font-size: 15px; letter-spacing: .01em; text-decoration: none;
  padding: 10px 18px; border-radius: var(--radie); border: 1px solid transparent;
  background: var(--tall); color: var(--krita); cursor: pointer;
  transition: transform .12s ease, background .15s ease;
}
.knapp:hover { background: var(--mossa); color: var(--krita); transform: translateY(-1px); }
.knapp.tunn { background: transparent; color: var(--tall); border-color: var(--lin); }
.knapp.tunn:hover { background: var(--krita-dim); color: var(--tall); }
/* På den mörka hjälten måste den tunna knappen vara ljus för att synas alls. */
.hero .knapp.tunn { color: var(--krita); border-color: rgba(246, 244, 239, .45); }
.hero .knapp.tunn:hover { background: rgba(246, 244, 239, .12); color: var(--krita); }
.knapp.ljus { background: var(--signal); color: var(--jarn); }
.knapp.ljus:hover { background: #ecc356; color: var(--jarn); }

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative; background: var(--jarn); color: var(--krita);
  overflow: hidden; isolation: isolate;
}
.hero img.bakgrund {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .58; z-index: -2;
  transform: scale(1.06); will-change: transform;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(20,23,26,.92) 12%, rgba(20,23,26,.45) 62%, rgba(28,74,58,.55));
}
.hero .inre { max-width: 1120px; margin: 0 auto; padding: 96px 28px 88px; }
.hero h1 {
  font-family: var(--rubrik); font-weight: 800; font-size: clamp(36px, 6.2vw, 68px);
  line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 18px; max-width: 16ch;
  text-wrap: balance;
}
.hero p.ingress { font-size: clamp(18px, 2.1vw, 22px); color: #ded9cf; max-width: 46ch; margin: 0 0 30px; }
.hero .knappar { display: flex; flex-wrap: wrap; gap: 12px; }
.ogonbryn {
  font-family: var(--mat); font-size: 12.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--signal); margin: 0 0 16px;
}

/* ---------------------------------------------------------------- layout */

main { display: block; }
.brod { max-width: 72ch; margin: 0 auto; padding: 56px 28px; }
.bred { max-width: 1120px; margin: 0 auto; padding: 56px 28px; }
.band { background: var(--krita); border-top: 1px solid var(--lin); border-bottom: 1px solid var(--lin); }
.band.morkt { background: var(--jarn); color: var(--krita-dim); border-color: var(--jarn-mjuk); }
.band.morkt h2, .band.morkt h3 { color: var(--krita); }
.band.morkt a { color: var(--signal); }

h1, h2, h3, h4 { font-family: var(--rubrik); letter-spacing: -0.025em; text-wrap: balance; }
main > .brod > h1, main > .bred > h1 { font-size: clamp(32px, 5vw, 46px); line-height: 1.06; margin: 0 0 14px; }
h2 { font-size: clamp(24px, 3vw, 31px); font-weight: 700; margin: 46px 0 12px; line-height: 1.15; }
h3 { font-size: 20px; font-weight: 600; margin: 30px 0 8px; }
p { margin: 0 0 16px; }
.ingress { font-size: 21px; line-height: 1.5; color: var(--dim); margin: 0 0 22px; }
.datum { font-family: var(--mat); font-size: 13px; color: var(--dim); margin: 0 0 20px; }
ul, ol { padding-left: 22px; }
li { margin: 6px 0; }
blockquote {
  margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--signal);
  font-size: 20px; line-height: 1.5; color: var(--jarn-mjuk); font-style: italic;
}
blockquote cite { display: block; margin-top: 8px; font-size: 15px; font-style: normal; color: var(--dim); font-family: var(--rubrik); }

figure { margin: 30px 0; }
figure img { border-radius: var(--radie); }
figcaption { font-family: var(--mat); font-size: 12.5px; color: var(--dim); margin-top: 9px; }

/* ---------------------------------------------------------------- rutnät */

.rutnat { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.kort {
  background: var(--bg); border: 1px solid var(--lin); border-radius: var(--radie);
  padding: 22px; display: flex; flex-direction: column; gap: 8px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.kort:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(20,23,26,.09); border-color: var(--sand); }
.kort h3 { margin: 0; font-size: 19px; }
.kort p { margin: 0; color: var(--dim); font-size: 16.5px; }
.kort .pris { font-family: var(--mat); font-size: 15px; color: var(--tall); margin-top: auto; padding-top: 10px; }
.kort img { border-radius: var(--radie); margin: -22px -22px 6px; width: calc(100% + 44px); max-width: none; aspect-ratio: 3/2; object-fit: cover; }
.kort.portratt img { aspect-ratio: 4/5; }

.siffror { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.siffra strong { display: block; font-family: var(--rubrik); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -0.04em; color: var(--signal); }
.siffra span { font-size: 15.5px; color: inherit; opacity: .8; }

/* ---------------------------------------------------------------- tabell */

.tabellsvep { overflow-x: auto; margin: 24px 0; }
table { border-collapse: collapse; width: 100%; font-size: 16px; min-width: 460px; }
caption { text-align: left; font-family: var(--mat); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding-bottom: 10px; }
th, td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--lin); vertical-align: top; }
th { font-family: var(--rubrik); font-weight: 600; font-size: 14.5px; }
td.tal, th.tal, .mono { font-family: var(--mat); font-variant-numeric: tabular-nums; }

details { border-top: 1px solid var(--lin); padding: 14px 0; }
details summary { cursor: pointer; font-family: var(--rubrik); font-weight: 600; font-size: 17px; }
details[open] summary { color: var(--tall); }
details p { margin: 10px 0 0; color: var(--dim); }

.brodsmulor { font-family: var(--mat); font-size: 12.5px; color: var(--dim); padding: 14px 28px 0; max-width: 1120px; margin: 0 auto; }
.brodsmulor a { color: var(--dim); }
.brodsmulor span { opacity: .5; padding: 0 6px; }

.vidare { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--lin); }
.vidare h2 { font-size: 17px; margin: 0 0 10px; }
.vidare ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* ---------------------------------------------------------------- appar */

.app { min-height: 46vh; }
.laddar { font-family: var(--mat); font-size: 14px; color: var(--dim); padding: 40px 0; }
.falt { display: block; margin: 0 0 16px; }
.falt span { display: block; font-family: var(--rubrik); font-size: 14.5px; font-weight: 600; margin-bottom: 5px; }
.falt input, .falt select, .falt textarea {
  width: 100%; padding: 11px 13px; font: 16px/1.4 var(--brod);
  border: 1px solid var(--lin); border-radius: var(--radie); background: var(--bg); color: var(--text);
}
.falt input:focus, .falt select:focus { border-color: var(--mossa); }
.tider { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); margin: 6px 0 22px; }
.tid {
  font-family: var(--mat); font-size: 14px; padding: 11px 6px; text-align: center;
  border: 1px solid var(--lin); border-radius: var(--radie); background: var(--bg);
  cursor: pointer; transition: border-color .12s, background .12s;
}
.tid:hover:not(:disabled) { border-color: var(--mossa); background: var(--krita); }
.tid:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
/* Efter hover: ett valt pass ska se valt ut även när muspekaren står kvar. */
.tid[aria-pressed="true"], .tid[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--tall); color: var(--krita); border-color: var(--tall);
}
.notis { padding: 14px 16px; border-radius: var(--radie); background: var(--krita); border: 1px solid var(--lin); margin: 18px 0; }
.notis.bra { border-color: var(--mossa); background: #eef5f0; }
.notis.varn { border-color: var(--signal); background: #fdf6e4; }
.provmarke {
  font-family: var(--mat); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--jarn); background: var(--signal); padding: 3px 8px; border-radius: 2px; display: inline-block;
}

/* ---------------------------------------------------------------- film */

.film .bred { padding-top: 44px; padding-bottom: 48px; }
.film h2 { margin-top: 0; }
.filmingress { color: var(--dim); max-width: 62ch; margin: 0 0 22px; }
.filmruta {
  width: 100%; max-width: 940px; aspect-ratio: 16 / 9;
  background: var(--jarn); border: 1px solid var(--lin); border-radius: var(--radie);
}
.filmruta::cue { font-family: var(--brod); font-size: 88%; background: rgba(20, 23, 26, .82); }
.filmfot { font-size: 12.5px; color: var(--dim); margin: 11px 0 0; }

/* ---------------------------------------------------------------- klibbrad */

/* Prisraden sitter kvar under toppmenyn medan man rullar. Menyn är också
   klibbig och olika hög på olika bredder, så JavaScript mäter den och
   skriver höjden i --topp-hojd. Värdet nedan är reservvärdet. Under 760px
   slutar raden vara klibbig: två klibbiga rader äter halva telefonskärmen. */
.klibbrad {
  position: sticky; top: var(--topp-hojd, 62px); z-index: 30;
  background: rgba(253, 252, 250, .95);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--lin);
  transition: box-shadow .2s ease, background .2s ease;
}
.klibbrad .inre {
  max-width: 1120px; margin: 0 auto; padding: 15px 28px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  transition: padding .2s ease;
}
.klibbtext {
  margin: 0 auto 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px;
  font-family: var(--rubrik); font-weight: 600; font-size: 17px;
}
.klibbtext .mono { font-size: 14px; font-weight: 400; color: var(--dim); }
.klibbrad.fast { box-shadow: 0 6px 20px rgba(20, 23, 26, .09); }
.klibbrad.fast .inre { padding-top: 8px; padding-bottom: 8px; }
.klibbrad.fast .klibbtext { font-size: 15.5px; }
@media (max-width: 760px) { .klibbrad { position: static; } }

/* ---------------------------------------------------------------- sidfot */

footer {
  background: var(--jarn); color: #a9b2ad; font-size: 15px;
  padding: 52px 28px 34px; margin-top: 0;
}
footer .inre { max-width: 1120px; margin: 0 auto; display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
footer h4 { font-size: 14px; color: var(--krita); margin: 0 0 10px; letter-spacing: .02em; }
footer a { color: #cfd6d1; text-decoration: none; }
footer a:hover { color: var(--signal); text-decoration: underline; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin: 5px 0; }
.testmarkning {
  max-width: 1120px; margin: 34px auto 0; padding-top: 20px;
  border-top: 1px solid var(--jarn-mjuk); font-size: 13.5px; color: #8b948f; line-height: 1.55;
}

/* ---------------------------------------------------------------- rörelse */

/* Innehåll får ALDRIG stå och vänta på JavaScript för att bli synligt. Utan
   klassen "js" på <html> — som skriptet sätter direkt — är allt synligt från
   början. Först när vi vet att skriptet lever döljer vi något. */
.js .avslojas { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .avslojas.syns { opacity: 1; transform: none; }

/* Trappan: korten kommer fram ett i taget i stället för allihop samtidigt.
   Wrappern tonar inte själv — den ligger stilla — så att fördröjningen syns
   på korten. --i är kortets nummer och sätts av build.py. */
.js .trappa.avslojas { opacity: 1; transform: none; transition: none; }
.js .trappa .kort {
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js .trappa.syns .kort { opacity: 1; transform: none; }
.js .trappa.syns .kort:hover { transform: translateY(-3px); }

/* AVSIKTLIG BRIST, lämnad kvar med flit: den här rutan är dold utan
   .js-villkor och visas först när skriptet lägger på .pa. Det finns inget
   noscript-alternativ, så en läsare utan JavaScript ser den aldrig. Allt
   annat på sajten följer mönstret ovan och är synligt från början. */
.direktruta { display: none; }
.direktruta.pa { display: block; }
.direkttal { font-size: 19px; margin: 0; }
.direkttal strong { font-family: var(--mat); font-size: 22px; color: var(--tall); }

@keyframes glid-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero h1, .hero p.ingress, .hero .knappar, .hero .ogonbryn { animation: glid-in .7s cubic-bezier(.2,.7,.3,1) backwards; }
.hero .ogonbryn { animation-delay: .04s; }
.hero h1 { animation-delay: .10s; }
.hero p.ingress { animation-delay: .18s; }
.hero .knappar { animation-delay: .26s; }

@keyframes puls { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.direkt { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mat); font-size: 13px; }
.direkt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); animation: puls 1.9s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .avslojas { opacity: 1; transform: none; }
  .js .trappa .kort { opacity: 1; transform: none; transition-delay: 0s; }
}

@media (max-width: 640px) {
  body { font-size: 17px; }
  .hero .inre { padding: 60px 22px 54px; }
  .brod, .bred { padding: 40px 22px; }
  .topp { padding: 12px 20px; }
  .kort img { margin: -22px -22px 6px; width: calc(100% + 44px); }
}

.ovning-dold { opacity: 0; transform: translateY(20px); }