/*
  Site : Åberg På Äventyr | abergpaaventyr.se
  Kode and design Hasse & Klasse 2026
  style.css : aktiv publik CSS för Åberg På Äventyr
  Aktiv fil : /assets/style.css
  Uppdaterad : 2026-07-04 10:56

  INDEX / SNABBGUIDE
  - Färger, rundning, skuggor och grundavstånd styrs i :root.
    Exempel: byt --gold till #ffc857 för ljusare guld.
    Exempel: byt --paper till #f5d9a8 för varmare bakgrund.
  - Headerbilden styrs av .brand. Bildfilen är assets/img/studera_header.png.
  - Toppmenyn styrs av .top-nav, .nav-button och .nav-button.active.
    Exempel: ändra padding/font-size i .nav-button för större/mindre Hem/Foton/Om.
  - Vanliga knappar som "Läs senaste" och "Se foton" styrs av .btn.
  - Små knappar som "Läs mer" styrs av .btn--sm.
  - Skylten "Senaste rutorna" styrs av .section-title.
  - Hero-rubriker styrs av .hero__title, .hero__desc och .speech.
  - Inläggskort styrs av .post-card, .post-card__title och .post-card__intro.
  - Galleri styrs av .gallery-grid, .gallery-item och .gallery-item__overlay.
  - Enkel indexbild styrs av .index-image-page och .index-image-stage.

  Viktigt:
  - Ändra text i PHP-filerna, inte här i CSS.
  - Ändra utseende här i CSS.
  - Gamla tempkataloger ska inte användas.
*/

/* ====== Typsnitt ====== */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bangers&family=Caveat:wght@500;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/*
  HITTA SNABBT I DENNA CSS
  :root rad ca 31 - färger, rundning, skuggor och grundavstånd.
  .brand rad ca 130 - headerbilden högst upp.
  .top-nav rad ca 152 - menyradens placering, avstånd och höjd.
  .nav-button rad ca 167 - toppmenyknapparna Hem/Foton/Om.
  .section-title rad ca 300 - skylten "Senaste rutorna".
  .hero__title rad ca 367 - stora rubriken i hero.
  .hero__desc rad ca 387 - handskriven underrad i hero.
  .speech rad ca 401 - intro-/prattexten i hero.
  .btn rad ca 418 - vanliga knappar som "Läs senaste".
  .btn--sm rad ca 452 - små knappar som "Läs mer".
  .post-card__title rad ca 537 - inläggskortens rubriker.
  .post-card__intro rad ca 548 - inläggskortens introtext.
  .gallery-grid rad ca 587 - galleriets rutnät.
  .index-image-page längst ner - index.php med upprepande bg.png och centrerad collagebild.
*/

:root {
  /*
    SNABBGUIDE FÖR VARIABLER
    - Vill du ändra hela sidans färgkänsla, börja här.
    - Vill du bara ändra en viss knapp/rubrik, gå till regeln längre ner.
    - --paper styr sidans bakgrund. Exempel: #f5d9a8 ger varmare papper.
    - --card styr paneler/kort. Exempel: #fff8e8 ger ljusare kort.
    - --comic-blue styr mörkblå seriefärg på rubriker och hover.
    - --gold styr guldknappar/skylten. Exempel: byt till #ffc857 för ljusare guld.
    - --red styr röda detaljer. Exempel: byt till #e04f5f för mjukare rött.
    - --radius styr rundning på knappar och kort. Exempel: 2px stramare, 8px mjukare.
    - --shadow-card styr pappers-/kortskuggor. Mindre skugga: 0 6px 14px rgba(60,40,20,.16).
  */
  /* Papper & bakgrund */
  --paper:        #F9E3C2;   /* kraftpapper / sand */
  --paper-dark:   #e2d2b3;
  --card:         #fbf4e4;   /* fotopapper / varm vit */
  --card-edge:    #d8c39c;

  /* Bläck & text (varmt mörkbrunt – aldrig rent svart) */
  --ink:          #2c2118;
  --ink-soft:     #5a4a38;
  --muted:        #6a5946;
  --ink-muted:    var(--muted);
  --ink-mid:      var(--ink-soft);

  /* Accenter hämtade ur bilderna */
  --comic-blue:   #1f3a52;   /* serietidningens mörkblå */
  --comic-blue-2: #2c536f;
  --gold:         #f0a52a;   /* serietitelns guld */
  --gold-deep:    #d9871a;
  --teak:         #8a4f24;   /* posterns teak/brun */
  --red:          #c0392b;   /* hatten / hjärtat på vykortet */
  --green:        #6f8f3f;   /* palmer / grön accent */
  --accent:       var(--gold-deep);
  --accent2:      var(--teak);
  --accent-light: #f6e7c6;
  --border:       var(--card-edge);

  --ok: #5a8f3c;
  --err: #c0392b;

  --radius: 4px; /* global hörnrundning. Testa 2px för stramare, 8px för mjukare. */
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; /* återanvändbara avstånd */

  --tape: rgba(214, 199, 156, 0.85);
  --shadow-card: 0 10px 24px rgba(60, 40, 20, 0.22), 0 2px 4px rgba(60,40,20,.15);
  /* Mindre dramatisk skugga: 0 6px 14px rgba(60,40,20,.16) */
}

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

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

body {
  min-height: 100svh;
  color: var(--ink);
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  line-height: 1.65;
  overflow-x: hidden;
  background-color: var(--paper);
  /* Kraftpapperskänsla: varm gradient + fin korn-textur */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.35), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(138,79,36,.10), transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { color: inherit; font: inherit; font-size: 16px; }
a { color: inherit; text-decoration: none; }

/*
  ENKEL INDEXBILD
  Används bara av index.php via body-klassen .index-image-page.
  - Bakgrundsbilden är assets/img/bg.png och repeteras över hela viewporten.
  - Huvudbilden är assets/img/travel-desk-collage.png.
  - translateX(-4vw) placerar huvudbilden lite åt vänster.
  - rotate(-2deg) ger bilden en svag vänster-tilt.
  - border och border-radius styr den tunna gula ramen och rundade hörn.
*/
body.index-image-page {
  min-height: 100svh;
  overflow: hidden;
  background-color: #f2ddba;
  background-image: url("img/bg.png");
  background-repeat: repeat;
  background-size: auto;
  background-position: top left;
}

.index-image-versions {
  min-height: 100svh;
}

.index-image-stage {
  min-height: 100svh;
  display: none;
  place-items: center;
}

.index-image-stage__collage {
  display: block;
  width: auto;
  height: auto;
  border: 2px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(44, 33, 24, .28);
}

/* Mobil only: upp till och med 767 px. */
@media (max-width: 767px) {
  .index-image-stage--mobile {
    display: grid;
    padding: 16px 12px;
  }

  .index-image-stage--mobile .index-image-stage__collage {
    width: min(92vw, 560px);
    max-height: calc(100svh - 32px);
    object-fit: contain;
    transform: rotate(-1.5deg);
  }
}

/* Surfplatta only: 768–1099 px. */
@media (min-width: 768px) and (max-width: 1099px) {
  .index-image-stage--tablet {
    display: grid;
    padding: clamp(24px, 4vw, 44px);
  }

  .index-image-stage--tablet .index-image-stage__collage {
    max-width: min(80vw, 760px);
    max-height: calc(100svh - 64px);
    object-fit: contain;
    transform: translateX(-2vw) rotate(2deg);
  }
}

