/* Dark-mode corrections. Loaded only when the visitor's device is in dark mode (media attribute on the <link>).
   Rule of thumb: a variable that is a BACKGROUND in dark mode must not be used as TEXT on an always-green section. */
:root{--gold-text:#f8ecc9;--cream:#121c17}

/* Arabic / dua text on the always-green sections: --gold-100 turns dark brown in dark mode, so use fixed light gold */
.ayah__ar,.footer2__dua,.ar--md,.ar--xl{color:var(--gold-text)}
.ar--md,.ar--xl{color:var(--gold-500)}
.ayah__ar,.ayah__tr{color:var(--gold-text)}
.page-ayah .verse__ar,.quote__ar{color:var(--gold-text)}

/* Cream sections keep a light background in the base CSS; give them a dark one so the light text stays readable */
.page-home{--l-cream:var(--cream);--l-white:var(--surface)}
.page-transparency .sec--cream{background:var(--cream)}
.page-home .elist--past .erow{background:var(--surface)}

/* Gold buttons keep dark text; gold-tinted notes get dark text on their dark tint */
.btn--gold{color:#2a1e00}
.tag--warn,.account--note{color:var(--ink)}

/* Sign-in cards: body copy, labels and hints follow the card, not a hard-coded white */
.login__main,.login__main h1,.login__main label,.login__main .field label{color:var(--ink)}
.login__main .ur,.login__main .note,.login__main .muted,.login__main small{color:var(--muted)}
.login__main input{background:var(--tint);color:var(--ink);border-color:var(--line)}
.login__main input::placeholder{color:var(--muted)}
.login__main .field-hint,.login__main .hint{color:var(--muted)}

/* Logo images are designed for light backgrounds: sit them on a soft plate instead of letting them blend into the dark header */
.login__mark{background:none}

/* Banner verse in the page header (was --gold-100, a dark tint in dark mode) */
.pagecal__ar{color:var(--gold-text)}

/* White sign-in cards (.adl: admin + donor portals) stay white, so give everything inside them the light-theme palette */
.adl{color-scheme:light;--ink:#1b2621;--muted:#5d6a63;--line:#e3ddcc;--surface:#fff;--tint:#f3efe4;--green-700:#0f5a43;color:var(--ink)}
.adl a{color:#0f5a43}
.adl input{background:#fff;color:#1b2621}

/* Small gold buttons: dark text on gold in every mode */
.btn--gold,.btn--gold.btn--sm,.nav__cta .btn--gold{color:#2a1e00}

/* Decorative Arabic watermark behind page headers */
.pagewm span{color:#7fd1ad}

/* Sub-headings that were fixed dark green, and gold small text on mid-green banners (needs a brighter gold) */
.evsub,.evsub span{color:#7fd1ad}
.eyebrow--gold,.verse__ur,.pagecal__ref{color:#f0c565}

/* Phone section styling in dark mode */
.sec--cream,.section--tint{background:var(--cream)}
@media (max-width:760px){
  .section{border-bottom-color:var(--line)}
  main .section h2{color:#eaf5ee}
}
.moment__icon{background:#1a3328;color:#7fd1ad}

/* Header logo in dark mode: the light-lettered logo (see the <picture> in the layout) sits straight on the dark header, no plate */
.header .brand{background:none;padding:0;align-items:center}
.header .brand picture,.header .brand .brand__logo{display:block}

/* ---- Transparency page in dark mode: its "white" sections, panels, tables, chips and figures were fixed light colours ---- */
.page-transparency .sec--white{background:var(--bg)}
.page-transparency .sec--cream{background:var(--cream)}
.page-transparency .tsub{background:var(--surface)}
.tx-note,.tx-tabs,.tx-pg,.tx-table th{background:var(--tint)}
.tx-tabs a[aria-selected=true]{background:var(--surface);color:#7fd1ad}
.tx-filters select,.tx-filters input[type=search],.tx-filters .tx-search{background:var(--tint);color:var(--ink)}
.tx-kpi--in strong{color:#7fd1ad}.tx-kpi--out strong{color:#f0c565}.tx-kpi--bal strong{color:#7cc4e0}.tx-kpi--adm strong{color:#f0a27c}
.tx-donut>div,.tx-ic,.tx-giver code,.tx-tag,.tx-chip{color:#7fd1ad}
.tx-chip.is-done{background:#26332d;color:#a3b2aa}
.tx-dual .raised{background:#2f6b53}
.page-transparency .tsub__csv{color:#7fd1ad;border-color:#3f8a6d}
.page-transparency .tsub__csv:hover{background:#177355;color:#fff}

/* ---- Other dark-mode leftovers: dark-green text on dark panels ---- */
.dp-greet__salam,.dp-greet a{color:#7fd1ad}
.mapcard__links a{color:#7fd1ad}
.about-letter__hello,.about-letter__sign,.about-letter__sign span,.together strong{color:#7fd1ad}
.about-letter__sign{color:#a3b2aa}