/*
Theme Name: Storyflames
Theme URI: https://lfi.se/storyflames
Author: CreativeLayers
Author URI: https://creativelayers.se
Description: Tema för Storyflames – berättelser om läsning, språk och vägen till böckerna. Ett projekt av Läsfrämjarinstitutet. Varm redaktionell magasinstil, byggd mobilanpassad och med logiska CSS-egenskaper så att arabiskan speglas automatiskt.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: storyflames
Tags: translation-ready, rtl-language-support, custom-menu, featured-images, editor-style
*/

/* Storyflames – mockup 1 "Ljuset".
   Varm, redaktionell magasinstil. All layout använder logiska CSS-egenskaper,
   så sidan speglas automatiskt när dir="rtl" sätts för arabiska. */

:root {
    --paper:    #fbf7f0;
    --paper-2:  #ffffff;
    --sand:     #f2e9db;
    --ink:      #241c16;
    --ink-2:    #6b5c50;
    --line:     #e3d7c6;
    --line-2:   #d3c3ac;
    --flame:    #bc3f1c;
    /* Logotypens låga går mer i orange än accentfärgen. Se kommentaren
       vid .logo-mark för varför de två inte är samma kulör. */
    --flame-logo:      #d1661f;
    --flame-logo-deep: #9b4515;
    --ember:    #dd8a2b;
    --deep:     #2f1d12;
    --shell:    1180px;
    --serif:    "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
    --sans:     "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --arabic:   "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
}

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

/* ==========================================================================
   Mobil
   Grundregler som gäller alla bredder, plus en samlad mobilsektion sist.
   ========================================================================== */

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

/* Inget innehåll får spränga bredden */
img, svg, video, iframe { max-width: 100%; }
h1, h2, h3, h4, p, li, a, blockquote, td, th { overflow-wrap: break-word; }

/* Rutnätsspår ska aldrig växa av sitt innehåll */
.grid > *, .cards > *, .themes > *, .adults > *, .facts > *,
.story-layout > *,
.split > *, .hero-grid > *, .hero-box > *, .quote-grid > *,
.quote-box > *, .story-grid > *, .factband .shell > *, .team > * { min-width: 0; }

.searchbar input {
    /* Utan detta räknar webbläsaren fältets standardbredd (20 tecken) som
       minsta bredd. Med arabiskt typsnitt blir det över 400 px och spränger
       rutnätet på mobil. */
    min-width: 0;
    max-width: 100%;
    width: 100%;
}


body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 17px/1.75 var(--sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

[dir="rtl"] body { font-family: var(--arabic); }

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 500;
    line-height: 1.1;
    margin: 0 0 .6rem;
    letter-spacing: -.015em;
}
h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
h3 { font-size: 1.45rem; }
h4 { font-size: 1.08rem; line-height: 1.25; }
p { margin: 0 0 1.1rem; }
a { color: inherit; }

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
    font-family: var(--arabic); font-weight: 600; letter-spacing: 0; line-height: 1.35;
}

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 1.75rem; }
.narrow { max-width: 780px; }

.skip { position: absolute; inset-inline-start: -9999px; }
.skip:focus { inset-inline-start: 1rem; top: 1rem; background: var(--flame); color: #fff; padding: .6rem 1rem; z-index: 100; }

/* Etikett i versaler med linje före */
.kicker {
    display: inline-flex; align-items: center; gap: .7rem;
    font-family: var(--sans); font-size: .74rem; font-weight: 600;
    letter-spacing: .2em; text-transform: uppercase; color: var(--flame);
    margin: 0 0 1.3rem;
}
.kicker::before { content: ""; width: 30px; height: 1px; background: currentColor; }
.kicker-plain::before { display: none; }
[dir="rtl"] .kicker { letter-spacing: 0; }

/* ---------- Sidhuvud ---------- */

.site-head {
    position: sticky; top: 0; z-index: 40;
    background: rgba(251, 247, 240, .93);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--line);
}
.head-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 80px; }
.head-right { display: flex; align-items: center; gap: 2.2rem; }

