/* Vinstrundan. Ett stilark för hela sajten, inklusive hubben. */

@font-face {
  font-family: 'Inter';
  src: url('/fonter/Inter.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonter/Fraunces-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #f7f3ec;
  --bg-2: #efe8dc;
  --yta: #fffdf9;
  --text: #18170f;
  --dampad: #5f5a4e;
  --svag: #6f695b;
  --linje: #e4dccd;
  --accent: #0f5c45;
  --accent-hover: #0b4a37;
  --accent-text: #ffffff;
  --accent-mjuk: #e3efe9;
  --guld: #86600f;
  --fel: #b3261e;
  --ok: #1d7a4f;
  --radie: 20px;
  --radie-liten: 12px;
  --skugga: 0 1px 2px rgb(24 23 15 / 5%), 0 10px 30px -14px rgb(24 23 15 / 22%);
  --skugga-stor: 0 2px 4px rgb(24 23 15 / 6%), 0 30px 60px -24px rgb(24 23 15 / 35%);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #11130f;
    --bg-2: #171a15;
    --yta: #1b1f19;
    --text: #f2eee4;
    --dampad: #b1ab9b;
    --svag: #8f8a7c;
    --linje: #2f342c;
    --accent: #6fcfa5;
    --accent-hover: #8ddbb8;
    --accent-text: #0a2219;
    --accent-mjuk: #1d2d25;
    --guld: #e3b55a;
    --fel: #ff8a80;
    --ok: #6fcfa5;
    --skugga: 0 1px 2px rgb(0 0 0 / 30%), 0 10px 30px -14px rgb(0 0 0 / 60%);
    --skugga-stor: 0 2px 4px rgb(0 0 0 / 30%), 0 30px 60px -24px rgb(0 0 0 / 70%);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; border-radius: 6px; }

.ram { max-width: 72rem; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .ram { padding: 0 28px; } }
.smal { max-width: 46rem; }

/* ---------- Sidhuvud ---------- */
header.topp {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--linje) 60%, transparent);
}
header.topp .ram { display: flex; justify-content: space-between; align-items: center; height: 64px; gap: 16px; }
.logga { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 750; font-size: 1.08rem; letter-spacing: -0.02em; }
.logga:hover { color: inherit; }
.logga .prick {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 30%, #f6dc8f, #d29e33 55%, #8c5f12);
  box-shadow: inset 0 -2px 4px rgb(0 0 0 / 22%), 0 1px 2px rgb(0 0 0 / 15%);
}
nav.huvud { display: flex; align-items: center; gap: 22px; font-size: 0.95rem; font-weight: 550; }
nav.huvud a { text-decoration: none; color: var(--dampad); }
nav.huvud a:hover { color: var(--text); }
.etikett-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--accent-mjuk); color: var(--accent); font-size: 0.82rem; font-weight: 650; white-space: nowrap;
}
@media (max-width: 640px) { nav.huvud .lank { display: none; } }

/* ---------- Typografi ---------- */
.overrubrik { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--guld); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; text-wrap: balance; }
.h1 { font-size: clamp(2.4rem, 6.4vw, 4.1rem); }
.h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.ingress { font-size: clamp(1.08rem, 2vw, 1.25rem); color: var(--dampad); max-width: 36rem; text-wrap: pretty; }
.sektion { padding: 64px 0; }
@media (min-width: 900px) { .sektion { padding: 88px 0; } }
.sektion-huvud { display: grid; gap: 10px; margin-bottom: 32px; max-width: 40rem; }

/* ---------- Knappar ---------- */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 1rem/1 var(--sans); letter-spacing: -0.005em; text-decoration: none; cursor: pointer;
  padding: 15px 24px; border-radius: 999px; border: 0;
  background: var(--accent); color: var(--accent-text);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 80%, transparent);
  transition: background 0.15s, transform 0.15s;
}
.knapp:hover { background: var(--accent-hover); color: var(--accent-text); }
.knapp:active { transform: translateY(1px); }
.knapp:disabled { opacity: 0.6; cursor: progress; }
.knapp.stor { width: 100%; padding: 20px 28px; font-size: 1.05rem; letter-spacing: 0.02em; }
.knapp.sekundar { background: transparent; color: var(--text); border: 1.5px solid var(--linje); box-shadow: none; }
.knapp.sekundar:hover { border-color: var(--text); color: var(--text); }
.knapp-liten {
  font: 700 0.92rem/1 var(--sans); padding: 11px 18px; border-radius: 999px; border: 0;
  background: var(--accent); color: var(--accent-text); cursor: pointer; white-space: nowrap;
  transition: background 0.15s;
}
.knapp-liten:hover { background: var(--accent-hover); }
.knapp-liten.klar { background: transparent; color: var(--ok); box-shadow: inset 0 0 0 1.5px var(--ok); cursor: default; }

