/* components.css – rena komponenter, inga layout-krockar */

/* =========================
   Märket
   Arv-rödan bor HÄR och ingen annanstans på sajten. Rött över hela ytan
   drar mot syndikalism; som en enda glöd läser den som arv.
   ========================= */

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--text);
  flex: none;
}

/* Originalloggan, inte en vektorersättning. PNG:en har äkta transparens, så
   den fungerar mot både ljus och mörk botten.
   height sätts här och width: auto följer med - annars vinner img-regeln i
   base.css (height: auto) och bilden faller tillbaka till sina 120 px. */
.marke-logga {
  display: block;
  height: 2.5rem;
  width: auto;
  flex: none;
}

.marke-ord {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.0625rem;
  white-space: nowrap;
}

/* =========================
   Sidhuvud – smal klistrad rad
   Ingen underkantslinje: huvudet skiljs av oskärpan och av att innehållet
   glider under det. Hårstreck finns inte i det här systemet.
   ========================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(243, 245, 242, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Utan oskärpa blir en genomskinlig bakgrund oläslig så fort text glider
   under den. Då tar vi hellre en helt täckande yta. */
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .site-header {
    background: var(--gryning);
  }
}

.header-rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4rem;
}

/* =========================
   Huvudmeny – bred viewport
   ========================= */

.meny-stor {
  display: none;
  align-items: center;
  gap: 1.75rem;
}

.meny-lank {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  padding-block: 0.35rem;
  white-space: nowrap;
}

.meny-lank:hover {
  color: var(--fjard);
}

/* Aktiv sektion: fetare text OCH en bärnstensmarkering under ordet.
   Bärnsten klarar bara 1,99:1 mot Gryning och får aldrig vara bokstäver -
   men som markör är den perfekt. Vikten är dessutom en andra signal, så
   markeringen bär aldrig informationen ensam. */
.meny-lank[aria-current="page"] {
  font-weight: 700;
}

.meny-lank[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--fyr);
}

/* =========================
   Huvudmeny – smal viewport
   <details>/<summary>, inte en JS-knapp: menyn ska fungera innan och utan
   att JavaScript körts. Webbläsaren sköter aria-expanded och tangentbordet.
   ========================= */

.hamburgare {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  margin-right: -0.5rem;
  cursor: pointer;
  color: var(--text);
  border-radius: var(--radie-mjuk);

  /* Bort med webbläsarens triangel, i båda dialekterna. */
  list-style: none;
}
.hamburgare::-webkit-details-marker {
  display: none;
}
.hamburgare::marker {
  content: "";
}

/* Hamburgare → kryss.
 *
 * Alla tre strecken är förankrade i mitten och skjuts isär med translateY i
 * stängt läge. Öppet läge tar bort förskjutningen och roterar - så möts de i
 * mitten och blir ett kryss, utan att något värde behöver stämma på pixeln.
 *
 * Varför inte svg: transform-box: view-box och transform-origin: center löses
 * olika i olika motorer, och krysset blev rätt i en webbläsare och snett i en
 * annan. Ett HTML-element roterar alltid kring sin egen mitt. */
.ikon-hamburgare {
  display: block;
  position: relative;
  width: 24px;
  height: 24px;
}

.strecket {
  position: absolute;
  left: 1px;
  right: 1px;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: currentColor;
  transition: transform var(--normal) var(--ease),
              opacity var(--snabb) var(--ease);
}

.strecket-1 {
  transform: translateY(-6px);
}

.strecket-3 {
  transform: translateY(6px);
}

.meny-mobil[open] .strecket-1 {
  transform: rotate(45deg);
}

.meny-mobil[open] .strecket-2 {
  opacity: 0;
}

.meny-mobil[open] .strecket-3 {
  transform: rotate(-45deg);
}


/* Ligger ÖVER innehållet, inte knuffar ner det. Att sidan hoppade när man
   öppnade menyn var ett fel, inte en layout.
   Absolut positionerad mot .site-header, som är sticky och därmed
   positionerad - se till att inget däremellan får position eller
   overflow: clip, då klipps den här bort. */
