/* --- Koranverset, som det ser ud overalt ------------------------------------

   Der var tre måder at vise et vers på: sidetoppens, Koranens egen og
   artiklens. Det her er sidetoppens, gjort så den også kan stå midt i en
   tekst — for det er den, der er gennemarbejdet.

   Selve båndet om det arabiske står ikke her. Det står i hero-verse-band.css
   sammen med sidetoppernes, så farven, kanten, sløringen og udtoningen er ét
   sted. Her står kun det, der er anderledes, når verset ikke fylder en hel
   sidetop: bredden.
--------------------------------------------------------------------------- */

.quran-verse {
    /* Hvor langt båndet stikker ud til hver side af brødteksten. Verset er
       ikke et afsnit i artiklen — det er noget, artiklen citerer — og skal
       kunne ses at være det, uden at der sættes en kasse om det. */
    --quran-verse-bleed: clamp(.75rem, 2vw, 1.75rem);

    /* Udtoningens længde, og dermed også afstanden fra båndets kant ind til
       verset. De to skal være det samme: masken toner alt væk i sit område,
       også teksten. Er udtoningen længere end margenen, falmer versets
       kanter; er den kortere, står båndet med en synlig ende. */
    --band-margin: clamp(2.25rem, 13%, 7rem);

    position: relative;
    margin: 3.1rem 0 3.4rem;
    padding-top: 1.15rem;
}

/* Guldstregen øverst til venstre — den samme markør som i sidetoppen. */
.quran-verse::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 82px;
    height: 1px;
    background: linear-gradient(90deg, #e7bd70, rgba(231, 189, 112, 0));
}

/* Har artiklen selv en optakt — «Allah sagde i surah Al-Anbiya´, vers 1:» —
   hører stregen til den. Optakten og verset er ét: stregen skal vise, hvor
   det begynder, og ikke skille de to ad. Så flytter den op over optakten, og
   komponenten tegner ikke sin egen.

   Optakten er sidste afsnit i tekstblokken lige foran. Har blokken ikke en,
   bliver stregen, hvor den er. */
.reading:has(+ .quran-verse) > .reading-lead:last-child {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
}

/* Stregen står på linje med optakten og fører ind i den — den samme figur som
   kilden nede under verset. Derfor toner den fra ingenting og op i guld og
   ikke omvendt: den peger fremad mod ordene og ikke væk fra dem.

   Nogle optakter er et helt afsnit og ikke én linje. Stregen skal stå ud for
   den første linje og ikke midt i afsnittet, så den skubbes ned med det halve
   af linjeafstanden. */
