/* ---------------------------------------------------------------------------
   Læsetypografi for sider med både arabisk og dansk tekst.

   Rollerne kommer fra forfatterens egne skrivekonventioner: en indledning der
   slutter med kolon, det arabiske citat, «hvilket betyder» med den danske
   gengivelse, og til sidst kilden.

   Adskillelsen sker med skala, luft og placering — ikke med bokse, rammer eller
   farvede baggrunde. Arabisk og dansk skal være tydeligt adskilt og stadig
   føles som én samlet tekst.
--------------------------------------------------------------------------- */

/* Den bevarede tekst fylder samme spalte som den omgivende brødtekst — den må
   ikke stå smallere inde i den. */

/* Udgangspunktet er venstrejusteret. Blokjusteringen lægges på længere nede,
   og kun hvor spalten er bred nok til at bære den. */
.reading p {
    margin: 0;
}

.reading > * + * {
    margin-top: 1.15rem;
}

/* --- Indledningen til et citat: «Allah sagde:» ---------------------------- */

/* Korte linjer justeres ikke — de skal stå som den indledning de er. */
.reading-lead {
    font: 600 0.95rem/1.6 var(--sans);
    letter-spacing: 0.01em;
    color: var(--muted);
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
}

/* --- Det arabiske citat --------------------------------------------------- */

/* Arabisk i en tekstblok er løbende prosa — en forklaring, ikke et kort citat.
   Den skal bruge hele spalten og læses højre mod venstre. Det korte versctat
   øverst på siden har sin egen, smallere sats i .verse-quote. */
.reading-arabic {
    font-family: var(--arabic);
    font-size: 1.55rem;
    line-height: 2.25;
    direction: rtl;
    text-align: right;
    text-justify: auto;
    hyphens: none;
    -webkit-hyphens: none;
    width: 100%;
    max-width: none;
    color: var(--ink);
    overflow-wrap: anywhere;
}

/* Luft omkring citatet, så det står som sin egen blok uden en ramme om sig. */
.reading > .reading-arabic {
    margin-top: 2.1rem;
}

.reading > .reading-lead + .reading-arabic {
    margin-top: 1rem;
}

.reading > .reading-arabic + * {
    margin-top: 1.9rem;
}

.reading > .reading-arabic + .reading-arabic {
    margin-top: 1.1rem;
}

/* --- Den danske gengivelse ------------------------------------------------ */

.reading-meaning {
    font-size: 1.05rem;
    line-height: 1.85;
}

/* --- Kilde og reference --------------------------------------------------- */

/* Kilden er en enkelt kort linje og må hverken justeres eller orddeles. */
.reading-reference {
    font: 0.85rem/1.6 var(--sans);
    letter-spacing: 0.02em;
    color: var(--muted);
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
}

.reading > * + .reading-reference {
    margin-top: 0.7rem;
}

.reading > .reading-reference + .reading-reference {
    margin-top: 0.2rem;
}

/* Efter en kilde begynder et nyt afsnit — der skal være luft imellem. */
.reading > .reading-reference + p:not(.reading-reference) {
    margin-top: 2rem;
}

/* --- Enkeltstående arabisk tekst uden for en tekstblok -------------------- */

/* Selve verset står centreret i spalten og i sidens guld, så det skiller sig
   ud fra forklaringen nedenunder uden at have en ramme om sig.

   Teksten centreres — ikke kassen. Derfor hverken max-width eller auto-margener:
   blokken fylder spalten, og `text-align` gør resten. Så kan ingen
   forældreregel, der sætter margen, flytte verset ud af midten. */
.verse-quote {
    font-family: var(--arabic);
    font-size: 1.9rem;
    line-height: 2.3;
    direction: rtl;
    text-align: center;
    margin-block: 0.6rem 2.2rem;
    color: var(--gold);
    overflow-wrap: anywhere;
}

