/* =====================================================================
   OIC Media Statements Platform — Design System
   Arabic RTL · Bootstrap 5 · Deep Islamic Green + Gold
   ===================================================================== */

:root{
  --oic-green:#0B3D2E; --oic-green-2:#0F5C42; --oic-emerald:#16875A; --oic-emerald-soft:#E7F1EC;
  --oic-gold:#C0A053; --oic-gold-soft:#F3ECDA;
  --bg:#F6F7F5; --surface:#FFFFFF; --surface-2:#FBFCFA;
  --ink:#16221E; --ink-soft:#4A574F; --line:#E6E9E4;
  --shadow:0 1px 2px rgba(11,61,46,.04),0 12px 34px -18px rgba(11,61,46,.22);
  --shadow-lg:0 30px 70px -30px rgba(11,61,46,.35);
}
[data-theme="dark"]{
  --oic-green:#0A2E23; --oic-green-2:#0E4534; --oic-emerald:#2FA877; --oic-emerald-soft:#12241D;
  --oic-gold:#D8B96A; --oic-gold-soft:#241F12;
  --bg:#0A1512; --surface:#0F1E19; --surface-2:#122420;
  --ink:#EAF1ED; --ink-soft:#9DB0A7; --line:#1E322B;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 16px 40px -20px rgba(0,0,0,.6);
  --shadow-lg:0 30px 70px -30px rgba(0,0,0,.7);
}

/* ---------- base ---------- */
*{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Tajawal',system-ui,-apple-system,sans-serif;
  transition:background .4s,color .4s;overflow-x:hidden;
}
::selection{background:var(--oic-gold);color:#1a1405}
h1,h2,h3,h4,.kufi{font-family:'Noto Kufi Arabic','Tajawal',sans-serif}
a{color:inherit}
.text-gold{color:var(--oic-gold)}
.text-emerald{color:var(--oic-emerald)}
.text-green{color:var(--oic-green)}
.text-soft{color:var(--ink-soft)}
.bg-surface{background:var(--surface)}
.bg-surface-2{background:var(--surface-2)}

/* ---------- surfaces & utilities ---------- */
.oic-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.oic-line{border-color:var(--line)!important}
.oic-shadow{box-shadow:var(--shadow)}
.oic-shadow-lg{box-shadow:var(--shadow-lg)}
.eyebrow{color:var(--oic-emerald);font-weight:700;font-size:.85rem;letter-spacing:1px}

/* ---------- buttons ---------- */
.btn-oic{background:linear-gradient(150deg,var(--oic-green),var(--oic-emerald));color:#fff;border:0;box-shadow:var(--shadow)}
.btn-oic:hover{color:#fff;filter:brightness(1.06)}
.btn-gold{background:var(--oic-gold);color:#1a1405;border:0;font-weight:700}
.btn-gold:hover{color:#1a1405;filter:brightness(1.05)}
.btn-ghost{border:1px solid var(--line);color:var(--oic-green);background:var(--surface)}
.btn-ghost:hover{background:var(--oic-emerald-soft);color:var(--oic-green)}

/* ---------- badges / chips ---------- */
.chip{background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft);font-size:.84rem;border-radius:999px;padding:.35rem .9rem;transition:.25s}
.chip:hover{border-color:var(--oic-emerald);color:var(--oic-green)}
.badge-soft{background:var(--oic-emerald-soft);color:var(--oic-green);font-weight:700;border-radius:999px;padding:.25rem .8rem;font-size:.75rem}

/* ---------- header ---------- */
.oic-header{
  position:sticky;top:0;z-index:1030;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:saturate(1.4) blur(18px);-webkit-backdrop-filter:saturate(1.4) blur(18px);
}
.oic-logo{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;
  background:linear-gradient(150deg,var(--oic-green),var(--oic-emerald));box-shadow:var(--shadow);position:relative}
.oic-nav a{color:var(--ink-soft);text-decoration:none;padding:.5rem .85rem;border-radius:10px;font-weight:600;font-size:.95rem;transition:.2s}
.oic-nav a:hover,.oic-nav a.active{color:var(--oic-green);background:var(--oic-emerald-soft)}
.mini-search{width:0;opacity:0;overflow:hidden;padding-inline:0!important;
  transition:width .4s cubic-bezier(.2,.7,.2,1),opacity .3s,padding .4s}
.mini-search.show{width:210px;opacity:1;padding-inline:1rem!important}

/* ---------- hero ---------- */
.oic-hero{position:relative;overflow:hidden;background:var(--oic-green)}
.oic-hero__bg{position:absolute;inset:0;will-change:transform;background:
  radial-gradient(120% 90% at 88% -10%, rgba(192,160,83,.28), transparent 55%),
  radial-gradient(90% 80% at 0% 110%, rgba(47,168,119,.35), transparent 60%),
  linear-gradient(160deg,#0B3D2E 0%, #0A2E23 60%, #0B3D2E 100%)}
.oic-pattern{position:absolute;inset:-10% 0;will-change:transform;opacity:.06;mix-blend-mode:overlay;
  background-image:repeating-conic-gradient(from 0deg at 50% 50%, #fff 0deg 12deg, transparent 12deg 24deg);background-size:80px 80px}

/* ---------- reveal on scroll ---------- */
.oic-rise{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.oic-rise.in{opacity:1;transform:none}

/* ---------- hover lift ---------- */
.oic-lift{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s,border-color .4s}
.oic-lift:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--oic-emerald) 40%,var(--line))}
.oic-slide{transition:transform .35s,border-color .35s}
.oic-slide:hover{transform:translateX(-5px);border-color:color-mix(in srgb,var(--oic-emerald) 40%,var(--line))}

/* ---------- placeholder art ---------- */
.oic-ph{position:relative;display:grid;place-items:center;color:var(--ink-soft);
  font-family:ui-monospace,monospace;font-size:.72rem;opacity:.65;
  background:repeating-linear-gradient(135deg, color-mix(in srgb,var(--oic-emerald) 18%,var(--surface)) 0 16px, var(--surface-2) 16px 32px)}

/* ---------- article typography (statement page) ---------- */
.oic-body p{color:var(--ink-soft);font-size:1.12rem;line-height:2.05;margin-bottom:1.5rem}
.oic-body p:first-of-type::first-letter{float:right;font-family:'Noto Kufi Arabic';font-weight:800;
  font-size:3.6rem;line-height:.82;margin:6px 0 0 14px;color:var(--oic-green)}
.oic-body h3{font-family:'Noto Kufi Arabic';font-weight:700;color:var(--ink);font-size:1.4rem;margin:2.2rem 0 1rem}

/* Remove drop-cap / forced first-letter styling inside export area so exported
   PDFs/PNGs don't show a large decorative first letter. */
#oic-export-area p:first-of-type::first-letter,
#oic-export-area .lay__body--dropcap::first-letter,
#oic-export-area .pbx-dropcap::first-letter,
#oic-export-area .pb-rt-dropcap > p:first-child::first-letter {
  float: none !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
}
.oic-quote{margin:2rem 0;padding:24px 28px;border-radius:16px;background:var(--oic-emerald-soft);border-right:4px solid var(--oic-emerald)}
.oic-quote p{font-family:'Noto Kufi Arabic';font-weight:600;color:var(--oic-green);font-size:1.28rem;line-height:1.9;margin:.4rem 0 0}

/* ---------- reading progress ---------- */
.read-progress{position:fixed;top:0;right:0;left:0;height:4px;z-index:1050}
.read-progress__bar{height:100%;width:0;background:linear-gradient(90deg,var(--oic-emerald),var(--oic-gold));transition:width .1s}

/* ---------- search highlight ---------- */
mark{background:color-mix(in srgb,var(--oic-gold) 45%,transparent);color:inherit;padding:0 3px;border-radius:4px}

/* ---------- map (jsVectorMap) ---------- */
.jvm-tooltip{background:var(--oic-green)!important;border-radius:8px!important;font-family:'Tajawal',sans-serif!important;
  font-weight:600!important;padding:6px 10px!important;box-shadow:var(--shadow-lg)!important}
.jvm-container{background:transparent!important}
.jvm-region{cursor:pointer}

/* ---------- modal ---------- */
.oic-modal-backdrop{position:fixed;inset:0;z-index:1080;background:rgba(6,20,15,.62);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s}
.oic-modal-backdrop.show{opacity:1;pointer-events:auto}
.oic-modal{width:100%;max-width:640px;max-height:90vh;overflow-y:auto;background:var(--surface);
  border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);transform:translateY(14px) scale(.98);transition:transform .3s}
.oic-modal-backdrop.show .oic-modal{transform:none}

/* ---------- toast ---------- */
.oic-toast{position:fixed;bottom:26px;right:26px;z-index:1090;display:flex;align-items:center;gap:12px;
  background:var(--oic-green);color:#fff;border:1px solid rgba(192,160,83,.4);border-radius:14px;padding:14px 20px;
  box-shadow:var(--shadow-lg);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s}
.oic-toast.show{opacity:1;transform:none}

/* ---------- animations ---------- */
@keyframes oicPulse{0%{transform:scale(1);opacity:.9}70%{transform:scale(2.4);opacity:0}100%{opacity:0}}

/* ---------- skeleton loading ---------- */
.skeleton{position:relative;overflow:hidden;background:var(--surface-2);border-radius:12px}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--oic-emerald) 8%,transparent),transparent);
  animation:oicShine 1.4s infinite}
