/*
Theme Name: Vargen
Description: Vargens eget tema för vargenvemdalen.se. Byggt på Vargen_Presentation.pdf (webbskissen sida 10). Presentation, ingen affärslogik.
Version: 0.1.0
Author: KBK Vemdalen
Text Domain: vargen
*/

/*
 * Komponenterna, som alla sidor bygger på (inga sidunika stilark):
 *   .sektion .inre .lasbar          ytor och bredder
 *   .hero                           toppen på startsidan: bubbla + lutande foto
 *   .bubbla                         text på en pratbubbla (presentationen sida 6)
 *   .urklipp                        urklippsbokstäver (sida 8)
 *   .foto (.lutad .hoger)           foto med tuschillustration i hörnet
 *   .split (.omvand)                foto bredvid text
 *   .knapp (.rosa .lila .svart)     knappar
 *   .band                           rosa bokningsband
 *   .faktaGrid + .faktaRuta         rutor i rad, t.ex. gruppen på Om oss
 *   .evenemang / .evenemangTomt     listan från Evenemang-modulen
 *   .menyDelar .menyGrupp           menyn från menymodulen i KBK Core ([kbk_lunch], [kbk_meny])
 *   .saknas                         uppgift som saknas, syns tydligt på staging
 *   .ill                            tuschillustration (sida 5)
 */

/* Typsnitten ur Grafisk manual för Vargen 1.0: Breakdance Drawn för rubriker, ingress och
   korta texter (bara versaler), Dirty Punk för händelserubriker, Open Sans för längre text. */
@font-face { font-family: "Vargen Rubrik"; src: url("assets/fonts/breakdance-drawn.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Vargen Text"; src: url("assets/fonts/open-sans.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Vargen Text"; src: url("assets/fonts/open-sans-fet.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Vargen Handelse"; src: url("assets/fonts/dirty-punk.woff2") format("woff2"); font-display: swap; }

/* Färgerna ur Grafisk manual för Vargen 1.0, sida 4 (2026-09-29). */
:root {
  --vit: #ffffff;
  --papper: #ebe5d6;
  --kol: #292929;
  --bla: #053d5e;
  --gron: #7ac74f;
  --rosa: #ed6e9c;
  --lila: #6154cc;
  --gul: #e3b23d;

  --rubrik: "Vargen Rubrik", "Arial Narrow", sans-serif;
  --text: "Vargen Text", "Open Sans", Arial, sans-serif;
  --handelse: "Vargen Handelse", var(--rubrik);
  --bredd: 1180px;
  --kant: clamp(16px, 4vw, 32px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--kol);
  background-color: var(--papper);
  /* Pappret med repor ur presentationen. Multiply låter papperstonen bära. */
  background-image: url("assets/img/papper.webp");
  background-size: 1600px auto;
  background-blend-mode: multiply;
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.55;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--bla); }
a:focus-visible, .knapp:focus-visible { outline: 3px solid var(--bla); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--rubrik);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: .01em;
  margin: 0 0 .35em;
  /* Jämna rader, så att sista raden inte blir ett ensamt ord. */
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 8.5vw, 5.2rem); }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
h3 { font-size: clamp(1.6rem, 3vw, 2rem); }

p { margin: 0 0 1em; }
.efterRubrik { margin-top: 1.1em; }
/* Nummer som inte får brytas: telefon, organisationsnummer (sajtbygge-plan.md). */
.helt { white-space: nowrap; }
b, strong { font-weight: 600; }

.skarmlasare {
  position: absolute; left: -9999px; top: 0;
  background: var(--kol); color: var(--vit); padding: .6em 1em; z-index: 10;
}
.skarmlasare:focus { left: 1rem; }

.inre { width: 100%; max-width: var(--bredd); margin: 0 auto; padding: 0 var(--kant); }
/* Läsbar text, t.ex. policysidorna. Spalten står till vänster under sidans
   rubrik, raderna är lite längre och rubrikerna sitter nära sin text men
   med luft ovanför (Björn 2026-09-28). */
.lasbar > * { max-width: 50rem; }
.lasbar h2 { margin: 2.4rem 0 .6rem; }
.lasbar h3 { margin: 1.8rem 0 .4rem; }
.lasbar h2 + h3 { margin-top: .8rem; }
.lasbar > :first-child { margin-top: 0; }

/* ---------- Sidhuvudet ---------- */