.meny-liten {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--gryning);
  box-shadow: -2px 8px 20px rgba(20, 33, 31, 0.10);
  padding-block: 0.5rem 1.5rem;

  /* <details> växlar display, vilket normalt inte går att tona.
     allow-discrete gör att display hålls kvar tills övergången är klar, och
     @starting-style ger ett utgångsläge att tona FRÅN när elementet just
     dykt upp. Utan @starting-style syns bara utgången, inte ingången. */
  opacity: 1;
  translate: 0 0;
  transition: opacity var(--normal) var(--ease),
              translate var(--normal) var(--ease),
              display var(--normal) var(--ease) allow-discrete;
}

.meny-mobil:not([open]) .meny-liten {
  opacity: 0;
  translate: 0 -0.5rem;
}

@starting-style {
  .meny-mobil[open] .meny-liten {
    opacity: 0;
    translate: 0 -0.5rem;
  }
}

.meny-liten-inre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.meny-lank-liten {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  padding: 0.625rem 0;
  width: 100%;
}

.meny-lank-liten[aria-current="page"] {
  color: var(--fjard);
}

.meny-lank-liten[aria-current="page"]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fyr);
  margin-right: 0.5rem;
  vertical-align: middle;
}

@media (min-width: 52rem) {
  .meny-stor {
    display: flex;
  }
  .meny-mobil {
    display: none;
  }
}

/* =========================
   Hero
   Varken kort eller färgat plan - stor text direkt på sidans grund.
   Kalendern och sidfoten är sajtens två plan; ett tredje på samma skärm
   hade blivit precis den färgkakofoni designsystemet varnar för.
   ========================= */

.hero {
  padding-block: 2.5rem 3rem;
}

/* Optisk spärrning: ju större grad, desto tightare tracking. Utan den ser
   stora rubriker luftiga och slappa ut. Vikt 600, inte 700 - Schibsted
   Grotesk är tyngre än föregångaren på samma nominella vikt. */
.hero-rubrik {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0.35rem 0 0;
  max-width: 18ch;
}

.hero .ingress {
  margin-block: 1.25rem 0;
}

.hero-knappar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.75rem 0 0;
}

/* =========================
   Sidintro – rubrik och ingress direkt mot bakgrunden
   Ett kort runt två rader text ser ut som en tom ruta. Samma grepp som
   hero:n, men i mindre grad: en undersida ska inte skrika lika högt som
   startsidan.
   ========================= */

.sid-intro {
  padding-block: 2rem 1.75rem;
}

.sid-intro-rubrik {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0;
}

.sid-intro .ingress {
  margin-block: 0.9rem 0;
}

/* =========================
   Länkkort – enkel lista med titel och en rad om vad det handlar om.
   Används av "Idéerna" på startsidan.
   ========================= */

.lankkort-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.lankkort {
  display: block;
  padding: 0.7rem 0.9rem;
  margin-inline: -0.9rem;
  border-radius: var(--radie-plan);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--snabb) var(--ease);
}

.lankkort:hover {
  background: rgba(14, 106, 99, 0.06);
}

.lankkort-titel {
  display: block;
  font-weight: 600;
  color: var(--fjard);
}

.lankkort:hover .lankkort-titel {
  color: var(--fjard-djup);
}

.lankkort-om {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text-matt);
}

/* =========================
   Läs vidare – föregående/nästa efter en text
   ========================= */

.lasvidare {
  display: grid;
  gap: 0.75rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  position: relative;
}

.lasvidare::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--fyr);
}

@media (min-width: 34rem) {
  .lasvidare {
    grid-template-columns: 1fr 1fr;
  }
  /* Finns ingen föregående ska nästa ändå ligga till höger - det är riktningen
     som bär betydelsen, inte ordningen i markupen. */
  .lasvidare-nasta:first-child {
    grid-column: 2;
  }
}

.lasvidare-lank {
  display: block;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radie-plan);
  background: var(--ljus);
  box-shadow: var(--skugga);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--normal) var(--ease),
              transform var(--normal) var(--ease);
}

.lasvidare-lank:hover {
  box-shadow: -2px 4px 10px rgba(20, 33, 31, 0.09);
  transform: translateY(-2px);
}

.lasvidare-nasta {
  text-align: right;
}

.lasvidare-titel {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--fjard);
}

.lasvidare-forra .etikett::before {
  content: "← ";
}

.lasvidare-nasta .etikett::after {
  content: " →";
}

/* =========================
   Cards / UI
   ========================= */