/* Desktop only: från och med 1100 px. */
@media (min-width: 1100px) {
  .index-image-stage--desktop {
    display: grid;
    padding: clamp(32px, 4vw, 56px);
  }

  .index-image-stage--desktop .index-image-stage__collage {
    max-width: min(68vw, 800px);
    max-height: calc(100svh - 96px);
    object-fit: contain;
    transform: translateX(-4vw) rotate(4deg);
  }
}

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 10000;
  transform: translateY(-150%);
  background: var(--comic-blue);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 2px 2px 0 var(--ink);
  color: #fff;
  font-family: 'Bangers', system-ui, sans-serif;
  min-height: 44px;
  padding: 10px 14px;
  transition: transform .12s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

p { color: var(--ink-soft); margin-bottom: 0.9rem; overflow-wrap: anywhere; }

h1, h2, h3 { color: var(--ink); line-height: 1.08; overflow-wrap: anywhere; }
h1 { font-size: clamp(1.65rem, 4vw, 2.35rem); }

.wrap, .container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 1rem;
}
.container--narrow { max-width: 760px; }
#main-content { min-width: 0; }

/* ====== Serietidnings-header (banner-bild) ====== */
/* Bilden: img/studera_header.png, 2157 × 224 px
   aspect-ratio på .brand = hela bilden syns utan beskärning.
   Byt till cover + fast height om du vill ha fylld header istället. */
.site-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .4rem .65rem;
  width: 100%;
  background: #FAE4C4;
  font-size: 1rem;
  position: relative;
  padding: 0 0 .5rem;
  margin: 0;
}
.site-header::after { content: none; }

.site-header__weather {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .2rem .55rem;
  min-width: 0;
  min-height: 44px;
  margin-left: max(.75rem, env(safe-area-inset-left));
  padding: .35rem .65rem;
  background: var(--comic-blue);
  border: 1px solid var(--ink);
  border-radius: 6px;
  box-shadow: 1px 1px 0 rgba(44,33,24,.5);
}

.site-header__weather .metro-eyebrow {
  display: none;
  margin: 0;
  color: var(--gold);
  font-family: 'consolas', system-ui, sans-serif;
  font-size: .62rem;
  letter-spacing: .08em;
}

.site-header__weather .metro-temperature {
  color: var(--gold);
  font-size: 1.25rem;
  line-height: 1;
}

