/* ── Publika doruma.se: laguppställningsvärlden ──────────────────────────
   Mörk sarg, namnskyltar i tung condensed versal — fyllda när rollen bärs,
   ihåliga när skylten hänger — och EN signalorange som bara får betyda
   handling. Sarglinjerna löper obrutna genom sektionerna: sidan är en
   spelplan, inte en trave kort. Medvetet en enda värld: ingen ljus/mörk
   växling, grunden målas uttryckligen. */

@font-face {
  font-family: 'Anton';
  src: url('../fonter/anton.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --sarg: #0F1621;
  --sarg-djup: #0A0F17;
  --linje: #25303F;
  --ben: #F4F1E9;
  --dov: #8B97A8;
  --signal: #FF5A1F;
  --skylt: 'Anton', 'Arial Narrow', sans-serif;
  --brod: ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --spalt: 64rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body.pub {
  margin: 0;
  background: var(--sarg);
  color: var(--ben);
  font: 400 17px/1.6 var(--brod);
  -webkit-font-smoothing: antialiased;
  /* Tryckkänslan är vår egen — webbläsarens gråa blink ovanpå förstör den. */
  -webkit-tap-highlight-color: transparent;
}

::selection { background: var(--signal); color: var(--sarg-djup); }
.pub :focus-visible { outline: 2px solid var(--ben); outline-offset: 3px; }

/* ── Skylten: världens byggsten ─────────────────────────────────────── */
.skylt {
  display: inline-block;
  font-family: var(--skylt);
  font-size: 1.05rem;
  letter-spacing: .09em;
  padding: .3em .65em .26em;
  border-radius: 4px;
  border: 2px solid var(--ben);
  line-height: 1.1;
  white-space: nowrap;
}
.skylt-buren { background: var(--ben); color: var(--sarg); }
.skylt-kontur { background: transparent; color: var(--ben);
  border-color: rgba(244, 241, 233, .45); }

/* ── Sidhuvudet ─────────────────────────────────────────────────────── */
/* Sidhuvudet är ett material som svävar över innehållet — inte en fast
   list som äter en remsa. Skuggan tänds först när något faktiskt skrollat
   in under det (ingen hård 1px-linje). */
.pub-topphallare {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--sarg) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  transition: box-shadow 250ms ease;
}
.pub-topphallare.ar-skrollad {
  box-shadow: 0 1px 0 rgba(244, 241, 233, .07),
    0 12px 30px -18px rgba(0, 0, 0, .8);
}
@supports not (backdrop-filter: blur(1px)) {
  .pub-topphallare { background: var(--sarg); }
}
@media (prefers-reduced-transparency: reduce) {
  .pub-topphallare { background: var(--sarg);
    -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .pub-topphallare { background: var(--sarg-djup);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom: 1px solid var(--ben); }
}
.pub-topp {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; max-width: var(--spalt); margin: 0 auto;
  padding: 1.1rem 1.5rem;
}
/* Ankarhopp ska inte gömma rubriken under det svävande sidhuvudet. */
section[id] { scroll-margin-top: 4.5rem; }
.pub-marke {
  display: flex; align-items: center; gap: .65rem;
  font-family: var(--skylt); font-size: 1.3rem; letter-spacing: .22em;
  color: var(--ben); text-decoration: none;
}
/* Märket utan platta — D:et flyter direkt på materialet. */
.pub-marke-bild { height: 34px; width: auto; }
.pub-nav { display: flex; align-items: center; gap: 1.4rem; }
.pub-nav a {
  color: var(--dov); text-decoration: none; font-size: .95rem;
  font-weight: 600;
}
.pub-nav a:hover { color: var(--ben); }
.pub-nav-boka {
  color: var(--signal) !important; border: 2px solid var(--signal);
  border-radius: 4px; padding: .35rem .9rem;
}
.pub-nav-boka:hover { background: var(--signal);
  color: var(--sarg-djup) !important; }

/* ── Uppslaget ──────────────────────────────────────────────────────── */
.hero {
  max-width: var(--spalt); margin: 0 auto;
  padding: 4.5rem 1.5rem 5rem;
  border-bottom: 2px solid var(--linje);
}
.hero-tes {
  margin: 0 0 2.2rem;
  font-family: var(--skylt);
  font-size: clamp(1.05rem, 2.5vw, 1.35rem);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--dov);
}
.hero-skylt { margin: 0 0 2.4rem; }
.hero-roll {
  font-size: clamp(3.2rem, 11vw, 6.5rem);
  letter-spacing: .04em;
  padding: .12em .35em .09em;
  border-radius: 8px;
  border-width: 4px;
}
.hero-barare {
  display: block; margin-top: 1rem;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--dov);
}
.hero-barare b {
  color: var(--signal); font-weight: 700;
  display: inline-block; min-width: 4.5ch;
  /* Ett namn lämnar nedåt och nästa kommer nedifrån — samma väg ut som
     in, med en utrullning som bromsar mot slutet. */
  transition: opacity 280ms cubic-bezier(0.2, 0, 0, 1),
    transform 280ms cubic-bezier(0.2, 0, 0, 1);
}
.hero-barare b.byts { opacity: 0; transform: translateY(.35em); }
.hero-rubrik {
  margin: 0 0 1rem;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.15; font-weight: 800; letter-spacing: -.015em;
  max-width: 22ch; text-wrap: balance;
}
.hero-text { margin: 0 0 2.2rem; max-width: 58ch; color: var(--dov);
  font-size: 1.08rem; }