/* Neutralt kort: platt Ljus, INGEN ram, ingen gradient – bara en mjuk
   kontaktskugga mot nedre vänster. Hårstreck finns inte i det här systemet;
   innehåll separeras av färg och luft. */
.card {
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--ljus);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--normal) var(--ease);
}
.card:hover {
  box-shadow: var(--shadow-card-hover);
}

.card-head {
  margin-bottom: var(--space-3);
}

.item h3 {
  margin-bottom: var(--space-1);
}

/* Buttons (för CTA i kort etc) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.65rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-border);
  text-decoration: none;
  font-weight: 650;

  background: var(--ui-surface);
  background-image: var(--ui-surface-grad);
  color: inherit;
  box-shadow: var(--shadow-btn);
  transition: background-color var(--snabb) var(--ease),
              border-color var(--snabb) var(--ease),
              box-shadow var(--snabb) var(--ease),
              transform var(--snabb) var(--ease);
}

.btn:hover {
  background: var(--ui-hover-bg);
  border-color: var(--ui-hover-border);
  color: var(--ui-hover-text);

  box-shadow: var(--shadow-btn-hover);
  transform: translateY(-1px);
}

.btn:active {
  background: var(--ui-active-bg);
  transform: translateY(0);
  box-shadow: var(--shadow-btn);
}

.btn:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}


/* Konturknapp: hero:n ska peka vidare, inte skrika. Den fyllda varianten
   sparas till kontaktsidan där knappen ÄR handlingen.

   Måste stå EFTER .btn: båda är en enda klass, så vid lika specificitet
   avgör källordningen. Låg den före vann .btn:s ljusa yta och ram, och
   knappen renderades som en vit pillerknapp. */
.btn-kontur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radie-mjuk);
  border: 0;
  box-shadow: inset 0 0 0 2px var(--fjard);
  background: transparent;
  color: var(--fjard);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--snabb) var(--ease),
              color var(--snabb) var(--ease);
}

.btn-kontur:hover {
  background: var(--fjard);
  color: var(--ljus);
}

/* Fylld variant för hero:ns primära väg. Ligger efter .btn av samma skäl
   som .btn-kontur: lika specificitet, källordningen avgör. */
.btn-fylld {
  border: 0;
  background: var(--fjard);
  color: var(--ljus);
  box-shadow: none;
}

.btn-fylld:hover {
  background: var(--fjard-djup);
  color: var(--ljus);
  box-shadow: none;
}

.btn-kontur:focus-visible {
  outline: 2px solid var(--fjard);
  outline-offset: 3px;
}


.sidebar {
  display: grid;
  gap: var(--space-4);
}

/* Utility: dölj tillfälligt ett block utan att riva HTML.
   (Används t.ex. för att tillfälligt dölja hero-kortet på startsidan.) */
.is-hidden {
  display: none !important;
}

/* Kalender ("Kommande") – kompakt listlayout.
   JS fyller listan med .upcoming-item/.ev-datum/.upcoming-title/
   .upcoming-when/.upcoming-location. */
.calendar.calendar--compact .calendar-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Reservera höjd innan event hämtas (annars växer kortet efter loadEvents). */
.calendar.calendar--compact .calendar-list ul:empty,
.calendar.calendar--compact .calendar-list ul > li:only-child.muted {
  min-height: 11.5rem;
}

/* Raderna skiljs av LUFT, inte av ett hårstreck. */
.calendar.calendar--compact .calendar-list li {
  padding: var(--space-3) 0;
}

/* upcoming-title:
   Visuell rubrik (motsvarar h3 i storlek),
   men används i listor – därför ej semantisk h3 */

.upcoming-title {
  font-size: var(--step-1);   /* samma som h3 */
  font-weight: 600;           /* om du vill matcha rubrikkänslan */
  line-height: 1.3;
}


.upcoming-location a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border-subtle);
  text-underline-offset: 0.15em;
}
.upcoming-location a:hover {
  text-decoration-color: currentColor;
}

/* ── Kalendern som färgat plan ────────────────────────────────────
 * Djupt petrol (#073B38) är ENDA ytan där bärnstenen får bära text:
 * 5,69:1. Samma bärnsten ger 2,95:1 på vanlig Fjärd och 1,99:1 på ljus
 * botten och faller då som text. Det är alltså inte "en grön" som är vald
 * utan precis den här - byter man ut den mot en ljusare grön slutar gulen
 * att vara läsbar.
 *
 * Ett plan har varken ram eller skugga. Skuggan tillhör det neutrala
 * kortet och är det som skiljer de två sorternas ytor åt. */
