/*
 * article.css — Dariba Theme v6.2
 *
 * ARCHITECTURE:
 * Articles come in three types from the import:
 *
 * TYPE A (98 posts): Full wp:html block with an inline <style> + <div class="dariba-article">
 *   — inline style sets max-width:780px or max-width:860px on .dariba-article
 *   — the inline style's :root vars use hardcoded hex (#059669 green etc.)
 *   — Fix: let .dariba-article self-center, bridge its vars to theme tokens,
 *     and override typographic styles to match the theme's design language.
 *
 * TYPE B (38 posts): Pure Gutenberg blocks (wp:paragraph, wp:heading, wp:quote)
 *   — no .dariba-article wrapper
 *   — Fix: style .dariba-entry-content directly.
 *
 * TYPE C (18 posts): Has TOC (toc-wrap) + .dariba-article
 *   — same as Type A treatment, toc gets theme-matched styling.
 *
 * KEY BUG FIXED: The inline <style> sets max-width:780px on .dariba-article but
 * no margin:0 auto — so it left-aligns inside the page wrapper, leaving a blank
 * gap on the right. Fixed by forcing margin:0 auto on .dariba-article in this file
 * (higher specificity wins over the inline :root-scoped style block).
 */


/* ══════════════════════════════════════════════════════════
   PAGE LAYOUT — single post & page wrapper
   ══════════════════════════════════════════════════════════ */

.dariba-single-wrap {
  /* Full-width container — provides only vertical padding and horizontal gutter.
     NO max-width here — .dariba-article (or .dariba-post-header) each cap themselves. */
  padding: 0 clamp(20px, 5vw, 48px);
}

/* Post header — title, eyebrow, meta — capped + centered to match article width */
.dariba-post-header {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(40px, 6vh, 72px) 0 clamp(24px, 3vh, 36px);
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: clamp(32px, 4vh, 48px);
}

/* Eyebrow */
.dariba-post-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--clr-accent);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dariba-post-eyebrow a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s;
}
.dariba-post-eyebrow a:hover { opacity: 0.7; }

/* Title — Instrument Serif, large, to match section headings on homepage */
.dariba-post-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.17;
  color: var(--clr-primary);
  margin-bottom: 20px;
}

/* Meta row */
.dariba-post-meta {
  font-size: 13px;
  color: var(--clr-muted);
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.meta-sep { color: var(--clr-border); }

/* Entry content container — no competing max-width */
.dariba-entry-content {
  /* suppress inline <style> blocks the articles embed */
  font-size: 15.5px;
  line-height: 1.8;
}
.dariba-entry-content > style,
.dariba-entry-content style { display: none !important; }


/* ══════════════════════════════════════════════════════════
   TYPE A FIX: .dariba-article — center it, bridge its tokens
   ══════════════════════════════════════════════════════════
   The inline <style> inside each post sets:
     .dariba-article { max-width: 780px; }   (or 860px)
   but has NO margin: 0 auto — so the box left-aligns.
   We fix this here with higher specificity using the parent class. */

.dariba-entry-content .dariba-article {
  /* CENTERING FIX — own both max-width AND centering with !important so
     the inline <style> inside the wp:html post block cannot override us */
  max-width: 780px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  /* FONT FIX — inline style sets 'DM Sans' which may not load. Use Inter. */
  font-family: var(--font-body) !important;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--clr-text);

  /* TOKEN BRIDGE — map article's hardcoded vars → theme Customizer tokens.
     The inline <style> sets these on :root, but we re-declare them scoped
     to .dariba-article so the Customizer color scheme cascades through. */
  --green:           var(--clr-accent);
  --green-light:     var(--clr-accent-light);
  --green-dim:       var(--clr-accent-light);
  --green-border:    var(--clr-accent-border);
  --text-primary:    var(--clr-primary);
  --text-muted:      var(--clr-muted);
  --surface:         var(--clr-surface);
  --surface-2:       color-mix(in srgb, var(--clr-surface) 70%, var(--clr-border));
  --border:          var(--clr-border);
  --radius:          var(--radius-md);
  --radius-lg:       var(--radius-lg);
}

/* Headings inside .dariba-article — align to new theme's type system */
.dariba-entry-content .dariba-article h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  color: var(--clr-primary) !important;
  line-height: 1.25;
  margin: 2.25em 0 0.7em !important;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--clr-border);
}
.dariba-entry-content .dariba-article h3 {
  font-family: var(--font-body) !important;
  font-size: 1.05rem;
  font-weight: 700 !important;
  color: var(--clr-primary) !important;
  margin: 1.75em 0 0.5em !important;
}
.dariba-entry-content .dariba-article h4 {
  font-size: 0.95rem;
  font-weight: 700 !important;
  color: var(--clr-primary) !important;
  margin: 1.4em 0 0.4em !important;
}

