/* ==========================================================================
   drimadhariri.com — Shared Design System
   Draft v0.1 — derived from the palette/type already in use in the site's
   newer AI-generated posts (blue-900/slate/Cairo), extended into one set
   of reusable tokens for the whole theme.

   HOW THIS FILE IS MEANT TO BE USED:
   1. Enqueued once, site-wide, from functions.php (after style.css).
   2. Section 1 = design tokens (CSS variables). Change a value here,
      it updates everywhere — this is the piece that was missing entirely
      before (every block/page was hand-picking its own hex codes).
   3. Section 2 = styling for NATIVE GUTENBERG CONTENT (paragraphs,
      headings, lists, tables, quotes, images) — this is what makes the
      ~260 normal posts (clinical-study + for-patients) look unified
      immediately, with zero per-post editing.
   4. Section 3 = compatibility layer for the 28 Tailwind-pattern posts —
      maps the Tailwind utility classes they already contain (bg-blue-900,
      rounded-2xl, etc.) onto these same tokens, so once we strip the fake
      page-chrome out of those posts, their remaining classes render
      correctly WITHOUT loading the Tailwind CDN script.
   ========================================================================== */


/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Brand blue — replaces both the header's Facebook-blue (#1877f2) and
     the ad hoc #2563eb seen in draft templates. One blue, everywhere. */
  --color-primary-900: #1e3a8a;   /* deep blue — headers, hero backgrounds */
  --color-primary-700: #1d4ed8;   /* mid blue — links, buttons */
  --color-primary-100: #dbeafe;   /* pale blue — badges, highlighted boxes */

  /* Neutrals */
  --color-slate-900: #0f172a;     /* body headings */
  --color-slate-700: #334155;     /* body text */
  --color-slate-500: #64748b;     /* secondary text, meta */
  --color-slate-200: #e2e8f0;     /* borders */
  --color-slate-50:  #f8fafc;     /* card/section backgrounds */
  --color-white: #ffffff;

  /* Semantic accents — used sparingly, for status/emphasis only
     (e.g. the "Time Out" checklist box in the SOP sample) */
  --color-success-600: #16a34a;
  --color-success-50:  #f0fdf4;
  --color-warning-600: #ea580c;
  --color-warning-50:  #fff7ed;

  /* Typography — Cairo replaces Dosis site-wide (Dosis is Latin-only and
     was silently failing on ~95% of the site's Arabic text) */
  --font-body: 'Cairo', 'Tahoma', sans-serif;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.25rem;
  --line-height-body: 1.85;
  --line-height-heading: 1.3;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;

  /* Shape */
  --radius-card: 1.25rem;   /* matches the SOP sample's rounded-2xl */
  --radius-badge: 999px;
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.08);

  /* Layout */
  --content-max-width: 1320px; /* matches existing .container cap */
}


/* ---------- 2. NATIVE GUTENBERG CONTENT (the ~260 normal posts) ---------- */
/* Scoped to .entry-content so it only touches actual post bodies,
   never the theme chrome (header/footer/nav). */

.entry-content {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--color-slate-700);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: var(--font-body);
  color: var(--color-slate-900);
  line-height: var(--line-height-heading);
  font-weight: 700;
  margin-top: var(--space-4);
}

/* Exception: many of the 28 Tailwind-pattern posts build dark hero/banner
   sections by putting a "text-white" class (or a dark gradient background)
   on the SECTION, then letting the heading INHERIT that white color rather
   than setting its own color class. The blanket rule above sets an explicit
   color directly on every h1-h4, which always wins over an inherited value
   regardless of specificity — silently turning hero titles black. This
   restores inheritance specifically inside those dark-background wrappers,
   without weakening the default heading color anywhere else. */
.entry-content .text-white h1,
.entry-content .text-white h2,
.entry-content .text-white h3,
.entry-content .text-white h4,
.entry-content [class*="bg-gradient-to-"] h1,
.entry-content [class*="bg-gradient-to-"] h2,
.entry-content [class*="bg-gradient-to-"] h3,
.entry-content [class*="bg-gradient-to-"] h4 {
  color: inherit;
  margin-bottom: var(--space-2);
}
.entry-content h2 { font-size: var(--font-size-2xl); }
.entry-content h3 { font-size: var(--font-size-xl); }

