/*
 * SMANJA v22.3.8 — Contrast & Readability System
 * Final public-page contrast layer for Yayasan.
 */

:root{
  --sj238-on-dark:#f8fbff;
  --sj238-on-dark-soft:#d8e8f5;
  --sj238-on-dark-muted:#b8cfdf;
  --sj238-link-dark:#9edcff;
  --sj238-gold:#f2c453;
  --sj238-ink:#102a43;
  --sj238-body:#425b70;
}

/* =========================================================
   1. PAGE TITLE / HERO — explicit high contrast
   ========================================================= */
body.smanja-v2238 .page-title-box{
  color:var(--sj238-on-dark)!important;
}
body.smanja-v2238 .page-title-box h1,
body.smanja-v2238 .page-title-box h2,
body.smanja-v2238 .page-title-box h3,
body.smanja-v2238 .page-title-box #typing-title{
  color:#fff!important;
  text-shadow:0 3px 16px rgba(0,0,0,.30)!important;
}
body.smanja-v2238 .page-title-box small,
body.smanja-v2238 .page-title-box p,
body.smanja-v2238 .page-title-box .text-muted{
  color:#e2eef8!important;
}
body.smanja-v2238 .page-title-box .page-title-badge{
  color:#fff!important;
  background:rgba(255,255,255,.14)!important;
  border-color:rgba(255,255,255,.20)!important;
}
body.smanja-v2238 .page-title-box .page-title-badge i,
body.smanja-v2238 .page-title-box .typing-cursor{
  color:var(--sj238-gold)!important;
}

/* =========================================================
   2. CMS / RICH CONTENT — readable default on light surfaces
   ========================================================= */
body.smanja-v2238 .sj238-rich-content,
body.smanja-v2238 .article-content{
  color:var(--sj238-body);
}
body.smanja-v2238 .sj238-rich-content > p,
body.smanja-v2238 .article-content > p{
  color:var(--sj238-body)!important;
}
body.smanja-v2238 .sj238-rich-content h1,
body.smanja-v2238 .sj238-rich-content h2,
body.smanja-v2238 .sj238-rich-content h3,
body.smanja-v2238 .sj238-rich-content h4,
body.smanja-v2238 .sj238-rich-content h5,
body.smanja-v2238 .sj238-rich-content h6,
body.smanja-v2238 .article-content h1,
body.smanja-v2238 .article-content h2,
body.smanja-v2238 .article-content h3,
body.smanja-v2238 .article-content h4,
body.smanja-v2238 .article-content h5,
body.smanja-v2238 .article-content h6{
  color:var(--sj238-ink);
}

/* =========================================================
   3. AUTO-DETECTED DARK SURFACES
   JS adds .sj238-dark-surface to CMS sections whose computed
   background/overlay is dark. This also overrides inline
   editor colors that otherwise become unreadable.
   ========================================================= */
body.smanja-v2238 #content .sj238-dark-surface{
  color:var(--sj238-on-dark)!important;
}
body.smanja-v2238 #content .sj238-dark-surface h1,
body.smanja-v2238 #content .sj238-dark-surface h2,
body.smanja-v2238 #content .sj238-dark-surface h3,
body.smanja-v2238 #content .sj238-dark-surface h4,
body.smanja-v2238 #content .sj238-dark-surface h5,
body.smanja-v2238 #content .sj238-dark-surface h6{
  color:#fff!important;
  text-shadow:0 2px 12px rgba(0,0,0,.22);
}
body.smanja-v2238 #content .sj238-dark-surface p,
body.smanja-v2238 #content .sj238-dark-surface li,
body.smanja-v2238 #content .sj238-dark-surface dd,
body.smanja-v2238 #content .sj238-dark-surface dt,
body.smanja-v2238 #content .sj238-dark-surface blockquote,
body.smanja-v2238 #content .sj238-dark-surface small,
body.smanja-v2238 #content .sj238-dark-surface .lead,
body.smanja-v2238 #content .sj238-dark-surface .text-muted{
  color:var(--sj238-on-dark-soft)!important;
}
body.smanja-v2238 #content .sj238-dark-surface strong,
body.smanja-v2238 #content .sj238-dark-surface b{
  color:#fff!important;
}
body.smanja-v2238 #content .sj238-dark-surface a:not(.btn){
  color:var(--sj238-link-dark)!important;
  text-decoration-color:rgba(158,220,255,.55)!important;
}
body.smanja-v2238 #content .sj238-dark-surface a:not(.btn):hover{
  color:#fff!important;
}