.site-header__weather .metro-description {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-size: .74rem;
  /* Fet text. Alternativ: 400 för normal eller 600 för halvfet stil. */
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand {
  display: block;
  grid-column: 1 / -1;
  width: 100%;
  /* aspect-ratio = bildens exakta mått → rätt höjd utan beskärning */
  aspect-ratio: 2157 / 224;
  background: url("img/studera_header.png") center / 100% 100% no-repeat;
  /* dölj texten men behåll för skärmläsare */
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.tagline { display: none; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-width: 5.5rem;
  min-height: 44px;
  margin-right: max(.75rem, env(safe-area-inset-right));
  padding: .45rem .7rem;
  background: var(--gold);
  border: 1px solid var(--ink);
  border-radius: 6px;
  box-shadow: 1px 1px 0 rgba(44,33,24,.5);
  color: var(--ink);
  cursor: pointer;
  font-family: 'Bangers', system-ui, sans-serif;
  font-size: 1rem;
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
}
.nav-toggle[hidden] { display: none; }
.nav-toggle__current {
  max-width: 7.5rem;
  overflow: hidden;
  padding-left: .5rem;
  border-left: 1px solid rgba(44,33,24,.35);
  font-size: .75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-toggle[aria-expanded="true"] {
  background: var(--comic-blue);
  color: #fff;
}

/* Nav-rad: kraftpappersremsa med serierute-knappar.
   Själva menytexterna styrs i app/public_layout.php. */
.top-nav-bar {
  width: 100%;
  margin-top: 0;
  border-top: 0;
  border-bottom: 2px solid rgba(44,33,24,.18);
  background: #FAE4C4;
}
.top-nav {
  /*
    TOPPMENYNS RAD
    - gap styr avståndet mellan Hem/Foton/Om-knapparna.
    - padding styr höjden på hela menyremsan runt knapparna.
    - justify-content center gör att knapparna ligger centrerat.
  */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; /* avstånd mellan menyknappar. Testa 6px tätare, 10px luftigare. */
  max-width: 1120px;
  margin-inline: auto;
  padding: 10px max(1rem, env(safe-area-inset-right)) 12px max(1rem, env(safe-area-inset-left));
}
.nav-enhanced .top-nav-bar .top-nav { display: none; }
.nav-enhanced .top-nav-bar.is-open .top-nav { display: grid; }
.nav-button {
  /*
    TOPPMENYKNAPPAR: Hem, Foton, Om.
    Det är här knappstorlek och knappdesign i toppmenyn styrs.

    Nuvarande design: låg flikknapp med samma font som .btn.
    - min-height: 28px → knappens lägsta höjd
    - padding: 4px 12px → luft inne i knappen
    - font-size: .92rem → textstorlek
    - line-height: 1 → gör att body line-height inte tvingar knappen högre

    Exempel:
    - mindre knapp: min-height 24px, padding 3px 9px, font-size .82rem
    - större knapp: min-height 34px, padding 6px 15px, font-size 1rem
    - mer serieruta: byt box-shadow till 1px 1px 0 var(--ink)
  */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 7px 10px;
  background: rgba(255, 248, 232, 0.82);
  border: 1px solid rgba(44, 33, 24, 0.34);
  border-radius: 6px;
  box-shadow: none;
  color: var(--ink);
  font-family: 'Bangers', system-ui, sans-serif;
  font-size: .92rem;
  line-height: 1.05;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  /* Alla knappar, även framtida menyknappar, får alltid en grundtilt.
     Riktningen blandas automatiskt av nth-child-reglerna nedan. */
  --tilt: 0deg;
  transform: rotate(var(--tilt));
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}

/* Fast blandning som ser slumpmässig ut men inte ändras vid sidladdning.
   Mönstret upprepas automatiskt, så nya knappar får också tilt.
   Grundriktningen är -1.5deg; dessa positioner får motsatt riktning. */
.nav-button:nth-child(4n + 2),
.nav-button:nth-child(4n + 3) { --tilt: 0deg; }

.nav-button.active {
  /* Aktiv sida i menyn. Byt background till var(--gold) och color till var(--ink) för gul aktiv flik. */
  background: var(--comic-blue);
  border-color: var(--comic-blue);
  color: #fff;
}
@media (hover: hover) {
  .nav-button:hover {
    /* Hover = färgen när musen ligger över knappen. */
    background: var(--gold);
    border-color: var(--ink);
    color: var(--ink);
    /* Flyttar upp knappen men behåller dess fasta tiltriktning. */
    transform: translateY(-1px) rotate(var(--tilt));
    box-shadow: 0 2px 0 rgba(44, 33, 24, 0.22);
  }
}

@media (min-width: 768px) {
  .site-header {
    display: block;
    padding: 0;
    font-size: 0;
  }

  .site-header__weather {
    display: block;
    position: absolute;
    right: clamp(.75rem, 2vw, 1.5rem);
    top: 50%;
    z-index: 2;
    transform: translateY(-50%) rotate(-1.2deg);
    width: clamp(11rem, 18vw, 15rem);
    max-width: calc(100% - 2rem);
    min-height: 0;
    margin: 0;
    padding: .35rem .9rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    box-shadow: 3px 3px 0 var(--ink);
  }

  .site-header__weather .metro-eyebrow {
    display: block;
    margin: 0 0 .15rem;
  }

  .site-header__weather .metro-temperature {
    font-size: clamp(1.45rem, 3vw, 2rem);
    line-height: .95;
  }

  .site-header__weather .metro-description {
    margin: .2rem 0 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .brand { grid-column: auto; }
  .nav-toggle { display: none !important; }

  .top-nav,
  .nav-enhanced .top-nav-bar .top-nav,
  .nav-enhanced .top-nav-bar.is-open .top-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 7px 1rem;
  }

  .nav-button {
    min-height: 28px;
    padding: 4px 12px;
    --tilt: -1.5deg;
  }

  .nav-button:nth-child(4n + 2),
  .nav-button:nth-child(4n + 3) { --tilt: 1.5deg; }
}

/* ====== Sektioner ====== */
.posts-section, .post-page, .comic-section, .hero {
  margin: 26px auto;
}

/* Panel = uppslaget pappersark.
   Här styrs vita/ljusa kortytor runt hero, inlägg och undersidor.
   Mer luft: öka padding 18px till 24px. Mer markerat kort: öka border till 2px. */
.hero__content,
.section-panel,
.posts-section .container,
.post-page .container,
.post-page .container--narrow {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 18px;
  position: relative;
}
.section-panel {
  max-width: 1120px;
  margin-inline: auto;
  width: calc(100% - 2rem);
}
.page-intro {
  color: var(--ink-muted);
  margin-bottom: var(--s3);
  position: relative;
  z-index: 1;
}
.back-link-row { margin-bottom: 0.5rem; }
.back-link-row--loose { margin-bottom: var(--s2); }
.back-link,
.footer-link {
  display: inline-flex;
  align-items: center;
  color: var(--ink-muted);
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.back-link {
  color: var(--teak);
  font-family:'Caveat',cursive;
  font-size: 1.15rem;
  font-weight: 700;
}
.section-actions {
  margin-top: var(--s3);
  position: relative;
  z-index: 1;
}
.section-actions--large { margin-top: var(--s4); }
.section-spacer { margin-top: var(--s4); }

/* INFO-SIDAN: teknisk dokumentation om sajtens arkitektur och drift. */
.info-content { display: grid; gap: var(--s4); }
.info-content section { display: grid; gap: var(--s2); }
.info-content h2 { margin-top: var(--s1); }
.info-content ul { padding-left: 1.5rem; }
.info-content li + li { margin-top: .45rem; }
.info-content a { color: var(--comic-blue); text-decoration: underline; text-underline-offset: 3px; }
.info-content code {
  padding: .08em .28em;
  background: var(--paper-dark);
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
}
.info-content pre {
  overflow-x: auto;
  padding: var(--s2);
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
}
.info-content pre code { padding: 0; background: transparent; color: inherit; }
.info-intro { display: grid; gap: var(--s1); }
.info-lead { max-width: 100h; color: var(--ink-muted); font-size: 1.12rem; }
.info-note {
  padding: var(--s2);
  background: var(--paper-dark);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink-muted);
  font-size: .9rem;
}
.info-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s1);
}
.info-stats > div {
  display: grid;
  gap: .15rem;
  padding: var(--s2);
  background: var(--comic-blue);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 3px 3px 0 var(--ink);
  color: #fff;
}
.info-stats strong {
  color: var(--gold);
  font-family: 'Bangers', system-ui, sans-serif;
  font-size: clamp(1.7rem, 6vw, 2.7rem);
  letter-spacing: .04em;
  line-height: 1;
}
.info-stats span { font-size: .82rem; font-weight: 700; }
.info-table-wrap { overflow-x: auto; border-radius: 8px; }
.info-table { width: 100%; border-collapse: separate; border-spacing: 0; background: rgba(255,255,255,.7); border-radius: 8px; }
.info-table caption { margin-bottom: .5rem; color: var(--ink-muted); font-weight: 700; text-align: left; }
.info-table th, .info-table td { padding: .7rem; border: 1px solid var(--border); text-align: left; }
.info-table thead th, .info-table__total th, .info-table__total td { background: var(--paper-dark); }
.info-table tbody th { white-space: nowrap; }
.info-table thead tr:first-child > :first-child { border-top-left-radius: 8px; }
.info-table thead tr:first-child > :last-child { border-top-right-radius: 8px; }
.info-table tbody tr:last-child > :first-child { border-bottom-left-radius: 8px; }
.info-table tbody tr:last-child > :last-child { border-bottom-right-radius: 8px; }
.info-flow { padding-left: 1.5rem; }
.info-flow li { padding-left: .3rem; }
.info-components { display: grid; gap: var(--s1); margin: 0; }
.info-components > div { padding: var(--s2); background: rgba(255,255,255,.72); border: 1px solid var(--border); border-radius: 8px; }
.info-components dt { color: var(--comic-blue); font-weight: 800; }
.info-components dd { margin: .25rem 0 0; }

@media (min-width: 700px) {
  .info-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .info-components { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* FAKTASIDAN: lång, skumläsbar faktatext med innehållsförteckning,
   faktakort, tidslinje, tabeller och tydliga källreservationer. */
.facts-content { display: grid; gap: var(--s4); }
.facts-content--plain { width: calc(100% - 2rem); max-width: 900px; margin-inline: auto; }
.facts-content--plain a {
  color: var(--comic-blue);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-thickness .15s ease;
}
.facts-content--plain a:hover,
.facts-content--plain a:focus-visible {
  color: var(--red);
  text-decoration-thickness: 3px;
}
.facts-content section { display: grid; gap: var(--s2); scroll-margin-top: 1rem; }
.facts-content h2 { margin-top: var(--s1); }
.facts-content h3 { margin-top: var(--s1); font-size: clamp(1.15rem, 3vw, 1.45rem); }
.facts-content p { max-width: 78ch; }
.facts-content ul, .facts-content ol { padding-left: 1.5rem; }
.facts-content li + li { margin-top: .45rem; }
.facts-hero { display: grid; gap: var(--s1); }
.facts-lead { max-width: 70ch !important; color: var(--ink-muted); font-size: 1.15rem; }
.facts-toc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  padding: var(--s2);
  background: var(--paper-dark);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.facts-toc strong { margin-right: .35rem; }
.facts-toc a {
  padding: .25rem .55rem;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--comic-blue);
  font-size: .82rem;
  font-weight: 700;
}
.facts-callout, .facts-warning, .facts-source-notes {
  padding: var(--s2);
  background: var(--paper-dark);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.facts-warning { background: #fff1c2; }
.facts-source-notes { background: rgba(255,255,255,.72); }
.facts-callout h3, .facts-warning h3, .facts-source-notes h3 { margin-top: 0; }
.facts-callout dl { display: grid; gap: var(--s1); margin-top: var(--s1); }
.facts-callout dt { color: var(--comic-blue); font-weight: 800; }
.facts-callout dd { margin: .1rem 0 0; }
.facts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s1);
}
.facts-grid > div {
  display: grid;
  align-content: start;
  gap: .25rem;
  min-width: 0;
  padding: var(--s2);
  background: var(--comic-blue);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 3px 3px 0 var(--ink);
  color: #fff;
}
.facts-grid span { font-size: .75rem; font-weight: 700; }
.facts-grid strong { color: var(--gold); font-size: clamp(1.1rem, 4vw, 1.6rem); overflow-wrap: anywhere; }
.facts-timeline { display: grid; gap: 0; margin: var(--s1) 0; padding-left: 0 !important; list-style: none; }
.facts-timeline li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s2); margin: 0; }
.facts-timeline time { color: var(--comic-blue); font-family: 'Bangers', system-ui, sans-serif; font-size: 1.35rem; text-align: right; }
.facts-timeline li > div { position: relative; padding: 0 0 var(--s2) var(--s2); border-left: 3px solid var(--gold); }
.facts-timeline li > div::before {
  content: "";
  position: absolute;
  top: .35rem;
  left: -.48rem;
  width: .75rem;
  height: .75rem;
  background: var(--comic-blue);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.facts-timeline p { margin-top: .15rem; color: var(--ink-muted); font-size: .9rem; }
.facts-bars { display: grid; gap: .65rem; padding: var(--s2); background: rgba(255,255,255,.72); border: 1px solid var(--border); border-radius: 8px; }
.facts-bars h3 { margin-top: 0; }
.facts-bars > div { display: grid; grid-template-columns: 3rem minmax(5rem, 1fr); gap: .65rem; align-items: center; }
.facts-bars meter { width: 100%; accent-color: var(--comic-blue); }
.facts-bars strong { grid-column: 2; color: var(--ink-muted); font-size: .8rem; }
.facts-table-wrap { overflow-x: auto; border-radius: 8px; }
.facts-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; background: rgba(255,255,255,.75); border: 1px solid var(--border); border-radius: 8px; font-size: .9rem; }
.facts-table caption { margin-bottom: .5rem; color: var(--ink-muted); font-weight: 700; text-align: left; }
.facts-table th, .facts-table td { padding: .7rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.facts-table tr > :last-child { border-right: 0; }
.facts-table tbody tr:last-child > * { border-bottom: 0; }
.facts-table thead th { background: var(--paper-dark); }
.facts-table tbody th { min-width: 14rem; }
.facts-table td:nth-child(2), .facts-table td:nth-child(3) { white-space: nowrap; }
.facts-table__total th, .facts-table__total td { background: var(--paper-dark); font-size: 1rem; }
.facts-table__total strong { color: var(--comic-blue); font-size: 1.15rem; }
.facts-table thead tr:first-child > :first-child { border-top-left-radius: 8px; }
.facts-table thead tr:first-child > :last-child { border-top-right-radius: 8px; }
.facts-table tbody tr:last-child > :first-child { border-bottom-left-radius: 8px; }
.facts-table tbody tr:last-child > :last-child { border-bottom-right-radius: 8px; }
.facts-landmarks { display: grid; gap: var(--s1); }
.facts-landmarks article { padding: var(--s2); background: rgba(255,255,255,.72); border: 1px solid var(--border); border-radius: 8px; }
.facts-landmarks h3 { margin-top: 0; color: var(--comic-blue); }

@media (min-width: 700px) {
  .facts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .facts-callout dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts-landmarks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts-bars > div { grid-template-columns: 3rem minmax(10rem, 1fr) 6rem; }
  .facts-bars strong { grid-column: auto; text-align: right; }
}
.framed-image {
  width: 100%;
  border: 6px solid #fff;
  border-radius: 3px;
  box-shadow: var(--shadow-card);
}
.align-start { align-self: start; }
.align-center { align-self: center; }
.posts-section .container {
  /*
    Inläggspanelen ska ha samma yttre bredd som hero__content.
    Hero har 1rem sidoluft via .hero, därför får denna panel samma calc-bredd här.
  */
  width: calc(100% - 2rem);
  max-width: calc(1120px - 2rem);
  margin-inline: auto;
}
.posts-section .container::before,
.section-panel::before {
  /* tejpbit i hörnet */
  content: "";
  position: absolute;
  top: -12px; left: 28px;
  width: 90px; height: 26px;
  background: var(--tape);
  border: 1px dashed rgba(120,90,50,.4);
  transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}

@media (min-width: 900px) {
  .hero__content,
  .section-panel,
  .posts-section .container,
  .post-page .container,
  .post-page .container--narrow { padding: 30px; }
}

/* ====== Comic-chips: kicker / section-title / stamp ======
   Används av:
   - .kicker: "Kapitel 1 · Augusti" och liknande små skyltar.
   - .stamp: "Den stora flytten".
   - .section-title: "Senaste rutorna".
   Texten ändras i PHP-filerna, men storlek/färg/form ändras här.
*/
.kicker, .section-title, .stamp {
  /*
    Vanliga justeringar:
    - större skyltar: font-size 1.55rem och padding 10px 18px
    - mindre skyltar: font-size 1.1rem och padding 6px 12px
    - mindre serietidningskänsla: box-shadow 1px 1px 0 var(--ink), transform none
    - mer rundat: border-radius 8px eller ändra --radius högst upp.
  */
  display: inline-flex;
  align-items: center;
  gap: .4em;
  background: var(--comic-blue);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--gold);
  font-family: 'Bangers', system-ui, sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 8px 16px;
  text-transform: uppercase;
  transform: rotate(-1.2deg); /* sätt till none om skyltarna ska ligga helt rakt */
}
.kicker {
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.section-title {
  /*
    SKYLTEN "Senaste rutorna".
    - font-size styr textstorleken.
    - padding styr skyltens luft/höjd/bredd.
    - background/color styr färg.
    Exempel: byt background till var(--green) och color till #fff för grön skylt.
  */
  background: var(--gold);
  color: var(--ink);
  font-size: .82rem;
  padding: 3px 8px;
  box-shadow: 1px 1px 0 var(--ink);
}
.stamp--pink {
  /* "Den stora flytten". Alternativ: var(--gold), var(--comic-blue) eller #d85b78. */
  background: var(--red);
  color: #fff;
}

/* ====== Hero / "Den stora flytten" ====== */
.hero {
  max-width: 1120px; /* maxbredd på startsidans hero. Testa 980px smalare eller 1240px bredare. */
  padding-inline: 1rem;
}
.hero__topline {
  /* Raden med "Kapitel 1" och "Den stora flytten". */
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* avstånd mellan skyltarna */
  margin-bottom: 14px;
}

.hero__content {
  display: grid;
  gap: 22px; /* avstånd mellan posterbild och text. Testa 32px för luftigare hero. */
  align-items: center;
}
@media (min-width: 760px) {
  /* Desktop: vänster kolumn är bilden, höger kolumn är texten. */
  .hero__content { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }
}

/* Pinnad poster till vänster */
.hero__poster {
  position: relative;
  justify-self: center;
  width: min(300px, 78%); /* posterstorlek. Testa 260px mindre eller 340px större. */
  transform: rotate(-2.5deg); /* sätt till none om bilden ska stå rakt */
}
.hero__poster img {
  width: 100%;
  border: 6px solid #fff;
  border-radius: 2px;
  box-shadow: var(--shadow-card);
}
.hero__poster::before { /* tejp uppe */
  content: ""; position: absolute; top: -14px; left: 50%;
  width: 100px; height: 30px; transform: translateX(-50%) rotate(4deg);
  background: var(--tape); border: 1px dashed rgba(120,90,50,.4);
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.hero__poster::after { /* liten pin */
  content: "📌"; position: absolute; top: -10px; right: -6px;
  font-size: 1.6rem; transform: rotate(12deg);
}

.hero__title {
  /*
    Stora rubriken i hero, t.ex. "Hasse i Thailand 2026".
    font-size använder clamp(min, responsivt, max).
    Ändra här om huvudrubriken ska bli större eller mindre.
    Testa clamp(1.9rem, 5vw, 2.8rem) för lugnare rubrik eller clamp(2.4rem, 8vw, 4rem) för mer affischkänsla.
  */
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-weight: 400;
  color: var(--comic-blue);
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  line-height: 0.96;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.hero__title em {
  /* Färgen på markerad del i rubriken, just nu "2026". */
  color: var(--red);
  font-style: normal;
}
.hero__desc {
  /*
    Handskriven underrad under huvudrubriken.
    - font-size styr storleken på raden "Studier, sol..."
    - margin styr avståndet till rubrik och prattext.
    Byt font-family till 'Lora' för lugnare känsla.
  */
  font-family: 'Caveat', cursive;
  color: var(--teak);
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  font-weight: 700;
  margin: 6px 0 10px;
  line-height: 1.1;
}
.speech {
  /*
    Pratbubbel-/introtexten i hero.
    - font-size styr brödtextens storlek.
    - max-width i ch gör raden lagom lång att läsa.
  */
  color: var(--ink-soft);
  max-width: 56ch;
  font-size: 1.05rem; /* testa 1rem mindre eller 1.15rem större */
}
.hero__actions, .btn-row, .actions {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}

/* ====== Knappar (serieruta) ======
   Används bland annat för "Läs senaste" och "Se foton" i index.php.
   Text och länk ändras i PHP. Storlek/färg ändras här. */
.btn, .primary-button, .secondary-link {
  /*
    VANLIGA KNAPPAR: "Läs senaste", "Se foton" och liknande.
    Ändra här för standardstorleken på gula/vita serierute-knappar.

    Nuvarande storlek:
    - min-height: 26px
    - padding: 2px 8px
    - font-size: .7rem

    Exempel:
    - större knapp: min-height 40px, padding 7px 16px, font-size 1rem
    - mycket större knapp: min-height 52px, padding 12px 24px, font-size 1.2rem
    - annan huvudfärg: background var(--green), var(--red) eller var(--comic-blue)
    - mindre hård serieruta: box-shadow 1px 1px 0 var(--ink)
  */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 26px;
  padding: 2px 8px;
  background: var(--gold);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 1px 1px 0 var(--ink);
  color: var(--ink);
  font-family: 'Bangers', system-ui, sans-serif;
  font-size: .7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.btn--ghost, .secondary-link {
  /* Sekundär knapp, t.ex. "Se foton". */
  background: var(--card);
}
.btn--sm {
  /*
    SMÅ KNAPPAR: "Läs mer" i inläggskort.
    - min-height styr knappens höjd.
    - padding styr luft runt texten.
    - font-size styr textstorleken.
    Exempel: gör den större med min-height 30px, padding 4px 10px, font-size .8rem.
  */
  min-height: 22px;
  padding: 1px 6px;
  font-size: 0.62rem;
  box-shadow: 1px 1px 0 var(--ink);
}
@media (hover: hover) {
  .btn:hover, .primary-button:hover, .secondary-link:hover {
    /* Hover för alla vanliga knappar. */
    background: var(--comic-blue); color: #fff;
    transform: translate(-1px,-1px); box-shadow: 2px 2px 0 var(--ink);
  }
}

/* ====== Kategorier som frimärks-chips ====== */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.tags--spaced { margin-bottom: 1.4rem; }
.tags--compact { margin-bottom: var(--s1); }
.tag {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: 4px 12px;
  background: var(--card);
  border: 2px dashed var(--teak);
  border-radius: var(--radius);
  color: var(--teak);
  font-family: 'Bangers', system-ui, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform .12s, background .12s, color .12s, border-color .12s;
}
.location-badge {
  display: inline-flex;
  align-items: center;
  color: var(--teak);
  font-family:'Caveat',cursive;
  font-size: 1.15rem;
  font-weight: 700;
}
.post-date-badge {
  color: var(--teak);
  font-family:'Caveat',cursive;
  font-size: 1.15rem;
  font-weight: 700;
}
.location-badge::before { content: "📍"; margin-right: 2px; font-size: .9em; }
@media (hover: hover) {
  a.tag:hover { background: var(--gold); color: var(--ink); border-color: var(--ink); transform: translateY(-2px); }
  a.location-badge:hover { color: var(--red); }
}

/* ====== Inläggskort = polaroider på papper ====== */
.posts-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.posts-grid--spaced { margin-top: 1.2rem; }
.post-card {
  position: relative;
  background: #fff;
  border: 1px solid #efe6d2;
  border-radius: 3px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding: 10px 10px 4px;
  transition: transform .16s ease, box-shadow .16s ease;
}
.post-card:nth-child(odd)  { transform: rotate(-0.8deg); }
.post-card:nth-child(even) { transform: rotate(0.8deg); }
.post-card::before { /* tejp överst på polaroiden */
  content: ""; position: absolute; top: -10px; left: 50%;
  width: 84px; height: 24px; transform: translateX(-50%) rotate(-3deg);
  background: var(--tape); border: 1px dashed rgba(120,90,50,.35);
  z-index: 2;
}
@media (hover: hover) {
  .post-card:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 16px 30px rgba(60,40,20,.28); z-index: 3; }
}
.post-card__image {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  border-radius: 2px;
  background: #e7dcc4;
}
.post-card__image:not(img) {
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 2rem;
}
.post-card__image--empty { font-size: 2.5rem; }
.post-card__body { display: grid; gap: 7px; padding: 12px 6px 10px; }
.post-card__meta, .post-page__meta {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  color: var(--muted); font-size: 0.85rem; align-items: center;
}
.post-card__title {
  /*
    INLÄGGSKORTENS RUBRIK.
    Ändra font-size här om titlarna i korten ska bli större/mindre.
    color styr rubrikfärgen, hoverfärgen ligger på .post-card__title a:hover.
  */
  font-family: 'Anton', sans-serif; font-weight: 400;
  font-size: 1.3rem; line-height: 1.05; text-transform: uppercase;
  color: var(--comic-blue);
}
.post-card__title a:hover { color: var(--red); }
.post-card__intro {
  /*
    INLÄGGSKORTENS INTROTEXT.
    font-size styr den korta beskrivningen under rubriken.
  */
  color: var(--ink-soft); font-size: 0.98rem; margin: 0;
}
.post-card__footer { margin-top: 6px; }

/* ====== Inläggssida ====== */
.post-page h1, .posts-section h1 {
  font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase;
  color: var(--comic-blue);
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  margin-bottom: var(--s3);
  letter-spacing: 0.01em;
}
.post-page__header { margin-bottom: 18px; }
.post-page__header h1 { margin-bottom: 0.35rem; }
.post-page__cover {
  aspect-ratio: 16 / 9; width: 100%; object-fit: cover;
  border: 6px solid #fff; border-radius: 12px;
  box-shadow: var(--shadow-card); margin-bottom: 20px;
}
.post-page__cover--contain {
  /*
    Används på about.php när hela bilden ska synas.
    Skillnad mot standard: object-fit cover beskär, contain visar hela bilden.
  */
  aspect-ratio: auto;
  height: auto;
  max-height: none;
  object-fit: contain;
}
.post-body { color: var(--ink-soft); font-size: 1.08rem; max-width: 65ch; line-height: 1.75; }
.post-body p, .post-body li { color: var(--ink-soft); }
.post-body a { color: var(--teak); text-decoration: underline; text-underline-offset: 2px; }
.post-body h2, .post-body h3 { font-family: 'Anton', sans-serif; color: var(--comic-blue); margin: 1.4rem 0 .6rem; text-transform: uppercase; }
.post-intro {
  color: var(--ink-mid);
  font-size: 1.1rem;
  line-height: 1.65;
  margin-top: var(--s1);
}
.post-taxonomy {
  border-top: 1px solid var(--border);
  margin-top: var(--s3);
  padding-top: var(--s2);
}

.tip-resources {
  display: grid;
  gap: var(--s2);
  max-width: 65ch;
}

.tip-coordinate-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: var(--s2);
  border: 2px solid var(--ink);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 3px 3px 0 var(--ink);
}

.tip-coordinate-card span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.tip-external-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

/* ====== Galleri ====== */
.gallery-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}
.gallery-item {
  position: relative; display: block; overflow: hidden;
  background: #fff; padding: 8px 8px 26px;
  border: 1px solid #efe6d2; border-radius: 2px;
  box-shadow: var(--shadow-card);
  transition: transform .15s ease;
}
.gallery-item:nth-child(3n)   { transform: rotate(1.4deg); }
.gallery-item:nth-child(3n+1) { transform: rotate(-1.4deg); }
@media (hover: hover) { .gallery-item:hover { transform: rotate(0) scale(1.03); z-index: 2; } }
.gallery-item img { aspect-ratio: 1; width: 100%; height: auto; object-fit: cover; background:#e7dcc4; }
.gallery-item__overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 4px 8px 6px; text-align: center;
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.05rem;
  color: var(--ink); background: #fff;
}

/* "Övrigt"-rad */
.misc-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.misc-grid img {
  width: 100%; height: 100%; object-fit: cover;
  border: 6px solid #fff; border-radius: 3px; box-shadow: var(--shadow-card);
}

.split-section { display: grid; gap: 18px; }
@media (min-width: 760px) { .split-section { grid-template-columns: minmax(0,1.2fr) minmax(0,0.8fr); } }

.section-heading { margin-bottom: 18px; }
.section-heading h2 { font-family: 'Anton', sans-serif; text-transform: uppercase; color: var(--comic-blue); font-size: clamp(1.5rem, 4vw, 2.2rem); }

/* Pratbubbla / citat */
.quote-bubble {
  position: relative; background: #fff; border: 2px solid var(--ink);
  border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow-card);
}
.quote-bubble::after {
  content: ""; position: absolute; bottom: -16px; left: 36px;
  border: 9px solid transparent; border-top-color: var(--ink);
}
.quote-bubble p { color: var(--ink); font-family:'Caveat',cursive; font-size: 1.5rem; font-weight: 700; margin: 0; }

