/* Permanent dark identity and editorial image system. */
:root,
[data-theme="dark"] {
    color-scheme: dark;
    --paper: #07100d;
    --surface: #0c1713;
    --surface-raised: #111f1a;
    --ink: #f0ede4;
    --muted: #a6b0aa;
    --line: #28372f;
    --green: #8ab89d;
    --deep-green: #0b2c23;
    --gold: #c8a35d;
}

html,
body {
    background: #07100d;
}

body {
    color: var(--ink);
    background:
        radial-gradient(circle at 82% 4%, rgba(200, 163, 93, .065), transparent 28rem),
        radial-gradient(circle at 8% 38%, rgba(37, 91, 71, .12), transparent 34rem),
        #07100d;
}

.site-header {
    background: rgba(5, 14, 11, .91);
    border-bottom-color: rgba(200, 163, 93, .2);
}

.site-header[data-scrolled] {
    background: rgba(5, 13, 10, .97);
    box-shadow: 0 18px 54px rgba(0, 0, 0, .38);
}

/* Navnet er sat som tekst i header.css og har ingen billedbehandling. */

.header-control,
.global-search {
    background: rgba(13, 28, 22, .88);
}

footer {
    background:
        linear-gradient(90deg, rgba(5, 14, 11, .97), rgba(5, 14, 11, .9)),
        url('/images/editorial/knowledge-network-v1.webp') center/cover;
    border-top-color: rgba(200, 163, 93, .22);
}

.section {
    position: relative;
}

.eyebrow,
.destination-kicker {
    color: var(--gold);
}

/* Homepage: images become part of the hierarchy rather than isolated decoration. */
.journey {
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(90deg, #07100d 0%, rgba(7, 16, 13, .98) 44%, rgba(7, 16, 13, .74) 68%, rgba(7, 16, 13, .38) 100%),
        url('/images/editorial/path-guidance-v1.webp') 76% center/cover no-repeat;
}

.journey::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, #07100d 0%, transparent 32%, transparent 72%, #07100d 100%);
}

.journey .split-heading p {
    padding: 1.2rem 1.3rem;
    color: #d3dad5;
    background: rgba(5, 15, 11, .58);
    border-left: 1px solid rgba(200, 163, 93, .5);
    backdrop-filter: blur(14px);
}

.pathway a > div {
    padding: .8rem;
    background: rgba(7, 16, 13, .68);
    backdrop-filter: blur(10px);
}

.pathway a > span {
    background: #0c1713;
}

.obligatory {
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(6, 24, 18, .96) 0%, rgba(6, 24, 18, .88) 42%, rgba(6, 24, 18, .66) 100%),
        url('/images/editorial/knowledge-foundations-v1.webp') center/cover no-repeat;
}

.obligatory::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(3, 12, 9, .72), transparent 42%);
}

.knowledge-explorer {
    background: rgba(5, 17, 13, .62);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(14px);
}

.knowledge-explorer a:hover {
    background: rgba(200, 163, 93, .1);
}

.quran-world {
    isolation: isolate;
    overflow: hidden;
    color: var(--ink);
    background:
        linear-gradient(90deg, rgba(5, 18, 14, .97) 0%, rgba(5, 18, 14, .86) 42%, rgba(5, 18, 14, .58) 100%),
        url('/images/editorial/quran-study-v1.webp') center/cover no-repeat;
}

.quran-copy p {
    color: #c4cec8;
}

.quran-copy::before {
    content: "";
    width: min(100%, 560px);
    height: clamp(170px, 22vw, 250px);
    margin-bottom: 2rem;
    display: block;
    background: linear-gradient(0deg, rgba(5, 18, 14, .35), transparent), url('/images/editorial/quran-study-v1.webp') 72% center/cover;
    border: 1px solid rgba(200, 163, 93, .28);
    box-shadow: 18px 18px 0 rgba(200, 163, 93, .07);
}

.section-chip,
.quran-actions > a {
    background: var(--gold);
    color: #0b1712;
}

.verse-experience {
    color: var(--ink);
    background: rgba(7, 18, 14, .82);
    border: 1px solid rgba(200, 163, 93, .3);
    box-shadow: 24px 24px 0 rgba(200, 163, 93, .09);
    backdrop-filter: blur(16px);
}

.verse-arabic {
    color: #dfbd75;
}

.hadith-stage {
    background: #08120e;
}