.card.calendar {
  background: var(--fjard-natt);
  color: var(--ljus);
  box-shadow: none;

  /* isolation: isolate håller kornets mix-blend-mode innanför planet.
     Utan den blandas det mot vad som råkar ligga bakom i stapelordningen. */
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Korn på planet. Platt CSS-färg ser ut som platt CSS-färg; kornet är det
   som får ytan att läsa som tryckt färg. Mörka plan behöver mycket mer korn
   för att det ska synas alls - samma värde som på ljusa ytor ser ojämnt ut. */
.card.calendar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--korn);
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}

/* Innehållet över kornet. */
.card.calendar > * {
  position: relative;
  z-index: 1;
}

.card.calendar h2 {
  color: var(--fyr);
}

/* ── Datumblock ───────────────────────────────────────────────────
 * Datumet är ett eget litet plan och bär hela radens tyngd - det är det
 * som gör att raderna kan skiljas av luft i stället för av hårstreck.
 *
 * Bärnsten med Skiffer på: 7,60:1. Blocket i sig ger 5,69:1 mot den mörka
 * petrolen, så det läser som ett block och inte som en fläck. */
.upcoming-item {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 1rem;
  align-items: start; /* datumet toppas mot titeln, aldrig centreras */
}

.ev-datum {
  text-align: center;
  padding: 0.5rem 0.25rem;
  border-radius: var(--radie-plan);
  background: var(--fyr);
  color: var(--skiffer);
}

.ev-dag {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.ev-manad {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.78;
  margin-top: 0.2rem;
}

/* ── Nästa händelse ───────────────────────────────────────────────
 * Den som ligger närmast i tiden lyfts på ett upphöjt plan inuti planet.
 * Datumblocken är redan bärnsten allihop, så markeringen kan inte vara färg
 * på blocket - den måste vara YTA. Etiketten gör det dessutom uttalat i
 * text, så markeringen inte bara är en nyansskillnad man ska gissa sig till.
 *
 * margin-inline drar tillbaka den vänstra kanten så att datumblocken i
 * listan fortfarande står i linje med varandra. */
/* Kvalificerad hela vägen: .calendar.calendar--compact .calendar-list li
   (0,3,1) sätter padding: ... 0 och slår annars padding-inline här (0,3,0).
   Då blev bara den negativa marginalen kvar och raden gled 16 px åt vänster,
   ur linje med de andra datumblocken. */
.calendar.calendar--compact .calendar-list li.upcoming-item--nast {
  background: rgba(251, 252, 250, 0.07);
  border-radius: var(--radie-plan);
  padding-inline: var(--space-3);
  margin-inline: calc(var(--space-3) * -1);
}

.card.calendar .upcoming-nast {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fyr);
  margin-bottom: 0.1rem;
}

/* "Fler aktiviteter" under den avkortade listan. Bärnsten ger 5,69:1 mot
   den djupa petrolen och duger som text just på den här ytan. */
.card.calendar .calendar-mer {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-4);
  padding: 0.6rem 1rem;
  border-radius: var(--radie-mjuk);
  box-shadow: inset 0 0 0 2px var(--fyr);
  color: var(--fyr);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color var(--snabb) var(--ease),
              color var(--snabb) var(--ease);
}

.card.calendar .calendar-mer::after {
  content: "→";
  /* Pilen flyttar sig, inte ytan - allt som rör sig går framåt. */
  transition: transform var(--snabb) var(--ease);
}

.card.calendar .calendar-mer:hover {
  background: var(--fyr);
  color: var(--skiffer);
}

.card.calendar .calendar-mer:hover::after {
  transform: translateX(3px);
}

/* Extern-ikonen efter en titel som lämnar sajten. Baseline-justerad så den
   sitter i textens linje och inte hoppar upp som ett hörn. */
.ikon-extern {
  display: inline-block;
  vertical-align: -0.1em;
  margin-left: 0.15em;
  opacity: 0.75;
}

.upcoming-title--extern:hover .ikon-extern {
  opacity: 1;
}