.logo { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
.logo-text strong { display: block; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.logo-text small { display: block; font-size: .73rem; color: var(--ink-2); letter-spacing: .01em; }
/* Lågan ur logotyp 1a, inbäddad som SVG av sf_logo_mark(). Färgen ligger i
   --flame-logo och är medvetet mer orange än accentfärgen --flame: märket är
   en grafisk form och klarar den ljusare tonen (3,4:1 mot papperet, kravet
   är 3:1), medan knappar och länkar behöver den mörkare för att nå 4,5:1.
   Vill LFI backa till formgivarens ursprungliga kulör räcker det att sätta
   --flame-logo till #b5451f och --flame-logo-deep till #7a2f13. */
.logo-mark { width: 30px; height: 30px; flex: none; display: block; }
/* Lågan fyller bara 70 % av rutans höjd, så i sidhuvudet är rutan större än
   textblocket bredvid (44 px) för att lågan ska möta det. Samma luft i sidled
   förklarar det smalare mellanrummet. Sidfoten har bara namnet på en rad och
   behåller den mindre storleken. */
.site-head .logo { gap: .5rem; }
.site-head .logo-mark { width: 48px; height: 48px; }
.logo-svg { display: block; width: 100%; height: 100%; }
.logo-svg .logo-flame { fill: var(--flame-logo); }
.logo-svg .logo-fold { fill: var(--flame-logo-deep); }
.logo-svg .logo-drop { fill: var(--paper); }

/* Sidfoten är mörk, så droppen ska ha den bakgrunden i stället för papperets. */
.site-foot .logo-svg .logo-drop { fill: var(--deep); }

/* Egen logotypfil, vald under Anpassa → Webbplatsinformation. */
.logo-file { display: block; width: auto; height: 36px; }
.site-head .logo-file { max-height: 44px; }

.site-nav { display: flex; gap: 1.9rem; font-size: .96rem; }
.site-nav a { text-decoration: none; color: var(--ink-2); padding-block: .35rem; position: relative; transition: color .15s ease; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.site-nav a[aria-current="page"]::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--flame); }

.lang { display: flex; gap: .15rem; padding: .2rem; border: 1px solid var(--line-2); border-radius: 999px; }
.lang a { text-decoration: none; font-size: .76rem; font-weight: 600; letter-spacing: .06em; padding: .32rem .62rem; border-radius: 999px; color: var(--ink-2); transition: background .12s ease, color .12s ease; }
.lang a:hover { background: var(--sand); color: var(--ink); }
.lang a.is-active { background: var(--deep); color: var(--paper); }

.nav-toggle, .nav-burger { display: none; }

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

.btn {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .92rem 1.7rem; border-radius: 999px; border: 1px solid transparent;
    font: 500 .98rem/1 var(--sans); text-decoration: none; cursor: pointer;
    transition: transform .14s ease, background .14s ease, color .14s ease, border-color .14s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--flame); color: #fff; }
.btn-primary:hover { background: #9d3316; }
.btn-line { border-color: var(--line-2); color: var(--ink); }
.btn-line:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-light { background: var(--paper); color: var(--deep); }

.link-more {
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 500; text-decoration: none; white-space: nowrap;
    border-block-end: 1px solid var(--line-2); padding-block-end: 3px;
    transition: border-color .14s ease, color .14s ease;
}
.link-more:hover { color: var(--flame); border-color: var(--flame); }

/* ---------- Bildytor ---------- */

.art-svg { width: 100%; height: 100%; display: block; }

/* Uppladdade bilder ska fylla sin yta precis som den genererade SVG:n gör.
   Utan de här raderna behåller <img> höjden ur sitt height-attribut medan
   bredden klämts ihop av max-width: fotot blir utdraget på höjden och
   avklippt av rutans overflow. Gäller alla bildytor, även de mallar som
   ritar the_post_thumbnail() själva i stället för att gå via sf_media(). */
.card-media img, .mini-media img, .story-media img, .quote-avatar img {
    display: block; width: 100%; height: 100%; object-fit: cover;
}

.card-media, .mini-media, .story-media {
    position: relative; overflow: hidden; border-radius: 12px;
    background: var(--sand);
}
.card-media { aspect-ratio: 4 / 3; }
.mini-media { aspect-ratio: 1; border-radius: 8px; }

.badge {
    position: absolute; inset-block-end: .75rem; inset-inline-start: .75rem;
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(251, 247, 240, .95); color: var(--deep);
    font-size: .74rem; font-weight: 600; letter-spacing: .04em;
    padding: .3rem .7rem; border-radius: 999px;
}

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

.hero { padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 4vw, 3.5rem); }
.hero-grid { display: grid; grid-template-columns: 1fr .82fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.hero h1 { max-width: 13ch; }
.hero-lead { font-size: 1.18rem; color: var(--ink-2); max-width: 44ch; margin-block-start: 1.5rem; }

/* Hjältespalten på startsidan är smal, så 44ch räcker där. På berättelse-
   och temasidorna ligger ingressen över hela spaltbredden och bryter då
   raderna långt innan texten tagit slut. */
.hero-lead.lead-wide { max-width: 62ch; margin-block-end: 2.5rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-block-start: 2.2rem; }

.hero-langs { display: flex; gap: 1.4rem; margin-block-start: 2.5rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line); color: var(--ink-2); font-size: .88rem; }
.hero-langs b { color: var(--ink); font-weight: 500; }

/* Utvalt kort i hero */
.featured { position: relative; }
.featured .card-media { aspect-ratio: 3 / 4; border-radius: 16px; }
.featured-tag {
    position: absolute; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 2;
    background: var(--paper); color: var(--deep);
    font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    padding: .45rem .9rem; border-radius: 999px;
}
.featured-body { padding-block-start: 1.3rem; }
.featured-body h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-block-end: .5rem; }
.featured-body h2 a { text-decoration: none; }
.featured-body h2 a:hover { color: var(--flame); }
.featured-body p { color: var(--ink-2); font-size: .98rem; }

/* ---------- Sifferband ---------- */

