/* ==========================================================================
   RIC 037 — EMERALD + IVORY 3D BACKGROUND
   Replaces black-heavy background with a brighter, premium Islamic palette.
   ========================================================================== */

:root{
  --ric-emerald:#0d4b3c;
  --ric-emerald-deep:#0a3d33;
  --ric-teal:#1a6656;
  --ric-mint:#dcefe7;
  --ric-ivory:#f5efe2;
  --ric-ivory-2:#ede3d2;
  --ric-gold:#c8a24b;
  --ric-gold-soft:#ead7a0;
  --ric-ink:#22342e;
}

html,body{
  background:#dfe9e3 !important;
}

body.ric-refined-site,
body.ric-3d-site{
  color:#f7f8f2;
  background:
    radial-gradient(circle at 12% 8%,rgba(255,255,255,.75),transparent 24%),
    radial-gradient(circle at 87% 18%,rgba(232,215,160,.38),transparent 24%),
    linear-gradient(180deg,#dcebe3 0%,#c8ddd3 18%,#a8c9bc 38%,#78a99a 62%,#4c7f70 82%,#315f54 100%) !important;
  min-height:100vh;
}

/* Soft architectural canvas instead of black */
.ric-3d-background{
  background:
    linear-gradient(180deg,rgba(255,255,255,.18),transparent 22%),
    radial-gradient(circle at center,rgba(255,255,255,.17),transparent 58%);
}

.ric-3d-grid{
  opacity:.12 !important;
  background-image:
    linear-gradient(rgba(31,91,75,.20) 1px,transparent 1px),
    linear-gradient(90deg,rgba(31,91,75,.20) 1px,transparent 1px) !important;
  mask-image:linear-gradient(to bottom,transparent 8%,black 36%,black 70%,transparent 96%);
}

.ric-3d-seal{
  opacity:.05 !important;
  filter:
    grayscale(.1)
    sepia(.18)
    saturate(.8)
    drop-shadow(0 28px 42px rgba(37,79,66,.22)) !important;
}

.ric-3d-arch{
  border-color:rgba(22,79,65,.12) !important;
  box-shadow:
    inset 0 0 80px rgba(255,255,255,.12),
    0 40px 85px rgba(48,91,77,.14) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.01));
}

.ric-3d-glow{
  background:radial-gradient(circle,rgba(236,217,163,.28),rgba(255,255,255,.10) 35%,transparent 68%) !important;
  opacity:.8;
}

/* Header becomes emerald glass, not black */
.language-dropdown-shell{
  background:linear-gradient(180deg,rgba(13,75,60,.96),rgba(10,61,51,.95)) !important;
  border-bottom-color:rgba(255,255,255,.12) !important;
}

.site-header,
.refined-header{
  background:
    linear-gradient(180deg,rgba(18,94,75,.95),rgba(12,72,59,.94)) !important;
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 34px rgba(34,82,68,.20) !important;
}

.brand,
.refined-nav a{
  color:#fffdf3 !important;
}

.refined-nav a.is-active{
  color:#f2d98a !important;
}

/* Reader shell backgrounds */
.immersive-reader-app{
  background:transparent !important;
  color:var(--ric-ink) !important;
}