/* Veckodag och tid är nu metadata - bärnstenen har flyttat in i blocket. */
.card.calendar .upcoming-when {
  font-size: 0.875rem;
  color: rgba(251, 252, 250, 0.75);
}

.card.calendar .upcoming-title {
  color: var(--ljus);
}

.card.calendar .muted {
  color: rgba(251, 252, 250, 0.75);
}

.card.calendar .upcoming-location a {
  color: rgba(251, 252, 250, 0.78);
  text-decoration-color: rgba(251, 252, 250, 0.30);
  transition: color var(--snabb) var(--ease),
              text-decoration-color var(--snabb) var(--ease);
}
.card.calendar .upcoming-location a:hover {
  color: var(--ljus);
  text-decoration-color: currentColor;
}


/* Data-driven text: om inget innehåll finns, dölj elementet */
[data-text]:empty {
  display: none;
}

/* Ingen reserverad höjd längre: sidomenyn är statisk HTML och finns redan
   när sidan målas, så det finns inget hopp att kompensera för. */

/* =========================
   Side navigation – refined vertical rhythm
   ========================= */

/* Grupperna skiljs av en tjock bärnstensmarkering, inte av ett hårstreck.
   Det motsäger inte regeln "färg skiljer, inte linjer" - den gäller linjer
   som ritar rutnät. Det här är en enda medveten markör mellan två namngivna
   avsnitt, och bärnsten får vara markör men aldrig bokstäver. */
.side-nav-group + .side-nav-group {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  position: relative;
}

.side-nav-group + .side-nav-group::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--fyr);
}

/* Remove bullets and indents (defensive) */
.side-nav ul {
  list-style: none;
  margin: 0 0 0.75rem 0; /* space after each section */
  padding: 0;
}

.side-nav li {
  margin: 0;
  padding: 0;
}

/* Article links: consistent spacing between items.
   Utan understreck: i en meny bär sammanhanget affordansen, och ett dussin
   understrukna rader under varandra läser som en spaljé. Hovring och den
   aktiva markeringen ger den tillbaka där den behövs. */
.side-nav li a {
  display: inline-block;
  margin-bottom: 0.35rem;
  text-decoration: none;
  transition: color var(--snabb) var(--ease);
}

.side-nav li a:hover {
  color: var(--fjard-djup);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* Aktuell sida i sidomenyn. Markeringen kunde aldrig visas förut - den gamla
   jämförelsen ställde '/x.html/' mot '/x/' och slog aldrig till. Samma språk
   som toppmenyn: fetare text plus en bärnstensmarkering, aldrig bärnsten
   som bokstäver. */
.side-nav li a[aria-current="page"] {
  font-weight: 700;
  color: var(--fjard-djup);
  text-decoration: underline;
  text-decoration-color: var(--fyr);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* ── Tänkarkort ───────────────────────────────────────────────────
 * Porträtten låg först som små avatarer i sidomenyns rader. Det blev
 * plottrigt: vid 36 px är ansiktet en prick, den mjuka radien läser som en
 * bugg snarare än som form, och bild plus understruken text i samma rad ger
 * tre konkurrerande baslinjer.
 *
 * Bilder behöver yta. Här får de ett eget rutnät med riktiga kort, och
 * sidomenyn får vara ren text igen. */
.tankare-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 1.5rem 1.25rem;
}

.tankare {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform var(--normal) var(--ease);
}
.tankare:hover {
  transform: translateY(-2px);
}

/* Bildytan är ett plan: petrolbotten under fotot, och kornet ovanpå så att
   bilden hör ihop med resten i stället för att ligga som en främmande
   rektangel. object-position högt - ansiktet sitter i övre tredjedelen. */
.tankare-bild {
  display: block;
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radie-mjuk);
  background: var(--fjard-natt);
  overflow: hidden;
  isolation: isolate;
}

.tankare-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  /* Åtta bilder från åtta källor ser annars ut som åtta olika sajter. */
  filter: saturate(0.72) contrast(1.04);
  transition: filter var(--lugn) var(--ease), transform var(--lugn) var(--ease);
}
.tankare:hover .tankare-bild img {
  filter: saturate(0.95) contrast(1.04);
  transform: scale(1.02);
}

.tankare-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--korn);
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.42;
  pointer-events: none;
}