.factband { background: var(--deep); color: #f3e7d7; }
.factband .shell { display: grid; grid-template-columns: repeat(var(--fact-cols, 4), 1fr); }
.fact {
    padding: 2.4rem 1.6rem;
    border-inline-start: 1px solid rgba(255, 255, 255, .13);
}
.fact:first-child { border-inline-start: 0; padding-inline-start: 0; }
.fact strong {
    display: block; font-family: var(--serif); font-weight: 500;
    font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.03em;
    color: var(--ember);
}
.fact b { display: block; font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin-block: .7rem .5rem; }
.fact span { display: block; color: #c2ab93; font-size: .92rem; line-height: 1.5; }
[dir="rtl"] .fact b { letter-spacing: 0; }

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

.section { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.section-paper { background: var(--paper-2); border-block: 1px solid var(--line); }
.section-sand { background: var(--sand); }

.section-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-block-end: 2.8rem; }
.section-head h2 { margin: 0; }
.section-head p { color: var(--ink-2); margin: .6rem 0 0; max-width: 54ch; }

/* ---------- Kort ---------- */

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem 2rem; }

.card { position: relative; }
.card h3 { margin: .6rem 0 .5rem; }
.card h3 a { text-decoration: none; transition: color .14s ease; }
.card:hover h3 a { color: var(--flame); }
.card:hover .art-svg { transform: scale(1.035); }
.art-svg { transition: transform .35s ease; }
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.card-content { padding-block-start: 1.1rem; }
.card-kicker { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
[dir="rtl"] .card-kicker { letter-spacing: 0; }
.excerpt { color: var(--ink-2); font-size: .99rem; margin-block-end: .8rem; }
.card-meta { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--ink-2); margin: 0; }
.card-meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--flame); flex: none; }

/* Brett kort: går över hela raden med bilden vid sidan */
.card-wide {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
    gap: clamp(1.8rem, 3vw, 3rem); align-items: center;
    padding-block-end: 2.4rem; border-block-end: 1px solid var(--line);
}
/* Linjen skiljer korten åt – efter det sista finns inget att skilja. */
.card-wide:last-child { padding-block-end: 0; border-block-end: 0; }
.card-wide .card-media { aspect-ratio: 16 / 11; border-radius: 14px; }
.card-wide .card-content { padding-block-start: 0; max-width: 46ch; }
.card-wide h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin-block: .7rem .7rem; }
.card-wide .excerpt { font-size: 1.05rem; }

/* Liten rad */
.mini { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 1rem; align-items: center; padding-block: 1.1rem; border-block-end: 1px solid var(--line); }
.mini h4 { margin: 0 0 .2rem; }
.mini h4 a { text-decoration: none; }
.mini:hover h4 a { color: var(--flame); }
.mini p { margin: 0; font-size: .86rem; color: var(--ink-2); }

/* ---------- Temaindex ---------- */

.theme-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 3rem; }
.theme-row {
    position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
    padding-block: 1.15rem; border-block-end: 1px solid var(--line-2); text-decoration: none;
    transition: padding-inline .18s ease, border-color .18s ease;
}
.theme-row:hover { padding-inline: .8rem; border-color: var(--flame); }
.theme-row span:first-child { font-family: var(--serif); font-size: 1.6rem; }
.theme-row:hover span:first-child { color: var(--flame); }
.theme-row em { font-style: normal; font-size: .85rem; color: var(--ink-2); letter-spacing: .1em; }

/* ---------- Citat ---------- */