/* ---------- Hero på startsidan ---------- */
.hero { padding-top: 32px; padding-bottom: 8px; display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.05fr 1fr; padding-top: 72px; padding-bottom: 56px; gap: 48px; } }
@media (max-width: 899px) { .solfjader { max-width: 400px; aspect-ratio: 1.45; } .solfjader .kortbild { width: 66%; left: 17%; } }
.hero .text { display: grid; gap: 20px; }
.hero .knappar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.lofte { list-style: none; display: grid; gap: 8px; color: var(--dampad); font-size: 0.98rem; }
.lofte li { display: flex; gap: 10px; align-items: flex-start; }
.lofte li::before {
  content: ''; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  background: var(--accent-mjuk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%230f5c45' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.solfjader { position: relative; aspect-ratio: 1.3; max-width: 540px; width: 100%; margin: 0 auto; }
.solfjader .kortbild {
  position: absolute; width: 72%; left: 14%; top: 20%;
  border-radius: 22px; box-shadow: var(--skugga-stor);
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.solfjader .kortbild:nth-child(1) { transform: rotate(-12deg) translate(-15%, -8%); }
.solfjader .kortbild:nth-child(2) { transform: rotate(7deg) translate(13%, -15%); }
.solfjader .kortbild:nth-child(3) { transform: rotate(-2deg) translate(0, 16%); }
.solfjader:hover .kortbild:nth-child(1) { transform: rotate(-15deg) translate(-19%, -10%); }
.solfjader:hover .kortbild:nth-child(2) { transform: rotate(10deg) translate(17%, -18%); }
@media (prefers-reduced-motion: reduce) { .solfjader .kortbild { transition: none; } }

/* ---------- Tävlingsgalleri ---------- */
.galleri { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.tavlingskort {
  display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit;
  background: var(--yta); border: 1px solid var(--linje); border-radius: var(--radie);
  padding: 14px 14px 18px; box-shadow: var(--skugga);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
a.tavlingskort:hover { transform: translateY(-3px); box-shadow: var(--skugga-stor); border-color: color-mix(in srgb, var(--accent) 40%, var(--linje)); color: inherit; }
.tavlingskort .kortbild { border-radius: 13px; }
.tavlingskort .innehall { display: grid; gap: 6px; padding: 0 6px; flex: 1; align-content: start; }
.tavlingskort h3 { font-size: 1.3rem; }
.tavlingskort p { color: var(--dampad); font-size: 0.95rem; }
.tavlingskort .meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 6px; }
.tid { font-size: 0.86rem; color: var(--dampad); display: inline-flex; align-items: center; gap: 7px; }
.tid.snart { color: var(--fel); font-weight: 650; }
.tid::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.85; }

/* ---------- Så funkar det ---------- */
.steg { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); counter-reset: steg; }
.steg li {
  list-style: none; counter-increment: steg; background: var(--yta); border: 1px solid var(--linje);
  border-radius: var(--radie); padding: 24px; display: grid; gap: 8px; align-content: start;
}
.steg li::before {
  content: counter(steg); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: var(--accent-text); font-weight: 750; margin-bottom: 6px;
}
.steg h3 { font-size: 1.2rem; }
.steg p { color: var(--dampad); font-size: 0.97rem; }

.transparens {
  background: var(--accent); color: var(--accent-text); border-radius: 28px; padding: clamp(28px, 5vw, 56px);
  display: grid; gap: 20px;
}
@media (min-width: 860px) { .transparens { grid-template-columns: 1fr 1.2fr; align-items: center; gap: 48px; } }
.transparens h2 { color: inherit; }
.transparens p { opacity: 0.9; }
.transparens p + p { margin-top: 12px; }
.transparens a { color: inherit; font-weight: 650; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; max-width: 48rem; }
.faq details { background: var(--yta); border: 1px solid var(--linje); border-radius: var(--radie-liten); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 20px; font-weight: 650; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--dampad); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 20px 18px; color: var(--dampad); display: grid; gap: 10px; }

/* ---------- Tävlingssidan ---------- */
.tavlingssida { display: grid; gap: 28px; padding: 28px 0 64px; align-items: start; }
@media (min-width: 960px) { .tavlingssida { grid-template-columns: 1fr 1.05fr; gap: 56px; padding: 56px 0 88px; } }
.prisinfo { display: grid; gap: 16px; }
@media (min-width: 960px) { .prisinfo { position: sticky; top: 96px; } }
.prisinfo .kortbild { border-radius: 22px; box-shadow: var(--skugga-stor); max-width: 500px; width: 100%; }
/* I mobil ska formuläret synas direkt, för trafiken kommer från annonser.
   Prisdelen krymper till en rad med litet kort, rubrik och datum. */
@media (max-width: 959px) {
  .tavlingssida { padding-top: 20px; gap: 18px; }
  .prisinfo { grid-template-columns: 116px 1fr; gap: 4px 16px; align-items: center; }
  .prisinfo #prisbild { grid-row: 1 / span 2; }
  .prisinfo .kortbild { border-radius: 10px; box-shadow: var(--skugga); }
  .prisinfo .overrubrik { align-self: end; font-size: 0.72rem; }
  .prisinfo .h1 { font-size: 1.45rem !important; align-self: start; }
  .prisinfo .ingress { display: none; }
  .prisinfo .fakta { grid-column: 1 / -1; margin-top: 10px; gap: 6px 24px; font-size: 0.88rem; }
  .prisinfo .fakta div:first-child { display: none; }
}
.prisinfo .ingress { font-size: 1.08rem; }
.fakta { display: flex; flex-wrap: wrap; gap: 14px 32px; font-size: 0.95rem; margin-top: 4px; }
.fakta div { display: grid; gap: 2px; }
.fakta dt { color: var(--svag); font-size: 0.74rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.07em; }
.fakta dd { font-weight: 650; }

.stegrad { display: flex; align-items: center; gap: 12px; font-size: 0.84rem; font-weight: 650; color: var(--dampad); }
.stegrad .stapel { flex: 1; height: 6px; border-radius: 999px; background: var(--linje); overflow: hidden; max-width: 160px; }
.stegrad .stapel span { display: block; height: 100%; width: 50%; background: var(--accent); border-radius: inherit; transition: width 0.4s; }

.formkort {
  background: var(--yta); border: 1px solid var(--linje); border-radius: 24px;
  padding: clamp(20px, 4vw, 32px); box-shadow: var(--skugga); display: grid; gap: 18px;
}
.formkort h2 { font-size: 1.65rem; }
.formkort .hjalp { color: var(--dampad); font-size: 0.95rem; margin-top: -8px; }
.formkort .del { display: grid; gap: 14px; }
.formkort .del + .del { padding-top: 22px; border-top: 1px solid var(--linje); }
.formkort h3 { font-size: 1.25rem; }

.falt { display: grid; gap: 6px; }
.falt label { font-weight: 600; font-size: 0.92rem; }
.falt .valfri { font-weight: 400; color: var(--svag); }
.rad2 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 340px) { .rad2 { grid-template-columns: 1fr; } }

