/* Demo-9 identity pass for shared demo-8 components (header/footer, the audio
   library, prayer-times board, and the institutions grid). The listening/adhan
   markup lives in demo-8.css and is written entirely against the --d8-* custom
   properties, so remapping those tokens to the --d9-* palette here re-themes
   every one of those rules to the actual demo-9 green/gold/cream identity
   instead of demo-8's warmer olive one — without touching demo-8's own page. */

/* The martyrs slider uses slidesPerView:"auto" so its cards keep the exact
   width demo-2 uses (a deliberate visual match) — that mode naturally lets
   a sliver of the next card peek in at the edge as a scroll hint, which
   read as "cropped". Fade that edge out instead of resizing/cropping the
   cards, so it looks intentional without touching the demo-2 sizing. */
.d9-d2-martyrs__slider {
    -webkit-mask-image: none;
    mask-image: none;
}

/* The pre-loader's logo renders off-center (skewed left, overflowing the
   circle) specifically on pages that load the demo-7/8/9 CSS bundle. The
   cause wasn't traceable to any single rule in that bundle by inspection —
   this forces the correct centering/size regardless of what's interfering,
   scoped only to these pages so the original pages (which don't show the
   bug) are left untouched. */
.d7-body #loading-area .loading-inner,
.d8-body #loading-area .loading-inner,
.d9-body #loading-area .loading-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.d7-body #loading-area .load-text,
.d8-body #loading-area .load-text,
.d9-body #loading-area .load-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
}

.d7-body #loading-area .load-text img,
.d8-body #loading-area .load-text img,
.d9-body #loading-area .load-text img {
    display: block !important;
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    max-width: 60% !important;
    max-height: 60% !important;
}

.d9-body {
    --d8-ink: var(--d9-ink);
    --d8-ink-soft: #223129;
    --d8-green: var(--d9-green);
    --d8-green-bright: #2f6b47;
    --d8-gold: var(--d9-gold);
    --d8-gold-deep: #a9822f;
    --d8-olive: var(--d9-green-deep);
    --d8-red: var(--d9-red);
    --d8-red-bright: #c24b43;
    --d8-paper: var(--d9-paper);
    --d8-paper-deep: var(--d9-paper-deep);
    --d8-white: #fffdf6;
    --d8-muted: var(--d9-muted);
    --d8-line: rgba(20, 32, 25, .14);
}

/* The adhan "next prayer" card gets a livelier gold glow in the d9 palette. */
.d9-body .d8-adhan__board article.is-next {
    box-shadow: 0 0 0 1px var(--d9-gold), 0 18px 40px rgba(216, 189, 97, .28);
}

.d9-body .d8-sound__pulse i {
    background: linear-gradient(180deg, var(--d9-gold-bright), var(--d9-gold));
}

/* Institutions: color and hover polish only; sizing stays responsive in demo-9.css. */
.d9-institution-card__desc {
    color: var(--d9-muted);
}

.d9-institution-card:hover .d9-institution-card__logo img {
    filter: drop-shadow(0 16px 22px rgba(23, 46, 30, .22));
    transform: scale(1.04);
}

.d9-institution-card__logo img {
    transition: transform .35s ease, filter .35s ease;
}

/* ------------------------------------------------------------------ */
/* Top navigation: match the rest of the site's header type exactly.   */
/* ------------------------------------------------------------------ */
.d9-body .d8-map-nav__item b,
.d9-body .d9-nav-group__label b,
.d9-body .d8-drawer nav a b,
.d9-body .d8-drawer__head strong,
.d9-body .d8-drawer__foot span {
    font-family: 'Zain', sans-serif;
    font-size: 18px;
    font-weight: 500;
}

.d9-body .d8-drawer nav > a,
.d9-body .d9-drawer-group summary,
.d9-body .d9-drawer-group div a {
    font-family: 'Zain', sans-serif;
    font-size: 17px;
}

/* ------------------------------------------------------------------ */
/* Brand: preserve the crest's real ratio instead of forcing a square. */
/* No plate or border around it — the crest is black and gold, so it   */
/* sits on a soft, edgeless halo that lifts the black off the header.  */
/* ------------------------------------------------------------------ */
.d9-body .d8-brand,
.d9-body .d8-header.is-scrolled .d8-brand {
    width: 102px;
    min-width: 102px;
    min-height: 78px;
    margin-inline-end: 16px;
    padding: 2px 10px;
    overflow: visible;
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    transition: transform .25s ease;
}

.d9-body .d8-brand:hover,
.d9-body .d8-brand:focus-visible {
    outline: none;
    transform: translateY(-1px);
}

.d9-body .d8-brand:focus-visible {
    outline: 2px solid rgba(240, 220, 145, .75);
    outline-offset: 4px;
}

.d9-body .d8-brand__mark {
    width: 78px;
    height: 74px;
    filter: none;
    /* Keep the halo inside the logo's height, including while hovering. */
    clip-path: inset(0 -40px);
}

.d9-body .d8-brand__mark::before {
    position: absolute;
    z-index: 0;
    inset: -9% -42%;
    display: block;
    content: "";
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 249, 226, .65), rgba(246, 230, 165, .4) 46%, rgba(246, 230, 165, .1) 78%, rgba(246, 230, 165, 0) 100%);
    filter: blur(2px);
    pointer-events: none;
    transition: transform .25s ease;
}

.d9-body .d8-brand:hover .d8-brand__mark::before,
.d9-body .d8-brand:focus-visible .d8-brand__mark::before {
    transform: scale(1.08);
}

.d9-body .d8-brand__mark::after {
    display: none;
}

.d9-body .d8-brand .d9-brand-logo {
    width: auto;
    max-width: 100%;
    height: 74px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 0 2px rgba(255, 249, 226, .65)) drop-shadow(0 0 6px rgba(246, 230, 165, .4));
}

