/* =========================================================================
   dl-design-v2-preview.css
   STAGE B TRIAL — post-id-scoped redesign preview for Soils Part 10 only.
   Loaded only when get_the_ID() == 36259 via functions.php enqueue hook.
   Author: Claude design-overhaul session 2026-05-25.
   ALL selectors are scoped to to prevent leakage.
   Per user 2026-05-25: Header, Banner, Footer are explicitly UNCHANGED;
   only article-body chrome is updated.
   Rollback: delete this file + remove the enqueue block in functions.php.
   ========================================================================= */

/* --- A2 token system (scoped) --------------------------------------------
   Declared on so they only apply on the trial post.
   Other posts pick up the existing theme palette unchanged. */
:root {
  --dl-green-50:  var(--green-soft,#F3FAF6);
  --dl-green-100: var(--green-soft,#E8F6F0);
  --dl-green-200: var(--green-light,#E7D8C6);
  --dl-green-300: #E7D8C6;
  --dl-green-400: #C4633F;
  --dl-green-500: var(--green,#E8352B);
  --dl-green-600: var(--green-deep,#E8352B);
  --dl-green-700: #1A1A1A;
  --dl-green-800: #14110E;
  --dl-green-900: #111111;
  --dl-ink-900:   #0A0A0A;
  --dl-ink-700:   #15212F;
  --dl-ink-500:   #5A6675;
  --dl-ink-300:   #9DA7B3;
  --dl-elev-1: 0 1px 2px rgba(15,69,48,0.06);
  --dl-elev-2: 0 1px 3px rgba(15,69,48,0.08), 0 4px 12px rgba(15,69,48,0.08);
  --dl-elev-3: 0 1px 3px rgba(15,69,48,0.10), 0 10px 28px rgba(15,69,48,0.12);
  --dl-elev-4: 0 4px 6px rgba(15,69,48,0.10), 0 24px 60px rgba(15,69,48,0.14);
  --dl-duration-fast: 120ms;
  --dl-duration-base: 220ms;
  --dl-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* --- Universal focus-visible ring (article-prose only) ------------------- */
.article-prose a:focus-visible,
.article-prose button:focus-visible,
.article-prose summary:focus-visible,
.article-prose input:focus-visible,
.article-prose [tabindex]:focus-visible {
  outline: 3px solid var(--dl-green-400) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* --- Article H2/H3 typography refinements ------------------------------- */
/* H2 accent uses border-left for robustness across line-counts (the previous
   ::before with top/bottom values collapsed to a dot on short H2s). */
#dl-main .article-prose h2 {
  font-size: 30px !important;
  line-height: 1.22 !important;
  letter-spacing: -0.015em !important;
  color: #2a2520 !important;            /* warm dark grey, not pure black (user 2026-05-30) */
  border-bottom: 0 !important;          /* no red/pink underline */
  border-left: 0 !important;            /* no red left bar - removed at source, not overridden */
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-top: 2px !important;
  margin-top: 56px !important;
  margin-bottom: 20px !important;
}
#dl-main .article-prose h2::before {
  content: none !important;  /* explicitly disable any prior ::before */
}
#dl-main .article-prose h3 {
  font-size: 21px !important;
  line-height: 1.30 !important;
  letter-spacing: -0.01em !important;
  color: var(--dl-green-700) !important;
  margin-top: 32px !important;
  margin-bottom: 12px !important;
  font-weight: 600 !important;
}
#dl-main .article-prose p {
  line-height: 1.75 !important;
  margin-bottom: 20px !important;
  font-size: 17px !important;
}
#dl-main .article-prose p strong {
  color: var(--dl-ink-900) !important;
  font-weight: 600 !important;
}
#dl-main .article-prose ul li,
#dl-main .article-prose ol li {
  line-height: 1.72 !important;
  margin-bottom: 8px !important;
  font-size: 17px !important;
}

/* --- In-article figure polish ------------------------------------------- */
/* Legacy figures on this post use the pre-2026-05-24 dark-surface aesthetic
   (#0f1612 ink + #d4a574 tan + #6ab8e0 ocean blue). Per the no-backfill rule
   we cannot rewrite the SVG colors; instead we frame the dark figure as a
   deliberate "data card" by clipping it inside a brand-green outer card with
   zero inner padding so the dark SVG sits flush against rounded corners. */
#dl-main .article-prose .dl-figure {
  background: var(--dl-green-700) !important;     /* brand-green outer frame */
  border: 1px solid var(--dl-green-600) !important;
  border-radius: 12px !important;
  padding: 0 !important;
  margin: 40px 0 !important;
  box-shadow: var(--dl-elev-2) !important;
  transition: box-shadow var(--dl-duration-base) var(--dl-ease), transform var(--dl-duration-base) var(--dl-ease) !important;
  overflow: hidden !important;
}
#dl-main .article-prose .dl-figure:hover {
  box-shadow: var(--dl-elev-3) !important;
  transform: translateY(-2px);
}
#dl-main .article-prose .dl-figure svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}
#dl-main .article-prose .dl-figure figcaption {
  color: rgba(255,255,255,0.85) !important;       /* light-on-dark inside the dark-frame */
  background: var(--dl-green-700) !important;
  font-size: 14px !important;
  padding: 14px 22px 18px !important;
  margin: 0 !important;
  font-style: italic;
  line-height: 1.55;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
}