.entry-content p {
  margin-bottom: var(--space-2);
}

.entry-content ul,
.entry-content ol {
  margin-bottom: var(--space-2);
  padding-inline-start: var(--space-3);
}
.entry-content li { margin-bottom: 0.4rem; }

.entry-content blockquote {
  border-inline-start: 4px solid var(--color-primary-700);
  background: var(--color-primary-100);
  padding: var(--space-2) var(--space-3);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  margin: var(--space-3) 0;
  font-style: normal;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
  font-size: 0.95rem;
}
.entry-content table th {
  background: var(--color-primary-900);
  color: var(--color-white);
  padding: var(--space-1) var(--space-2);
  text-align: start;
}
.entry-content table td {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-slate-200);
}
.entry-content table tr:nth-child(even) td {
  background: var(--color-slate-50);
}

.entry-content figure.wp-block-image {
  margin: var(--space-3) 0;
}
.entry-content figure.wp-block-image img {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  width: auto;
  max-width: 100%;
  height: auto;
}
.entry-content figcaption {
  font-size: 0.875rem;
  color: var(--color-slate-500);
  text-align: center;
  margin-top: var(--space-1);
}

.entry-content img:not([style*="width"]) {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* Rank Math's auto TOC block — currently unstyled, will look ad hoc */
.entry-content .rank-math-toc-wrap {
  background: var(--color-slate-50);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-card);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

/* Post-terms badges (evidence-level, study-type, specialty tags) —
   these currently render as plain unstyled links; give them the
   "badge" treatment already used ad hoc elsewhere on the site */
.entry-content .wp-block-post-terms a {
  display: inline-block;
  background: var(--color-primary-100);
  color: var(--color-primary-900);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-badge);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  margin-inline-end: 0.4rem;
}

/* ---------- 4. CLINICAL STUDY DEDICATED HERO HEADER ---------- */

.cs-hero-bar {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-slate-200);
}
.cs-hero-bar-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-3) var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
}
.cs-hero-bar-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary-900);
  margin: 0;
}
.cs-hero-bar-subtitle {
  font-size: 0.85rem;
  color: var(--color-slate-500);
  margin: 0.2rem 0 0;
}
.cs-hero-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-slate-50);
  color: var(--color-slate-700);
  padding: 0.65rem 1.2rem;
  border-radius: var(--radius-badge);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease;
}
.cs-hero-back-link:hover {
  background: var(--color-slate-200);
}

.cs-hero {
  background: linear-gradient(to left, var(--color-primary-900), var(--color-primary-700));
  color: var(--color-white);
}
.cs-hero-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-2);
}
.cs-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: var(--space-3);
}
.cs-hero-tag {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-badge);
  font-size: 0.85rem;
}
a.cs-hero-tag {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}
a.cs-hero-tag:hover {
  background: rgba(255,255,255,0.2);
}
.cs-hero-title {
  color: var(--color-white) !important;
  font-size: var(--font-size-3xl);
  font-weight: 800;
  max-width: 60rem;
  line-height: 1.35;
  margin: 0 0 var(--space-2);
}
.cs-hero-subtitle {
  color: var(--color-primary-100) !important;
  font-size: var(--font-size-xl);
  margin: 0 0 var(--space-3);
  line-height: 1.6;
}
.cs-hero-description {
  color: var(--color-primary-100);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-body);
  max-width: 55rem;
  margin: 0 0 var(--space-3);
}
.cs-hero-footer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--space-2);
}
.cs-hero-author {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.95rem;
}
.cs-hero-author-name {
  font-weight: 700;
  color: var(--color-white);
}
.cs-hero-author-role {
  color: var(--color-primary-100);
}
.cs-hero-inner--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.cs-hero-content {
  flex: 1 1 auto;
  min-width: 0;
}
.cs-hero-image {
  flex: 0 0 auto;
  width: 420px;
  max-width: 45%;
  margin-left: -2rem;
}
.cs-hero-inner--split .cs-hero-content {
  display: flex;
  flex-direction: column;
  min-height: 420px;
}
.cs-hero-inner--split .cs-hero-author {
  margin-top: auto;
}
.cs-hero-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
.cs-hero-image--transparent img {
  box-shadow: none;
  background: transparent;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));	
}
.cs-hero-image--padded {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 420px;
  max-width: 45%;
  height: 400px;
  box-sizing: border-box;
}
.cs-hero-image--padded img {
  height: auto;
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 12px;
}
.cs-hero-image--transparent--padded img {
  box-shadow: none;
  background: transparent;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));	
  width: 420px;
  max-width: 45%;
  height: 400px;	
  box-sizing: border-box;	
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-hero-image--transparent--padded img {
  height: auto;
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 12px;
} /* <-- This closing bracket was missing! */