@media (min-width: 901px) and (max-width: 1100px) {
    .d9-body .d8-brand,
    .d9-body .d8-header.is-scrolled .d8-brand {
        width: 82px;
        min-width: 82px;
        min-height: 58px;
        margin: 0;
        padding: 2px 7px;
    }

    .d9-body .d8-brand__mark {
        width: 68px;
        height: 54px;
    }

    .d9-body .d8-brand .d9-brand-logo {
        height: 54px;
    }
}

@media (max-width: 900px) {
    .d9-body .d8-brand,
    .d9-body .d8-header.is-scrolled .d8-brand {
        width: 80px;
        min-width: 80px;
        min-height: 56px;
        margin: 0;
        padding: 1px 7px;
    }

    .d9-body .d8-brand__mark {
        width: 66px;
        height: 54px;
    }

    .d9-body .d8-brand .d9-brand-logo {
        height: 54px;
    }
}

@media (max-width: 620px) {
    .d9-body .d8-brand,
    .d9-body .d8-header.is-scrolled .d8-brand {
        width: 78px;
        min-width: 78px;
        min-height: 56px;
        padding-inline: 6px;
        border-radius: 10px;
    }

    .d9-body .d8-brand__mark {
        width: 66px;
        height: 54px;
    }

    .d9-body .d8-brand .d9-brand-logo {
        height: 54px;
    }
}

/* ------------------------------------------------------------------ */
/* Theme toggle control in the header.                                 */
/* (Which of the two icons is shown now lives in home.css, so the      */
/* header stays correct from the built bundle alone.)                  */
/* ------------------------------------------------------------------ */

/* The nav row's single-row flex layout moved to home.css: the fixed track
   count it was working around lives there too, so fixing it at the source
   keeps one definition instead of a patch that has to ship alongside it. */

.d8-map-nav__theme,
.d8-header.is-scrolled .d8-map-nav__theme {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
}

.d8-map-nav__theme .d8-map-nav__icon,
.d8-mobile-actions .d9-theme-toggle {
    display: grid;
    place-items: center;
}

.d8-map-nav__theme svg,
.d8-mobile-actions .d9-theme-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.d9-theme-icon--moon {
    fill: currentColor;
    stroke: none;
}

/* The bar's two ends dissolve into the header: no divider after the logo,
   no edge before the free-floating controls — the cell wash just fades out. */
.d9-body .d8-brand + .d8-map-nav__item {
    border-inline-start: 0;
    border-radius: 0;
    background: linear-gradient(to left, transparent, rgba(255, 255, 255, .028) 55%);
}

.d9-body .d8-map-nav > a.d8-map-nav__item:last-of-type {
    border-radius: 0;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, .028) 55%);
}

/* ------------------------------------------------------------------ */
/* Search and theme controls in the header.                            */
/* Demo 8 styles search as a floating gold pill with a label and the   */
/* theme toggle as a bar cell. Here both float free after the bar:     */
/* no cell, no divider lines, no wash — just the same outlined icon    */
/* chip every item uses (search keeps its aria-label, no visible word).*/
/* ------------------------------------------------------------------ */
.d9-body .d8-map-nav__theme,
.d9-body .d8-map-nav__search,
.d9-body .d8-header.is-scrolled .d8-map-nav__theme,
.d9-body .d8-header.is-scrolled .d8-map-nav__search {
    align-self: center;
    min-height: 0;
    margin: 0;
    padding: 4px;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    justify-items: center;
    gap: 0;
    color: rgba(255, 255, 255, .82);
    border: 0;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
}

.d9-body .d8-map-nav__theme {
    margin-inline-start: 12px;
}

.d9-body .d8-map-nav__search {
    margin-inline-start: 6px;
}

.d9-body .d8-map-nav__theme::before,
.d9-body .d8-map-nav__search::before {
    display: none;
}

.d9-body .d8-map-nav__search .d8-map-nav__icon {
    color: rgba(255, 255, 255, .64);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 7px;
    background: rgba(255, 255, 255, .025);
}

.d9-body .d8-map-nav__search b {
    display: none;
}