.empty-state {
  text-align: center; padding: 28px 16px; color: var(--muted);
  background: #fff; border: 2px dashed var(--card-edge); border-radius: 6px;
}
.empty-state__icon { font-size: 2.4rem; margin-bottom: 8px; }

/* ====== Footer ====== */
.site-footer {
  margin-top: 36px;
  border-top: 3px solid var(--ink);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 8px, transparent 8px 16px),
    var(--paper-dark);
  color: var(--ink-soft);
  font-family: 'Caveat', cursive;
  font-size: 1.2rem; font-weight: 700;
  padding: 22px 0 max(22px, env(safe-area-inset-bottom));
}
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.footer-link { color: var(--teak); font-weight: 700; margin-left: 8px; }
@media (hover: hover) { .footer-link:hover { color: var(--red); } }

/* Lightbox används av gallery.php och post.php */
.lightbox {
  align-items: center;
  background: rgba(20, 14, 9, 0.92);
  cursor: zoom-out;
  display: flex;
  inset: 0;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  position: fixed;
  z-index: 9999;
}

.lightbox-open {
  overflow: hidden;
}

.lightbox__close {
  align-items: center;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 2px 2px 0 var(--ink);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  font-family: 'Bangers', system-ui, sans-serif;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 14px;
  position: absolute;
  right: max(1rem, env(safe-area-inset-right));
  top: max(1rem, env(safe-area-inset-top));
}

