/* Halmstad Social: identitet från Figma-filen ID-Halmstad Social, ramen Desktop - 1 (1440 px). */
:root {
  --bg: #A8CCFF; --orange: #E83802; --blatext: #2C60CE; --svart: #000000; --vit: #FFFFFF;
  --skugga: rgba(121,151,194,.9);
  --grotesk: 'Host Grotesk', system-ui, -apple-system, sans-serif;
  --slab: 'Montagu Slab', Georgia, serif;
  /* Äldre namn som undersidorna använder */
  --bla: #A8CCFF; --bla-ljus: #B9D6FF; --lime: #E83802;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--grotesk); color: var(--blatext); background: var(--bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

/* ---------- Huvud ---------- */
.topp { position: absolute; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: flex-start; justify-content: space-between; padding: 40px; }
.logo { position: relative; display: block; width: 180px; height: 64px; }
.logo .l1 { position: absolute; left: 0; top: 0; width: 179.4px; height: 31.4px; }
.logo .l2 { position: absolute; left: 42.8%; bottom: 0; width: 102.9px; height: 31.4px; }
.nav { display: flex; gap: 0 10px; padding-top: 2px; font-weight: 700; font-size: 30px; letter-spacing: -.02em; color: var(--orange); }
.nav a { position: relative; padding: 0 8px; }
.nav a::after { content: ""; position: absolute; left: 8px; width: 58px; bottom: 2px; height: 3px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav a.har::after, .nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }

/* ---------- Delar ---------- */
/* Hierarkin: rubriken i början är störst, de stora påståendena (varför nu, visionen, löftet) näst störst, programmets
   underrubriker därefter. Lapparna är en nivå under rubrikerna. */
.del { position: relative; padding: 120px 0; }
.kol { position: relative; margin-left: 11.8%; width: min(1050px, 76%); }
.kol + .kol { margin-top: 72px; }
h1, h2, h3 { font-family: var(--grotesk); font-weight: 700; line-height: .98; letter-spacing: -.025em; color: var(--orange); }
h1 { font-size: clamp(60px, 9.5vw, 136px); }
h2 { font-size: clamp(40px, 5.6vw, 84px); max-width: 14ch; }
h3 { font-size: clamp(24px, 2.4vw, 34px); }
h3.under { margin-bottom: 20px; }
.brod { font-family: var(--slab); font-weight: 400; font-size: clamp(18px, 2vw, 28px); line-height: 1.5; letter-spacing: -.02em; color: var(--blatext); max-width: 850px; margin-top: 36px; }
.brod.liten { font-size: clamp(16px, 1.45vw, 21px); max-width: 720px; margin-top: 0; }
.not { font-family: var(--grotesk); font-weight: 700; font-size: clamp(14px, 1.2vw, 17px); letter-spacing: .02em; color: var(--blatext); margin-top: 36px; }

/* Lapparna: ljusblå, med skugga, lite snedställda, strax ovanför rubriken */
.tagg { position: relative; z-index: 2; display: inline-block; background: var(--bg); color: var(--svart); font-family: var(--grotesk); font-weight: 800; font-size: clamp(13px, 1.3vw, 19px); line-height: 1; letter-spacing: -.01em; padding: .42em .7em .45em .75em; margin: 0 0 22px -.75em; transform: rotate(var(--rot, -9deg)); filter: drop-shadow(1.35px 1.35px .67px var(--skugga)); pointer-events: none; transform-origin: 20% 60%; }

/* Färgade delar: samma tre färger, byter plats */
.orange { background: var(--orange); }
.orange h2, .orange .brod { color: var(--bg); }
.orange .tagg { background: var(--orange); color: var(--bg); filter: drop-shadow(1.35px 1.35px .67px rgba(0,0,0,.35)); }
.morkbla { background: var(--blatext); }
.morkbla h2 { color: var(--bg); }
.morkbla .brod { color: var(--bg); }
.morkbla .tagg { background: var(--blatext); color: var(--bg); filter: drop-shadow(1.35px 1.35px .67px rgba(0,0,0,.35)); }

.hero { padding: 230px 0 140px; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.hero .brod { max-width: 900px; }
.knappar { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 44px; }
.knapp { display: inline-flex; align-items: center; padding: 18px 30px; border-radius: 999px; background: var(--orange); color: var(--bg); font-family: var(--grotesk); font-weight: 800; font-size: clamp(17px, 1.4vw, 20px); letter-spacing: -.01em; transition: transform .2s, background .2s; }
.knapp:hover { transform: translateY(-2px); }
.knapp.sekundar { background: transparent; color: var(--orange); box-shadow: inset 0 0 0 2.5px var(--orange); }

/* Löftet: tre effekter */
.tre { margin: 56px 0 0 11.8%; width: min(1050px, 76%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.tre li { padding-top: 22px; border-top: 3px solid var(--orange); }
.tre h3 { margin-bottom: 10px; }
.tre p { font-family: var(--slab); font-size: clamp(16px, 1.45vw, 21px); line-height: 1.5; color: var(--blatext); }

/* Programmet: listor, rutor och mått */
.lista { display: grid; gap: 16px; max-width: 850px; counter-reset: del; }
.lista li { position: relative; padding-left: 60px; font-family: var(--slab); font-size: clamp(16px, 1.45vw, 21px); line-height: 1.5; letter-spacing: -.01em; color: var(--blatext); counter-increment: del; }
.lista li::before { content: "0" counter(del); position: absolute; left: 0; top: .2em; font-family: var(--grotesk); font-weight: 800; font-size: .85em; color: var(--orange); }
.lista b { font-family: var(--grotesk); font-weight: 700; color: var(--orange); }
.rutor { margin-top: 32px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 900px; }
.rutor li { border: 2.5px solid var(--blatext); border-radius: 22px; padding: 24px 26px 26px; }
.rutor .nar { display: inline-block; font-family: var(--grotesk); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; }
.rutor h4 { font-family: var(--grotesk); font-weight: 700; font-size: clamp(20px, 1.7vw, 24px); letter-spacing: -.02em; color: var(--blatext); margin-bottom: 8px; }
.rutor p { font-family: var(--slab); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.5; color: var(--blatext); }
.matt { margin-top: 28px; display: grid; gap: 0; max-width: 850px; }
.matt li { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 14px 0; border-top: 1.5px solid var(--blatext); font-family: var(--slab); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.45; color: var(--blatext); }
.matt li:last-child { border-bottom: 1.5px solid var(--blatext); }
.matt b { font-family: var(--grotesk); font-weight: 800; color: var(--orange); }

/* Vilka vi är */
.tva-kort { margin: 48px 0 0 11.8%; width: min(1050px, 76%); display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.tva-kort li { padding-top: 22px; border-top: 3px solid var(--orange); }
.tva-kort h3 { margin-bottom: 12px; }
.tva-kort p { font-family: var(--slab); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.55; color: var(--blatext); }
.vi .brod.liten.kol { margin-top: 40px; }

/* Anmälan på startsidan */
.anmal { padding-bottom: 160px; }
.anmal .formular { margin-top: 40px; }

/* Animationen från en del till nästa: lappen landar med en liten studs och rätar upp sig, rubriken
   skjuts upp ur sin egen rad, texten glider in efteråt. Styrs av --n (ordningen inom delen). */
.js .del [data-reveal] { opacity: 0; transition: opacity .6s ease, transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--n, 0) * 140ms); }
.js .del .brod[data-reveal], .js .del .not[data-reveal], .js .del .knappar[data-reveal], .js .del .tre[data-reveal], .js .del .lista[data-reveal], .js .del .rutor[data-reveal], .js .del .matt[data-reveal], .js .del .tva-kort[data-reveal], .js .del .formular[data-reveal], .js .del h3[data-reveal] { transform: translateY(26px); }
.js .del h1[data-reveal], .js .del h2[data-reveal] { opacity: 1; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.js .del h1[data-reveal] > span, .js .del h2[data-reveal] > span { display: block; transform: translateY(110%); transition: transform 1s cubic-bezier(.2,.9,.2,1); transition-delay: calc(var(--n, 0) * 140ms + 60ms); }
.js .del .tagg[data-reveal] { transform: rotate(calc(var(--rot, -9deg) - 10deg)) translateY(-28px) scale(.9); transition: opacity .4s ease, transform 1.1s cubic-bezier(.3,1.6,.4,1); }
.js .del.in [data-reveal] { opacity: 1; transform: none; }
.js .del.in .tagg[data-reveal] { transform: rotate(var(--rot, -9deg)); }
.js .del.in h1[data-reveal] > span, .js .del.in h2[data-reveal] > span { transform: none; }

/* ---------- Undersidor: Index, Rapport, Studio och intresseanmälan ---------- */
.snart { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; padding: 160px 24px 80px; }
.snart h1 { font-size: clamp(44px, 7vw, 100px); }
.snart .etikett { font-family: var(--grotesk); font-weight: 800; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.snart .ingress { font-family: var(--slab); font-size: clamp(18px, 1.8vw, 24px); line-height: 1.5; color: var(--blatext); max-width: 560px; }
.snart .knapp { margin-top: 10px; }
.formular { width: min(560px, 100%); text-align: left; display: grid; gap: 16px; margin-top: 10px; }
.falt { display: grid; gap: 6px; }
.falt label { font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); }
.falt input { font: inherit; font-size: 18px; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--blatext); background: var(--vit); color: var(--svart); width: 100%; }
.falt input:focus-visible { outline: none; border-color: var(--orange); }
.samtycke { display: flex; gap: 10px; align-items: flex-start; font-family: var(--slab); font-size: 15px; line-height: 22px; color: var(--blatext); }
.samtycke input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--orange); flex: none; }
.samtycke a { text-decoration: underline; text-underline-offset: 2px; }
.formular .honung { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular .knapp { justify-self: start; border: 0; cursor: pointer; font-family: inherit; }
.formular .knapp[disabled] { opacity: .6; cursor: wait; }
.svar { font-family: var(--slab); font-size: 16px; line-height: 24px; color: var(--svart); background: var(--vit); border-radius: 14px; padding: 14px 16px; }
.svar.fel { border: 2px solid var(--orange); }
.svar.tack { background: var(--orange); color: var(--vit); }

/* ---------- Mindre skärmar ---------- */
@media (max-width: 900px) {
  .tre, .rutor, .tva-kort { grid-template-columns: 1fr; }
  .matt li { grid-template-columns: 110px 1fr; }
}
@media (max-width: 760px) {
  .topp { padding: 20px; }
  .logo { width: 135px; height: 48px; }
  .logo .l1 { width: 134.5px; height: 23.6px; }
  .logo .l2 { width: 77.2px; height: 23.6px; }
  .nav { font-size: 17px; gap: 2px 0; padding-top: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 58%; margin-left: auto; }
  .nav a { padding: 0 6px; }
  .nav a::after { left: 6px; width: 34px; height: 2px; }
  .kol, .tre, .tva-kort { margin-left: 24px; width: calc(100% - 48px); }
  .kol + .kol { margin-top: 48px; }
  .del { padding: 80px 0; }
  .hero { padding: 140px 0 90px; }
  .tagg { margin-bottom: 20px; }
  .brod { margin-top: 24px; }
  .knappar { margin-top: 32px; }
  .knapp { padding: 16px 24px; }
  .matt li { grid-template-columns: 1fr; gap: 4px; }
  .fot { padding: 24px 20px 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .del [data-reveal], .js .del .tagg[data-reveal], .js .del h1[data-reveal] > span, .js .del h2[data-reveal] > span { opacity: 1; transform: none; transition: none; }
}