/* --- Series-nav cards: 3D shadow + hover-lift --------------------------- */
#dl-main .article-prose .dl-series-nav {
  margin-top: 56px !important;
  padding-top: 32px !important;
  border-top: 1.5px solid var(--dl-green-200) !important;
}
#dl-main .article-prose .dl-series-nav-heading {
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  color: var(--dl-ink-500) !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
}
#dl-main .article-prose .dl-series-nav-item {
  background: #FFFFFF !important;
  border: 1px solid var(--dl-green-200) !important;
  border-radius: 8px !important;
  box-shadow: var(--dl-elev-2) !important;
  transition: all var(--dl-duration-base) var(--dl-ease) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
#dl-main .article-prose .dl-series-nav-item:hover {
  border-color: var(--dl-green-400) !important;
  box-shadow: var(--dl-elev-3) !important;
  transform: translateY(-2px);
}
#dl-main .article-prose .dl-series-nav-item .dl-series-nav-anchor,
#dl-main .article-prose .dl-series-nav-item a {
  display: block !important;
  padding: 18px 22px !important;
  color: var(--dl-green-700) !important;
  text-decoration: none !important;
}
#dl-main .article-prose .dl-series-nav-label {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  color: var(--dl-green-600) !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  display: block !important;
}
#dl-main .article-prose .dl-series-nav-title {
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--dl-ink-900) !important;
  line-height: 1.4 !important;
  display: block !important;
}

/* --- Sources block (rev-6: bullets indented to article body alignment) -- */
#dl-main .article-prose ul.dl-sources,
#dl-main .article-prose ol.dl-sources {
  list-style: disc !important;
  padding-left: 30px !important;
  margin: 24px 0 0 0 !important;
  border-top: 0 !important;
}
#dl-main .article-prose ul.dl-sources li,
#dl-main .article-prose ol.dl-sources li {
  padding: 14px 0 14px 6px !important;
  font-size: 14.5px !important;
  border-bottom: 1px solid var(--dl-green-200) !important;
  color: var(--dl-ink-500) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
#dl-main .article-prose ul.dl-sources li::marker,
#dl-main .article-prose ol.dl-sources li::marker {
  color: var(--dl-green-500) !important;
}
#dl-main .article-prose ul.dl-sources li:first-child,
#dl-main .article-prose ol.dl-sources li:first-child {
  padding-top: 16px !important;
}
#dl-main .article-prose ul.dl-sources li:last-child,
#dl-main .article-prose ol.dl-sources li:last-child {
  border-bottom: 0 !important;
}
#dl-main .article-prose ul.dl-sources a,
#dl-main .article-prose ol.dl-sources a {
  color: var(--dl-green-600) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color var(--dl-duration-fast) var(--dl-ease);
}
#dl-main .article-prose ul.dl-sources a:hover,
#dl-main .article-prose ol.dl-sources a:hover {
  color: var(--dl-green-500) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
/* Sources H2: matches every other content H2 - clean, no red bar/underline
   (user 2026-05-30 "remove red lines from all headings"). */
