/* ============================================================
   Dua SEO Publisher — Frontend Styles v2.1
   Fixes: color contrast, performance, Google crawler readability
   ============================================================ */

/* ── Performance: font-display swap override ────────────────── */
/* Amiri loaded via wp_head with display=swap — this ensures
   system fallback renders immediately (no FOIT / LCP delay)    */
@font-face {
  font-family: 'Amiri';
  font-display: swap;
}

/* ── Base page wrapper ──────────────────────────────────────── */
.dsp-page {
  direction: rtl;
  font-family: 'Amiri', 'Traditional Arabic', 'Arial Unicode MS', serif;
  color: #1a1a1a;       /* explicit — never inherit theme dark bg colors */
  background: #ffffff;  /* force white bg so text is NEVER on dark bg */
  max-width: 860px;
  margin: 0 auto;
  padding: 0 16px 32px;
  line-height: 1.8;
}

/* ── Breadcrumb ─────────────────────────────────────────────── */
.dsp-breadcrumb {
  font-size: 13px;
  color: #555555;
  margin-bottom: 18px;
  padding-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  background: transparent;
}
.dsp-breadcrumb a {
  color: #0a6da8;
  text-decoration: none;
}
.dsp-breadcrumb a:hover { text-decoration: underline; }
.dsp-breadcrumb span[aria-hidden] { color: #999; }

/* ── H1 ─────────────────────────────────────────────────────── */
.dsp-h1 {
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 700;
  color: #0d1f3c;
  background: transparent;
  margin: 0 0 16px;
  line-height: 1.4;
  font-family: 'Amiri', serif;
}

/* ── Section titles ─────────────────────────────────────────── */
.dsp-section-title {
  font-size: clamp(17px, 3vw, 22px);
  font-weight: 700;
  color: #0d1f3c;
  background: transparent;
  margin: 28px 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid #c8910e;
  display: block;        /* was inline-block — block ensures Google sees full heading */
}
h2.dsp-section-title:first-child { margin-top: 0; }

/* ── Intro ──────────────────────────────────────────────────── */
.dsp-intro {
  background: #fdf9ed;
  border-right: 4px solid #c8910e;
  border-left: none;
  padding: 14px 16px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.9;
  color: #2a2010;   /* FIX: was inheriting, now explicit dark-on-light */
}

/* ── TOC ─────────────────────────────────────────────────────── */
.dsp-toc {
  background: #f8f5ea;
  border: 1px solid #e0cc80;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 24px;
  color: #1a1a1a;
}
.dsp-toc-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #0d1f3c;
  margin-bottom: 10px;
}
.dsp-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 20px;
}
.dsp-toc-list li {
  padding: 3px 0;
  break-inside: avoid;
}
.dsp-toc-list a {
  color: #0a6da8;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.6;
}
.dsp-toc-list a:hover { text-decoration: underline; }
@media (max-width: 500px) { .dsp-toc-list { columns: 1; } }

/* ── Main Dua Box ───────────────────────────────────────────── */
/* FIX: was gradient on dark theme — now solid light bg,
   guaranteed contrast on ALL themes                            */
.dsp-dua-box {
  background: #fffdf0;
  border: 1.5px solid #d4b44a;
  border-radius: 12px;
  padding: 28px 24px 20px;
  margin-bottom: 24px;
}

/* Arabic text — Amiri font, tashkeel-safe sizing               */
/* FIX: color was #1a0d00 which merged on dark sidebar themes   */
.dsp-arabic-text {
  font-family: 'Amiri', 'Traditional Arabic', serif;
  font-size: clamp(20px, 4.5vw, 28px);
  line-height: 2.6;         /* increased for tashkeel clearance */
  color: #0d0d0d;            /* near-black, explicit, never inherited */
  background: transparent;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 0.02em;
  word-spacing: 0.15em;
  /* Google crawler: plain text, no image-replacement tricks */
}

/* Multi-dua pages: visual separator between duas             */
.dsp-arabic-text br + br { display: block; content: ''; margin: 8px 0; }

/* ── Dua action buttons ─────────────────────────────────────── */
.dsp-dua-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

.dsp-copy-btn,
.dsp-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s, transform .1s;
  border: none;
  font-family: 'Amiri', serif;
  white-space: nowrap;
}