.tankare-namn {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.25;
  margin-top: 0.7rem;
  letter-spacing: -0.01em;
  transition: color var(--snabb) var(--ease);
}
.tankare:hover .tankare-namn {
  color: var(--fjard);
}

.tankare-ar {
  display: block;
  font-size: 0.75rem;
  color: var(--text-svag);
  margin-top: 0.1rem;
}

.tankare-om {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-matt);
  margin-top: 0.3rem;
}

/* ── Porträtt på tänkarens egen sida ──────────────────────────────
 * Bild plus årtal och vad personen är känd för, som ett litet uppslag
 * under rubriken. Att bara ha bilderna i listvyn är att slösa dem. */
.tankare-huvud {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  margin: 1.25rem 0 2rem;
  /* Uppslaget ligger inuti .prose och ärvde annars Newsreader. Årtal och
     epitet är metadata, alltså gränssnitt - inte löptext. */
  font-family: var(--font-ui);
}

.tankare-huvud-bild {
  width: 8.5rem;
  aspect-ratio: 3 / 4;
  flex: none;
  object-fit: cover;
  object-position: center 18%;
  border-radius: var(--radie-mjuk);
  background: var(--fjard-natt);
  filter: saturate(0.72) contrast(1.04);
}

/* Texten sitter i bildens underkant, inte centrerad mot den: en fotobyline
   hänger på baslinjen. Årtalet ovanför, det personen är känd för under -
   samma ordning som i tänkarkorten. */
.tankare-huvud figcaption {
  display: grid;
  gap: 0.3rem;
  padding-bottom: 0.35rem;
}

.tankare-huvud-ar {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-svag);
}

.tankare-huvud-om {
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--text);
  max-width: 22ch;
}

/* Bildkrediteringen är juridik, inte innehåll - den ska finnas och gå att
   läsa, men inte konkurrera med namnet ovanför. */
.tankare-huvud-kredit {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--text-svag);
  margin-top: 0.25rem;
}

.tankare-huvud-kredit a {
  color: inherit;
  text-decoration-color: var(--text-spar);
}

.tankare-huvud-kredit a:hover {
  color: var(--fjard);
}

/* Bärnstensstreck under uppslaget - samma markör som skiljer grupperna i
   sidopanelen, så toppen läser som en avslutad enhet. */
.tankare-huvud::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1rem;
  width: 2.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--fyr);
}

@media (max-width: 30rem) {
  .tankare-huvud {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .tankare-huvud figcaption {
    padding-bottom: 0;
  }
}

/* Separator – osynlig, ger enbart luft */
.side-nav li hr {
  border: none;
  margin: 0.75rem 0;
}

/* Headings-as-links: no underline by default */
.side-nav-heading-link {
  color: inherit;
  text-decoration: none;
}

/* Optional hover affordance (subtle) */
.side-nav-heading-link:hover {
  text-decoration: underline;
}

/* Kortrubriker som är länkar bär redan sin egen tyngd; ett streck under en
   h2 läser som ett fel snarare än som en affordans. Hovringen ger tillbaka
   understrykningen, i bärnsten.

   Ersätter tre ID-regler med !important som gjorde exakt det här för ett
   enda kort ("Om Frihetsfronten") och därför missade nästa kort som fick en
   länkad rubrik. */
.card-head h2 a,
.card-head h3 a {
  text-decoration: none;
}

.card-head h2 a:hover,
.card-head h3 a:hover {
  text-decoration: underline;
  text-decoration-color: var(--fyr);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}
/* Kalender: Kommande – titeln ska inte vara understruken (oavsett markup-variant) */
.calendar.calendar--compact a.upcoming-title,
.calendar.calendar--compact .upcoming-title a {
  color: inherit;
  text-decoration: none !important;
  transition: color var(--snabb) var(--ease);
}

.calendar.calendar--compact a.upcoming-title:hover,
.calendar.calendar--compact .upcoming-title a:hover {
  text-decoration: none !important;
}



/* ========================= */
/* Kontakt-knappar. Var tidigare en kopia av nav-pillren: ljus yta, 1px ram
   och en blank inset-högdager. De är sidans enda faktiska handlingar och såg
   ut som inaktiva systemknappar.
   Nu fylld petrol - Ljus på Fjärd ger 6,26:1. Ingen grå variant finns kvar;
   grått var det som gjorde dem kraftlösa.

   OBS: markupen bär fortfarande klassen "menu-button" från den gamla
   navigationen. Den är stilslös sedan menyn skrevs om och lämnas kvar bara
   för att den inte gör något - ta bort den nästa gång sidan ändå ändras. */
.contact-card .contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.7rem 1.1rem;
  border-radius: var(--radie-mjuk);
  border: 0;

  background: var(--fjard);
  color: var(--ljus);

  font: inherit;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--snabb) var(--ease),
              transform var(--snabb) var(--ease);
}