#dl-main .article-prose h2#sources {
  font-size: 26px !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  padding-left: 0 !important;
  padding-bottom: 0 !important;
}

/* --- Disclaimer block ---------------------------------------------------
   Override the sitewide single.php suppression (display:none on .dl-disclaimer
   + .dl-disclaimer-heading) for this trial post so the editorial disclaimer
   actually renders. Wrapper element (.dl-disclaimer) gets the card chrome;
   heading sits on top with its own typography. */
#dl-main .article-prose .dl-disclaimer,
#dl-main .article-prose .dl-disclaimer-heading,
#dl-main .article-prose .dl-ca-disclaimer,
#dl-main .article-prose .dl-ca-disclaimer-heading {
  display: block !important;
}
#dl-main .article-prose .dl-disclaimer-heading {
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  color: var(--dl-ink-500) !important;
  font-weight: 700 !important;
  margin: 40px 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
}
#dl-main .article-prose .dl-disclaimer {
  margin: 0 0 32px 0 !important;
  padding: 22px 26px !important;
  background: #F8FAFC !important;
  border-left: 3px solid var(--dl-ink-300) !important;
  border-radius: 8px !important;
  color: var(--dl-ink-500) !important;
  font-size: 14.5px !important;
  font-style: italic;
  line-height: 1.55 !important;
}

/* --- In-body links: hover underline-with-offset --------------------------- */
#dl-main .article-prose a:not(.btn):not(.cta-btn):not(.dl-series-nav-anchor) {
  color: var(--dl-green-600) !important;
  transition: color var(--dl-duration-fast) var(--dl-ease);
}
#dl-main .article-prose a:not(.btn):not(.cta-btn):not(.dl-series-nav-anchor):hover {
  color: var(--dl-green-500) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* --- TOC sidebar polish (if present) ------------------------------------ */
#dl-main .toc-sidebar a,
#dl-main aside.toc a {
  display: block;
  padding: 8px 12px !important;
  border-left: 3px solid transparent !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--dl-ink-500) !important;
  transition: all var(--dl-duration-fast) var(--dl-ease) !important;
}
#dl-main .toc-sidebar a:hover,
#dl-main aside.toc a:hover {
  background: var(--dl-green-50) !important;
  color: var(--dl-ink-700) !important;
}
#dl-main .toc-sidebar a.current,
#dl-main aside.toc a.current {
  background: rgba(232, 53, 43,0.08) !important;
  border-left-color: var(--dl-green-500) !important;
  color: var(--dl-green-600) !important;
  font-weight: 600 !important;
}

/* --- Spacing rhythm: 8px-grid for article-prose direct children -------- */
#dl-main .article-prose > section,
#dl-main .article-prose > .dl-kb-section,
#dl-main .article-prose section.dl-kb-section {
  margin-bottom: 48px !important;
}

/* --- Promise (PYQ) block: align with new H2 left-accent treatment ------ */
#dl-main .article-prose .dl-promise-block {
  margin: 32px 0 40px !important;
  padding-top: 28px !important;
  position: relative;
}

/* Inject a content-H2-level "Previous Year UPSC-CSE Questions" heading via
   ::before on the PYQ promise block, matching the visual treatment of the
   adjacent MCQ section H2 (brand-green border-left + brand-tinted underline).
   This is a CSS-only heading for the trial scope; a permanent fix would add
   a real <h2> in render_pyq_promise() in dl_article_renderer.py sitewide. */
#dl-main .article-prose .dl-promise-block::before {
  content: 'Previous Year UPSC-CSE Questions';
  display: block;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #2a2520;                  /* dark grey, not pure black */
  line-height: 1.22;
  letter-spacing: -0.015em;
  border-left: 0;                  /* no red bar (user 2026-05-30) */
  border-bottom: 0;
  padding: 4px 0 8px 0;
  margin: -4px 0 18px 0;
}

/* --- MCQ section margin tuning ----------------------------------------- */
#dl-main .article-prose .dl-mcq-section {
  margin: 48px 0 !important;
}

/* H2 inside MCQ section (and any other card-style section): zero out the
   sitewide 56px top-margin since the card has its own top-padding (rev-8
   per user direction "why there is a space here"). */