input[type='text'], input[type='email'], input[type='tel'], input[type='search'], input[type='date'], select {
  width: 100%; font: inherit; font-size: 1rem; color: inherit; background: var(--bg);
  border: 1.5px solid var(--linje); border-radius: var(--radie-liten); padding: 13px 14px;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
input:hover, select:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--linje)); }
input:focus, select:focus { outline: none; border-color: var(--accent); background: var(--yta); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
input[aria-invalid='true'] { border-color: var(--fel); }

.fraga { display: grid; gap: 10px; }
.fraga .q { font-weight: 650; }
.val { display: flex; flex-wrap: wrap; gap: 8px; }
.val label { cursor: pointer; }
.val input { position: absolute; opacity: 0; pointer-events: none; }
.val span {
  display: inline-block; padding: 9px 15px; border-radius: 999px; border: 1.5px solid var(--linje);
  font-size: 0.94rem; background: var(--bg); transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.val label:hover span { border-color: color-mix(in srgb, var(--text) 30%, var(--linje)); }
.val input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.val input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }

.ruta {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  padding: 16px; border: 1.5px solid var(--linje); border-radius: 16px; cursor: pointer; background: var(--bg);
  transition: border-color 0.15s, background 0.15s;
}
.ruta:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--linje)); }
.ruta:has(input:checked) { border-color: var(--accent); background: var(--accent-mjuk); }
.ruta input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--accent); }
.ruta .rubrik { font-weight: 700; display: block; }
.ruta .liten { font-size: 0.86rem; color: var(--dampad); display: block; margin-top: 4px; line-height: 1.5; }