.quote-band { background: var(--deep); color: #f6ece0; padding-block: clamp(3.5rem, 6vw, 5.5rem); }

/* Citatbandet sist på Om oss ligger direkt ovanför sidfoten, och båda är
   mörka. Utan den här fogen läses de som ett enda stort mörkt fält med ett
   tomrum i mitten – bandets bottenmarginal och sidfotens toppmarginal lades
   ihop till nästan tio rader luft. Här skärs luften ned och en tunn linje
   talar om var det ena slutar och det andra börjar. */
.quote-band-end { padding-block-end: clamp(2.5rem, 4vw, 3.5rem); }

.ends-with-quote .site-foot {
    padding-block-start: clamp(2.5rem, 4vw, 3.5rem);
    border-block-start: 1px solid rgba(255, 255, 255, .12);
}
.quote-grid { display: grid; grid-template-columns: 1fr .55fr; gap: 3.5rem; align-items: center; }
.quote-band blockquote { margin: 0; font-family: var(--serif); font-size: clamp(1.7rem, 3.6vw, 2.7rem); font-weight: 400; line-height: 1.28; letter-spacing: -.02em; max-width: 22ch; }
[dir="rtl"] .quote-band blockquote { font-family: var(--arabic); line-height: 1.6; }

/* Radlängden på 22ch sattes när bandet var tvåspaltigt och citatet delade
   bredden med knappen. Helbredd tål mer, men inte hela skalet: en rad på
   1100 px i 43-punkters antikva är ingen behaglig läsning. 44ch rymmer ett
   kort citat på en rad och bryter längre citat där de ska brytas. */
.quote-band-end blockquote { max-width: 44ch; }

.quote-band .quote-by { display: flex; align-items: center; gap: 1rem; margin-block-start: 2rem; color: #c2ab93; font-size: .95rem; }
.quote-avatar { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; flex: none; }
.quote-side { border-inline-start: 1px solid rgba(255,255,255,.15); padding-inline-start: 2.5rem; }
.quote-side p { color: #c2ab93; font-size: .95rem; }

/* ---------- Steg ---------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.step { border-block-start: 2px solid var(--ink); padding-block-start: 1.4rem; }
.step-no { font-family: var(--serif); font-size: 1rem; color: var(--flame); display: block; margin-block-end: .6rem; }
.step h3 { font-size: 1.25rem; }
.step p { color: var(--ink-2); font-size: .97rem; margin: 0; }

/* ---------- Filter och sök ---------- */

.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; margin-block-end: 1.6rem; }
.searchbar { display: flex; gap: .6rem; min-width: 280px; flex: 1; max-width: 440px; margin-block-end: 1.4rem; }
.searchbar input { flex: 1; padding: .78rem 1.1rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper-2); font: inherit; font-size: .95rem; color: var(--ink); }
.searchbar input:focus { outline: 2px solid var(--ember); outline-offset: 1px; }
.result-count { color: var(--ink-2); font-size: .9rem; margin: 0; }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 3rem; padding-block-end: 2rem; border-block-end: 1px solid var(--line); }
.filters a { text-decoration: none; font-size: .9rem; padding: .48rem 1.05rem; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2); background: var(--paper-2); transition: all .14s ease; }
.filters a:hover { border-color: var(--ink-2); color: var(--ink); }
.filters a.is-active { background: var(--deep); border-color: var(--deep); color: var(--paper); }

.empty { padding: 4rem 2rem; text-align: center; color: var(--ink-2); border: 1px dashed var(--line-2); border-radius: 16px; }

/* ---------- Enskild berättelse ---------- */

.story-head { padding-block: 2.5rem 2rem; }
/* Egen rad, så att överrubriken under inte hamnar bredvid. fit-content håller
   den klickbara ytan lika smal som texten. */
.back-link { display: flex; inline-size: fit-content; align-items: center; gap: .4rem; color: var(--ink-2); text-decoration: none; font-size: .92rem; margin-block-end: 2rem; }
.back-link:hover { color: var(--flame); }
.story-head h1, .story-hero h1 { max-width: 17ch; }
.story-head .lead, .story-hero .lead { font-family: var(--sans); font-size: 1.2rem; color: var(--ink-2); max-width: 52ch; margin-block-start: 1.4rem; }

.story-media { aspect-ratio: 21 / 9; border-radius: 16px; margin-block: 2.5rem; }

/* Text ovanpå bilden – det andra layoutvalet, se sf_story_layouts(). Rutan
   ligger i spalten som bilden under rubriken, men höjden kommer från bildens
   egna proportioner (aspect-ratio sätts i mallen). En stående bild blir alltså
   hög i stället för att beskäras till ett band. Bild och text delar samma
   rutnätscell: är texten högre än bilden, som på mobil, växer rutan och
   bilden beskärs för att fylla den. */
.story-hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr);
    border-radius: 16px; margin-block-end: 2.5rem;
    background: var(--deep); color: #fff;
}
.story-hero > .story-hero-media, .story-hero > .story-hero-body { grid-area: 1 / 1; }
/* stretch måste sägas ut: ett rutnätsobjekt med aspect-ratio sträcks annars
   inte när texten gör raden högre. Bredden låses, annars räknas den fram ur
   proportionerna och den sträckta höjden och spränger rutan på mobil. */
.story-hero-media { z-index: -2; align-self: stretch; width: 100%; min-width: 0; max-height: 1500px; }
.story-hero-media img, .story-hero-media svg { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Texten står nertill, så tonen är tätast mot underkanten och tunnar ut uppåt.
   Den svagare tonen från textens sida håller ingressen läsbar mot ljusa
   partier utan att släcka bildens övre del. */
.story-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(to top, rgba(36, 24, 16, .88) 0%, rgba(36, 24, 16, .55) 32%, transparent 62%),
        linear-gradient(to right, rgba(36, 24, 16, .45) 0%, rgba(36, 24, 16, .15) 55%, transparent 80%);
}
[dir="rtl"] .story-hero::after {
    background:
        linear-gradient(to top, rgba(36, 24, 16, .88) 0%, rgba(36, 24, 16, .55) 32%, transparent 62%),
        linear-gradient(to left, rgba(36, 24, 16, .45) 0%, rgba(36, 24, 16, .15) 55%, transparent 80%);
}

.story-hero-body { align-self: end; padding: clamp(1.75rem, 5vw, 4.5rem); text-shadow: 0 1px 14px rgba(0, 0, 0, .25); }
.story-hero h1 { color: #fff; }
.story-hero .kicker { color: var(--ember); }
.story-hero .lead { color: rgba(255, 255, 255, .9); margin-block-end: 0; }

.story-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding-block: 1.5rem; border-block: 1px solid var(--line); }
.story-facts div span { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-block-end: .3rem; }
.story-facts div b { font-weight: 500; font-size: .98rem; }
[dir="rtl"] .story-facts div span { letter-spacing: 0; }