.reading:has(+ .quran-verse) > .reading-lead:last-child::before {
    content: "";
    flex: none;
    width: 82px;
    height: 1px;
    margin-top: calc(.82rem * 1.55 / 2);
    background: linear-gradient(90deg, rgba(231, 189, 112, 0), #e7bd70);
}

.reading:has(> .reading-lead:last-child) + .quran-verse {
    margin-top: 1.5rem;
    padding-top: 0;
}

.reading:has(> .reading-lead:last-child) + .quran-verse::before {
    content: none;
}

/* --- Verset i sit bånd ---

   Båndet er bredere end brødteksten og toner ud i begge ender. Bredden er
   spaltens plus udhænget til hver side; alt andet — farve, kant, sløring,
   udtoning — arves fra hero-verse-band.css. */

.quran-verse blockquote {
    width: auto;
    max-width: none;
    margin: 0 calc(var(--quran-verse-bleed) * -1);

    /* Det grønne felt.

       Sidetoppens bånd er en grøn gennemsigtighed lagt over et fotografi —
       grønheden kommer fra billedet bagved. I en artikel er der ikke noget
       bagved, og det samme bånd ville være usynligt mod den næsten sorte
       side. Derfor står grøn her som farve og ikke som slør.

       Den er sidens egen: #174f40, den samme, som knapper og fremhævelser
       bruger. Den er lysest på midten og falder mod kanterne, så feltet ikke
       ligger fladt. */
    background:
        linear-gradient(180deg,
            color-mix(in srgb, #174f40 30%, transparent),
            color-mix(in srgb, #174f40 46%, transparent) 52%,
            color-mix(in srgb, #174f40 30%, transparent));
    font-family: var(--arabic);
    font-size: clamp(1.85rem, 2.75vw, 2.7rem);
    line-height: 1.72;
    color: #efc477;
    text-align: center;
    text-shadow: 0 3px 22px rgba(0, 0, 0, .38), 0 0 30px rgba(226, 178, 91, .08);
}

/* Står der to vers, skal de stå som to linjer i det samme bånd og ikke som to
   bånd med en fuge imellem. */
.quran-verse blockquote + blockquote {
    padding-top: 0;
    border-top: 0;
}

/* --- «Hvilket betyder:», betydningen og kilden --- */

.quran-verse figcaption {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    margin-top: .58rem;
}

.quran-verse figcaption strong {
    color: color-mix(in srgb, var(--ink) 92%, transparent);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.quran-verse figcaption span {
    color: color-mix(in srgb, var(--ink) 96%, transparent);
    font-size: clamp(1.15rem, 1.35vw, 1.34rem);
    line-height: 1.48;
    hyphens: none;
}

/* Kilden har sin egen streg foran, som i sidetoppen. Den er en vej videre og
   ikke en overskrift. */
.quran-verse cite {
    margin-top: .5rem;
    font-style: normal;
}

.quran-verse cite a {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: #e2b666;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .075em;
    text-transform: uppercase;
    direction: ltr;
    unicode-bidi: isolate;
}

.quran-verse cite a::before {
    content: "";
    width: 42px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(226, 182, 102, .72));
    transition: width .25s ease;
}

.quran-verse cite a:hover::before,
.quran-verse cite a:focus-visible::before {
    width: 62px;
}

/* --- «+ Forklaring» ---

   Forklaringen er lukket. Den er et tilbud til den, der vil vide mere, og
   ikke en del af det, verset siger. */

.quran-verse-note {
    margin-top: 1.15rem;
}

.quran-verse-note > summary {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    width: max-content;
    padding: .35rem 0;
    color: #e2b666;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

.quran-verse-note > summary::-webkit-details-marker {
    display: none;
}

/* Plusset er tegnet og ikke et tegn: et tegn ville skifte størrelse med
   skriften og stå skævt på linjen. Den lodrette streg drejer væk, når
   forklaringen er foldet ud, så plusset bliver til et minus. */
.quran-verse-note > summary i {
    position: relative;
    width: 11px;
    height: 11px;
}

.quran-verse-note > summary i::before,
.quran-verse-note > summary i::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto;
    height: 1.5px;
    background: currentColor;
    transform: translateY(-50%);
    transition: transform .25s ease;
}

.quran-verse-note > summary i::after {
    transform: translateY(-50%) rotate(90deg);
}

.quran-verse-note[open] > summary i::after {
    transform: translateY(-50%) rotate(0deg);
}

.quran-verse-note-body {
    margin-top: .9rem;
    padding-left: 1.15rem;
    border-left: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
}

.quran-verse-note-body .reading-arabic {
    font-size: 1.3rem;
    line-height: 2.05;
}

/* Udfoldningen glider op i stedet for at springe frem. Den kræver, at «auto»
   kan indgå i en overgang; kan browseren ikke det, folder den bare ud med det
   samme, som den altid har gjort. */
@supports (interpolate-size: allow-keywords) {
    .quran-verse-note {
        interpolate-size: allow-keywords;
    }

    .quran-verse-note::details-content {
        height: 0;
        overflow: hidden;
        transition: height .32s ease, content-visibility .32s allow-discrete;
    }

    .quran-verse-note[open]::details-content {
        height: auto;
    }
}

/* --- Verset nævnt inde i en forklaring ---

   Et vers kan nævne et andet, og det andet kan nævne det første. Foldedes de
   ud begge veje, blev siden aldrig færdig med at bygge sig selv. Derfor står
   verset dér kun som sin kilde. */

.quran-verse-inline {
    margin: 1.1rem 0;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.quran-verse-inline a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--gold);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease;
}

.quran-verse-inline a:hover,
.quran-verse-inline a:focus-visible {
    border-color: currentColor;
}

@media (max-width: 650px) {
    .quran-verse {
        --band-margin: 8%;

        margin-block: 2.4rem 2.6rem;
    }

    .quran-verse blockquote {
        padding-block: 1.1rem;
        font-size: clamp(1.5rem, 6.8vw, 2rem);
        line-height: 1.7;
    }

    .quran-verse figcaption span {
        font-size: 1.1rem;
    }
}