.hadith-layout {
    overflow: hidden;
    border-color: rgba(200, 163, 93, .25);
    background:
        linear-gradient(90deg, transparent 0 38%, rgba(7, 16, 13, .9) 58%, #07100d 100%),
        url('/images/editorial/hadith-archive-v1.webp') left center/cover no-repeat;
}

.hadith-script {
    background: transparent;
}

.hadith-script::after {
    content: "Kilde · overlevering · kontekst";
    position: absolute;
    top: 1.3rem;
    left: 1.3rem;
    color: rgba(255, 255, 255, .72);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hadith-copy {
    background: rgba(7, 16, 13, .78);
    backdrop-filter: blur(14px);
}

.bookshelf {
    color: var(--ink);
    background:
        radial-gradient(circle at 85% 0%, rgba(200, 163, 93, .1), transparent 30rem),
        #0b1511;
}

.book-cover {
    isolation: isolate;
    overflow: hidden;
    background-position: center !important;
    background-size: cover !important;
    box-shadow: 10px 18px 36px rgba(0, 0, 0, .45), inset -8px 0 18px rgba(0, 0, 0, .24);
}

.book-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(3, 8, 6, .92) 0%, transparent 52%, rgba(3, 8, 6, .45) 100%);
}

.book-cover.bronze { background-image: url('/images/editorial/book-cover-umber-v1.webp'); color: #fff3dc; }
.book-cover.green { background-image: url('/images/editorial/book-cover-green-v1.webp'); color: #f8eed9; }
.book-cover.sand { background-image: url('/images/editorial/book-cover-sand-v1.webp'); color: #14251e; }
.book-cover.charcoal { background-image: url('/images/editorial/book-cover-charcoal-v1.webp'); color: #f4ead5; }

.book-cover.sand::before {
    background: linear-gradient(0deg, rgba(238, 224, 193, .92) 0%, transparent 54%, rgba(255, 250, 235, .18) 100%);
}

.book-cover .cover-geometry {
    display: none;
}

.book h3,
.book p {
    color: var(--ink);
}

.network {
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(5, 15, 12, .97), rgba(5, 15, 12, .7)),
        url('/images/editorial/knowledge-network-v1.webp') center/cover no-repeat;
}

.network-map {
    background: rgba(6, 17, 13, .55);
    border-color: rgba(200, 163, 93, .3);
    backdrop-filter: blur(15px);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .28);
}

.network-map .node {
    background: rgba(8, 22, 17, .91);
    border-color: rgba(200, 163, 93, .3);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
}

.network-map .node.center {
    color: #101b16;
    background: var(--gold);
}

.questions {
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(90deg, #07100d 0%, rgba(7, 16, 13, .96) 46%, rgba(7, 16, 13, .52) 100%),
        url('/images/editorial/questions-study-v1.webp') right center/58% auto no-repeat,
        #07100d;
}

.question-list {
    max-width: 920px;
    background: rgba(6, 16, 12, .72);
    border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(14px);
}

.question-list a {
    padding-inline: 1.2rem;
}

.question-list a:hover {
    background: rgba(200, 163, 93, .08);
}

.latest-strip {
    background: #997232;
}

.topics-gallery {
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 12%, rgba(200, 163, 93, .1), transparent 28rem),
        #09130f;
}

.topics-gallery .split-heading > p {
    max-width: 46ch;
    color: var(--muted);
}

.topic-image-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    grid-auto-rows: minmax(240px, auto);
    gap: 1px;
    background: rgba(200, 163, 93, .22);
    border: 1px solid rgba(200, 163, 93, .22);
}

.topic-image-grid a {
    min-height: 240px;
    padding: 1.5rem;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: end;
    background-position: center;
    background-size: cover;
}

.topic-image-grid a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(3, 12, 9, .97) 0%, rgba(3, 12, 9, .25) 82%);
    transition: background .3s ease;
}

.topic-image-grid a:nth-child(1) { grid-row: span 2; background-image: url('/images/editorial/path-guidance-v1.webp'); }
.topic-image-grid a:nth-child(2) { background-image: url('/images/editorial/quran-study-v1.webp'); }
.topic-image-grid a:nth-child(3) { background-image: url('/images/editorial/hadith-archive-v1.webp'); }
.topic-image-grid a:nth-child(4) { background-image: url('/images/editorial/questions-study-v1.webp'); }
.topic-image-grid a:nth-child(5) { background-image: url('/images/editorial/knowledge-foundations-v1.webp'); }
.topic-image-grid a:nth-child(6) { background-image: url('/images/editorial/knowledge-network-v1.webp'); }

.topic-image-grid a:hover::before {
    background: linear-gradient(0deg, rgba(3, 12, 9, .98) 0%, rgba(3, 12, 9, .08) 85%);
}

.topic-image-grid a > span {
    color: var(--gold);
    font: italic .75rem var(--serif);
}

.topic-image-grid strong {
    margin-top: auto;
    font: 500 clamp(1.6rem, 2.8vw, 2.7rem)/1.05 var(--serif);
}

.topic-image-grid small {
    max-width: 34ch;
    margin-top: .55rem;
    color: #c9d2cc;
}