.lightbox img {
  background: #fff;
  border: 8px solid #fff;
  border-radius: 3px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
  max-height: 82svh;
  max-width: min(100%, 1180px);
  object-fit: contain;
}

/* =========================================================
   Chiang Mai Metro / Weather page
   Senast uppdaterad: 2026-07-11

   SNABBGUIDE – VAD STYR VAD?
   .metro-page                  = hela vädersidans yttre placering
   .metro-hero                  = översta introduktionsrutan
   .metro-status                = laddnings-, varnings- och felmeddelanden
   .metro-now                   = kortet med aktuellt väder
   .metro-weather-symbol        = den runda väderikonen
   .metro-temperature           = den stora aktuella temperaturen
   .metro-detail-grid           = rutorna med vind, luftfuktighet med mera
   .metro-hourly                = den vågräta timprognosen
   .metro-hour-card             = ett enskilt timkort
   .metro-daily                 = rutnätet för dagsprognosen
   .metro-day-card              = ett enskilt dagskort
   .chiangmai-mini-widget       = den lilla väderwidgeten
   @media-reglerna längst ner = antal kolumner på olika skärmbredder
   ========================================================= */

/* Hela vädersidan: 26px luft ovanför/under och automatisk centrering i sidled.
   Alternativ: margin: 0 auto för ingen luft eller 40px auto för mer luft. */