/* Breakpoint mapping */
@media (max-width: 768px) {
  .cs-hero-inner--split {
    flex-direction: column;
  }
  .cs-hero-image {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }
  .cs-hero-inner--split .cs-hero-content {
    /* Reset the min-height so it doesn't create empty space on mobile, matching your new theme */
    min-height: auto; 
  }
}
.cs-hero-inner--split .cs-hero-author {
  margin-top: auto;
}
}
.cs-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: var(--space-3);
}
.cs-hero-tag {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-badge);
  font-size: 0.85rem;
}
a.cs-hero-tag {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}
a.cs-hero-tag:hover {
  background: rgba(255,255,255,0.2);
}
.cs-hero-title {
  color: var(--color-white) !important;
  font-size: var(--font-size-3xl);
  font-weight: 800;
  max-width: 60rem;
  line-height: 1.35;
  margin: 0 0 var(--space-2);
}
.cs-hero-subtitle {
  color: var(--color-primary-100) !important;
  font-size: var(--font-size-xl);
  margin: 0 0 var(--space-3);
  line-height: 1.6;
}
.cs-hero-description {
  color: var(--color-primary-100);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-body);
  max-width: 55rem;
  margin: 0 0 var(--space-3);
}
.cs-hero-footer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--space-2);
}
.cs-hero-author {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.95rem;
}
.cs-hero-author-name {
  font-weight: 700;
  color: var(--color-white);
}
.cs-hero-author-role {
  color: var(--color-primary-100);
}


/* ---------- 5. FOR PATIENTS DEDICATED HERO HEADER ---------- */
.fp-hero-bar {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-slate-200);
}
.fp-hero-bar-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-3) var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
}
.fp-hero-bar-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #14532d;
  margin: 0;
}
.fp-hero-bar-subtitle {
  font-size: 0.85rem;
  color: var(--color-slate-500);
  margin: 0.2rem 0 0;
}
.fp-hero-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-slate-50);
  color: var(--color-slate-700);
  padding: 0.65rem 1.2rem;
  border-radius: var(--radius-badge);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease;
}
.fp-hero-back-link:hover {
  background: var(--color-slate-200);
}
.fp-hero {
  background: linear-gradient(to left, #14532d, #16a34a);
  color: var(--color-white);
}
.fp-hero-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-2);
}
.fp-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: var(--space-3);
}
.fp-hero-tag {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-badge);
  font-size: 0.85rem;
}
a.fp-hero-tag {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}
a.fp-hero-tag:hover {
  background: rgba(255,255,255,0.2);
}
.fp-hero-title {
  color: var(--color-white) !important;
  font-size: var(--font-size-3xl);
  font-weight: 800;
  max-width: 60rem;
  line-height: 1.35;
  margin: 0 0 var(--space-2);
}
.fp-hero-subtitle {
  color: #dcfce7 !important;
  font-size: var(--font-size-xl);
  margin: 0 0 var(--space-3);
  line-height: 1.6;
}
.fp-hero-description {
  color: #dcfce7;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-body);
  max-width: 55rem;
  margin: 0 0 var(--space-3);
}
.fp-hero-footer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--space-2);
}
.fp-hero-author {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.95rem;
}
.fp-hero-author-name {
  font-weight: 700;
  color: var(--color-white);
}
.fp-hero-author-role {
  color: #dcfce7;
}
.fp-hero-inner--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.fp-hero-content {
  flex: 1 1 auto;
  min-width: 0;
}
.fp-hero-image {
  flex: 0 0 auto;
  width: 420px;
  max-width: 45%;
  margin-left: -2rem;
}
.fp-hero-image img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
@media (max-width: 768px) {
  .fp-hero-inner--split {
    flex-direction: column;
  }
  .fp-hero-image {
    width: 100%;
    max-width: 100%;
  }
}