#dl-main .article-prose .dl-mcq-section > h2,
#dl-main .article-prose .dl-mcq-section h2:first-child,
#dl-main .article-prose .dl-current-relevance > h2,
#dl-main .article-prose .dl-promise-block > h2 {
  margin-top: 0 !important;
}

/* --- MCQ answer-reveal card chrome removed (rev-6 per user direction
   "remove inner border from this"). The sitewide single.php rule wraps the
   "Show answer" button in a green-tint card with border + shadow; on this
   trial post we drop the card chrome so the dark summary button sits flush
   on the parent MCQ card's green-50 background, matching the cleaner
   PYQ-section visual language. */
#dl-main .article-prose .dl-mcq-answer {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 14px 0 0 0 !important;
  box-shadow: none !important;
}
/* Keep the dark summary button styling, but tighten margins so it reads as
   a primary action inside the green card rather than a wrapped-up element. */
#dl-main .article-prose .dl-mcq-answer summary,
#dl-main .article-prose .dl-mcq-answer > summary {
  background: var(--dl-ink-900) !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
  padding: 10px 18px !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.04em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: background var(--dl-duration-base) var(--dl-ease) !important;
}
#dl-main .article-prose .dl-mcq-answer summary:hover {
  background: var(--dl-ink-700) !important;
}
/* The actual answer body (inside details[open]) gets a thin green-tint card so it
   reads as the "revealed content" beneath the dark button, brand-aligned. */
#dl-main .article-prose .dl-mcq-answer-body {
  background: var(--dl-green-50) !important;
  border: 1px solid var(--dl-green-200) !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  margin-top: 12px !important;
  box-shadow: var(--dl-elev-1) !important;
}

/* --- Inline lists inside section content ------------------------------- */
#dl-main .article-prose ul,
#dl-main .article-prose ol {
  margin-bottom: 24px !important;
  padding-left: 24px !important;
}
#dl-main .article-prose ul li::marker {
  color: var(--dl-green-500);
}
#dl-main .article-prose ol li::marker {
  color: var(--dl-green-600);
  font-weight: 600;
}

/* --- Background section (the "Background and Historical Context" block) ----
   Plain, like every other section (the previous pink-tinted boxed treatment read
   as gross once the accent bar was removed - user 2026-05-30). A bespoke brand
   treatment for this block is being designed separately. */
#dl-main .article-prose .dl-kb-section:first-of-type {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 18px 0 0 0 !important;
  margin: 36px 0 !important;
  border-left: 0 !important;
  border-top: 2px solid var(--sm-accent) !important;   /* subtle brand top-rule = visible boundary, not a box (user 2026-05-31) */
  box-shadow: none !important;
}
#dl-main .article-prose .dl-kb-section:first-of-type h2 {
  margin-top: 0 !important;
  border-bottom: 0 !important;
  padding-bottom: 8px !important;
}
#dl-main .article-prose .dl-kb-section:first-of-type h2 {
  border-left: 0 !important;        /* the section's own left-accent does the job */
  padding-left: 0 !important;
}

/* --- Cluster series-nav v2 (the collapsible "All N parts in this cluster") ---
   Rev-3 fix: the snv2-list ol has no left padding so numeric markers like "10."
   sit cramped against the title text. Add padding + brand-style the marker +
   replace the cramped "(this article)" em with a brand pill. */
#dl-main .article-prose .dl-series-nav-v2 .snv2-list {
  padding-left: 0 !important;
  margin: 16px 0 0 0 !important;
}
#dl-main .article-prose .dl-series-nav-v2 .snv2-list li {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 11px 14px !important;
  margin: 0 0 2px !important;
  line-height: 1.45 !important;
  border-bottom: 0 !important;
  border-radius: 8px !important;
}
#dl-main .article-prose .dl-series-nav-v2 .snv2-list li:last-child { margin-bottom: 0 !important; }
/* B2 numbered circle + highlighted current row (live 2026-05-31; --sm-* tokens flip by mode) */
#dl-main .article-prose .dl-series-nav-v2 .snv2-list .snv2-num {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700;
  background: var(--sm-surface) !important; border: 1px solid var(--sm-hairline) !important; color: var(--sm-ink-2) !important;
}
#dl-main .article-prose .dl-series-nav-v2 .snv2-list .snv2-current { background: var(--sm-accent-soft) !important; }
#dl-main .article-prose .dl-series-nav-v2 .snv2-list .snv2-current .snv2-num { background: var(--sm-accent) !important; border-color: var(--sm-accent) !important; color: var(--sm-cta-ink) !important; }
#dl-main .article-prose .dl-series-nav-v2 .snv2-list li::marker {
  color: var(--dl-green-700) !important;
  font-weight: 700 !important;
}
#dl-main .article-prose .dl-series-nav-v2 .snv2-list li a {
  color: var(--dl-green-600) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