.topic-image-grid b {
    margin-top: 1.4rem;
    color: var(--gold);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Destination pages: a second editorial image chapter below every hero. */
.knowledge-map {
    padding-top: clamp(18rem, 35vw, 31rem);
    background:
        linear-gradient(0deg, #07100d 0%, rgba(7, 16, 13, .98) 34%, rgba(7, 16, 13, .24) 74%, rgba(7, 16, 13, .64) 100%),
        url('/images/editorial/knowledge-foundations-v1.webp') center top/100% min(34rem, 45vw) no-repeat,
        #07100d;
}

/* Sektionen under sidetoppen havde sit eget baggrundsbillede i toppen og op
   til 30 rem luft for at gøre plads til det. Det så ud, som om billedet i
   sidetoppen blev afbrudt, og et nyt begyndte. Kun farven bliver tilbage. */
.destination-hadith ~ .destination-content,
.destination-questions ~ .destination-content,
.destination-library ~ .destination-content {
    background-color: #07100d;
}

.knowledge-routes {
    background: rgba(7, 16, 13, .82);
    border: 1px solid rgba(200, 163, 93, .18);
    backdrop-filter: blur(12px);
}

.knowledge-routes a:first-child {
    color: var(--ink);
    background:
        linear-gradient(90deg, rgba(8, 28, 21, .9), rgba(8, 28, 21, .76)),
        url('/images/editorial/knowledge-foundations-v1.webp') center/cover;
}

.featured-band {
    background:
        linear-gradient(90deg, rgba(10, 42, 32, .97), rgba(10, 42, 32, .82)),
        url('/images/editorial/path-guidance-v1.webp') center/cover;
}

.quote-collection {
    border: 1px solid rgba(200, 163, 93, .2);
    background: rgba(200, 163, 93, .16);
}

.quote-collection article {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: rgba(8, 19, 15, .94);
}

.quote-collection article:first-child::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .2;
    background: url('/images/editorial/hadith-archive-v1.webp') center/cover;
}

.editorial-list > a,
.question-ledger > a {
    position: relative;
    min-height: 126px;
    padding: 1rem;
    background: rgba(11, 24, 19, .58);
    transition: background .25s ease, transform .25s ease;
}

.editorial-list > a {
    grid-template-columns: 126px 48px minmax(0, 1fr) auto;
}

.question-ledger > a {
    grid-template-columns: 126px 48px minmax(0, 1fr) auto;
}

.editorial-list > a::before,
.question-ledger > a::before {
    content: "";
    width: 126px;
    height: 92px;
    grid-column: 1;
    grid-row: 1;
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

.editorial-list > a::before { background-image: linear-gradient(rgba(5, 18, 14, .16), rgba(5, 18, 14, .42)), url('/images/editorial/path-guidance-v1.webp'); }
.editorial-list > a:nth-child(4n+2)::before { background-image: linear-gradient(rgba(5, 18, 14, .16), rgba(5, 18, 14, .42)), url('/images/editorial/quran-study-v1.webp'); }
.editorial-list > a:nth-child(4n+3)::before { background-image: linear-gradient(rgba(5, 18, 14, .16), rgba(5, 18, 14, .42)), url('/images/editorial/hadith-archive-v1.webp'); }
.editorial-list > a:nth-child(4n+4)::before { background-image: linear-gradient(rgba(5, 18, 14, .16), rgba(5, 18, 14, .42)), url('/images/editorial/knowledge-network-v1.webp'); }
.question-ledger > a::before { background-image: linear-gradient(rgba(5, 18, 14, .1), rgba(5, 18, 14, .36)), url('/images/editorial/questions-study-v1.webp'); }

.editorial-list > a > .editorial-number,
.question-ledger > a > span {
    grid-column: 2;
}

.editorial-list > a > div,
.question-ledger > a > div {
    grid-column: 3;
}

.editorial-list > a > b,
.question-ledger > a > b {
    grid-column: 4;
}

.editorial-list > a:hover,
.question-ledger > a:hover {
    background: rgba(200, 163, 93, .08);
    transform: translateX(5px);
}

/* Real book catalogue rather than a text ledger. */
.book-catalog {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.2rem, 2.8vw, 2.5rem);
}

.catalog-book {
    min-width: 0;
}

.catalog-book-copy {
    padding-top: 1.2rem;
}

.catalog-book-copy > span {
    color: var(--gold);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.catalog-book-copy h3 {
    margin: .45rem 0;
    font-size: 1.35rem;
}

.catalog-book-copy p {
    margin: 0 0 .7rem;
    color: var(--muted);
}

.catalog-book-copy b {
    color: var(--green);
    font-size: .78rem;
}

/* Reading and detail pages: image-led opening, quiet text below. */
.reading-hero {
    min-height: clamp(360px, 42vw, 540px);
    padding: 0;
    display: grid;
    align-items: end;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background-position: center;
    background-size: cover;
}

.reading-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(4, 14, 10, .96) 0%, rgba(4, 14, 10, .76) 46%, rgba(4, 14, 10, .22) 100%), linear-gradient(0deg, rgba(4, 14, 10, .72), transparent 55%);
}