.sidhuvud { padding: 18px 0 8px; }
.sidhuvud .inre { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.logga img { width: 88px; transform: rotate(-6deg); }
/* I datorn: loggan, menyn, Boka bord. Kryssrutan och menyknappen syns bara i mobilen. */
.logga { order: 1; }
.meny { order: 2; margin-left: auto; display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap; justify-content: flex-end; }
.sidhuvud .boka { order: 3; }
.menyVal { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sidhuvud .menyKnapp { display: none; cursor: pointer; user-select: none; }
.menyVal:focus-visible + .menyKnapp { outline: 3px solid var(--bla); outline-offset: 3px; }
.menyVal:checked + .menyKnapp { background: var(--lila); color: var(--vit); }
.meny ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.meny a:not(.knapp) {
  font-family: var(--rubrik); text-transform: uppercase; font-size: 1.55rem; line-height: 1;
  text-decoration: none;
}
.meny a:not(.knapp):hover, .meny a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; }

/* ---------- Knappar ---------- */

.knapp {
  display: inline-block;
  font-family: var(--rubrik); text-transform: uppercase; font-size: 1.5rem; line-height: 1;
  padding: .45em .8em .4em;
  text-decoration: none;
  color: var(--kol); background: var(--vit);
  transform: rotate(-2deg);
  transition: transform .15s ease;
 
}
.knapp:hover { transform: rotate(0) scale(1.04); color: inherit; }
/* Vit text på rosa är 2,9:1. Kolsvart på rosa är 5,1:1 (förslaget avsnitt 5). */
.knapp.rosa { background: var(--rosa); color: var(--kol); }
.knapp.lila { background: var(--lila); color: var(--vit); transform: rotate(1.5deg); }
.knapp.svart { background: var(--kol); color: var(--papper); }
.knappar { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.knappar.efter { margin-top: 28px; }

/* ---------- Sektioner ---------- */

/* Lite mindre luft mellan avsnitten, så att sidan blir kompaktare (Björn 2026-09-28). */
.sektion { padding: clamp(28px, 4.5vw, 56px) 0; position: relative; }
.sektion.tat { padding-top: clamp(16px, 3vw, 32px); }
.sektionHuvud { margin-bottom: 28px; }
.sektionHuvud > :not(.urklipp) { max-width: 44rem; }
.kicker {
  display: inline-block; font-family: var(--rubrik); text-transform: uppercase;
  font-size: 1.3rem; line-height: 1; margin-bottom: .5em; letter-spacing: .03em;
}

.sidaHuvud { padding: clamp(24px, 5vw, 56px) 0 0; }
.sidaHuvud h1 { transform: rotate(-2deg); transform-origin: left; }
/* Ingressen i Breakdance Drawn, som manualen säger (sida 3). */
.ingress { font-family: var(--rubrik); text-transform: uppercase; font-size: clamp(1.35rem, 2.4vw, 1.7rem); line-height: 1.1; max-width: 40rem; }

/* ---------- Bubbla ---------- */

.bubbla { position: relative; isolation: isolate; color: var(--kol); }
/* Bubblan får gå ut i marginalen, men aldrig längre än sidans kant. */
.bubblaForm { position: absolute; inset: -6% calc(-1 * min(7%, var(--kant) - 4px)); z-index: -1; color: var(--vit); }
.bubblaForm svg { width: 100%; height: 100%; display: block; }
.bubblaText { position: relative; padding: 13% 12% 12%; text-align: center; }
.bubbla h1, .bubbla h2 { transform: rotate(-3deg); }
/* Breakdance Drawn är bredare än reservtypsnittet: "Vemdalsskalets" ska rymmas i bubblan på 320 px. */
.bubbla h1 { font-size: clamp(2rem, 10vw, 2.8rem); }
.bubbla .knappar { justify-content: center; margin-top: 18px; }
.bubbla.papper .bubblaForm { color: var(--papper); }

/* ---------- Hero ---------- */

.hero { padding: clamp(24px, 5vw, 56px) 0 clamp(40px, 6vw, 72px); }
.hero .inre { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
.hero .bubblaText p { font-family: var(--rubrik); text-transform: uppercase; font-size: clamp(1.35rem, 2.4vw, 1.7rem); line-height: 1.05; transform: rotate(-3deg); text-wrap: balance; }
.heroText { text-align: center; }
.status {
  display: inline-block; background: var(--gul); color: var(--kol);
  font-weight: 600; padding: .35em .8em; margin: 40px 0 0;
  text-wrap: balance;
}
/* I en spalt (mobil och stående platta) blir ett stående foto annars en meter högt. */
.hero .foto, .split > .foto { max-width: 560px; justify-self: center; width: 100%; }
@media (min-width: 880px) {
  .hero .inre { grid-template-columns: 1.05fr 1fr; gap: 56px; }
  /* Rubriken skalas efter spalten, inte hela fönstret. */
  .hero .bubbla h1 { font-size: clamp(2.6rem, 4.4vw, 4.6rem); }
}

/* ---------- Foto ---------- */

.foto { position: relative; margin: 0; }
.foto > img:not(.ill) { width: 100%; box-shadow: 0 10px 24px rgba(41, 41, 41, .18); }
.foto.lutad > img:not(.ill) { transform: rotate(2.5deg); }
.foto.lutad.vanster > img:not(.ill) { transform: rotate(-2deg); }
.foto figcaption { font-size: .95rem; margin-top: 12px; }
/* Fotot bredvid texten beskärs till liggande 5:4. Stående foton blev annars
   runt 700 px höga, och det blev långt mellan texterna (Björn 2026-09-28). */
.split > .foto > img:not(.ill) { aspect-ratio: 5 / 4; object-fit: cover; height: auto; }
/* Bilder som inte tål beskärning (vargen med partyhatt och gästen) behåller sitt format, men blir smalare. */
.split > .foto > img.hel { aspect-ratio: auto; width: 78%; margin: 0 auto; }

/* ---------- Illustrationer ---------- */

.ill { position: absolute; width: clamp(64px, 11vw, 130px); height: auto; pointer-events: none; z-index: 2; }
.ill.uppeVanster { top: -8%; left: -7%; transform: rotate(-12deg); }
/* Till höger stannar illustrationen innanför fotot: utanför blir det scroll i sidled. */
.ill.uppeHoger { top: -9%; right: 3%; transform: rotate(10deg); }
.ill.nereHoger { bottom: -10%; right: 3%; transform: rotate(8deg); }
.ill.nereVanster { bottom: -9%; left: -6%; transform: rotate(-8deg); }
.ill.stor { width: clamp(110px, 16vw, 190px); }
.ill.fri { position: static; display: block; margin: 0 auto 12px; }

/* ---------- Split: foto bredvid text ---------- */

.split { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }

@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; gap: 72px; }
  .split.omvand > .foto { order: -1; }
  /* Första avsnittet under sidans rubrik: texten börjar direkt under ingressen, inte mitt för fotot (Björn 2026-09-28). */
  .sektion.tat > .split { align-items: start; }
}

/* ---------- Urklippsbokstäver ---------- */

.urklipp { line-height: 1.3; font-size: clamp(1.9rem, 4.4vw, 2.9rem); text-transform: none; word-spacing: .2em; }
.urklipp .ord { display: inline-block; white-space: nowrap; padding: 0 .08em; }
.urklipp .par { display: inline-block; white-space: nowrap; }
.urklipp .ord span {
  display: inline-block; padding: .06em .1em .04em; margin: 0 .02em .06em;
  line-height: .95; font-family: var(--handelse); text-transform: uppercase; color: var(--papper);
}
/* Som i presentationen och manualen (sida 8 och 11): Dirty Punk i versaler, ljusa
   bokstäver på tätt satta rutor i rosa, lila, grönt, gult och mörkblått som lutar
   åt olika håll. Ingen svart ruta och inga mörka bokstäver (Björn 2026-09-30). */
.urklipp .u1 { background: var(--rosa); transform: rotate(-4deg); }
.urklipp .u2 { background: var(--lila); transform: rotate(3deg); }
.urklipp .u3 { background: var(--gron); transform: rotate(-2deg) translateY(.04em); }
.urklipp .u4 { background: var(--gul); transform: rotate(5deg); }
.urklipp .u5 { background: var(--bla); transform: rotate(-3deg); }

/* ---------- Evenemang ---------- */

/* Evenemangets egen sida: första stycket är ingången, lite större. */
.evenemangSida .split > div > p:not(.kicker):first-of-type, .evenemangSida .kicker + p { font-size: 1.25rem; line-height: 1.5; }
/* Mellanrubrik i ett evenemangs text får luft ovanför. */
.split > div > h2:not(:first-child) { margin-top: 1em; }
/* Utan evenemang döljs hela avsnittet på startsidan, i alla bredder. */
.sektion:has(.evenemangTomt.dolj) { display: none; }
.evenemangTomt {
  background: rgba(255, 255, 255, .7); padding: 18px 22px; max-width: 36rem;
}
.evenemangTomt p { margin: 0; font-size: 1.2rem; }

/* Evenemang-modulens markup (kbk-core/templates): kortGrid, kortRuta, kicker,
   btn primary i listan, sidaBild, sidaLead, faktaRuta, btn på evenemangets sida. */
/* Tre kort i bredd i datorn, två på platta, ett i mobilen (Björn 2026-09-30: korten ska få plats). */
.kortGrid { display: grid; gap: 28px; grid-template-columns: repeat(3, 1fr); margin-bottom: 8px; align-items: start; }
@media (max-width: 900px) { .kortGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kortGrid { grid-template-columns: 1fr; } }
/* Månadsrubrikerna i listan får luft ovanför, så att de inte klistrar sig på korten ovanför. */
.kortGrid + h2 { margin-top: 1.4em; }
.kortRuta { background: var(--vit); padding: 22px 22px 20px; box-shadow: 0 6px 16px rgba(41, 41, 41, .1); display: flex; flex-direction: column; gap: 6px; }
/* Hela kortet är klickbart (Björn 2026-10-01): rubrikens länk sträcks över kortet.
   Knappen Läs mer ligger kvar ovanpå och går till samma sida. */
.kortRuta { position: relative; transition: transform .15s ease, box-shadow .15s ease; }
.kortRuta h3 a { text-decoration: none; }
.kortRuta h3 a::after { content: ""; position: absolute; inset: 0; }
.kortRuta .btn { position: relative; z-index: 1; }
.kortRuta:has(h3 a):hover { box-shadow: 0 10px 24px rgba(41, 41, 41, .18); }
.kortRuta:has(h3 a:focus-visible) { outline: 3px solid var(--bla); outline-offset: 3px; }
.kortRuta:nth-child(3n+1) { transform: rotate(-1deg); }
.kortRuta:nth-child(3n+2) { transform: rotate(.8deg); }
.kortRuta img { width: calc(100% + 44px); max-width: none; margin: -22px -22px 10px; aspect-ratio: 4 / 3; object-fit: cover; }
.kortRuta h3 { font-size: 2.2rem; margin: 0; }
.kortRuta h3 a { text-decoration: none; }
.kortRuta p { margin: 0; }
.kortRuta ul { list-style: none; margin: 0; padding: 0; font-size: 1rem; }
.kortRuta .btn { margin-top: auto; align-self: flex-start; }
.kicker { color: var(--bla); }
.kortRuta .kicker { font-size: 1.35rem; margin: 0; }
.btn {
  display: inline-block; font-family: var(--rubrik); text-transform: uppercase; font-size: 1.4rem; line-height: 1;
  padding: .45em .8em .4em; text-decoration: none; background: var(--kol); color: var(--papper);
  transform: rotate(-2deg);
}
.btn.primary { background: var(--rosa); color: var(--kol); }
.btn:hover { transform: rotate(0) scale(1.04); color: inherit; }
.sidaLead { font-size: 1.3rem; max-width: 40rem; }
.sidaBild img { width: 100%; max-width: 760px; transform: rotate(-1.5deg); box-shadow: 0 10px 24px rgba(41, 41, 41, .18); }
/* faktaRuta finns under Faktarutor nedan. */

/* ---------- Faktarutor ---------- */

.faktaGrid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.faktaRuta { background: var(--vit); padding: 24px; }
.faktaRuta:nth-child(2) { transform: rotate(.8deg); }
.faktaRuta:nth-child(3) { transform: rotate(-.8deg); }
.faktaRuta h3 { font-size: 2rem; }
.faktaRuta ul { margin: 0; padding-left: 1.1em; }
.faktaRuta li { margin-bottom: .45em; }

/* ---------- Menyn ---------- */

/* Markupen kommer från menymodulen i KBK Core, samma som på Björns Kök
   (docs/meny.md): .menyDelar > .menyGrupp, h3, .menyPris, .menyNot,
   dl.lunch, ul.rattlista, .menyTips. Temat sätter bara utseendet. */
/* auto-fill: en ensam del blir en spalt, inte hela bredden. */
.menyDelar { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); align-items: start; }
.menyGrupp { background: var(--vit); padding: clamp(20px, 4vw, 32px); }
.menyDelar .menyGrupp:nth-child(2n) { transform: rotate(.6deg); }
.menyDelar .menyGrupp:nth-child(2n+1) { transform: rotate(-.4deg); }
.menyGrupp h3 { font-size: 2rem; margin: 0 0 .2em; }
.menyGrupp h3 ~ h3 { margin-top: 1em; }
.menyPris { font-weight: 600; font-size: 1.25rem; margin: 0 0 .3em; }
.menyNot { margin: .4em 0 0; }
.lunch { margin: 1em 0 0; padding: 0; }
.lunch > div { display: grid; grid-template-columns: 6.5em 1fr; gap: 2px 14px; padding: 10px 0; border-top: 2px dashed color-mix(in srgb, var(--kol) 35%, transparent); }
.lunch > div:last-child { border-bottom: 2px dashed color-mix(in srgb, var(--kol) 35%, transparent); }
.lunch dt { font-weight: 600; }
.lunch dd { margin: 0; }
.lunch .idag { background: var(--papper); margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
.rattlista { list-style: none; margin: 0; padding: 0; }
.rattlista li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 10px 0; border-top: 2px dashed color-mix(in srgb, var(--kol) 35%, transparent); }
.rattlista li:last-child { border-bottom: 2px dashed color-mix(in srgb, var(--kol) 35%, transparent); }
.rattlista .ratt, .rattlista .pris { font-weight: 600; }
.rattlista .pris { white-space: nowrap; text-align: right; }
.rattlista .besk { grid-column: 1 / -1; }
.menyGrupp > .menyNot + .rattlista, .menyGrupp > .lunch + .rattlista { margin-top: 1em; }
.menyTips { margin-top: 1.4em; font-weight: 600; }
.menyRubrik { margin-top: clamp(40px, 7vw, 72px); }
.menyRubrik:first-child { margin-top: 0; }