.reader-top-banner{
  background:
    radial-gradient(circle at 83% 18%,rgba(233,210,142,.30),transparent 28%),
    linear-gradient(135deg,#1f715d 0%,#175847 46%,#104638 100%) !important;
  border-color:rgba(255,255,255,.20) !important;
  box-shadow:0 26px 65px rgba(45,91,76,.24) !important;
}

.reader-top-copy h1,
.reader-top-copy p,
.reader-top-stats strong,
.reader-top-stats span{
  color:#fffdf4 !important;
}

.reader-return-card{
  background:
    linear-gradient(180deg,rgba(255,252,244,.98),rgba(244,236,219,.96)) !important;
  color:#263a33 !important;
  border-color:rgba(44,89,74,.13) !important;
  box-shadow:0 16px 36px rgba(51,91,78,.13) !important;
}

.reader-return-card strong,
.reader-return-card span{
  color:#263a33 !important;
}

.reader-return-card small,
.reader-inline-link{
  color:#9d7b2c !important;
}

.reader-control-bar{
  background:
    linear-gradient(180deg,rgba(235,245,240,.96),rgba(217,233,225,.96)) !important;
  color:#2a433a !important;
  border-color:rgba(44,89,74,.15) !important;
  box-shadow:0 16px 36px rgba(50,92,79,.12) !important;
}

.reader-control-bar label{
  color:#6e5a24 !important;
}

.reader-chip,
.reader-tool-btn{
  background:rgba(255,255,255,.72) !important;
  color:#28443a !important;
  border-color:rgba(45,91,76,.15) !important;
}

.reader-chip.active,
.reader-tool-btn.active{
  background:linear-gradient(180deg,#d6b65f,#c49b3d) !important;
  color:#163127 !important;
  border-color:#bd9439 !important;
  box-shadow:0 8px 20px rgba(180,140,54,.20);
}

.reader-sidebar-card{
  background:
    linear-gradient(180deg,rgba(255,252,245,.98),rgba(242,235,221,.97)) !important;
  color:#2b3f38 !important;
  border-color:rgba(44,89,74,.13) !important;
  box-shadow:0 18px 38px rgba(48,88,76,.12) !important;
}

.reader-search-form input,
.reader-search-form select{
  background:rgba(255,255,255,.90) !important;
  color:#24362f !important;
  border-color:rgba(45,91,76,.14) !important;
}

/* Reading surfaces feel like premium book pages */
.scripture-sheet{
  background:
    linear-gradient(90deg,
      rgba(70,93,78,.025) 0%,
      rgba(255,255,255,.62) 5%,
      rgba(250,245,234,.99) 12%,
      rgba(250,245,234,.99) 88%,
      rgba(255,255,255,.62) 95%,
      rgba(70,93,78,.025) 100%),
    linear-gradient(180deg,#fbf6ea,#f1e8d5) !important;
  color:#2b2a21 !important;
  border-color:rgba(82,101,76,.13) !important;
  box-shadow:
    0 20px 42px rgba(41,76,64,.16),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
}

.scripture-sheet .sheet-arabic{
  color:#191711 !important;
}

.scripture-sheet .sheet-translation,
.scripture-sheet .sheet-reference strong,
.scripture-sheet .sheet-reference small{
  color:#2f342d !important;
}

.sheet-actions button{
  background:rgba(255,255,255,.78) !important;
  color:#2b3b34 !important;
  border-color:rgba(45,91,76,.13) !important;
}

/* Dark/Midnight remain available as reading modes without turning the whole website black */
.immersive-reader-app.theme-dark .scripture-sheet{
  background:linear-gradient(180deg,#1c4a3d,#143b31) !important;
  color:#fff5df !important;
}
.immersive-reader-app.theme-midnight .scripture-sheet{
  background:linear-gradient(180deg,#284b5a,#1c3b48) !important;
  color:#eef8fb !important;
}
.immersive-reader-app.theme-dark .scripture-sheet .sheet-arabic,
.immersive-reader-app.theme-dark .scripture-sheet .sheet-translation,
.immersive-reader-app.theme-dark .scripture-sheet .sheet-reference strong,
.immersive-reader-app.theme-dark .scripture-sheet .sheet-reference small{
  color:#fff1ce !important;
}
.immersive-reader-app.theme-midnight .scripture-sheet .sheet-arabic,
.immersive-reader-app.theme-midnight .scripture-sheet .sheet-translation,
.immersive-reader-app.theme-midnight .scripture-sheet .sheet-reference strong,
.immersive-reader-app.theme-midnight .scripture-sheet .sheet-reference small{
  color:#edf8ff !important;
}

/* General site cards */
.service-card,
.event-card,
.prayer-panel,
.hero-copy,
.banner-shell,
.donation-panel,
.timeline article{
  background:
    linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.10)) !important;
  border-color:rgba(255,255,255,.24) !important;
  box-shadow:0 22px 50px rgba(46,87,74,.15) !important;
  backdrop-filter:blur(14px);
}

/* Watermark quieter and more elegant */
.ric-refined-site:before{
  color:#224f42 !important;
  opacity:.025 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.20);
}

/* Footer */
footer{
  background:linear-gradient(180deg,#164d40,#0c3a31) !important;
  border-top:1px solid rgba(255,255,255,.11);
}

/* Language dropdown */
.language-current{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.18) !important;
}
.language-menu{
  background:linear-gradient(180deg,#185d4c,#104739) !important;
}
.language-menu a:hover,
.language-menu a.active{
  background:rgba(255,255,255,.09) !important;
}

/* Slight page lift */
.reader-top-banner,
.reader-return-card,
.reader-control-bar,
.reader-sidebar-card,
.scripture-sheet{
  transform:translateZ(0);
}

@media(max-width:720px){
  body.ric-refined-site,
  body.ric-3d-site{
    background:
      linear-gradient(180deg,#dcebe3 0%,#b8d2c7 38%,#77a797 70%,#3f7667 100%) !important;
  }
}