.audio { display: flex; align-items: center; gap: 1rem; margin-block: 2.5rem; padding: .9rem 1.2rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper-2); max-width: 440px; }
.audio-btn { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 0; background: var(--flame); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: .85rem; }
.audio-wave { flex: 1; height: 24px; background: repeating-linear-gradient(90deg, var(--line-2) 0 3px, transparent 3px 8px); border-radius: 4px; }
.audio span { font-size: .88rem; color: var(--ink-2); }

.story-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 4rem; align-items: start; }
.prose { font-size: 1.15rem; line-height: 1.85; max-width: 64ch; }
.prose p:first-of-type::first-letter {
    float: inline-start; font-family: var(--serif); font-size: 4.2rem; line-height: .78;
    padding-inline-end: .55rem; padding-block-start: .35rem; color: var(--flame); font-weight: 500;
}
/* Anfang används inte i arabisk sättning – den skulle dessutom bryta loss
   första bokstaven ur ordets sammanbundna form. */
[dir="rtl"] .prose p:first-of-type::first-letter {
    float: none; font-size: inherit; line-height: inherit; color: inherit;
    padding: 0; font-weight: inherit;
}
.prose .pull {
    margin-block: 2.6rem; padding-inline-start: 1.6rem; border-inline-start: 3px solid var(--flame);
    font-family: var(--serif); font-size: 1.65rem; line-height: 1.35; color: var(--deep);
}
[dir="rtl"] .prose .pull { font-family: var(--arabic); line-height: 1.7; }

.story-aside { position: sticky; top: 110px; }
.story-aside h3 { font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin-block-end: 1rem; }
[dir="rtl"] .story-aside h3 { letter-spacing: 0; }
.share-list { display: flex; gap: .5rem; }
.share-list a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; text-decoration: none; font-size: .85rem; color: var(--ink-2); }
.share-list a:hover { border-color: var(--flame); color: var(--flame); }

.side-card { background: var(--sand); border-radius: 16px; padding: 1.8rem; }
.side-card h3 { font-size: 1.2rem; }
.side-card ol { margin: 1rem 0 0; padding-inline-start: 1.2rem; color: var(--ink-2); font-size: .95rem; }
.side-card li { margin-block-end: .7rem; }

/* Raden som talar om att en text ännu inte är översatt. Sandfärgad och lugn –
   den ska upplysa, inte skrika, och försvinner så fort texten skrivits om. */
.translation-notice {
    background: var(--sand);
    border-inline-start: 3px solid var(--ember);
    border-radius: 0 10px 10px 0;
    padding: .9rem 1.2rem;
    margin-block-end: 2rem;
    font-size: .93rem;
    color: var(--ink-2);
}

/* ---------- Vårt team ---------- */

.team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem 1.6rem; }
.team-member h3 { font-size: 1.1rem; margin-block: 1rem .15rem; }
.team-member p { margin: 0; font-size: .92rem; color: var(--ink-2); line-height: 1.45; }
.team-photo { aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--sand); }
.team-photo-empty { display: grid; place-items: center; border: 1px solid var(--line); }
.team-photo-empty span { font-family: var(--serif); font-size: 2rem; color: var(--line-2); letter-spacing: .04em; }
.team-photo img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    /* Svartvitt med en aning värme. Porträtten är tagna vid olika tillfällen
       och i olika ljus; samma behandling på alla binder ihop dem och håller
       dem från att bli det starkaste på en sida som annars är lugn.
       Behandlingen ligger här och inte i bildfilerna, så LFI kan ladda upp
       färgbilder och byta åsikt utan att redigera om något. Vill de ha färg
       igen är det den här filter-raden som ska bort. */
    filter: grayscale(1) contrast(1.04) sepia(.14);
}

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