.villkor { display: grid; grid-template-columns: auto 1fr; gap: 12px; font-size: 0.93rem; color: var(--dampad); cursor: pointer; }
.villkor input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); }
.villkor a { color: var(--text); }
.trygg { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 0.84rem; color: var(--svag); }
.trygg span { display: inline-flex; align-items: center; gap: 6px; }
.trygg svg { width: 14px; height: 14px; }

.meddelande { padding: 13px 16px; border-radius: var(--radie-liten); font-weight: 600; font-size: 0.95rem; }
.meddelande.fel { color: var(--fel); background: color-mix(in srgb, var(--fel) 8%, transparent); border: 1.5px solid color-mix(in srgb, var(--fel) 40%, transparent); }
.meddelande.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); border: 1.5px solid color-mix(in srgb, var(--ok) 40%, transparent); }

.tack { text-align: center; display: grid; gap: 12px; justify-items: center; padding: 8px 0; }
.tack .bock { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-mjuk); color: var(--accent); }
.tack h2 { font-size: 2rem; }
.tack p { color: var(--dampad); max-width: 30rem; }

.fler { display: grid; gap: 12px; }
.fler h3 { font-size: 1.3rem; }
.fler > p { color: var(--dampad); font-size: 0.95rem; margin-top: -6px; }
.minikort {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center;
  padding: 12px; border: 1px solid var(--linje); border-radius: 16px; background: var(--bg);
}
.minikort .kortbild { border-radius: 8px; }
.minikort b { display: block; font-size: 0.98rem; line-height: 1.3; }
.minikort span { font-size: 0.84rem; color: var(--dampad); }
@media (max-width: 480px) { .minikort { grid-template-columns: 80px 1fr; } .minikort .knapp-liten { grid-column: 1 / -1; } }

/* ---------- Text- och policysidor ---------- */
.dokument { padding: 48px 0 80px; }
.dokument .huvud { display: grid; gap: 12px; margin-bottom: 28px; }
.dokument .sammanfattning { background: var(--accent-mjuk); border-radius: var(--radie); padding: 22px 24px; display: grid; gap: 10px; margin-bottom: 32px; }
.dokument .sammanfattning p, .dokument .sammanfattning li { color: var(--text); }
.dokument .sammanfattning ul { padding-left: 1.2rem; display: grid; gap: 6px; }
.dokument h2 { font-size: 1.45rem; margin: 40px 0 12px; scroll-margin-top: 90px; }
.dokument h3 { font-family: var(--sans); font-size: 1.02rem; letter-spacing: 0; margin: 20px 0 6px; }
.dokument p, .dokument li { color: var(--dampad); }
.dokument p + p { margin-top: 10px; }
.dokument ul, .dokument ol { padding-left: 1.3rem; display: grid; gap: 6px; margin-top: 8px; }
.dokument .innehall-lista { columns: 2; column-gap: 32px; font-size: 0.95rem; display: block; }
.dokument .innehall-lista li { margin-bottom: 6px; break-inside: avoid; }
@media (max-width: 600px) { .dokument .innehall-lista { columns: 1; } }
.version { font-size: 0.88rem; color: var(--svag); }
.tabell { overflow-x: auto; margin-top: 12px; border: 1px solid var(--linje); border-radius: var(--radie-liten); background: var(--yta); }
.tabell table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.tabell th, .tabell td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--linje); vertical-align: top; }
.tabell tr:last-child td { border-bottom: 0; }
.tabell th { background: var(--bg-2); font-weight: 650; font-size: 0.82rem; white-space: nowrap; }
.tabell td { color: var(--dampad); }
.tabell td:first-child { color: var(--text); font-weight: 600; }

/* ---------- Sidfot ---------- */
footer.fot { border-top: 1px solid var(--linje); background: var(--bg-2); padding: 40px 0 48px; font-size: 0.9rem; color: var(--dampad); }
footer.fot .ram { display: grid; gap: 20px; }
@media (min-width: 760px) { footer.fot .ram { grid-template-columns: 1.4fr 1fr; } }
footer.fot nav { display: flex; flex-wrap: wrap; gap: 10px 22px; align-content: start; }
footer.fot nav a { text-decoration: none; color: var(--text); font-weight: 550; }
footer.fot .liten { font-size: 0.82rem; color: var(--svag); margin-top: 8px; }