.verse-meaning {
    font-size: 1.05rem;
    line-height: 1.85;
    margin: 0 0 0.7rem;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.verse-source {
    font: 0.85rem/1.6 var(--sans);
    letter-spacing: 0.02em;
    color: var(--muted);
    margin: 0 0 2.4rem;
    text-align: left;
}

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

@media (max-width: 650px) {
    .reading,
    .reading-arabic,
    .verse-quote {
        max-width: 100%;
    }

    .reading-arabic {
        font-size: 1.45rem;
        line-height: 2.15;
        margin-top: 1.7rem;
    }

    .verse-quote {
        font-size: 1.55rem;
        line-height: 2.1;
    }

    .reading > .reading-arabic + * {
        margin-top: 1.5rem;
    }

    .reading-meaning {
        font-size: 1rem;
    }

    /* Kildehenvisningen må ikke klemmes sammen på en smal skærm. */
    .reading-reference,
    .verse-source {
        font-size: 0.82rem;
        line-height: 1.7;
    }
}

/* ---------------------------------------------------------------------------
   Brødtekst og overskrifter

   Dansk tekst sættes i Inter — én skrift til både brødtekst og UI. De gyldne
   kursive numre og de store display-citater bruger stadig sidens serif; de er
   grafiske accenter, ikke læsetekst.
--------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
    font-family: var(--sans);
    font-weight: 650;
    letter-spacing: -0.021em;
    text-wrap: balance;
}

h1 {
    line-height: 1.12;
}

h2,
h3,
h4 {
    line-height: 1.25;
}

/* Læsespalten: rolig størrelse, luft mellem linjerne, og en bredde hvor øjet
   kan finde næste linje uden at lede. */
.prose {
    /* 100 anslag er linjelængden. Spalten er bredere end det, så teksten
       beholder sit mål, når sidebjælken tager mere plads — den ekstra bredde
       kommer fra sidens margen, ikke fra brødteksten. */
    max-width: 100ch;
    font-family: var(--sans);
    font-size: 1.075rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: -0.003em;
}

/* Kun lodret afstand. Kortformen `margin: 0 0 1.35em` ville også nulstille
   venstre og højre margen — og dermed slå centreringen af verset ihjel. */
.prose > p {
    margin-block: 0 1.35em;
}

.prose h2 {
    margin-top: 3.2rem;
    margin-bottom: 1rem;
    font-size: 1.6rem;
}

.prose h3 {
    margin-top: 2.4rem;
    margin-bottom: 0.7rem;
    font-size: 1.25rem;
}

.prose strong {
    font-weight: 620;
}

.prose ul,
.prose ol {
    margin: 0 0 1.35em;
    padding-inline-start: 1.4rem;
}

.prose li + li {
    margin-top: 0.5rem;
}

.reading {
    font-weight: 400;
    line-height: 1.75;
}

/* ---------------------------------------------------------------------------
   Blokjustering

   Kun i læsetekst, og kun hvor spalten er bred nok til at bære den. Under
   omkring 40 anslag pr. linje river justeringen huller mellem ordene i stedet
   for at samle teksten — derfor er venstrejusteret udgangspunktet, og
   blokjusteringen lægges på her.

   Overskrifter, indledninger, kilder og lister justeres aldrig. De er korte
   linjer, hvor justering kun skader.
--------------------------------------------------------------------------- */

@media (min-width: 561px) {
    .prose > p,
    .reading p:not(.reading-lead):not(.reading-reference):not(.reading-arabic),
    .verse-meaning {
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
}

/* Ujusteret tekst får en pænere højrekant, hvor browseren understøtter det. */
.prose,
.reading {
    text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   Læsespalte og sidebjælke

   Sidebjælken stod smal, fordi den engang kun rummede korte etiketter og
   værdier på verssiden — reference, surah, status. Koranen har siden fået sin
   egen opsætning, og her står i stedet bogens kapitelregister, hvor hver linje
   er en titel. Til det er 140 px for lidt: titlerne brækkede i tre linjer.

   Derfor: bredere spalte, og på brede skærme rykkes hele opsætningen ud mod
   sidens højre kant, så den ekstra bredde tages fra margenen og ikke fra
   teksten. Venstre kant bliver, hvor resten af siden har sin.
--------------------------------------------------------------------------- */

@media (min-width: 901px) {
    .content-shell {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 2.75rem;
    }
}

@media (min-width: 1180px) {
    .content-shell {
        /* Ud af beholderens 1200 px og helt ud til kanten — men kun mod højre.
           Margenen regnes i procent af forælderen, ikke i vw, så en synlig
           rullebjælke ikke skubber siden vandret. */
        width: auto;
        max-width: none;
        margin-left: max(1rem, calc((100% - 1200px) / 2));
        margin-right: 1rem;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 3.25rem;
    }
}

/* ---------------------------------------------------------------------------
   Overskriftsskala

   Overskrifterne var sat i plakatstørrelse — op til 6,2 rem, og 7 rem på
   landingssiderne. Det fyldte så meget, at indholdet nedenunder forsvandt.
   Skalaen her er stadig tydelig, men lader siden ånde.
--------------------------------------------------------------------------- */

h1 {
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    margin: 0.3rem 0 1rem;
}

h2 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
}

h3 {
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
}

/* --- Sidetop på detaljesider ---------------------------------------------- */

.page-hero {
    padding: 3.2rem 0 2.2rem;
}

/* Uden denne blev «Begynd med det grundlæggende» brækket i to, fordi
   overskriften var spærret til 18 anslag. */
.page-hero h1 {
    max-width: none;
    font-size: clamp(1.9rem, 3.4vw, 2.85rem);
    text-wrap: balance;
}

.page-hero .lead {
    font-size: 1.08rem;
    line-height: 1.7;
    max-width: 62ch;
}

/* --- Forklaringer, der dækker flere vers ---------------------------------- */

/* Nogle forklaringer læser en hel passage op og forklarer den samlet. Så står
   den samme tekst på hvert af versene, og linjen her fortæller læseren det,
   så teksten ikke ser ud til kun at handle om det ene vers, siden står på. */
.reading-scope {
    font: 0.85rem/1.6 var(--sans);
    letter-spacing: 0.02em;
    color: var(--muted);
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
    margin: 0 0 0.9rem;
}

/* --- Fodnoter fra bogens sider -------------------------------------------- */

/* Noterne er kilder til en hadith, en ordforklaring, en note om hvordan et ord
   læses. De hører til forklaringen, men ikke inde i den. Stod de i samme farve
   og størrelse som teksten, kunne læseren ikke se, hvor forklaringen slap —
   derfor står de i deres eget felt med guldkant og egen overskrift. */
.reading-notes {
    margin: 2.6rem 0 0;
    padding: 1.35rem 1.6rem 1.5rem;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-inline-start: 3px solid var(--gold);
}

/* Overskriften siger med det samme, hvad feltet er. Den er dansk som resten af
   sidens egne ord, og spærret ud som sidens øvrige småoverskrifter. */
.reading-notes-title {
    margin: 0 0 1.1rem;
    font: 750 0.72rem/1.4 var(--sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
}

/* Noterne er arabiske. Sat med brødskriften i 0,85rem blev de en stribe tegn,
   der ikke kunne læses — de skal have den arabiske skrift, sin egen størrelse
   og luft mellem linjerne. Hele listen læses højre mod venstre, så tallene
   står i den ende, øjet begynder. */
.reading-footnotes {
    margin: 0;
    padding-inline-start: 2.1rem;
    list-style: decimal;
    font-family: var(--arabic);
    font-size: 1.14rem;
    line-height: 2.05;
    color: var(--ink);
}

.reading-footnotes > li {
    margin: 0 0 1.05rem;
    padding-inline-start: 0.35rem;
    hyphens: none;
    -webkit-hyphens: none;
}

.reading-footnotes > li:last-child {
    margin-bottom: 0;
}

/* Tallet er vejen tilbage til markøren inde i teksten, så det skal kunne
   findes med øjnene alene. */
.reading-footnotes > li::marker {
    color: var(--gold);
    font: 700 0.94rem var(--sans);
}

/* --- Hvem forklaringen er fra ---------------------------------------------- */

/* Et vers kan have forklaringer fra flere værker. Navnet står som en overskrift
   over hver af dem, så læseren kan se, hvor den ene slutter og den næste
   begynder. Har verset kun ét værk, står linjen der ikke.

   Navnet er arabisk, og arabiske bogstaver hænger sammen, så det må ikke
   spærres ud som sidens andre småoverskrifter. I stedet bærer det guldfarven
   og en streg, der løber ud fra det og fylder resten af linjen. */
.reading-source {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 3rem 0 1.25rem;
    font-family: var(--arabic);
    font-size: 1.08rem;
    line-height: 1.9;
    color: var(--gold);
    hyphens: none;
    -webkit-hyphens: none;
}

.reading-source::after {
    content: "";
    flex: 1;
    height: 1px;
    background: color-mix(in srgb, var(--gold) 42%, transparent);
}

/* Den første forklaring skal ikke skubbes ned — afstanden ovenfor er til at
   skille to forklaringer fra hinanden. */
.reading-source:first-child {
    margin-top: 0;
}

.reading-source > a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.reading-source > a:hover,
.reading-source > a:focus-visible {
    border-bottom-color: currentColor;
}

/* --- En udtalelse citeret midt i en artikel ------------------------------- */

/* Koranversene staar ikke her. De har deres egen opsaetning i quran-verse.css
   — sidetoppens, med det groenne baand og «Forklaring» — og den er den samme,
   hvor paa siden man end moeder et vers.

   Udtalelserne har den ikke endnu. De skal have den, men de siger noget andet
   ovenover: «Profeten sagde:» og ikke «Allah sagde:». Indtil da staar de her,
   med en guldstreg over og en under.

   Ikke som en kasse. En kasse midt i en tekstspalte bliver et hul i
   laesningen, og oejet springer over den. I stedet to streger, som pladen i en
   bog: teksten holder inde, citatet staar, teksten fortsaetter. */
.article-reference {
    position: relative;
    margin: 2.6rem calc(var(--reference-bleed, 1.5rem) * -1) 2.8rem;
    padding: 1.9rem var(--reference-bleed, 1.5rem) 1.6rem;
    border-block: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
}

/* Selve verset staar allerede i sidens skrift for arabiske citater. Her faar
   det mere luft omkring sig og ingen bund under: stregerne baerer det. */
.article-reference .verse-quote {
    margin-block: 0 1.1rem;
    font-size: clamp(1.55rem, 2.4vw, 2.05rem);
    line-height: 2.15;
    color: var(--gold);
}

.article-reference .verse-quote:last-of-type {
    margin-bottom: 1.3rem;
}

/* Kilden er en vej videre og ikke en overskrift: lille, gylden, med pilen
   klistret til sig, saa det er tydeligt, at den kan trykkes. */
.article-reference-source {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.article-reference-source a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gold);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.article-reference-source a:hover,
.article-reference-source a:focus-visible {
    border-color: currentColor;
}

/* Inde i en forklaring staar en henvisning kun som sit link. Uden det ville
   siden folde sig selv ud i det uendelige — se article-reference.blade.php. */
.article-reference--inline {
    margin: 1.1rem 0;
    padding: 0;
    border: 0;
}

@media (max-width: 700px) {
    .article-reference {
        --reference-bleed: 0.9rem;
    }

    .article-reference .verse-quote {
        line-height: 2;
    }
}