/* Paragraphs, lists */
.dariba-entry-content .dariba-article p {
  font-family: var(--font-body) !important;
  color: var(--clr-text) !important;
}
.dariba-entry-content .dariba-article ul,
.dariba-entry-content .dariba-article ol {
  padding-left: 1.5rem;
  margin-bottom: 1.1rem;
}
.dariba-entry-content .dariba-article li {
  margin-bottom: 0.45em;
  color: var(--clr-text);
  font-size: 0.975rem;
  line-height: 1.7;
}

/* Links — accent color consistent with theme */
.dariba-entry-content .dariba-article a {
  color: var(--clr-accent) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--clr-accent-border);
  transition: text-decoration-color 0.15s;
}
.dariba-entry-content .dariba-article a:hover {
  text-decoration-color: var(--clr-accent);
}

/* Blockquotes */
.dariba-entry-content .dariba-article blockquote {
  border-left: 3px solid var(--clr-accent) !important;
  margin: 1.75em 0;
  padding: 0.875rem 1.375rem !important;
  color: var(--clr-muted) !important;
  font-style: italic;
  background: var(--clr-surface) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 0.975rem;
  line-height: 1.7;
}

/* Article meta tags (TAX INTELLIGENCE pill etc.) */
.dariba-entry-content .dariba-article .article-meta .tag {
  background: var(--clr-accent-light) !important;
  color: color-mix(in srgb, var(--clr-accent) 80%, black) !important;
  border-color: var(--clr-accent-border) !important;
  font-family: var(--font-body) !important;
}

/* Series banner */
.dariba-entry-content .dariba-article .series-banner {
  background: var(--clr-accent-light) !important;
  border-color: var(--clr-accent-border) !important;
  border-left-color: var(--clr-accent) !important;
  font-family: var(--font-body) !important;
}
.dariba-entry-content .dariba-article .series-banner a {
  color: var(--clr-accent) !important;
}

/* Section number badges (01, 02 ...) */
.dariba-entry-content .dariba-article .section-num-badge {
  background: var(--clr-accent-light) !important;
  color: color-mix(in srgb, var(--clr-accent) 80%, black) !important;
  border-color: var(--clr-accent-border) !important;
}
.dariba-entry-content .dariba-article .section-number {
  border-bottom-color: var(--clr-border) !important;
}

/* Callouts */
.dariba-entry-content .dariba-article .callout {
  background: var(--clr-surface) !important;
  border-color: var(--clr-border) !important;
  border-left-color: var(--clr-accent) !important;
}
.dariba-entry-content .dariba-article .callout-label {
  color: var(--clr-accent) !important;
  font-family: var(--font-body) !important;
}
.dariba-entry-content .dariba-article .callout-label::before {
  background: var(--clr-accent) !important;
}
/* Warning/info callouts keep their own colors — don't override */

/* Takeaways */
.dariba-entry-content .dariba-article .takeaways {
  background: var(--clr-accent-light) !important;
  border-color: var(--clr-accent-border) !important;
}
.dariba-entry-content .dariba-article .takeaways-title {
  color: color-mix(in srgb, var(--clr-accent) 80%, black) !important;
  font-family: var(--font-body) !important;
}

/* Timeline */
.dariba-entry-content .dariba-article .timeline-item::before {
  background: var(--clr-accent) !important;
  box-shadow: 0 0 0 2px var(--clr-accent) !important;
}
.dariba-entry-content .dariba-article .timeline-step {
  color: var(--clr-accent) !important;
}

/* Pull quote */
.dariba-entry-content .dariba-article .pull-quote {
  border-top-color: var(--clr-accent) !important;
  border-bottom-color: var(--clr-accent) !important;
  font-family: var(--font-display) !important;
}

/* Badges */
.dariba-entry-content .dariba-article .badge-green {
  background: var(--clr-accent-light) !important;
  color: color-mix(in srgb, var(--clr-accent) 80%, black) !important;
  border-color: var(--clr-accent-border) !important;
}

/* Read-next block */
.dariba-entry-content .dariba-article .read-next {
  border-left-color: var(--clr-accent) !important;
  background: var(--clr-surface) !important;
}
.dariba-entry-content .dariba-article .read-next-arrow {
  color: var(--clr-accent) !important;
  border-color: var(--clr-accent) !important;
}
.dariba-entry-content .dariba-article .read-next-arrow:hover {
  background: var(--clr-accent) !important;
  color: #fff !important;
}