.contact-card .contact-btn:hover {
  /* Mörkare vid hover, aldrig ljusare. */
  background: var(--fjard-djup);
  color: var(--ljus);
}

.contact-card .contact-btn:active {
  transform: translateY(1px);
}

.contact-card .contact-btn:focus-visible {
  outline: 2px solid var(--fjard);
  outline-offset: 3px;
}

/* Sekundär: kontur i stället för fyllning, så knapparna inte tävlar om
   samma tyngd. */
.contact-card .contact-copy-btn {
  background: transparent;
  color: var(--fjard);
  box-shadow: inset 0 0 0 2px var(--fjard);
  justify-content: center;
}

.contact-card .contact-copy-btn:hover {
  background: var(--fjard);
  color: var(--ljus);
}
/* Kontaktkortets text. Bar tidigare class="prose", men prose.css laddas inte
   på den här sidan - det enda klassen gjorde var att ärva en breddbegränsning
   ur base.css. Begränsningen hör hemma här i stället, uttalad. */
.contact-card .card-body {
  max-width: 68ch;
}

/* Knappraden. Opt-in: gäller endast inom .contact-card. */
.contact-card .contact-actions {
  display: flex;
  gap: var(--space-2);
  /* wrap, inte nowrap: fyra knappar får aldrig plats på en rad i en smal
     kolumn, och nowrap klämde ihop dem till oläsliga remsor. */
  flex-wrap: wrap;
  align-items: stretch;
  margin-top: var(--space-4);
}
/* Riktigt smalt: låt varje knapp ta hela raden hellre än att klämmas ihop. */
@media (max-width: 32rem) {
  .contact-card .contact-btn {
    flex: 1 1 100%;
  }
}


/* =========================
   Sidfot – det andra färgade planet
   Varje sida får en tyngd i botten i stället för att bara ta slut. Samma
   djupa petrol som kalendern, med korn, så de två planen läser som samma
   material.

   Disciplinen: FÅ och STORA plan. Med kalendern på startsidan är detta
   plan nummer två - lägg inte till ett tredje utan att ta bort ett.
   ========================= */

.site-footer {
  margin-top: 5rem;
  padding-block: 3rem 1.75rem;
  background: var(--fjard-natt);
  color: var(--ljus);

  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--korn);
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}

.site-footer > * {
  position: relative;
  z-index: 1;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 48rem) {
  .footer-inner {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
  }
}

/* Märket knackas ur i ljust mot den mörka sidfoten. Det bryter inte mot
   regeln om att Arv-rödan bara bor i märket - det ÄR märket, urknackat.
   Rött direkt på den djupa petrolen ger 2,2:1 och blir bara grumligt.
   brightness(0) gör bilden helsvart, invert(1) gör den helvit; transparensen
   är kvar, så bara logotypens form blir vit. */
.site-footer .marke,
.site-footer .marke-ord {
  color: var(--ljus);
}

.site-footer .marke-logga {
  filter: brightness(0) invert(1);
}

.footer-blurb {
  margin: 0.9rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 26rem;
  color: rgba(251, 252, 250, 0.75);
}

.site-footer .etikett {
  color: rgba(251, 252, 250, 0.55);
}

.footer-links {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  font-size: 0.9375rem;
}

/* Bärnsten ger 5,69:1 mot den djupa petrolen och duger alltså som text
   just här - vilket den inte gör någon annanstans på sajten. */
.footer-links a {
  color: var(--fyr);
  text-decoration: none;
  transition: color var(--snabb) var(--ease);
}

.footer-links a:hover {
  color: var(--ljus);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.footer-rad {
  margin-top: 2.5rem;
  font-size: 0.8125rem;
  color: rgba(251, 252, 250, 0.55);
}