/* Keep intentional gold/accent copy visible instead of whitening it. */
body.smanja-v2238 #content .sj238-dark-surface .text-warning,
body.smanja-v2238 #content .sj238-dark-surface .text-gold,
body.smanja-v2238 #content .sj238-dark-surface [class*="gold"],
body.smanja-v2238 #content .sj238-dark-surface [class*="accent"]{
  color:var(--sj238-gold)!important;
}

/* Light cards/tables nested inside a dark CMS section must stay dark-on-light. */
body.smanja-v2238 #content .sj238-dark-surface .card:not(.bg-dark):not([style*="background:#0"]):not([style*="background: #0"]),
body.smanja-v2238 #content .sj238-dark-surface .table,
body.smanja-v2238 #content .sj238-dark-surface .list-group-item,
body.smanja-v2238 #content .sj238-dark-surface .alert-light{
  color:var(--sj238-ink)!important;
}
body.smanja-v2238 #content .sj238-dark-surface .card:not(.bg-dark):not([style*="background:#0"]):not([style*="background: #0"]) h1,
body.smanja-v2238 #content .sj238-dark-surface .card:not(.bg-dark):not([style*="background:#0"]):not([style*="background: #0"]) h2,
body.smanja-v2238 #content .sj238-dark-surface .card:not(.bg-dark):not([style*="background:#0"]):not([style*="background: #0"]) h3,
body.smanja-v2238 #content .sj238-dark-surface .card:not(.bg-dark):not([style*="background:#0"]):not([style*="background: #0"]) p,
body.smanja-v2238 #content .sj238-dark-surface .table td,
body.smanja-v2238 #content .sj238-dark-surface .table th,
body.smanja-v2238 #content .sj238-dark-surface .list-group-item{
  color:var(--sj238-ink)!important;
}

/* =========================================================
   4. COMMON PUBLIC DARK BLOCKS — static fallback before JS
   ========================================================= */
body.smanja-v2238 .sj22-page-hero,
body.smanja-v2238 .sj15-profile-band,
body.smanja-v2238 .sj15-berseri,
body.smanja-v2238 .sj22-quote-section,
body.smanja-v2238 .sj222-gallery-section{
  color:var(--sj238-on-dark)!important;
}
body.smanja-v2238 .sj22-page-hero :is(h1,h2,h3,h4,h5,h6),
body.smanja-v2238 .sj15-profile-band :is(h1,h2,h3,h4,h5,h6),
body.smanja-v2238 .sj15-berseri :is(h1,h2,h3,h4,h5,h6),
body.smanja-v2238 .sj22-quote-section :is(h1,h2,h3,h4,h5,h6),
body.smanja-v2238 .sj222-gallery-section :is(h1,h2,h3,h4,h5,h6){
  color:#fff!important;
}
body.smanja-v2238 .sj22-page-hero p,
body.smanja-v2238 .sj15-profile-band p,
body.smanja-v2238 .sj15-berseri p,
body.smanja-v2238 .sj22-quote-section p,
body.smanja-v2238 .sj222-gallery-section p{
  color:var(--sj238-on-dark-soft)!important;
}

/* =========================================================
   5. FOOTER — stronger contrast
   ========================================================= */
body.smanja-v2238 .sj8-footer h1,
body.smanja-v2238 .sj8-footer h2,
body.smanja-v2238 .sj8-footer h3,
body.smanja-v2238 .sj8-footer h4,
body.smanja-v2238 .sj8-footer h5,
body.smanja-v2238 .sj8-footer h6{
  color:#fff!important;
}
body.smanja-v2238 .sj8-footer p{
  color:#d8e7f3!important;
}
body.smanja-v2238 .sj8-footer-links a{
  color:#f3f8fc!important;
}
body.smanja-v2238 .sj8-footer-bottom{
  color:#cadbe8!important;
}

/* =========================================================
   6. Accessibility helpers / mobile
   ========================================================= */
body.smanja-v2238 #content .sj238-dark-surface ::selection{
  background:#f3c653;
  color:#102a43;
}

@media(max-width:767.98px){
  body.smanja-v2238 .page-title-box h1{font-size:clamp(25px,7vw,32px)!important}
  body.smanja-v2238 #content .sj238-dark-surface p,
  body.smanja-v2238 #content .sj238-dark-surface li{line-height:1.7!important}
}