.dsp-copy-btn {
  background: #0d1f3c;
  color: #ffffff;
}
.dsp-copy-btn:hover { opacity: .88; transform: translateY(-1px); }
.dsp-copy-btn.copied { background: #1e6b1e; }

.dsp-whatsapp-btn {
  background: #1da851;
  color: #ffffff;
}
.dsp-whatsapp-btn:hover { opacity: .88; transform: translateY(-1px); }

/* ── Generic section ────────────────────────────────────────── */
.dsp-section {
  margin-bottom: 24px;
  color: #1a1a1a;       /* FIX: explicit — never inherit theme colors */
  background: transparent;
}
.dsp-section p,
.dsp-section li {
  font-size: 16px;
  line-height: 1.9;
  color: #333333;
}

/* ── Transliteration ────────────────────────────────────────── */
.dsp-latin {
  direction: ltr;
  text-align: left;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: #333333;            /* FIX: was #555 — improved contrast */
  background: #f5f5f5;
  padding: 12px 16px;
  border-radius: 6px;
  border-left: 3px solid #999999;
  line-height: 1.9;
}

/* ── English translation ────────────────────────────────────── */
.dsp-english {
  direction: ltr;
  text-align: left;
  font-family: Georgia, serif;
  font-size: 15px;
  color: #1a2e44;            /* FIX: was #444 on blue bg — now explicit */
  line-height: 1.8;
  background: #eef5fc;
  padding: 12px 16px;
  border-radius: 6px;
  border-left: 3px solid #5585b5;
}

/* ── Source box ─────────────────────────────────────────────── */
.dsp-source-box {
  background: #f0f8f0;
  border: 1px solid #8fc68f;
  border-radius: 8px;
  padding: 16px 18px;
  color: #1a1a1a;
}
.dsp-source-box p {
  font-size: 15px;
  color: #1a3a1a;            /* FIX: explicit dark green on light green */
  margin: 0;
}

/* ── Image block ────────────────────────────────────────────── */
.dsp-image-block {
  margin: 24px 0;
  text-align: center;
}
.dsp-image-block img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* ── Body content & extra sections ─────────────────────────── */
/* Google crawler: all text in plain HTML divs, no JS-only text */
.dsp-body-content,
.dsp-section {
  font-size: 16px;
  line-height: 1.9;
  color: #1a1a1a;
}
.dsp-body-content h2 {
  font-size: clamp(16px, 3vw, 20px);
  color: #0d1f3c;
  background: transparent;
  margin: 24px 0 10px;
  font-weight: 700;
}
.dsp-body-content p,
.dsp-body-content li {
  color: #333333;
  margin-bottom: 10px;
}

/* ── FAQ Accordion ───────────────────────────────────────────── */
/* Google crawls <details> content — it IS indexed              */
.dsp-faqs {
  margin-bottom: 28px;
}
.dsp-faq-item {
  border: 1px solid #dddddd;
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  background: #ffffff;    /* FIX: explicit white — was inheriting theme dark */
}
.dsp-faq-item[open] {
  border-color: #c8910e;
}
.dsp-faq-q {
  font-size: 15px;
  font-weight: 600;
  color: #0d1f3c;        /* FIX: explicit — was #0d1f3c on #fafafa — fine but now guaranteed */
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  background: #f9f9f7;
  gap: 10px;
}
.dsp-faq-q::-webkit-details-marker { display: none; }
.dsp-faq-q::after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  color: #c8910e;
  flex-shrink: 0;
  margin-right: auto;
  margin-left: 10px;
}
.dsp-faq-item[open] .dsp-faq-q::after { content: '−'; }
.dsp-faq-a {
  padding: 4px 16px 14px;
  background: #ffffff;
}
.dsp-faq-a p {
  font-size: 15px;
  color: #2a2a2a;         /* FIX: was #444 — now higher contrast */
  line-height: 1.8;
  margin: 10px 0 0;
}