@keyframes oicShine{100%{transform:translateX(100%)}}

/* ---------- footer ---------- */
.oic-footer{background:var(--oic-green);color:#C7D8CF}
.oic-footer a{color:#9DB6AC;text-decoration:none;transition:.2s}
.oic-footer a:hover{color:var(--oic-gold)}
.oic-social{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.07);color:#DCE8E2;text-decoration:none;transition:.2s}
.oic-social:hover{background:var(--oic-gold);color:#1a1405}

/* ---------- accessibility ---------- */
.skip-link{position:absolute;right:-999px;top:8px;z-index:2000;background:var(--oic-green);color:#fff;padding:10px 18px;border-radius:10px}
.skip-link:focus{right:8px}
:focus-visible{outline:2px solid var(--oic-emerald);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .oic-rise{opacity:1;transform:none}
}


  /* --- home2 specific --- */
  .h2-hero{position:relative;overflow:hidden;background:var(--oic-green);min-height:640px}
  .h2-mapwrap{position:relative;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.04);box-shadow:var(--shadow-lg)}
  .h2-metric{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:16px 18px;backdrop-filter:blur(6px)}
  .h2-float{position:absolute;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);
    border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);z-index:6}
  .h2-ticker{display:flex;gap:40px;white-space:nowrap;animation:h2scroll 32s linear infinite}
  .h2-ticker:hover{animation-play-state:paused}
  @keyframes h2scroll{from{transform:translateX(-50%)}to{transform:translateX(0)}}
  .h2-catrow{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
  .h2-catrow::-webkit-scrollbar{height:6px}.h2-catrow::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
  .h2-catcard{scroll-snap-align:start;flex:0 0 240px}
  @media(max-width:991px){.h2-float{display:none!important}}