/* ---------- Band ---------- */

.band {
  background: var(--rosa); color: var(--kol);
  display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between;
  padding: clamp(28px, 5vw, 48px) clamp(24px, 5vw, 56px);
  transform: rotate(-.6deg);
}
.band h2 { margin-bottom: .15em; }
.band p { margin: 0; font-size: 1.2rem; }
.band .knapp.svart { font-size: 1.7rem; }

/* ---------- Saknas ---------- */

/* Uppgift som inte är bekräftad. Syns tydligt så att den byts före lansering. */
.saknas {
  display: inline-block; background: var(--gul); color: var(--kol);
  border: 2px dashed var(--kol); padding: .1em .5em; font-size: .9rem; font-weight: 600;
  line-height: 1.35;
}
.saknas::before { content: "Saknas: "; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Sidfot ---------- */

.sidfot { background: var(--kol); color: var(--papper); padding: 56px 0 28px; margin-top: 40px; }
.sidfot a { color: var(--papper); }
.sidfot a:hover { color: var(--gul); }
.sidfot a:focus-visible { outline-color: var(--gul); }
.sidfot p { text-wrap: pretty; }
.sociala { list-style: none; margin: 4px 0 0; padding: 0; display: flex; gap: 8px; }
.sociala svg { fill: currentColor; }
.sociala a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -8px; }
.sidfot h2 { font-size: 1.9rem; color: var(--papper); }
.sidfot { font-size: 1rem; }
.sidfot .kolumner { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sidfot .kolumner > * { min-width: 0; }
@media (max-width: 700px) {
  /* Två spalter i mobilen (Björn 2026-09-26), loggan över båda. */
  .sidfot .kolumner { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .sidfot .kolumner > :first-child { grid-column: 1 / -1; }
  /* Kontakt får hela raden, så att mejladressen i Open Sans inte flödar över. */
  .sidfot .kolumner > :last-child { grid-column: 1 / -1; }
}
.sidfotLogga { width: 170px; margin-bottom: 14px; }
.sidfot .botten {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  border-top: 1px solid rgba(235, 229, 214, .25); margin-top: 36px; padding-top: 18px; font-size: .95rem;
}

/* ---------- Mobil ---------- */

@media (max-width: 700px) {
  /* Loggan, Boka bord och Meny på en rad (Björn 2026-09-26). Menyn fälls ut under. */
  .sidhuvud .inre { gap: 12px; }
  .sidhuvud .boka { order: 2; margin-left: auto; }
  .sidhuvud .menyKnapp { display: inline-block; order: 3; }
  .meny { order: 4; width: 100%; display: none; }
  .menyVal:checked ~ .meny { display: block; }
  .meny ul { flex-direction: column; gap: 0; padding: 6px 0 10px; }
  .meny a:not(.knapp) { font-size: 1.8rem; display: block; padding: 10px 2px; }
  .logga img { width: 72px; }
  .bubblaText { padding: 15% 10% 13%; }
  .ill { width: 64px; }
  .ill.stor { width: 96px; }
  .band { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .knapp { transition: none; }
}