.site-foot { background: var(--deep); color: #eadcc9; padding-block: 4.5rem 2rem; }
.site-foot .logo-text strong { color: #fff; }
.site-foot .logo-text small { color: #b39a80; }
/* Antalet spalter varierar: språklistan ritas bara med flerspråksplugin och
   "Följ oss" bara när ett konto fått en adress. auto-fit fäller ihop de spår
   som blir tomma, så raden ser lika avsiktlig ut med tre spalter som med fem. */
.foot-grid { display: grid; grid-template-columns: var(--foot-cols, 1.6fr 1fr 1fr 1fr); gap: 2.6rem; }
.foot-org { color: #b39a80; font-size: .93rem; margin-block-start: 1.2rem; max-width: 34ch; }
.foot-col h2 { font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #b39a80; margin-block-end: 1.1rem; }
[dir="rtl"] .foot-col h2 { letter-spacing: 0; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .95rem; }
.foot-col a { text-decoration: none; }
.foot-col a:hover { color: var(--ember); }

/* Följ oss: ikon och namn på samma rad, i samma listform som spalterna intill. */
.social-row a { display: inline-flex; align-items: center; gap: .6rem; }
.social-icon { width: 20px; height: 20px; flex: none; }
.social-icon svg { display: block; width: 100%; height: 100%; }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-block-start: 3.5rem; padding-block-start: 1.6rem; border-block-start: 1px solid rgba(255,255,255,.15); color: #b39a80; font-size: .86rem; }

/* ---------- Responsivt ---------- */

@media (max-width: 1000px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
    .card-wide { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
    .story-layout { grid-template-columns: 1fr; gap: 2.5rem; }
    .story-aside { position: static; }
    .factband .shell { grid-template-columns: repeat(2, 1fr); }
    .fact:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
    .fact { padding-block: 1.8rem; }
}

@media (max-width: 860px) {
    .hero-grid, .quote-grid { grid-template-columns: 1fr; }
    .quote-side { border-inline-start: 0; padding-inline-start: 0; border-block-start: 1px solid rgba(255,255,255,.15); padding-block-start: 2rem; }
    .steps { grid-template-columns: 1fr; gap: 2rem; }
    .theme-list { grid-template-columns: 1fr; }
    .story-facts { grid-template-columns: repeat(2, 1fr); }
    .team { grid-template-columns: repeat(3, 1fr); }
    .foot-grid { grid-template-columns: 1fr 1fr; }

    .nav-burger { display: block; width: 46px; height: 46px; border: 1px solid var(--line-2); border-radius: 12px; position: relative; cursor: pointer; }
    .nav-burger span, .nav-burger span::before, .nav-burger span::after {
        content: ""; position: absolute; inset-inline-start: 13px; width: 18px; height: 2px; background: var(--ink); border-radius: 2px;
    }
    .nav-burger span { top: 22px; }
    .nav-burger span::before { top: -6px; inset-inline-start: 0; }
    .nav-burger span::after { top: 6px; inset-inline-start: 0; }

    .head-right { position: absolute; inset-inline: 0; top: 80px; display: none; flex-direction: column; align-items: stretch; gap: 1.2rem; background: var(--paper); border-block-end: 1px solid var(--line); padding: 1.2rem 1.75rem 1.6rem; }
    .nav-toggle:checked ~ .head-right { display: flex; }
    .site-nav { flex-direction: column; gap: 0; }
    .site-nav a { padding-block: .85rem; border-block-end: 1px solid var(--line); }
    .lang { align-self: start; }
}

@media (max-width: 620px) {
    .factband .shell { grid-template-columns: 1fr; }
    .fact { border-inline-start: 0 !important; padding-inline: 0 !important; padding-block: 1.5rem; border-block-start: 1px solid rgba(255,255,255,.13); }
    .fact:first-child { border-block-start: 0; }
    .grid { grid-template-columns: 1fr; }
    .card-wide { grid-template-columns: 1fr; }
    /* Texten tar hela bredden och ofta hela höjden här, så tonen läggs
       jämnt över bilden, tätast nertill. */
    .story-hero::after, [dir="rtl"] .story-hero::after {
        background: linear-gradient(to top, rgba(36, 24, 16, .88) 0%, rgba(36, 24, 16, .62) 55%, rgba(36, 24, 16, .4) 100%);
    }
    .card-wide .card-media { aspect-ratio: 4 / 3; }
    .team { grid-template-columns: repeat(2, 1fr); }
    .foot-grid { grid-template-columns: 1fr; }
    .story-facts { grid-template-columns: 1fr; }
}


/* ---------- Mobil: tryckytor, staplade fält och plats för kontrollraden ---------- */

@media (max-width: 760px) {
    /* iOS zoomar in fält under 16px – håll dem på minst 16px */
    .searchbar input { font-size: 16px; }

    /* Sök: knappen under fältet i stället för bredvid */
    .searchbar { flex-wrap: wrap; min-width: 0; max-width: none; }
    .searchbar input { flex: 1 1 100%; min-width: 0; }
    .searchbar button, .searchbar .btn { width: 100%; justify-content: center; }

    /* Tryckytor: minst 44 px höga i menyer, filter och sidfot */
    .site-nav a, .lang a, .filters a, .chips a, .foot-col a, .theme-row, .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .site-nav a, .theme-row { display: flex; }
    .lang a { justify-content: center; min-width: 46px; }
    .btn { justify-content: center; }

    /* Knappar tar hela bredden när de står ensamma */
    .hero-actions .btn, form > .btn, form > button.btn { width: 100%; }
    .hero-actions { gap: .7rem; }

    /* Den flytande kontrollraden ligger över sidfoten – ge plats */
    body { padding-block-end: 76px; }
}

@media (max-width: 400px) {
    .shell, .wrap { padding-inline: 1.15rem; }
    .site-head .logo-mark { width: 40px; height: 40px; }
}

/* ==========================================================================
   WordPress
   Klasser som WordPress självt matar ut och som mockupen aldrig behövde.
   ========================================================================== */

/* Skärmläsartext – samma roll som mockupens .skip, men för dold etikettext. */
.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background: var(--flame);
    clip-path: none;
    color: #fff;
    display: block;
    font-size: .9rem;
    height: auto;
    inset-inline-start: 1rem;
    padding: .6rem 1rem;
    top: 1rem;
    width: auto;
    z-index: 100;
}

/* Admin-baren får inte lägga sig över det klistrade sidhuvudet. */
.admin-bar .site-head { top: 32px; }

@media screen and (max-width: 782px) {
    .admin-bar .site-head { top: 46px; }
}

/* Bilder och bildtexter ur blockredigeraren. */
.wp-caption { margin-block-end: 1.1rem; max-width: 100%; }
.wp-caption img { display: block; height: auto; max-width: 100%; }

.wp-caption-text,
.gallery-caption,
.wp-element-caption {
    color: var(--ink-2);
    font-size: .86rem;
    margin-block-start: .5rem;
}

.alignleft  { float: inline-start; margin-inline-end: 1.5rem; margin-block-end: 1rem; }
.alignright { float: inline-end;   margin-inline-start: 1.5rem; margin-block-end: 1rem; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { margin-inline: 0; max-width: 100%; }

.sticky, .bypostauthor { position: relative; }

/* Paginering – arkivet i mockupen visade alla sex berättelser utan sidbrytning. */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-block-start: 3.5rem;
}

.pagination .page-numbers {
    border: 1px solid var(--line-2);
    border-radius: 999px;
    color: var(--ink-2);
    font-size: .92rem;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: .9rem;
    text-decoration: none;
    transition: all .14s ease;
}

.pagination .page-numbers:hover { background: var(--sand); color: var(--ink); }
.pagination .page-numbers.current { background: var(--deep); border-color: var(--deep); color: var(--paper); }
.pagination .page-numbers.dots { border-color: transparent; }

/* Respektera systemets rörelseinställning. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .btn:hover { transform: none; }
    .card:hover .art-svg { transform: none; }
}

/* Menyknappen ska gå att nå med tangentbord.
   Mockupen dolde kryssrutan med display:none, vilket gör den omöjlig att
   fokusera – den som inte kan använda mus kom aldrig åt menyn på mobil.
   Här flyttas den utanför skärmen istället, så att mellanslag växlar menyn. */
@media (max-width: 860px) {
    .nav-toggle {
        clip-path: inset(50%);
        display: block;
        height: 1px;
        margin: 0;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .nav-toggle:focus-visible + .nav-burger {
        outline: 2px solid var(--ember);
        outline-offset: 2px;
    }
}

/* Ljudspelaren använder webbläsarens egen kontroll i stället för mockupens
   attrapp, så att den går att styra med tangentbord. Vågmönstret utgår. */
.audio audio {
    flex: 1;
    min-width: 0;
    height: 40px;
}

/* Anfangen ska bara sitta på brödtextens första stycke.
   :first-of-type räknas per förälder, så ett stycke inuti ett citatblock
   räknades också som "första" och fick sin egen anfang. */
.prose p:first-of-type::first-letter { all: unset; }

.prose > p:first-of-type::first-letter {
    float: inline-start;
    font-family: var(--serif);
    font-size: 4.2rem;
    line-height: .78;
    padding-inline-end: .55rem;
    padding-block-start: .35rem;
    color: var(--flame);
    font-weight: 500;
}

[dir="rtl"] .prose > p:first-of-type::first-letter { all: unset; }

/* Mellanrubriker i brödtexten.
   Rubrikerna har ingen toppmarginal globalt, eftersom de annars spräcker
   sidhuvudena. I löpande text behöver de däremot luft ovanför sig, annars
   klistras rubriken fast i stycket före. */
.prose h2,
.prose h3,
h2.wp-block-heading,
h3.wp-block-heading {
    margin-block-start: 2.8rem;
    margin-block-end: .9rem;
}

/* Regeln hänger på .wp-block-heading, inte bara på .prose. Klassen sätter
   WordPress på rubrikblocken både i redigeraren och på sajten – scopar man
   bara till .prose faller redigeraren tillbaka på den globala h2:an och
   visar rubrikerna dubbelt så stora som de blir i verkligheten. */
.prose h2,
h2.wp-block-heading { font-size: clamp(1.6rem, 2.4vw, 2.05rem); }

.prose h3,
h3.wp-block-heading { font-size: 1.25rem; }

/* Första rubriken sitter redan under sidans H1 och ska inte skjutas ned. */
.prose > :first-child { margin-block-start: 0; }

/* Länkar i brödtexten.
   a ärver färg globalt, så utan den här regeln syns en länk bara på
   understrykningen. Flamfärgen är samma accent som citat och anfang. */
.prose a {
    color: var(--flame);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    transition: color .14s ease;
}

.prose a:hover,
.prose a:focus-visible { color: var(--ember); }

/* Citatblocket ur redigeraren ska se ut som mockupens pull-quote, så att
   redaktören kan använda vanliga Citat-blocket och få rätt form. */
.prose blockquote,
.prose .wp-block-quote {
    margin-block: 2.6rem;
    margin-inline: 0;
    padding-inline-start: 1.6rem;
    border-inline-start: 3px solid var(--flame);
    font-family: var(--serif);
    font-size: 1.65rem;
    line-height: 1.35;
    color: var(--deep);
}

.prose blockquote p { margin: 0 0 .5rem; font-size: inherit; line-height: inherit; }
.prose blockquote cite { display: block; font-family: var(--sans); font-size: .9rem; font-style: normal; color: var(--ink-2); }

[dir="rtl"] .prose blockquote { font-family: var(--arabic); line-height: 1.7; }

/* ==========================================================================
   Stödraden
   Logotyperna under Om oss. De kommer i olika höjd och format,
   så de tvingas ned till en gemensam maxhöjd i stället för gemensam bredd –
   annars ser den breda liggande logotypen dubbelt så stor ut som den kvadratiska.
   ========================================================================== */

.supporters-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1.75rem, 5vw, 3.5rem);
}

.supporters-row a { display: inline-flex; align-items: center; text-decoration: none; }

.supporter img {
    display: block;
    max-height: 62px;
    width: auto;
    /* Logotyper i färg ska inte slåss med den varma papperstonen. */
    opacity: .88;
    transition: opacity .14s ease;
}

.supporters-row a:hover img,
.supporters-row a:focus-visible img { opacity: 1; }

/* Innan bildfilerna finns visas namnet. Det ska läsas som en avsändare,
   inte som brödtext. */
.supporter-text a,
.supporter-text {
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--line-2);
    text-underline-offset: .22em;
    transition: text-decoration-color .14s ease, color .14s ease;
}

.supporter-text a:hover,
.supporter-text a:focus-visible { color: var(--flame); text-decoration-color: var(--flame); }

[dir="rtl"] .supporter-text a, [dir="rtl"] .supporter-text { font-family: var(--arabic); }

/* ==========================================================================
   Händelser
   Bandet på startsidan med det som är på gång. Samma formspråk som korten:
   varm papperston, tunn linje, mjukt rundade hörn.
   ========================================================================== */

.events-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
}

.events-grid > * { min-width: 0; }

.event {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 16px;
    display: grid;
    gap: 1.2rem;
    grid-template-columns: 60px 1fr;
    padding: 1.5rem;
    position: relative;
    transition: border-color .14s ease, transform .14s ease;
}

.event:hover {
    border-color: var(--line-2);
    transform: translateY(-2px);
}

.event.is-now { border-color: var(--flame); }

/* Datumbrickan. Dold för skärmläsare – datumet står i klartext bredvid. */
.event-date {
    border-inline-end: 1px solid var(--line);
    margin: 0;
    padding-inline-end: 1.2rem;
    text-align: center;
}

.event-date strong {
    color: var(--flame);
    display: block;
    font-family: var(--serif);
    font-size: 2.1rem;
    font-weight: 500;
    line-height: 1;
}

.event-date span {
    color: var(--ink-2);
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    margin-block-start: .3rem;
    text-transform: uppercase;
}

.event-when {
    align-items: center;
    color: var(--ink-2);
    display: flex;
    flex-wrap: wrap;
    font-size: .82rem;
    font-weight: 600;
    gap: .5rem;
    letter-spacing: .06em;
    margin: 0 0 .5rem;
    text-transform: uppercase;
}

.event-now {
    background: var(--flame);
    border-radius: 999px;
    color: #fff;
    font-size: .7rem;
    letter-spacing: .1em;
    padding: .2rem .6rem;
}

.event h3 {
    font-size: 1.2rem;
    margin: 0 0 .4rem;
}

.event h3 a { text-decoration: none; }
.event:hover h3 a { color: var(--flame); }

.event-text {
    color: var(--ink-2);
    font-size: .94rem;
    margin: 0;
}

@media (max-width: 1000px) {
    .events-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .events-grid { grid-template-columns: 1fr; }
}

/* Är det bara ett eller två kort tar de hela bredden i stället för att
   trängas i en tredjedel. Texten får ändå inte bli längre än att den går att
   läsa. Tvåkortsregeln gäller bara där rutnätet annars har två kolumner eller
   fler, så att mobilen behåller en kolumn. */
.events-grid:has(> :only-child) { grid-template-columns: 1fr; }
.events-grid:has(> :only-child) .event-text { max-inline-size: 65ch; }

@media (min-width: 701px) {
    .events-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
}

/* Platsen sist på händelsekortet, som orten på ett berättelsekort. */
.event-place { margin-block-start: .7rem; font-size: .86rem; }

/* Korten ska bottna lika även när texterna är olika långa. */
.event-body { display: flex; flex-direction: column; }
.event-body .event-place { margin-block-start: auto; padding-block-start: .7rem; }

/* Tidigare händelser tonas ned – de finns kvar att bläddra i, men ska inte
   konkurrera med det som faktiskt är på gång. */
.events-grid.is-past .event { opacity: .72; }
.events-grid.is-past .event:hover { opacity: 1; }