.reading-hero > .container {
    padding-block: clamp(4rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
}

.reading-hero h1 {
    max-width: 17ch;
    color: #fff;
    text-shadow: 0 3px 28px rgba(0, 0, 0, .3);
}

.reading-hero .lead {
    color: #dce3de;
}

.reading-hero--path { background-image: url('/images/editorial/path-guidance-v1.webp'); }
.reading-hero--books { background-image: url('/images/editorial/knowledge-foundations-v1.webp'); }
.reading-hero--hadith { background-image: url('/images/editorial/hadith-archive-v1.webp'); }
.reading-hero--questions { background-image: url('/images/editorial/questions-study-v1.webp'); }
.reading-hero--knowledge { background-image: url('/images/editorial/knowledge-network-v1.webp'); }
.reading-hero--quran { background-image: url('/images/editorial/quran-study-v1.webp'); }

.content-shell {
    position: relative;
}

.content-shell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 9rem;
    background: linear-gradient(var(--gold), transparent);
}

.rail {
    padding: 1.5rem;
    background: rgba(12, 25, 20, .62);
    border: 1px solid rgba(255, 255, 255, .08);
    align-self: start;
}

.start-path-section .card {
    min-height: 330px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    justify-content: end;
    background-position: center;
    background-size: cover;
}

.start-path-section .card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(4, 14, 10, .96), rgba(4, 14, 10, .18));
}

.start-path-section .card:nth-child(1) { background-image: url('/images/editorial/path-guidance-v1.webp'); }
.start-path-section .card:nth-child(2) { background-image: url('/images/editorial/quran-study-v1.webp'); }
.start-path-section .card:nth-child(3) { background-image: url('/images/editorial/knowledge-foundations-v1.webp'); }
.start-path-section .card:nth-child(4) { background-image: url('/images/editorial/questions-study-v1.webp'); }

/* New Quran reader receives the same visual language without disturbing reading. */
.qr-shell,
.qr-main,
.qr-reader {
    background-color: #07100d;
}

.qr-head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem);
    background: linear-gradient(90deg, rgba(5, 16, 12, .94), rgba(5, 16, 12, .42)), url('/images/editorial/quran-study-v1.webp') center/cover;
}

.qr-head::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, #07100d, transparent 48%);
}

@media (max-width: 1000px) {
    .journey,
    .questions {
        background-position: center;
        background-size: cover;
    }

    .book-catalog {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .topic-image-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .topic-image-grid a:nth-child(1) {
        grid-row: auto;
    }

    .knowledge-map {
        padding-top: 18rem;
        background-size: auto 23rem;
    }
}

@media (max-width: 680px) {
    .journey {
        background: linear-gradient(0deg, #07100d 0%, rgba(7, 16, 13, .76) 72%, rgba(7, 16, 13, .4)), url('/images/editorial/path-guidance-v1.webp') 64% top/auto 34rem no-repeat, #07100d;
        padding-top: 16rem;
    }

    .obligatory,
    .quran-world,
    .network,
    .questions {
        background-position: center;
    }

    .hadith-layout {
        background: linear-gradient(0deg, #07100d 0 62%, rgba(7, 16, 13, .24) 100%), url('/images/editorial/hadith-archive-v1.webp') center top/auto 48% no-repeat, #07100d;
    }

    .book-catalog {
        gap: 1rem;
    }

    .topic-image-grid {
        grid-template-columns: 1fr;
    }

    .topic-image-grid a {
        min-height: 280px;
    }

    .catalog-book-copy h3 {
        font-size: 1.05rem;
    }

    .editorial-list > a,
    .question-ledger > a {
        grid-template-columns: 82px 1fr auto;
        gap: .8rem;
    }

    .editorial-list > a::before,
    .question-ledger > a::before {
        width: 82px;
        height: 82px;
    }

    .editorial-list > a > .editorial-number,
    .question-ledger > a > span {
        display: none;
    }

    .editorial-list > a > div,
    .question-ledger > a > div {
        grid-column: 2;
    }

    .editorial-list > a > b,
    .question-ledger > a > b {
        grid-column: 3;
    }

    .knowledge-map {
        padding-top: 13rem;
        background-size: auto 17rem;
    }

    .reading-hero {
        min-height: 430px;
        background-position: 65% center;
    }

    .reading-hero::before {
        background: linear-gradient(0deg, rgba(4, 14, 10, .96), rgba(4, 14, 10, .3));
    }
}

@media (prefers-reduced-motion: reduce) {
    .editorial-list > a,
    .question-ledger > a,
    .book-cover {
        transition: none !important;
    }
}