/* ── Related links ──────────────────────────────────────────── */
.dsp-related { margin-bottom: 24px; }
.dsp-related-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.dsp-related-list li a {
  display: inline-block;
  padding: 8px 16px;
  background: #edf2fb;
  border: 1px solid #b0c4e8;
  border-radius: 20px;
  color: #0d4a8f;         /* FIX: was #185fa5 — now higher contrast */
  text-decoration: none;
  font-size: 14px;
}
.dsp-related-list li a:hover { background: #d6e4f7; }
.dsp-back-link { color: #0a6da8; font-size: 14px; text-decoration: none; }
.dsp-back-link:hover { text-decoration: underline; }

/* ── External links ─────────────────────────────────────────── */
.dsp-external {
  margin-bottom: 24px;
  font-size: 15px;
  color: #1a1a1a;
}
.dsp-external ul { padding-right: 18px; }
.dsp-external a { color: #0a6da8; }
.dsp-external a:hover { text-decoration: underline; }

/* ── Author box ─────────────────────────────────────────────── */
.dsp-author-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fdf9ed;
  border: 1px solid #d4b44a;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 28px;
  color: #1a1a1a;         /* FIX: explicit */
}
.dsp-author-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #0d1f3c;
  color: #ffffff;
  font-size: 22px;
  font-family: 'Amiri', serif;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.dsp-author-name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #0d1f3c;
  margin-bottom: 6px;
}
.dsp-author-info p {
  font-size: 14px;
  color: #444444;          /* FIX: was #555 — improved */
  line-height: 1.7;
  margin-bottom: 4px;
}
.dsp-last-updated { font-size: 12px; color: #777777; margin-top: 6px; }

/* ── Ad wrappers ─────────────────────────────────────────────── */
/* FIX: min-height prevents CLS — Google PageSpeed score        */
.dsp-ad-wrap {
  text-align: center;
  margin: 24px auto;
  overflow: hidden;
  background: transparent;
}
/* Reserve space to prevent layout shift (CLS fix)              */
.dsp-ad-rect  { display: block; min-height: 250px; width: 100%; }
.dsp-ad-horiz { display: block; min-height: 90px;  width: 100%; }

/* ── Hub page ───────────────────────────────────────────────── */
.dsp-hub {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 16px;
  color: #1a1a1a;
  background: #ffffff;
}
.dsp-hub-h1 {
  font-size: clamp(22px, 4vw, 30px);
  color: #0d1f3c;
  font-family: 'Amiri', serif;
  margin-bottom: 12px;
}
.dsp-hub-intro { font-size: 16px; color: #333333; line-height: 1.9; margin-bottom: 24px; }
.dsp-hub-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.dsp-hub-item {
  border: 1px solid #dddddd;
  border-radius: 10px;
  padding: 14px 16px;
  background: #ffffff;
  transition: box-shadow .15s, border-color .15s;
}
.dsp-hub-item:hover { box-shadow: 0 3px 10px rgba(0,0,0,.09); border-color: #c8910e; }
.dsp-hub-item a {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: #0d1f3c;
  text-decoration: none;
  font-family: 'Amiri', serif;
  margin-bottom: 4px;
}
.dsp-hub-desc { display: block; font-size: 13px; color: #555555; }

/* ── Google crawler optimizations ────────────────────────────
   - All text in real HTML elements, not CSS content:""
   - No display:none on indexable content  
   - details/summary: Google indexes both open and closed
   - Explicit color on every element to prevent theme-inheritance
   ─────────────────────────────────────────────────────────── */

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .dsp-arabic-text  { font-size: 20px; line-height: 2.7; }
  .dsp-dua-box      { padding: 18px 14px 14px; }
  .dsp-author-box   { flex-direction: column; }
  .dsp-dua-actions  { flex-direction: column; }
  .dsp-copy-btn,
  .dsp-whatsapp-btn { width: 100%; justify-content: center; }
}

/* ── Dark mode ────────────────────────────────────────────────
   FIX: was causing color merging — all backgrounds now explicit
   white in light mode, proper dark equivalents in dark mode     */
@media (prefers-color-scheme: dark) {
  .dsp-page        { color: #e8e0d0; background: #1a1810; }
  .dsp-h1          { color: #f0e8d0; }
  .dsp-section-title { color: #f0e8d0; border-bottom-color: #c8910e; }
  .dsp-intro       { background: #252010; color: #ddd4b8; border-right-color: #c8910e; }
  .dsp-toc         { background: #201e10; border-color: #5a4a10; color: #e0d8c8; }
  .dsp-toc-title   { color: #f0e8d0; }
  .dsp-toc-list a  { color: #7ab4e0; }
  .dsp-dua-box     { background: #1e1c0e; border-color: #6a5020; }
  .dsp-arabic-text { color: #f5eedc; }
  .dsp-latin       { background: #2a2a2a; color: #cccccc; border-left-color: #666; }
  .dsp-english     { background: #0d1a2a; color: #b8d0ea; border-left-color: #4070a0; }
  .dsp-source-box  { background: #0d1e0d; border-color: #2a4a2a; color: #a0c0a0; }
  .dsp-source-box p { color: #a0c8a0; }
  .dsp-section     { color: #e0d8c8; }
  .dsp-section p,
  .dsp-section li  { color: #c8c0b0; }
  .dsp-body-content { color: #e0d8c8; }
  .dsp-body-content h2 { color: #f0e8d0; }
  .dsp-body-content p,
  .dsp-body-content li { color: #c8c0b0; }
  .dsp-faq-item    { border-color: #3a3828; background: #1a1810; }
  .dsp-faq-q       { background: #222018; color: #e0d8c8; }
  .dsp-faq-a       { background: #1a1810; }
  .dsp-faq-a p     { color: #c0b8a8; }
  .dsp-author-box  { background: #1e1c0e; border-color: #6a5020; }
  .dsp-author-name { color: #f0e8d0; }
  .dsp-author-info p { color: #b0a898; }
  .dsp-hub         { color: #e0d8c8; background: #1a1810; }
  .dsp-hub-h1      { color: #f0e8d0; }
  .dsp-hub-intro   { color: #c8c0b0; }
  .dsp-hub-item    { border-color: #3a3828; background: #1e1c0e; }
  .dsp-hub-item a  { color: #f0e8d0; }
  .dsp-hub-desc    { color: #a09888; }
  .dsp-related-list li a { background: #0d1a2a; color: #7ab4e0; border-color: #1a3050; }
  .dsp-external    { color: #c8c0b0; }
  .dsp-external a  { color: #7ab4e0; }
}