#dl-main .article-prose .dl-series-nav-v2 .snv2-list li a:hover {
  color: var(--dl-green-500) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
/* Hide the legacy "(this article)" em + inject a brand pill on the current item */
#dl-main .article-prose .dl-series-nav-v2 .snv2-list li em {
  display: none !important;
}
#dl-main .article-prose .dl-series-nav-v2 .snv2-list li strong {
  color: var(--dl-ink-900) !important;
  font-weight: 700 !important;
}
/* "READING" pill — short text + inline placement so it stays on the same line
   as the title even when the title is long (rev-7 per user direction). The
   white-space: nowrap + inline rendering ensures it never breaks to its own line. */
#dl-main .article-prose .dl-series-nav-v2 .snv2-list li strong::after {
  content: 'Reading';
  display: inline;
  margin-left: 10px;
  padding: 2px 10px;
  background: var(--dl-green-500);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 9999px;
  vertical-align: middle;
  white-space: nowrap;
}

/* prev/next cards above the cluster list — light brand polish */
#dl-main .article-prose .dl-series-nav-v2 .snv2-prev-next {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}
@media (max-width: 768px) {
  #dl-main .article-prose .dl-series-nav-v2 .snv2-prev-next {
    grid-template-columns: 1fr !important;
  }
}
#dl-main .article-prose .dl-series-nav-v2 .snv2-card {
  background: #f7f7f7 !important;        /* light-grey link card (user 2026-05-31); dark mode flips via dl-theme.css */
  border: 1px solid var(--dl-green-200) !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  box-shadow: var(--dl-elev-2) !important;
  transition: all var(--dl-duration-base) var(--dl-ease) !important;
  text-decoration: none !important;
  display: block;
}
#dl-main .article-prose .dl-series-nav-v2 a.snv2-card:hover {
  border-color: var(--dl-green-400) !important;
  box-shadow: var(--dl-elev-3) !important;
  transform: translateY(-2px);
}
#dl-main .article-prose .dl-series-nav-v2 .snv2-card.snv2-disabled {
  opacity: 0.55;
  cursor: default;
}
#dl-main .article-prose .dl-series-nav-v2 .snv2-label {
  display: block;
  font-size: 10.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--dl-green-600) !important;
  font-weight: 700;
  margin-bottom: 4px;
}
#dl-main .article-prose .dl-series-nav-v2 .snv2-title {
  display: block;
  color: var(--dl-ink-900) !important;
  font-weight: 600;
  font-size: 14.5px !important;
  line-height: 1.4;
}
#dl-main .article-prose .dl-series-nav-v2 .snv2-eyebrow {
  font-size: 12px !important;
  text-transform: none !important;        /* sentence case, first letter only (user 2026-05-31) */
  letter-spacing: normal !important;
  color: var(--sm-ink-strong) !important;  /* pure black in light, near-white in dark */
  font-weight: 700;
  margin: 0 0 14px 0 !important;
}
#dl-main .article-prose .dl-series-nav-v2 details.snv2-all {
  background: #F8FAFC !important;
  border: 1px solid var(--dl-green-200) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  box-shadow: var(--dl-elev-1) !important;
}
#dl-main .article-prose .dl-series-nav-v2 details.snv2-all summary {
  cursor: pointer;
  font-weight: 700 !important;
  color: var(--dl-ink-900) !important;
  font-size: 15px !important;
  padding: 4px 0 !important;
}

/* --- prefers-reduced-motion fallback ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .article-prose *,
  .article-prose *::before,
  .article-prose *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}