.hero-knappar { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Knapparna: den orange är sidans enda röst för handling. */
.knapp-orange, .knapp-kontur {
  display: inline-block; text-decoration: none; cursor: pointer;
  font: 700 1rem/1 var(--brod);
  padding: 1rem 1.7rem; border-radius: 6px;
  border: 2px solid var(--signal);
}
.knapp-orange { background: var(--signal); color: var(--sarg-djup); }
.knapp-orange:hover { filter: brightness(1.12); }
.knapp-kontur { background: transparent; color: var(--ben);
  border-color: var(--linje); }
.knapp-kontur:hover { border-color: var(--ben); }
/* Svaret bor på nedtrycket, inte på släppet — och det är omedelbart. */
.knapp-orange, .knapp-kontur, .pub-nav-boka {
  transition: transform 100ms ease-out, filter 150ms ease-out,
    border-color 150ms ease-out;
}
.knapp-orange:active, .knapp-kontur:active, .pub-nav-boka:active {
  transform: scale(0.97);
}

/* ── Avsnitten: sarglinjen löper obruten genom hela sidan ───────────── */
section { position: relative; }
.avsnitt-rubrik {
  max-width: var(--spalt); margin: 0 auto 1rem;
  padding: 0 1.5rem;
  font-family: var(--skylt);
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  letter-spacing: .06em; text-transform: uppercase;
  font-weight: 400;
}
/* Ingressen står i spaltens vänsterkant med läsbar radlängd — inte
   centrerad som en egen ö. */
.avsnitt-text {
  max-width: 58ch; color: var(--dov);
  margin: 0 0 2rem max(1.5rem, calc((100% - var(--spalt)) / 2 + 1.5rem));
  padding: 0 1.5rem 0 0;
}

/* ── Stegen ─────────────────────────────────────────────────────────── */
.steg { padding: 4.5rem 0 4rem; border-bottom: 2px solid var(--linje); }
.steg-lista {
  max-width: var(--spalt); margin: 2.5rem auto 0; padding: 0 1.5rem;
  list-style: none; counter-reset: steg;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem 3.5rem;
}
.steg-lista li { counter-increment: steg; position: relative;
  padding-left: 3.2rem; }
.steg-lista li::before {
  content: counter(steg);
  position: absolute; left: 0; top: -.35rem;
  font-family: var(--skylt); font-size: 2.2rem; color: var(--signal);
}
.steg-bild { width: 64px; height: 64px; margin-bottom: .8rem; }
.steg-bild .s-fylld { fill: var(--ben); }
.steg-bild .s-kontur { fill: none; stroke: var(--dov); stroke-width: 3; }
.steg-bild .s-linje { fill: none; stroke: var(--signal); stroke-width: 3;
  stroke-linecap: round; }
.steg-lista h3 { margin: 0 0 .4rem; font-size: 1.15rem; font-weight: 700; }
.steg-lista p { margin: 0; color: var(--dov); }

/* ── Uppställningen: funktionerna som laguppställning ───────────────── */
.uppstallning { padding: 4.5rem 0 4rem; border-bottom: 2px solid var(--linje);
  background: var(--sarg-djup); }
.upp-lista {
  max-width: var(--spalt); margin: 2.5rem auto 0; padding: 0 1.5rem;
  list-style: none;
}
.upp-lista li {
  display: grid; grid-template-columns: 15rem minmax(0, 1fr);
  gap: 1.5rem; align-items: start;
  padding: 1.25rem 0; border-bottom: 1px solid var(--linje);
}
.upp-lista li:last-child { border-bottom: 0; }
.upp-lista .skylt { justify-self: start; }
.upp-lista p { margin: .15rem 0 0; color: var(--dov); }

/* ── Appen och För vem ──────────────────────────────────────────────── */
.appen { padding: 4.5rem 0 4rem; border-bottom: 2px solid var(--linje); }
.appen-inre { max-width: var(--spalt); margin: 0 auto; padding: 0 1.5rem; }
.appen-inre p { max-width: 58ch; color: var(--dov); }
.appen-inre b { color: var(--ben); }

.forvem { padding: 4.5rem 0 4rem; border-bottom: 2px solid var(--linje); }
.forvem-tva {
  max-width: var(--spalt); margin: 1.5rem auto 0; padding: 0 1.5rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;
}
.forvem-tva h3 { margin: 0 0 .5rem; font-size: 1.15rem; }
.forvem-tva p { margin: 0; color: var(--dov); }

/* ── Avslutet ───────────────────────────────────────────────────────── */
.avslut { padding: 5rem 1.5rem 5.5rem; text-align: center; }
.avslut-tes {
  margin: 0 auto 2rem;
  font-family: var(--skylt);
  font-size: clamp(1.8rem, 5vw, 3rem);
  letter-spacing: .05em; text-transform: uppercase;
  max-width: 18ch; line-height: 1.2; text-wrap: balance;
}
.avslut-not { margin: 1.2rem 0 0; color: var(--dov); font-size: .92rem; }

/* ── Formulärsidorna ────────────────────────────────────────────────── */
.formsida {
  max-width: 40rem; margin: 0 auto;
  padding: 3.5rem 1.5rem 5rem;
}
.formsida-rubrik {
  margin: 0 0 .8rem; font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800; letter-spacing: -.015em;
}
.formsida-text { margin: 0 0 2rem; color: var(--dov); }
.tack-skylt { margin-bottom: 1.5rem; }
.tack-skylt .skylt { font-size: 1.6rem; }

.pub-form label { display: block; margin: 1.2rem 0 .35rem; font-weight: 600;
  font-size: .95rem; }
.pub-form .frivillig { color: var(--dov); font-weight: 400; }
.pub-form input[type=text], .pub-form input[type=email],
.pub-form input[type=tel], .pub-form input[type=password],
.pub-form textarea {
  width: 100%; padding: .75rem .9rem;
  background: var(--sarg-djup); color: var(--ben);
  border: 2px solid var(--linje); border-radius: 6px;
  font: inherit;
}
.pub-form input:focus, .pub-form textarea:focus {
  outline: none; border-color: var(--ben);
}
.pub-form ::placeholder { color: #5B6678; }
.pub-form textarea { resize: vertical; }
.pub-form .typval { border: 2px solid var(--linje); border-radius: 6px;
  padding: .8rem 1rem 1rem; margin: 1.2rem 0 0; }
.pub-form .typval legend { font-weight: 600; font-size: .95rem;
  padding: 0 .4rem; }
.pub-form .typval label { display: flex; align-items: center; gap: .6rem;
  margin: .5rem 0 0; font-weight: 400; cursor: pointer; }
.pub-form .typval input { accent-color: var(--signal); }
.pub-form button { margin-top: 1.8rem; width: 100%; }
.pub-form-not { margin: 1rem 0 0; font-size: .85rem; color: var(--dov); }
.pub-form-not a { color: var(--dov); }
.form-fel {
  border: 2px solid var(--signal); border-radius: 6px;
  padding: .8rem 1rem; color: var(--ben); margin: 0 0 1.5rem;
}

/* Läsbara sidor (integritet) */
.lasbart h2 { margin: 2rem 0 .5rem; font-size: 1.2rem; }
.lasbart p { color: var(--dov); max-width: 62ch; }
.lasbart a { color: var(--ben); }

/* ── Sidfoten ───────────────────────────────────────────────────────── */
.pub-fot { border-top: 2px solid var(--linje); background: var(--sarg-djup); }
.pub-fot-inre {
  max-width: var(--spalt); margin: 0 auto;
  padding: 2rem 1.5rem;
  display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap;
}
.pub-fot-marke { font-family: var(--skylt); letter-spacing: .22em; }
.pub-fot-text { color: var(--dov); font-size: .9rem; flex: 1; }
.pub-fot-nav { display: flex; gap: 1.4rem; }
.pub-fot-nav a { color: var(--dov); font-size: .9rem; }
.pub-fot-nav a:hover { color: var(--ben); }

/* ── Smala skärmar ──────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .steg-lista { grid-template-columns: 1fr; gap: 2.5rem; }
  .forvem-tva { grid-template-columns: 1fr; gap: 2rem; }
  .upp-lista li { grid-template-columns: 1fr; gap: .5rem;
    padding: 1.1rem 0; }
  .pub-nav a:not(.pub-nav-boka) { display: none; }
  .hero { padding-top: 3rem; }
  .pub-fot-inre { flex-direction: column; gap: .6rem; }
}