.metro-page {
  margin: 26px auto;
}

/* Lägger sidans huvudsektioner under varandra med mellanrum.
   Alternativ: gap: var(--s4) för större avstånd. */
.metro-page .container {
  display: grid;
  gap: var(--s3);
}

/* Översta hero-rutan: padding styr inre luft, background färgerna,
   border ramen och box-shadow den hårda serietidningsskuggan.
   Alternativ: background: #fff och box-shadow: none för ett enklare kort. */
.metro-hero {
  display: grid;
  gap: var(--s2);
  padding: clamp(1.2rem, 4vw, 2.2rem);
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(250,228,196,.82)),
    var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}

.metro-hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s1);
}

.metro-hero__top .kicker { margin: 0; }

.metro-hero__clock {
  display: grid;
  justify-items: end;
  gap: .15rem;
  color: var(--ink-muted);
  line-height: 1.1;
  text-align: right;
}

.metro-hero__clock strong {
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

.metro-hero__clock span {
  font-size: .8rem;
  white-space: nowrap;
}

/* Introtextens maximala radlängd. Alternativ: 65ch för bredare text. */
.metro-hero__intro { max-width: 54ch; margin: 0; }

@media (max-width: 480px) {
  .metro-hero__clock span { display: none; }
}

/* Grundutseende för statusmeddelanden medan väderdata hämtas.
   Alternativ: border: 1px solid var(--border) för en tunnare ram. */
.metro-status {
  padding: var(--s2);
  background: #fff5c7;
  border: 2px solid var(--ink);
  color: var(--ink);
  font-weight: 700;
}

/* Färger för fel respektive varning. Dessa skriver över grundfärgerna ovan. */
.metro-status--error { background: #fee2e2; color: #8b1d1d; }
.metro-status--warning { background: #fff1c2; color: #694d00; }

/* Den blinkande punkten vid laddning. width/height styr storleken och
   1.25s i animation styr hastigheten. Alternativ: 2s för långsammare puls. */
.metro-status__pulse {
  display: inline-block;
  width: .75rem;
  height: .75rem;
  margin-right: .45rem;
  background: var(--comic-blue);
  border-radius: 50%;
  animation: metro-pulse 1.25s ease-in-out infinite;
}

/* Pulsens svagaste/minsta läge mitt i animationen.
   Alternativ: opacity: .6 och scale(.9) för en diskretare puls. */
@keyframes metro-pulse {
  50% { opacity: .35; transform: scale(.8); }
}

/* Mellanrum mellan allt väderinnehåll efter hero/status. */
.metro-content {
  display: grid;
  gap: var(--s4);
}

/* Gömmer innehållet när HTML-attributet hidden finns, t.ex. under laddning. */
.metro-content[hidden] { display: none; }

/* Huvudkortet för aktuellt väder. padding styr luft och background kortfärg.
   Alternativ: background: var(--paper) eller box-shadow: none. */
.metro-now {
  display: grid;
  gap: var(--s2);
  padding: clamp(1.1rem, 4vw, 2rem);
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-card);
}

/* Lägger väderikon och temperatur bredvid varandra och centrerar dem på höjden.
   Alternativ: flex-direction: column för att stapla dem. */
.metro-now__primary {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

/* Rund väderikon: 4.5rem styr cirkelns bredd/höjd och 2.5rem ikonstorleken.
   Alternativ: 6rem på width/height och 3rem på font-size för större ikon.
   border-radius: 0 ger en fyrkant i stället för en cirkel. */
.metro-weather-symbol {
  display: grid;
  flex: 0 0 4.5rem;
  width: 4.5rem;
  height: 4.5rem;
  place-items: center;
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-size: 2.5rem;
}

/* Liten etikett ovanför temperatur/rubriker.
   font-size styr storlek, letter-spacing bokstavsavstånd och uppercase versaler.
   Alternativ: text-transform: none för normal skiftläge. */
.metro-eyebrow {
  margin: 0 0 .2rem;
  color: var(--ink-muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
    font-family: 'consolas', system-ui, sans-serif;
}

/* STORA AKTUELLA TEMPERATUREN, exempelvis 26,2°C.
   color       = textfärg
   font-family = typsnitt; nu Bangers med reservtypsnitt
   font-size   = minst 1rem, följsamt 4vw, högst 2rem
   letter-spacing = lite extra mellanrum mellan tecknen; alternativ .05em för mer luft
   line-height = vertikalt utrymme runt texten
   Alternativ fast storlek: font-size: 4rem.
   Alternativt typsnitt: font-family: 'Bangers', system-ui, sans-serif. */
.metro-temperature {
  display: block;
  color: var(--comic-blue);
  font-family: 'bangers', system-ui, sans-serif;
  font-size: clamp(1rem, 4vw, 2rem);
  letter-spacing: .09em;
  line-height: .95;
}

/* Väderbeskrivning, t.ex. "Mulet". 700 = fet; alternativ 400 = normal. */
.metro-description { margin: .35rem 0 0; font-weight: 700; font-family: consolas; letter-spacing: .08em;}
/* Staplar sammanfattningens textrader och centrerar gruppen vertikalt. */
.metro-now__summary { display: grid; align-content: center; gap: .35rem; }
/* Tar bort webbläsarens standardmarginal runt stycken i sammanfattningen. */
.metro-now__summary p { margin: 0; }


/* Reserådet under aktuellt väder.
   font-family/font-size styr handskriftsstilen och border-left färgmarkeringen.
   Alternativ: font-family: inherit; font-size: 1rem för vanlig brödtext. */
.metro-travel-note {
  margin-top: .45rem !important;
  padding: .75rem 1rem;
  background: var(--paper-dark);
  border-left: 4px solid var(--comic-blue);
  color: var(--ink) !important;
  font-family: 'Caveat', cursive;
  font-size: 1.3rem;
  font-weight: 700;
}

/* Tillåter vädersektioner att krympa i ett grid utan att skapa sidscrollning. */
.metro-section {
  min-width: 0;
}

/* Rubrikrad för varje sektion: rubrik till vänster och extrainfo till höger.
   flex-wrap gör att de bryts till två rader på smala skärmar. */
.metro-section__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-bottom: var(--s2);
}

/* Tar bort standardmarginal runt sektionsrubriker. */
.metro-section__heading h2 { margin: 0; }
/* Luft under den lilla kicker-texten. */
.metro-section__heading .kicker { margin-bottom: .45rem; }
/* Källtid och scrolltips: dämpad färg och liten text. Alternativ: 1rem. */
.metro-source-time, .metro-scroll-hint { color: var(--ink-muted); font-size: .82rem; }

/* Detaljrutor för vind, luftfuktighet, nederbörd osv.
   Mobil har två lika breda kolumner. Alternativ: repeat(1, 1fr) för en kolumn. */
.metro-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
}

/* Utseendet på varje enskild detaljruta. .78 anger vit bakgrund med 78 % opacitet. */
.metro-detail-grid > div {
  min-width: 0;
  padding: .9rem;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--border);
}

/* Etiketterna i detalj-, tim- och dagskort, exempelvis "Vind" och "Luftfuktighet".
   Alternativ: font-size: .85rem; text-transform: none. */
.metro-detail-grid dt,
.metro-hour-card dt,
.metro-day-card dt {
  color: var(--ink-muted);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* Själva mätvärdet i detaljrutan. 800 ger extra fet text.
   Alternativ: font-size: 1.2rem och font-weight: 700. */
.metro-detail-grid dd {
  margin: .2rem 0 0;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

/* VÅGRÄT TIMPROGNOS.
   grid-auto-columns styr kortbredden; 72vw visar en del av nästa kort på mobil.
   overflow-x: auto gör raden scrollbar och scroll-snap hjälper korten att stanna rätt.
   Alternativ: grid-auto-columns: 100% för ett helt kort per vy. */
.metro-hourly {
  display: grid;
  grid-auto-columns: minmax(12.5rem, 72vw);
  grid-auto-flow: column;
  gap: var(--s1);
  overflow-x: auto;
  padding: .2rem .25rem 1rem;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--comic-blue) var(--paper-dark);
}

/* Tydlig fokusram för tangentbordsanvändare. */
.metro-hourly:focus-visible {
  outline: 3px solid var(--comic-blue);
  outline-offset: 4px;
}

/* Ett timprognoskort. gap/padding styr luft, background färg och shadow djup.
   Alternativ: border-radius: 8px för rundade hörn. */
.metro-hour-card {
  display: grid;
  align-content: start;
  gap: .55rem;
  padding: var(--s2);
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  scroll-snap-align: start;
}

/* Markerar kortet för den aktuella timmen med tjockare blå ram. */
.metro-hour-card--current { border: 2px solid var(--comic-blue); }
/* Timrubrik/tid. Alternativ: font-size: 1.15rem. */
.metro-hour-card h3 { margin: 0; font-size: 1rem; }
/* Vädersymbolens storlek i timkort. */
.metro-hour-card__symbol { font-size: 2rem; }
/* Temperaturens färg och storlek i timkort. Alternativ: font-size: 2.4rem. */
.metro-hour-card__temperature { color: var(--comic-blue); font-size: 2rem; }
/* Beskrivningens minimihöjd håller korten jåmna även vid två textrader. */
.metro-hour-card__description { min-height: 2.8em; margin: 0; font-size: .86rem; }
/* Staplar detaljraderna inne i tim- och dagskort. */
.metro-hour-card__details, .metro-day-card__details { display: grid; gap: .35rem; margin: .25rem 0 0; }

/* Placerar detaljens etikett till vänster och värde till höger. */
.metro-hour-card__details > div,
.metro-day-card__details > div {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  border-top: 1px dashed var(--border);
  padding-top: .35rem;
}

/* Mätvärden i tim- och dagskort. Alternativ: font-size: .9rem. */
.metro-hour-card dd, .metro-day-card dd {
  margin: 0;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 700;
  text-align: right;
}

/* Rutnätet som innehåller alla dagskort. Antal kolumner ändras i mediareglerna. */
.metro-daily {
  display: grid;
  gap: var(--s2);
}

/* Ett dagsprognoskort. Alternativ: background: #fff eller border: 2px solid var(--ink). */
.metro-day-card {
  padding: var(--s2);
  background: rgba(255,255,255,.82);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

/* Lägger dagens rubrik och vädersymbol på varsin sida av kortet. */
.metro-day-card__heading {
  display: flex;
  justify-content: space-between;
  gap: var(--s1);
}

/* Dagens rubrik. */
.metro-day-card__heading h3 { margin: 0; }
/* Extra datumtext, men inte vädersymbolen. */
.metro-day-card__heading span:not(.metro-day-card__symbol) { color: var(--ink-muted); font-size: .78rem; }
/* Vädersymbolens storlek i dagskort. Alternativ: 2.5rem. */
.metro-day-card__symbol { font-size: 2rem; }
/* Dagens väderbeskrivning; min-height håller kortens innehåll i linje. */
.metro-day-card__description { min-height: 2.8em; margin: .5rem 0; font-size: .86rem; }
/* Dagens min-/maxtemperatur. Alternativ: font-size: 2rem eller color: var(--teak). */
.metro-day-card__temperature { margin: 0; color: var(--comic-blue); font-size: 1.55rem; font-weight: 900; }

/* Källhänvisning under prognosen. */
.metro-attribution {
  padding-top: var(--s2);
  border-top: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: .78rem;
}

/* Länkens färg och fetstil i källhänvisningen. */
.metro-attribution a { color: var(--teak); font-weight: 700; }

/* Liten kompakt väderwidget, exempelvis i header eller annan sidyta.
   flex-wrap låter innehållet brytas på smala ytor och min-height 44px ger bra tryckyta.
   Alternativ: display: flex; width: 100% för en fullbred widget. */
.chiangmai-mini-widget {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .65rem;
  min-height: 44px;
  padding: .45rem .7rem;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--ink);
  border-radius: 6px;
  color: var(--ink);
  font-size: .78rem;
  text-decoration: none;
}

/* Framhävd text, vanligen temperatur, i widgeten. */
.chiangmai-mini-widget strong { color: var(--comic-blue); }
/* Tonar ned widgeten när väderdata inte är tillgänglig. Alternativ: opacity: .5. */
.chiangmai-mini-widget--unavailable { opacity: .72; }

/* SURFPLATTA OCH STÖRRE, från 700px:
   Aktuellt väder får två kolumner, detaljer tre och dagsprognos två.
   Alternativ: byt 700px till 800px om mobilutseendet ska behållas längre. */
@media (min-width: 700px) {
  .metro-now { grid-template-columns: minmax(0, 1.1fr) minmax(16rem, .9fr); }
  .metro-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metro-hourly { grid-auto-columns: 14rem; }
  .metro-daily { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* STORA SKÄRMAR, från 1050px:
   Detaljer visas i fyra kolumner och dagsprognosen i tre.
   Första dagskortet tar två kolumner. Ta bort sista regeln för lika stora kort. */
@media (min-width: 1050px) {
  .metro-detail-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metro-daily { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metro-day-card:first-child { grid-column: span 2; }
}

/* =========================================================
   MOBIL FINJUSTERING, 320–767 px
   Mobilen behåller scrapbook-känslan men prioriterar innehåll,
   tydliga tryckytor och kortare skrollsträckor.
   ========================================================= */
@media (max-width: 767px) {
  body {
    font-size: 1rem;
    line-height: 1.6;
  }

  .wrap,
  .container { padding-inline: .875rem; }

  .posts-section,
  .post-page,
  .comic-section,
  .hero { margin: 18px auto; }

  .hero { padding-inline: .875rem; }

  .hero__content,
  .section-panel,
  .posts-section .container,
  .post-page .container,
  .post-page .container--narrow {
    padding: 15px;
    border-radius: 9px;
    box-shadow: 0 5px 14px rgba(60,40,20,.16), 0 1px 2px rgba(60,40,20,.12);
  }

  .section-panel,
  .posts-section .container,
  .facts-content--plain {
    width: calc(100% - 1.75rem);
  }

  .posts-section .container::before,
  .section-panel::before {
    top: -9px;
    left: 18px;
    width: 70px;
    height: 20px;
    transform: rotate(-1deg);
  }

  .kicker {
    max-width: 100%;
    padding: 7px 10px;
    border-width: 1px;
    box-shadow: 2px 2px 0 var(--ink);
    font-size: clamp(1rem, 5vw, 1.2rem);
    line-height: 1.08;
    transform: none;
  }

  .hero__content { gap: 18px; }
  .hero__text { order: -1; }
  .hero__poster {
    width: min(220px, 66vw);
    transform: none;
  }
  .hero__poster img {
    border-width: 4px;
    box-shadow: 0 5px 14px rgba(60,40,20,.18);
  }
  .hero__poster::before {
    top: -10px;
    width: 76px;
    height: 22px;
    transform: translateX(-50%) rotate(1deg);
  }
  .hero__poster::after {
    top: -7px;
    right: -3px;
    font-size: 1.25rem;
  }
  .hero__title { font-size: clamp(1.75rem, 8vw, 2.15rem); }
  .hero__desc { font-size: clamp(1.3rem, 6.5vw, 1.65rem); }
  .speech { font-size: 1rem; }

  .btn,
  .primary-button,
  .secondary-link,
  .tag,
  .back-link,
  .footer-link,
  .location-badge {
    min-height: 44px;
  }

  .btn,
  .primary-button,
  .secondary-link {
    padding: 7px 12px;
    font-size: .82rem;
  }
  .btn--sm {
    min-height: 44px;
    padding: 6px 10px;
    font-size: .76rem;
  }

  .posts-grid { gap: 16px; }
  .post-card {
    padding: 7px 7px 2px;
    box-shadow: 0 4px 12px rgba(60,40,20,.15);
  }
  .post-card:nth-child(odd),
  .post-card:nth-child(even) { transform: none; }
  .post-card::before {
    top: -7px;
    width: 64px;
    height: 18px;
    transform: translateX(-50%);
  }
  .post-card__image { aspect-ratio: 16 / 10; }
  .post-card__body {
    gap: 6px;
    padding: 10px 5px 9px;
  }
  .post-card__intro {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .gallery-item {
    min-width: 0;
    padding: 5px 5px 2.85rem;
    box-shadow: 0 3px 10px rgba(60,40,20,.15);
  }
  .gallery-item:nth-child(3n),
  .gallery-item:nth-child(3n+1) { transform: none; }
  .gallery-item__overlay {
    display: -webkit-box;
    height: 2.8rem;
    overflow: hidden;
    padding: 4px 6px;
    font-size: .88rem;
    line-height: 1.15;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .framed-image {
    border-width: 4px;
    box-shadow: 0 5px 14px rgba(60,40,20,.16);
  }
  .quote-bubble {
    padding: 15px 16px;
    box-shadow: 0 5px 14px rgba(60,40,20,.16);
  }
  .quote-bubble p { font-size: 1.3rem; }

  .facts-content { gap: var(--s3); }
  .facts-lead,
  .info-lead,
  .post-intro { font-size: 1.02rem; }
  .facts-toc {
    gap: .4rem;
    padding: .75rem;
  }
  .facts-toc strong {
    flex-basis: 100%;
    margin: 0;
  }
  .facts-toc a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .4rem .65rem;
  }
  .facts-timeline li {
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: .75rem;
  }
  .facts-timeline time {
    font-size: 1.05rem;
    text-align: left;
  }
  .facts-timeline li > div { padding-left: .75rem; }
  .facts-table-wrap,
  .info-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  .facts-table-wrap:focus-visible,
  .info-table-wrap:focus-visible {
    outline: 3px solid var(--comic-blue);
    outline-offset: 3px;
  }
  .info-content pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .metro-page .container { gap: var(--s2); }
  .metro-content { gap: var(--s3); }
  .metro-hero,
  .metro-now,
  .metro-day-card { box-shadow: 2px 2px 0 rgba(44,33,24,.55); }
  .metro-hero,
  .metro-now,
  .metro-day-card { padding: .9rem; }
  .metro-detail-grid { gap: .55rem; }
  .metro-detail-grid > div { padding: .7rem; }
  .metro-hourly {
    grid-auto-columns: minmax(12rem, 76vw);
    gap: .75rem;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  .metro-hour-card {
    padding: .85rem;
    box-shadow: 0 3px 10px rgba(60,40,20,.15);
  }

  .site-footer {
    margin-top: 26px;
    padding-top: 18px;
  }
}

@media (max-width: 359px) {
  .nav-toggle__current { display: none; }
  .facts-grid { grid-template-columns: 1fr; }
  .facts-bars > div { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .metro-hero__top { grid-template-columns: 1fr; }
  .metro-hero__clock {
    justify-items: start;
    text-align: left;
  }
}

@media (min-width: 768px) {
  .hero__text { order: initial; }
}

@media (pointer: coarse) {
  button,
  .btn,
  .nav-button,
  .tag,
  .back-link,
  .footer-link,
  .location-badge {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}