/* Also-reading cards */
.dariba-entry-content .dariba-article .also-card:hover {
  border-color: var(--clr-accent) !important;
}
.dariba-entry-content .dariba-article .also-label {
  color: var(--clr-accent) !important;
}

/* Tables */
.dariba-entry-content .dariba-article th {
  color: var(--clr-muted) !important;
  background: var(--clr-surface) !important;
  font-family: var(--font-body) !important;
}

/* FAQ */
.dariba-entry-content .dariba-article .faq-icon {
  color: var(--clr-accent) !important;
}

/* Lead paragraph */
.dariba-entry-content .dariba-article .lead {
  border-left-color: var(--clr-accent) !important;
}


/* ══════════════════════════════════════════════════════════
   TOC (Table of Contents) — theme-matched
   ══════════════════════════════════════════════════════════ */

.dariba-entry-content .toc-wrap {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin: 0 auto 36px;
  max-width: 820px;
}
.dariba-entry-content .toc-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: 16px;
  font-family: var(--font-body);
}
.dariba-entry-content .toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.dariba-entry-content .toc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-text);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  transition: border-color 0.2s, background 0.2s;
  font-family: var(--font-body);
}
.dariba-entry-content .toc-item:hover {
  border-color: var(--clr-accent-border);
  background: var(--clr-accent-light);
  color: color-mix(in srgb, var(--clr-accent) 80%, black);
}
.dariba-entry-content .toc-num {
  font-size: 10px;
  font-weight: 700;
  color: var(--clr-accent);
  min-width: 20px;
}
/* Fix broken file:// links in TOC — make them look dead but not broken */
.dariba-entry-content .toc-item[href^="file://"] {
  pointer-events: none;
  opacity: 0.6;
}


/* ══════════════════════════════════════════════════════════
   TYPE B: Pure Gutenberg blocks (no .dariba-article)
   ══════════════════════════════════════════════════════════ */

/* Give Gutenberg-only content a centered reading column */
.dariba-entry-content:not(:has(.dariba-article)) {
  max-width: 780px;
  margin: 0 auto;
}

/* Heading styles for Gutenberg blocks */
.dariba-entry-content .wp-block-heading {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--clr-primary);
  letter-spacing: -0.01em;
}
.dariba-entry-content h2.wp-block-heading {
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  margin: 2em 0 0.7em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--clr-border);
  line-height: 1.25;
}
.dariba-entry-content h3.wp-block-heading {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.75em 0 0.5em;
}

/* Gutenberg quote block */
.dariba-entry-content .wp-block-quote {
  border-left: 3px solid var(--clr-accent);
  margin: 1.75em 0;
  padding: 0.875rem 1.375rem;
  color: var(--clr-muted);
  font-style: italic;
  background: var(--clr-surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 0.975rem;
  line-height: 1.7;
}
.dariba-entry-content .wp-block-quote p {
  color: var(--clr-muted);
  margin-bottom: 0;
}

/* Gutenberg tables */
.dariba-entry-content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.dariba-entry-content .wp-block-table th {
  padding: 0.7rem 1rem;
  background: var(--clr-surface);
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-muted);
  border-bottom: 1px solid var(--clr-border);
}
.dariba-entry-content .wp-block-table td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--clr-border);
}
.dariba-entry-content .wp-block-table tr:last-child td { border-bottom: none; }

/* Gutenberg list */
.dariba-entry-content .wp-block-list,
.dariba-entry-content ul:not([class]),
.dariba-entry-content ol:not([class]) {
  padding-left: 1.5rem;
  margin-bottom: 1.1em;
  color: var(--clr-text);
}
.dariba-entry-content li { margin-bottom: 0.4em; color: var(--clr-text); }

/* Gutenberg paragraph */
.dariba-entry-content p {
  font-family: var(--font-body);
  color: var(--clr-text);
  margin-bottom: 1.1em;
}


/* ══════════════════════════════════════════════════════════
   POST NAVIGATION
   ══════════════════════════════════════════════════════════ */

.dariba-post-nav {
  max-width: 820px;
  margin: 56px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--clr-border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.dariba-post-nav .nav-previous { text-align: left; }
.dariba-post-nav .nav-next     { text-align: right; }
.dariba-post-nav a {
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-accent);
  text-decoration: none;
  transition: opacity 0.15s;
}
.dariba-post-nav a:hover { opacity: 0.75; }

@media (max-width: 560px) {
  .dariba-post-nav { grid-template-columns: 1fr; }
  .dariba-post-nav .nav-next { text-align: left; }
}
@media (max-width: 768px) {
  .dariba-single-wrap { padding: 0 20px; }
  .dariba-post-header { padding-top: 40px; }
}