/* ---------- pattern style for EBM  ------- */

/* Added ">" so flex ONLY applies to the main row, not the nested boxes */
.ebm-glance-row > .wp-block-group__inner-container {
  display: flex;
  gap: 1.25rem;
}

.ebm-glance-row > .wp-block-group__inner-container > .wp-block-group {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 768px) {
  .ebm-glance-row > .wp-block-group__inner-container {
    flex-wrap: wrap;
  }
}

/* Fixed the decision row the exact same way to prevent future bugs */
.ebm-decision-row > .wp-block-group__inner-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.ebm-decision-row > .wp-block-group__inner-container > p {
  flex: 1 1 45%;
  min-width: 0;
}

/* ---------- 3. TAILWIND-PATTERN POST COMPATIBILITY (the 28 posts) ------- */
/* After the strip-script removes each post's fake header/nav/CDN <script>,
   what's left is content still wearing Tailwind utility class NAMES with
   no CSS behind them. Rather than recompiling full Tailwind, we hand-map
   just the classes these 28 posts actually use onto the same tokens above
   — so removing the CDN script doesn't break their appearance. */

.entry-content .bg-blue-900   { background-color: var(--color-primary-900) !important; }
.entry-content .bg-blue-800,
.entry-content .text-blue-800 { color: var(--color-primary-900); }
.entry-content .bg-blue-50    { background-color: var(--color-primary-100) !important; }
.entry-content .text-blue-900,
.entry-content .text-blue-100 { color: var(--color-primary-900); }
.entry-content .text-white    { color: var(--color-white); }

.entry-content .bg-slate-50   { background-color: var(--color-slate-50) !important; }
.entry-content .border-slate-200 { border-color: var(--color-slate-200) !important; }
.entry-content .text-slate-700 { color: var(--color-slate-700); }
.entry-content .text-slate-900 { color: var(--color-slate-900); }
.entry-content .text-slate-500 { color: var(--color-slate-500); }

.entry-content .bg-green-50   { background-color: var(--color-success-50) !important; }
.entry-content .border-green-100 { border-color: var(--color-success-600) !important; }
.entry-content .text-green-600 { color: var(--color-success-600); }

.entry-content .rounded-2xl,
.entry-content .rounded-3xl   { border-radius: var(--radius-card) !important; }
.entry-content .rounded-full  { border-radius: var(--radius-badge) !important; }
.entry-content .shadow-sm     { box-shadow: var(--shadow-card) !important; }
.entry-content .border         { border-width: 1px; border-style: solid; }

.entry-content .font-bold      { font-weight: 700; }
.entry-content .font-extrabold { font-weight: 800; }
.entry-content .leading-relaxed { line-height: 1.7; }

/* Basic spacing/layout utilities used repeatedly in these posts */
.entry-content .p-4  { padding: var(--space-2); }
.entry-content .p-5,
.entry-content .p-6  { padding: var(--space-3); }
.entry-content .p-8  { padding: var(--space-4); }
.entry-content .mb-4 { margin-bottom: var(--space-2); }
.entry-content .mb-6,
.entry-content .mb-8 { margin-bottom: var(--space-3); }
.entry-content .grid { display: grid; gap: var(--space-2); }
.entry-content .grid-cols-1 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .entry-content .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .entry-content .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
}

/* NOTE: this list covers only the classes seen in the SOP sample so far.
   Once we run the strip-script across all 28 posts, we'll extend this
   section with any additional utility classes they use. */