.d9-body .d8-map-nav__item.d8-map-nav__theme:hover,
.d9-body .d8-map-nav__item.d8-map-nav__theme:focus-visible,
.d9-body .d8-map-nav__item.d8-map-nav__search:hover,
.d9-body .d8-map-nav__item.d8-map-nav__search:focus-visible {
    color: #fff;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.d9-body .d8-map-nav__item.d8-map-nav__search:hover .d8-map-nav__icon,
.d9-body .d8-map-nav__item.d8-map-nav__search:focus-visible .d8-map-nav__icon {
    color: var(--d8-ink, #161405);
    border: 1px solid rgba(222, 197, 60, .82);
    background: var(--d8-gold, #dec53c);
    box-shadow: 0 8px 22px rgba(222, 197, 60, .2);
    transform: translateY(-2px);
}

/* Let story titles use the available card space without breaking words. */
.d9-body .d9-main .d7-hero__rail button {
    align-items: center;
}

.d9-body .d9-main .d7-hero__rail button > b {
    display: -webkit-box;
    min-width: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    line-height: 1.4;
    overflow: hidden;
}

.d9-body .d9-main .d7-hero__rail button.is-active {
    color: #fff3c9;
    background: rgba(240, 220, 145, .13);
    box-shadow: inset 0 0 0 1px rgba(216, 189, 97, .32);
}

@media (max-width: 960px) {
    .d9-body .d9-main .d7-hero__rail button {
        min-width: 240px;
    }
    .d9-body .d9-main .d7-hero__rail button > b {
        line-height: 1.25;
    }
}

/* Keep the hero action fully visible even when a slide has a long title. */
.d9-body .d9-main .d7-hero-card__copy h1 {
    font-size: clamp(1.72rem, 2.35vw, 2.6rem);
    line-height: 1.18;
}

.d9-body .d9-main .d7-round-link {
    position: relative;
    z-index: 3;
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    min-height: 42px;
    flex: 0 0 auto;
    align-self: flex-start;
    overflow: visible;
    line-height: 1.25;
    white-space: nowrap;
}

.d9-body .d9-main .d7-round-link > span {
    display: block;
    overflow: visible;
}

@media (min-width: 1041px) {
    .d9-body .d9-main .d7-hero-card__copy {
        padding-block: clamp(24px, 3vw, 38px);
    }

    .d9-body .d9-main .d7-hero-card__copy p {
        margin-block: 14px 16px;
    }
}

/* The story rail stacks below the slide at 1040px, so both must contribute
   to the stage height before the controls and the next section begin. */
@media (min-width: 961px) and (max-width: 1040px) {
    .d9-body .d9-main .d7-hero__stage {
        height: auto;
    }
}

@media (max-width: 960px) {
    .d9-body .d9-main .d7-hero-card__copy h1 {
        font-size: 1.67rem;
    }
}

@media (max-width: 620px) {
    .d9-body .d9-main .d7-hero-card__copy h1 {
        font-size: 1.34rem;
    }

    .d9-body .d9-main .d7-round-link {
        width: 100%;
        min-height: 35px;
        justify-content: flex-end;
        font-size: .76rem;
    }
}

@media (max-width: 349px) {
    .d9-body .d9-main .d7-hero-card__copy h1 {
        font-size: 1.28rem;
    }
}

/* ------------------------------------------------------------------ */
/* Dark mode.                                                          */
/* Remapping the Demo 7, Demo 8 and Demo 9 tokens re-themes components. */
/* on this page that already reads its colors from those variables     */
/* (header, footer, hero, video, institutions grid background, etc).   */
/* A handful of sections hardcode a light card-style background rather */
/* than using a token — those get an explicit dark override below.     */
/* ------------------------------------------------------------------ */
html.layout-dark .d9-body {
    --d9-ink: #ece4cf;
    --d9-green: #14251c;
    --d9-green-deep: #0a1712;
    --d9-gold: #d8bd61;
    --d9-gold-bright: #f0dc91;
    --d9-paper: #10201a;
    --d9-paper-deep: #16281f;
    --d9-red: #d6564c;
    --d9-muted: #93a297;

    --d7-ink: #ece4cf;
    --d7-forest: #0b2b21;
    --d7-forest-2: #103b2d;
    --d7-red: #e2495d;
    --d7-red-deep: #ad1630;
    --d7-mint: #48d8bd;
    --d7-cyan: #6fd8ea;
    --d7-ice: #14251c;
    --d7-lilac: #16281f;
    --d7-paper: #10201a;
    --d7-muted: #93a297;
}

html.layout-dark .d9-d2-martyrs {
    color: #ece4cf;
    background-color: #16281f;
}

html.layout-dark .d9-d2-martyrs__copy h2 a {
    color: #f0dc91;
}

html.layout-dark .d9-d2-martyrs__today > a {
    border-color: rgba(236, 228, 207, .28);
}

html.layout-dark .d9-institutions {
    background: #10201a;
}

html.layout-dark .d9-institutions__rings i {
    border-color: rgba(216, 189, 97, .14);
}

html.layout-dark .d9-institution-card {
    background: rgba(236, 228, 207, .05);
    border-color: rgba(216, 189, 97, .2);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}

html.layout-dark .d9-institution-card > strong {
    color: #ece4cf;
}

/* Demo 09 final gallery treatments. Keep the operation library visibly
   lighter in the normal theme, then give it a genuinely deeper night state. */
html.layout-dark .d9-video {
    background:
        radial-gradient(circle at 84% 12%, rgba(216, 189, 97, .08), transparent 28%),
        linear-gradient(142deg, #10271d 0%, #091b14 52%, #06110d 100%);
}

html.layout-dark .d9-video__fabric {
    opacity: .1;
    filter: grayscale(1) contrast(1.35) brightness(.42);
}

html.layout-dark .d9-video__featured {
    background: rgba(255, 255, 255, .035);
    border-color: rgba(216, 189, 97, .17);
}

html.layout-dark .d9-video__playlist > :is(a, button) {
    background: rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .09);
}

/* Both the hero slider and the quotes heading sit on their own permanent
   dark backdrop in every theme (not the page background), so — like the
   video caption above — they need to keep their own light text color
   instead of picking up the generic dark-mode heading color. */
html.layout-dark .d9-body .d9-main .d7-hero-card__copy h1 {
    color: #fff;
}

html.layout-dark .d9-quotes .d9-heading h2,
html.layout-dark .d9-quotes .d9-heading h2 a {
    color: #fff !important;
}

/* The generic html.layout-dark .d9-body h1/h2/h3/h4 rule elsewhere in this
   file recolors every heading for the dark palette, but this caption's h3
   sits on the section's own permanent dark backdrop (not the page
   background), so it needs to keep matching that backdrop's palette
   instead of picking up the generic dark-mode heading color. */
html.layout-dark .d9-video .d9-video__caption h3 {
    color: #ece4cf;
}

html.layout-dark .d9-video__item-copy strong {
    color: #ece4cf;
}

html.layout-dark .d9-institutions {
    --d9-inst-ink: #eee8d7;
    --d9-inst-muted: #9aa99f;
    --d9-inst-line: rgba(216, 189, 97, .17);
    --d9-inst-card: rgba(235, 228, 207, .035);
    --d9-inst-card-strong: rgba(235, 228, 207, .065);
    background:
        radial-gradient(circle at 91% 2%, rgba(216, 189, 97, .11), transparent 28%),
        radial-gradient(circle at 7% 100%, rgba(47, 112, 79, .12), transparent 31%),
        linear-gradient(145deg, #0b1b14 0%, #07130f 58%, #0d2118 100%);
}

html.layout-dark .d9-institutions::before {
    opacity: .28;
    background-image:
        linear-gradient(rgba(216, 189, 97, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(216, 189, 97, .045) 1px, transparent 1px);
}

html.layout-dark .d9-institutions__title h2 {
    color: var(--d9-inst-ink);
}

html.layout-dark .d9-institutions__backdrop::before,
html.layout-dark .d9-institutions__backdrop::after {
    border-color: rgba(216, 189, 97, .1);
}

html.layout-dark .d9-institution-card {
    color: var(--d9-inst-ink);
    background: linear-gradient(135deg, var(--d9-inst-card-strong), var(--d9-inst-card));
    border-color: var(--d9-inst-line);
    box-shadow: 0 22px 54px rgba(0, 0, 0, .3);
}

html.layout-dark .d9-institution-card:hover,
html.layout-dark .d9-institution-card:focus-visible {
    color: var(--d9-inst-ink);
    border-color: rgba(216, 189, 97, .38);
    box-shadow: 0 31px 74px rgba(0, 0, 0, .42);
}

html.layout-dark .d9-institution-card.is-featured {
    color: #fff;
    background:
        radial-gradient(circle at 18% 20%, rgba(216, 189, 97, .17), transparent 29%),
        linear-gradient(145deg, #1c4633 0%, #102d20 52%, #091c14 100%);
    border-color: rgba(216, 189, 97, .3);
}

html.layout-dark .d9-institution-card.is-featured:hover,
html.layout-dark .d9-institution-card.is-featured:focus-visible {
    color: #fff;
    border-color: rgba(216, 189, 97, .58);
}

html.layout-dark .d9-institution-card__more {
    color: #b7c7bc;
}

html.layout-dark .d9-institution-card.is-featured .d9-institution-card__more {
    color: var(--d9-gold-bright);
}

html.layout-dark .d9-institution-card__arrow {
    color: var(--d9-gold-bright);
    background: rgba(216, 189, 97, .08);
    border-color: rgba(216, 189, 97, .14);
}

/* The audio player console and the prayer-times board are light "paper"
   cards floating on the section's dark backdrop — flip them dark too so
   nothing on the page stays light when the toggle is switched. */
html.layout-dark .d8-sound__console {
    background: #16281f;
    color: #ece4cf;
    box-shadow: 22px 28px 0 rgba(216, 189, 97, .22);
}

html.layout-dark .d8-listening__prayers {
    background: #16281f;
    color: #ece4cf;
    box-shadow: 0 28px 60px rgba(0, 0, 0, .35);
}

html.layout-dark .d8-listening .d8-adhan__board {
    background: rgba(236, 228, 207, .06);
}

html.layout-dark .d8-adhan__board article {
    border-color: rgba(216, 189, 97, .16);
}

/* Position cards ("المواقف"): frosted-glass cards over the section image —
   invert the glass tint and text color for the dark backdrop. */
html.layout-dark .d9-d2-position-card {
    color: #ece4cf;
    background: rgba(10, 20, 15, .55);
    border-color: rgba(216, 189, 97, .22);
}

html.layout-dark .d9-d2-martyr-card {
    background: rgba(16, 32, 26, .35);
}

/* Empty-state placeholders (e.g. "no institutions yet") reuse the same
   treatment the template already defines for .d9-empty--dark. */
html.layout-dark .d9-empty {
    color: rgba(255, 255, 255, .58);
    background: rgba(255, 255, 255, .045);
    border-color: rgba(255, 255, 255, .14);
}

/* Four-portal institutions directory in dark mode. */
html.layout-dark .d9-institution-card,
html.layout-dark .d9-institution-card.is-featured {
    color: #eee8d7;
    background:
        radial-gradient(circle at 50% 0, rgba(216, 189, 97, .09), transparent 34%),
        linear-gradient(155deg, #192c23 0%, #102219 55%, #0b1913 100%);
    border-color: rgba(216, 189, 97, .18);
    box-shadow: 0 28px 62px rgba(0, 0, 0, .32);
}

html.layout-dark .d9-institution-card:nth-child(4n + 1),
html.layout-dark .d9-institution-card:nth-child(4n + 4) {
    color: #fff;
    background:
        radial-gradient(circle at 50% 0, rgba(216, 189, 97, .17), transparent 35%),
        linear-gradient(155deg, #1c4934 0%, #103222 55%, #081d14 100%);
    border-color: rgba(216, 189, 97, .3);
}

html.layout-dark .d9-institution-card:hover,
html.layout-dark .d9-institution-card:focus-visible,
html.layout-dark .d9-institution-card.is-featured:hover,
html.layout-dark .d9-institution-card.is-featured:focus-visible {
    color: #fff;
    border-color: rgba(216, 189, 97, .5);
    box-shadow: 0 38px 82px rgba(0, 0, 0, .46);
}

html.layout-dark .d9-institution-card__desc,
html.layout-dark .d9-institution-card.is-featured .d9-institution-card__desc {
    color: rgba(238, 232, 215, .58);
}

html.layout-dark .d9-institution-card__more,
html.layout-dark .d9-institution-card.is-featured .d9-institution-card__more {
    color: var(--d9-gold-bright);
}

/* ------------------------------------------------------------------ */
/* Dark mode on the shared main-site content (articles/posts list &    */
/* single-post pages): these pages mix the demo-9 header/footer above  */
/* with the site's own legacy CSS for the article/post body itself,    */
/* which has no color tokens to remap. Cover the visible surfaces so   */
/* the page reads as one consistent dark page rather than a dark       */
/* header/footer around a bright white content well.                  */
html.layout-dark .d9-body {
    background: #10201a;
}

html.layout-dark .d9-body .page-content,
html.layout-dark .d9-body .bg-white {
    background: #10201a !important;
    color: #ece4cf;
}

html.layout-dark .d9-body .post-details-style,
html.layout-dark .d9-body .dz-card,
html.layout-dark .d9-body .comments-area,
html.layout-dark .d9-body .comment-respond {
    background: #16281f;
    color: #ece4cf;
}

html.layout-dark .d9-body .dz-title,
html.layout-dark .d9-body .widget-title .title,
html.layout-dark .d9-body h1,
html.layout-dark .d9-body h2,
html.layout-dark .d9-body h3,
html.layout-dark .d9-body h4 {
    color: #ece4cf;
}

/* Legacy list pages (statements, posts) reuse the old template's .dz-card /
   .widget / .pagination chrome, and the template's own .layout-dark rules
   paint those near-black (#161405). Re-key them to the site's night palette
   (deep green surfaces, cream text, gold accents) so they match the rest. */
html.layout-dark .d9-body .dz-card.style-1,
html.layout-dark .d9-body .dz-card.style-1 .dz-info,
html.layout-dark .d9-body .content-box .dz-info {
    background: #16281f;
    color: #ece4cf;
}

html.layout-dark .d9-body .dz-card.style-1 {
    border: 1px solid rgba(216, 189, 97, .16);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .32) !important;
}

html.layout-dark .d9-body .dz-card.style-1 .dz-title a,
html.layout-dark .d9-body .widget-post .title a,
html.layout-dark .d9-body .widget_categories .cat-item a {
    color: #ece4cf;
}

html.layout-dark .d9-body .dz-card.style-1 .dz-title a:hover,
html.layout-dark .d9-body .widget-post .title a:hover,
html.layout-dark .d9-body .widget_categories .cat-item a:hover {
    color: #f0dc91;
}

html.layout-dark .d9-body .dz-card.style-1 .dz-info > span,
html.layout-dark .d9-body .dz-card.style-1 .dz-info,
html.layout-dark .d9-body .widget-post .dz-meta,
html.layout-dark .d9-body .widget-post .dz-meta *,
html.layout-dark .d9-body .widget_categories .cat-item {
    color: #93a297;
}

html.layout-dark .d9-body .widget.style-1 {
    background: #16281f;
    border: 1px solid rgba(216, 189, 97, .16);
    border-bottom-color: var(--d9-gold, #d8bd61);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}

html.layout-dark .d9-body .widget.style-1 .widget-title .title {
    color: #ece4cf;
}

html.layout-dark .d9-body .widget.style-1 .search-bx .form-control {
    background: #0f1c16;
    color: #ece4cf;
    border-color: rgba(216, 189, 97, .28);
}

html.layout-dark .d9-body .widget.style-1 .search-bx .form-control::placeholder {
    color: #93a297;
}

html.layout-dark .d9-body .pagination li .page-link,
html.layout-dark .d9-body .pagination li .page-numbers {
    background: #16281f;
    color: #ece4cf;
    border: 1px solid rgba(216, 189, 97, .2);
}

html.layout-dark .d9-body .pagination li .page-link:hover,
html.layout-dark .d9-body .pagination li .page-numbers:hover,
html.layout-dark .d9-body .pagination li.active .page-link,
html.layout-dark .d9-body .pagination li .page-numbers.current {
    background: var(--d9-gold, #d8bd61);
    color: #0a1712;
    border-color: var(--d9-gold, #d8bd61);
}

html.layout-dark .d9-body .post-meta-modern {
    background: rgba(216, 189, 97, .08);
    color: #d7cdb2;
}

html.layout-dark .d9-body .post-fontctrl {
    background: rgba(236, 228, 207, .06);
    border-color: rgba(216, 189, 97, .22);
}

html.layout-dark .d9-body .post-fontctrl button {
    background: transparent;
    color: #ece4cf;
    border-color: rgba(216, 189, 97, .3);
}

html.layout-dark .d9-body .post-share-modern {
    background: linear-gradient(180deg, #16281f, #10201a);
    border-color: rgba(216, 189, 97, .18);
}

html.layout-dark .d9-body .post-share-modern__label {
    color: #ece4cf;
}

html.layout-dark .d9-body .similar-posts h4 {
    color: #fff;
}

/* ================================================================
   Dark-mode overrides for the About page (about-modern.css).
   The page's own background is already handled by the generic
   .page-content/.bg-white rule above (both pages now render inside
   master-demo9's #d8-main wrapper) — these target the page's own
   component classes, which the generic rule doesn't reach.
   ================================================================ */
html.layout-dark .about-hero {
    background:
        radial-gradient(circle at 16% 20%, rgba(222, 197, 60, .14), transparent 26%),
        linear-gradient(128deg, #10201a, #16281f);
}

html.layout-dark .about-hero::after {
    background: linear-gradient(90deg, #615b1f 0 12%, #dec53c 12% 29%, rgba(216, 189, 97, .15) 29% 100%);
}

html.layout-dark .about-hero__grid {
    background-image:
        linear-gradient(rgba(236, 228, 207, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(236, 228, 207, .05) 1px, transparent 1px);
}

html.layout-dark .about-breadcrumbs {
    color: #93a297;
}

html.layout-dark .about-breadcrumbs a:hover,
html.layout-dark .about-breadcrumbs span[aria-current="page"] {
    color: #dec53c;
}

html.layout-dark .about-eyebrow {
    color: #dec53c;
}

html.layout-dark .about-eyebrow i::after {
    box-shadow: 0 0 0 5px rgba(222, 197, 60, .18);
}

html.layout-dark .about-hero h1 {
    color: #ece4cf;
}

html.layout-dark .about-hero__lead {
    color: rgba(236, 228, 207, .78);
}

html.layout-dark .about-hero__principles span {
    border-color: rgba(216, 189, 97, .2);
    background: rgba(236, 228, 207, .06);
    color: #ece4cf;
}

html.layout-dark .about-hero__principles b {
    color: #dec53c;
}

html.layout-dark .about-hero__visual {
    border-color: rgba(216, 189, 97, .2);
    box-shadow: 0 28px 65px rgba(0, 0, 0, .5);
}

html.layout-dark .about-story {
    background: #16281f;
}

html.layout-dark .about-section-heading h2 {
    color: #ece4cf;
}

html.layout-dark .about-section-heading > p {
    color: #93a297;
}

html.layout-dark .about-story__body p {
    color: #ece4cf;
}

html.layout-dark .about-story__body p + p {
    border-block-start-color: rgba(216, 189, 97, .2);
}

html.layout-dark .about-story__body .about-story__opening {
    color: #ece4cf;
}

html.layout-dark .about-goals {
    background: #10201a;
}

html.layout-dark .about-goals__pattern {
    border-color: rgba(222, 197, 60, .18);
    box-shadow: 0 0 0 55px rgba(222, 197, 60, .04), 0 0 0 110px rgba(222, 197, 60, .025);
}

html.layout-dark .about-goals__heading h2 {
    color: #ece4cf;
}

html.layout-dark .about-goals__heading > p {
    color: #93a297;
}

html.layout-dark .about-goals__list {
    border-block-start-color: rgba(216, 189, 97, .2);
}

html.layout-dark .about-goals__list li {
    border-block-end-color: rgba(216, 189, 97, .2);
}

html.layout-dark .about-goals__list li:hover {
    background: rgba(222, 197, 60, .07);
}

html.layout-dark .about-goal__number {
    border-color: rgba(216, 189, 97, .2);
    background: rgba(236, 228, 207, .06);
    color: #dec53c;
}

html.layout-dark .about-goals__list h3 {
    color: #ece4cf;
}

html.layout-dark .about-goals__list p {
    color: #93a297;
}

html.layout-dark .about-goal__line {
    background: linear-gradient(90deg, transparent, rgba(216, 189, 97, .3));
}

html.layout-dark .about-pledge {
    background: #16281f;
}

html.layout-dark .about-pledge__layout {
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

html.layout-dark .about-contact {
    border-block-start-color: rgba(216, 189, 97, .2);
    background: #10201a;
}

html.layout-dark .about-contact h2 {
    color: #ece4cf;
}

/* ================================================================
   Dark-mode overrides for the Contact page (contact-modern.css).
   ================================================================ */
html.layout-dark .contact-modern {
    color: #ece4cf;
}

html.layout-dark .contact-hero {
    background:
        radial-gradient(circle at 17% 12%, rgba(222, 197, 60, .12), transparent 31%),
        radial-gradient(circle at 90% 80%, rgba(97, 91, 31, .18), transparent 28%),
        linear-gradient(132deg, #16281f, #10201a);
    color: #ece4cf;
}

html.layout-dark .contact-hero__grid {
    background-image:
        linear-gradient(rgba(236, 228, 207, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(236, 228, 207, .05) 1px, transparent 1px);
}

html.layout-dark .contact-breadcrumbs {
    color: #93a297;
}

html.layout-dark .contact-breadcrumbs a:hover,
html.layout-dark .contact-breadcrumbs span[aria-current="page"] {
    color: #dec53c;
}

html.layout-dark .contact-eyebrow,
html.layout-dark .contact-hero h1 span {
    color: #dec53c;
}

html.layout-dark .contact-hero__copy > p {
    color: #93a297;
}

html.layout-dark .contact-hero__assurances span {
    color: #ece4cf;
}

html.layout-dark .contact-hero__assurances svg {
    color: #dec53c;
}

html.layout-dark .contact-signal::before,
html.layout-dark .contact-signal::after {
    background: rgba(222, 197, 60, .2);
}

html.layout-dark .contact-signal__orbit {
    border-color: rgba(222, 197, 60, .28);
}

html.layout-dark .contact-signal__node {
    background: #16281f;
    border-color: #dec53c;
}

html.layout-dark .contact-signal__label {
    border-color: rgba(216, 189, 97, .2);
    background: #10201a;
    color: #ece4cf;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .4);
}

html.layout-dark .contact-signal__core {
    background: linear-gradient(145deg, #16281f, #10201a);
    box-shadow: inset 0 0 0 7px rgba(222, 197, 60, .1), 0 22px 56px rgba(0, 0, 0, .5);
}

html.layout-dark .contact-form-card {
    border-color: rgba(216, 189, 97, .2);
    background: #16281f;
    box-shadow: 0 28px 75px rgba(0, 0, 0, .45);
}

html.layout-dark .contact-panel-heading {
    border-block-end-color: rgba(216, 189, 97, .2);
}

html.layout-dark .contact-panel-heading__number {
    background: #10201a;
    color: #dec53c;
}

html.layout-dark .contact-panel-heading__kicker {
    color: #dec53c;
}

html.layout-dark .contact-panel-heading h2 {
    color: #ece4cf;
}

html.layout-dark .contact-panel-heading p {
    color: #93a297;
}

html.layout-dark .contact-alert--success {
    background: #16281f;
    color: #ece4cf;
    border-color: rgba(94, 199, 120, .35);
}

html.layout-dark .contact-alert--error {
    background: #16281f;
    color: #ece4cf;
    border-color: rgba(239, 131, 124, .4);
}

html.layout-dark .contact-field > label,
html.layout-dark .contact-field__label-row label {
    color: #ece4cf;
}

html.layout-dark .contact-field label > small {
    color: #93a297;
}

html.layout-dark .contact-field label > span {
    color: #e2665c;
}

html.layout-dark .contact-character-count {
    color: #93a297;
}

html.layout-dark .contact-character-count.is-near-limit {
    color: #e2665c;
}

html.layout-dark .contact-field__hint {
    color: #93a297;
}

html.layout-dark .contact-field__error {
    color: #e2665c;
}

html.layout-dark .contact-control {
    border-color: rgba(216, 189, 97, .2);
    background: #10201a;
}

html.layout-dark .contact-control:focus-within {
    background: #10201a;
}

html.layout-dark .contact-control.is-invalid {
    background: #10201a;
    border-color: rgba(239, 131, 124, .55);
}

html.layout-dark .contact-control > svg {
    color: #93a297;
}

html.layout-dark .contact-control input,
html.layout-dark .contact-control textarea {
    color: #ece4cf;
}

html.layout-dark .contact-control input::placeholder,
html.layout-dark .contact-control textarea::placeholder {
    color: #93a297;
}

html.layout-dark .contact-form__footer {
    border-block-start-color: rgba(216, 189, 97, .2);
}

html.layout-dark .contact-form__footer > p {
    color: #93a297;
}

html.layout-dark .contact-form__footer > p svg {
    color: #93a297;
}

html.layout-dark .contact-submit {
    box-shadow: 0 13px 32px rgba(0, 0, 0, .5);
}

html.layout-dark .contact-submit:hover {
    box-shadow: 0 17px 40px rgba(0, 0, 0, .6);
}

html.layout-dark .contact-sidebar {
    border-color: rgba(216, 189, 97, .2);
    background: #16281f;
    color: #ece4cf;
    box-shadow: 0 28px 75px rgba(0, 0, 0, .45);
}

html.layout-dark .contact-status-card {
    border-block-end-color: rgba(216, 189, 97, .2);
    background:
        linear-gradient(135deg, rgba(222, 197, 60, .12), transparent 55%),
        #10201a;
}

html.layout-dark .contact-status-card__topline {
    color: #93a297;
}

html.layout-dark .contact-status-card h2 {
    color: #ece4cf;
}

html.layout-dark .contact-status-card p {
    color: #93a297;
}

html.layout-dark .contact-channel-list {
    border-block-end-color: rgba(216, 189, 97, .2);
    border-inline-start-color: rgba(216, 189, 97, .2);
}

html.layout-dark .contact-email-card {
    border-block-end-color: rgba(216, 189, 97, .2);
}

html.layout-dark .contact-email-card:hover {
    background: rgba(236, 228, 207, .05);
}

html.layout-dark .contact-email-card__icon {
    border-color: rgba(216, 189, 97, .2);
    background: #10201a;
    color: #dec53c;
}

html.layout-dark .contact-email-card small {
    color: #93a297;
}

html.layout-dark .contact-email-card strong {
    color: #dec53c;
}

html.layout-dark .contact-email-card__arrow {
    color: #93a297;
}

html.layout-dark .contact-email-card:hover .contact-email-card__arrow {
    color: #dec53c;
}

html.layout-dark .contact-process__eyebrow {
    color: #dec53c;
}

html.layout-dark .contact-process li:not(:last-child)::after {
    background: rgba(222, 197, 60, .2);
}

html.layout-dark .contact-process li > span {
    border-color: rgba(216, 189, 97, .2);
    background: #10201a;
    color: #dec53c;
}

html.layout-dark .contact-process strong {
    color: #ece4cf;
}

html.layout-dark .contact-process small {
    color: #93a297;
}

html.layout-dark .contact-privacy-note {
    border-color: rgba(216, 189, 97, .2);
    background: rgba(222, 197, 60, .05);
}

html.layout-dark .contact-privacy-note svg {
    color: #dec53c;
}

html.layout-dark .contact-privacy-note p {
    color: #93a297;
}

html.layout-dark .contact-privacy-note strong {
    color: #ece4cf;
}

html.layout-dark .contact-guidance {
    border-block-color: rgba(216, 189, 97, .2);
    background: #16281f;
    color: #ece4cf;
}

html.layout-dark .contact-guidance::after {
    background-image: repeating-linear-gradient(135deg, transparent 0 22px, rgba(236, 228, 207, .08) 22px 23px);
}

html.layout-dark .contact-guidance__inner span:not(.contact-guidance__mark) {
    color: #dec53c;
}

html.layout-dark .contact-guidance p {
    color: #93a297;
}

/* ================================================================
   Dark-mode overrides for the media library (video/sound list +
   details) and the electronic book library (official-content.css).
   The hero/console/stage sections are already dark-designed in both
   themes; these target the light "paper" sections that sit beneath
   them, which official-content.css never themed for dark mode.
   ================================================================ */
html.layout-dark .ed-page--media,
html.layout-dark .media-detail {
    background: #10201a;
}

html.layout-dark .media-catalog__head h2 {
    color: #ece4cf;
}

html.layout-dark .media-search {
    background: #16281f;
    border-color: rgba(216, 189, 97, .2);
    color: #ece4cf;
}

html.layout-dark .media-search input {
    color: #ece4cf;
}

html.layout-dark .media-card {
    background: #16281f;
    border-color: rgba(216, 189, 97, .16);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}

html.layout-dark .media-card__copy small {
    color: #93a297;
}

html.layout-dark .media-card__copy strong {
    color: #ece4cf;
}

html.layout-dark .media-card__details {
    color: #93a297;
    border-color: rgba(216, 189, 97, .16);
}

html.layout-dark .media-catalog__empty {
    background: rgba(236, 228, 207, .04);
    border-color: rgba(216, 189, 97, .22);
    color: #93a297;
}

html.layout-dark .media-detail__content {
    background: #16281f;
    border-color: rgba(216, 189, 97, .16);
}

html.layout-dark .media-detail__description {
    color: #c7bfa6;
}

html.layout-dark .media-detail__navigation a {
    background: #16281f;
    border-color: rgba(216, 189, 97, .16);
}

html.layout-dark .media-detail__navigation small {
    color: #93a297;
}

html.layout-dark .media-detail__navigation strong {
    color: #ece4cf;
}

html.layout-dark .book-library {
    background: #10201a;
    color: #ece4cf;
}

html.layout-dark .book-library__rail-frame::after {
    background: linear-gradient(90deg, #10201a, transparent);
}

html.layout-dark .book-library__catalog-head h2 {
    color: #ece4cf;
}

html.layout-dark .book-library__catalog-head p {
    color: #93a297;
}

html.layout-dark .book-library__controls button {
    color: #ece4cf;
    border-color: rgba(216, 189, 97, .3);
}

html.layout-dark .book-library__controls button:hover {
    color: #10251c;
    background: #dec53c;
}

html.layout-dark .book-library-card {
    background: #16281f;
    border-color: rgba(216, 189, 97, .16);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .32);
}

html.layout-dark .book-library-card__copy h3 a {
    color: #ece4cf;
}

html.layout-dark .book-library-card__meta small {
    color: #d7cdb2;
}

html.layout-dark .book-library-card__meta span {
    color: #93a297;
}

html.layout-dark .book-library-card__actions {
    border-color: rgba(216, 189, 97, .16);
}

html.layout-dark .book-library-card__actions a {
    color: #c7bfa6;
}

html.layout-dark .book-library-card__actions a:last-child {
    color: #e5847c;
}

html.layout-dark .book-library__empty {
    background: rgba(236, 228, 207, .04);
    border-color: rgba(216, 189, 97, .22);
    color: #93a297;
}

html.layout-dark .book-detail {
    background: #10201a;
    color: #ece4cf;
}

html.layout-dark .book-detail .ed-breadcrumbs,
html.layout-dark .book-detail .ed-breadcrumbs a {
    color: #93a297;
}

html.layout-dark .book-detail__about {
    background: #16281f;
    border-color: rgba(216, 189, 97, .16);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .28);
}

html.layout-dark .book-detail__about h2 {
    color: #ece4cf;
}

html.layout-dark .book-detail__description {
    color: #c7bfa6;
}

/* ================================================================
   Dark-mode overrides for the photo library (photo-library.css).
   ================================================================ */
html.layout-dark .photo-library {
    background: #10201a;
    color: #ece4cf;
}

html.layout-dark .photo-card {
    background: #16281f;
    border-color: rgba(216, 189, 97, .16);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}

html.layout-dark .photo-library__empty {
    background: rgba(236, 228, 207, .04);
    border-color: rgba(216, 189, 97, .22);
    color: #93a297;
}

html.layout-dark .photo-library__empty h2 {
    color: #ece4cf;
}

/* Electronic library at night. The section keeps its own palette rather than
   inheriting the page paper, so every token and every hardcoded card colour
   gets a dark counterpart here. */
html.layout-dark .d9-library {
    --d9-lib-ink: #eee8d7;
    --d9-lib-muted: #9aa99f;
    --d9-lib-line: rgba(216, 189, 97, .17);
    --d9-lib-page: linear-gradient(160deg, #1b3126, #11241b);
    background:
        radial-gradient(circle at 88% 4%, rgba(216, 189, 97, .1), transparent 28%),
        radial-gradient(circle at 6% 98%, rgba(47, 112, 79, .13), transparent 32%),
        linear-gradient(148deg, #0c1c15 0%, #07130f 56%, #0e2219 100%);
}

html.layout-dark .d9-library__weave {
    opacity: .26;
    background-image:
        linear-gradient(rgba(216, 189, 97, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(216, 189, 97, .045) 1px, transparent 1px);
}

html.layout-dark .d9-library__aura i:first-child {
    background: radial-gradient(circle, rgba(216, 189, 97, .12), transparent 66%);
}

html.layout-dark .d9-library__aura i:last-child {
    background: radial-gradient(circle, rgba(47, 112, 79, .16), transparent 68%);
}

html.layout-dark .d9-library .d9-heading > div > span {
    color: var(--d9-gold);
}

html.layout-dark .d9-book__frame {
    background: #16281f;
    border-color: rgba(216, 189, 97, .18);
    box-shadow: 0 20px 46px rgba(0, 0, 0, .45);
}

html.layout-dark .d9-book:hover .d9-book__frame,
html.layout-dark .d9-book:focus-within .d9-book__frame {
    box-shadow: 0 36px 68px rgba(0, 0, 0, .55);
}

html.layout-dark .d9-book__stack::before,
html.layout-dark .d9-book__stack::after {
    border-color: rgba(216, 189, 97, .14);
}

html.layout-dark .d9-book__gloss {
    background: linear-gradient(to left, transparent, rgba(240, 220, 145, .22), transparent);
}

html.layout-dark .d9-book__cover::after {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, .6), transparent 70%);
}

html.layout-dark .d9-book__index {
    color: var(--d9-gold);
}

html.layout-dark .d9-book h3 a {
    color: var(--d9-lib-ink);
}

html.layout-dark .d9-book:hover h3 a,
html.layout-dark .d9-book h3 a:focus-visible {
    color: var(--d9-gold-bright);
}

html.layout-dark .d9-book__read {
    color: #ece4cf;
    background: rgba(236, 228, 207, .06);
    border-color: rgba(216, 189, 97, .2);
}

html.layout-dark .d9-book__read:hover,
html.layout-dark .d9-book__read:focus-visible {
    color: #0b2117;
    background: var(--d9-gold);
    border-color: var(--d9-gold);
}

/* ------------------------------------------------------------------ */
/* Archive pages (posts, statements, operations, quotes, search…).      */
/* They used to reserve 200px above the heading for a header that is    */
/* sticky — it already takes its own space — leaving a dead band under  */
/* the menu on every one of them.                                       */
/* ------------------------------------------------------------------ */
.d9-body .content-inner.content-inner--list {
    padding-top: 46px;
}

@media (max-width: 991px) {
    .d9-body .content-inner.content-inner--list { padding-top: 30px; }
}

@media (max-width: 575px) {
    .d9-body .content-inner.content-inner--list { padding-top: 22px; }
}