/* ============================================================
   CURRENT AFFAIRS — single article only.

   Enqueued by template-parts/ca-single.php as
   `riyasat-page-current-affairs-single`, dependent on
   `riyasat-page-current-affairs`, so it always cascades after
   the shared sheet.

   WHY A SEPARATE FILE
   The shared sheet (current-affairs.css) is the hub + digest
   contract and is owned by that work. Everything an article
   needs beyond that contract is four small components, and
   keeping them here means neither file has to be edited by two
   hands at once.

   Reused from the shared sheet, NOT redefined here:
     .ca-shell .ca-layout .ca-layout--sidebar .ca-main .ca-side
     .ca-crumbs .ca-eyebrow .ca-title
     .ca-article-media .ca-article-img .ca-article-cap
     .ca-article-content .ca-box .ca-faq
     .ca-cta .ca-cta-title .ca-cta-row .ca-btn .ca-cta-note

   Added here:
     .ca-single-head .ca-single-meta .ca-meta-item .ca-meta-sep
     .ca-meta-author .ca-meta-kicker .ca-meta-name .ca-meta-updated
     .ca-lead-cta .ca-lead-cta-text .ca-lead-cta-link
     .ca-about .ca-about-head .ca-about-list .ca-about-row
     .ca-about-label .ca-about-value
     .ca-toc .ca-toc-head .ca-toc-list .ca-toc-item
     .ca-source .ca-source-label
     .ca-backlink
     .ca-adjacent .ca-adj-head .ca-adj-grid .ca-adj-link
     .ca-adj-kicker .ca-adj-arrow .ca-adj-title .ca-adj-date
     .ca-related .ca-rel-grid .ca-rel-card .ca-rel-title
     .ca-rel-meta .ca-rel-more
     .ca-pagelinks
     section separators inside .ca-article-content

   ------------------------------------------------------------
   SHAPE ACCENT
   ------------------------------------------------------------
   ca-single.php puts .ca-single--prelims | --mains | --editorial
   | --quiz | --general on the article. The ONLY thing that class
   changes is --ca-accent, read by the TOC rule, the fact-panel
   spine and the section separators. Layout is identical across
   all three shapes on purpose: they are one page with different
   labels, not three templates.

   Every value is from the existing palette — #e71d39, #FA4651,
   #FF515A, #FF8C2B. Nothing new.

   Mobile-first: base rules are the 375px layout, min-width
   queries upgrade. Every interactive target is >= 44px.
   ============================================================ */

/* ---------- shape accent ---------- */
.ca-main {
  --ca-accent: #e71d39;
  --ca-accent-soft: rgba(231, 29, 57, 0.09);
  --ca-accent-line: rgba(231, 29, 57, 0.22);
}

.ca-single--mains {
  --ca-accent: #FF8C2B;
  --ca-accent-soft: rgba(255, 140, 43, 0.11);
  --ca-accent-line: rgba(255, 140, 43, 0.28);
}

.ca-single--editorial {
  --ca-accent: #FA4651;
  --ca-accent-soft: rgba(250, 70, 81, 0.10);
  --ca-accent-line: rgba(250, 70, 81, 0.24);
}

.ca-single--quiz {
  --ca-accent: #FF515A;
  --ca-accent-soft: rgba(255, 81, 90, 0.10);
  --ca-accent-line: rgba(255, 81, 90, 0.24);
}

.ca-single-head {
  margin: 0 0 var(--s-3, 24px);
}

/* ---------- byline row ---------- */
.ca-single-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: var(--s-2, 16px) 0 0;
  padding-top: var(--s-2, 16px);
  border-top: 1px solid var(--hairline, #ece8e4);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft, #5C5550);
}

.ca-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ca-meta-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: currentColor;
}

.ca-meta-sep { color: #b7afa9; }

/* At 375px the four byline facts wrap onto three lines, which left a middot
   stranded at the end of each. Below 560px the separators are dropped and the
   row gaps do the separating instead; from 560px up the row fits on one or two
   lines and the middots earn their place again. */
@media (max-width: 559px) {
  .ca-single-meta {
    gap: 2px 12px;
  }

  .ca-meta-sep { display: none; }
}

/* "Written by" / "Published" / "Updated" — the label is quieter
   than the value it introduces, so the row reads as data rather
   than as four competing phrases. */
.ca-meta-kicker {
  color: #8b837d;
}

.ca-meta-name {
  font-weight: 600;
  color: var(--ink, #14100E);
}

.ca-meta-updated .ca-meta-kicker,
.ca-meta-updated time {
  color: var(--ca-accent, #e71d39);
}

/* ============================================================
   LEAD CTA STRIP
   Sits above the article body, before reading starts, so it
   cannot interrupt an argument. One sentence, one tap target.
   ============================================================ */
.ca-lead-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 var(--s-3, 24px);
  padding: var(--s-2, 16px);
  background: var(--ca-accent-soft, rgba(231, 29, 57, 0.09));
  border-radius: 14px;
}

.ca-lead-cta-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink, #14100E);
}

.ca-lead-cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--ca-accent-line, rgba(231, 29, 57, 0.22));
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ca-accent, #e71d39);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ca-lead-cta-link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: currentColor;
}

.ca-lead-cta-link:hover,
.ca-lead-cta-link:focus-visible {
  background: var(--ca-accent, #e71d39);
  border-color: var(--ca-accent, #e71d39);
  color: #ffffff;
}

/* Above 560px the sentence and the button share a line — the
   strip stops being a card and becomes a rule. */
@media (min-width: 560px) {
  .ca-lead-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2, 16px);
  }

  .ca-lead-cta-link { flex-shrink: 0; }
}

/* ============================================================
   "ABOUT X" FACT PANEL
   Label/value pairs about one subject — a dl, not a table, so
   it linearises correctly at 375px without a scroll container.
   Renders only when the desk filled the about meta.
   ============================================================ */
.ca-about {
  margin: 0 0 var(--s-3, 24px);
  padding: var(--s-2, 16px);
  background: #fbf9f8;
  border: 1px solid var(--hairline, #ece8e4);
  border-left: 4px solid var(--ca-accent, #e71d39);
  border-radius: 0 14px 14px 0;
}

.ca-about-head {
  margin: 0 0 12px;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink, #14100E);
}

.ca-about-list {
  margin: 0;
  padding: 0;
}

.ca-about-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline, #ece8e4);
}

.ca-about-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.ca-about-row:last-child { padding-bottom: 0; }

.ca-about-label {
  margin: 0;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8b837d;
}

.ca-about-value {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink, #14100E);
  overflow-wrap: anywhere;
}

/* Two columns once there is room for a label column that does
   not squeeze the value to three words a line. */
@media (min-width: 600px) {
  .ca-about-row {
    grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
    gap: var(--s-2, 16px);
    align-items: baseline;
  }

  .ca-about-row--plain { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   TABLE OF CONTENTS
   Suppressed below three headings by the template, so this only
   ever styles a block that earned its space.
   ============================================================ */
.ca-toc {
  margin: 0 0 var(--s-3, 24px);
  padding: var(--s-2, 16px);
  background: #ffffff;
  border: 1px solid var(--hairline, #ece8e4);
  border-radius: 14px;
  box-shadow: var(--e-1, 0 1px 2px rgba(16, 12, 10, 0.04), 0 2px 8px rgba(16, 12, 10, 0.04));
}

.ca-toc-head {
  position: relative;
  margin: 0 0 12px;
  padding-bottom: 10px;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink, #14100E);
}

.ca-toc-head::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--ca-accent, #e71d39);
}

.ca-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ca-toc;
}

/* Backstop for the long tail. riyasat_ca_render_toc() already drops the H3s
   above 12 entries, which leaves 33 of the 381 posts still long enough to push
   the article off a 375px screen. Capping the list turns those into a short
   inner scroll instead of a wall — every link stays in the DOM and reachable by
   keyboard, so nothing is hidden from a reader or a crawler. */
@media (max-width: 699px) {
  .ca-toc-list {
    max-height: 320px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

.ca-toc-item {
  margin: 0;
  padding: 0;
}

.ca-toc-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink, #14100E);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline, #ece8e4);
  /* Headings occasionally carry a long unbroken token (a scheme name, a URL).
     Without this the flex item refuses to break and the list scrolls sideways
     at 375px. Same rule the adjacent-card titles already use. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.ca-toc-item:last-child a { border-bottom: 0; }

/* The number is decoration, so it is generated rather than
   marked up — a screen reader reads the ordered list's own
   numbering and does not hear it twice. */
.ca-toc-item--h2 a::before {
  counter-increment: ca-toc;
  content: counter(ca-toc);
  flex-shrink: 0;
  min-width: 22px;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ca-accent, #e71d39);
}

/* Sub-headings indent instead of numbering, so the outline is
   readable at a glance without a second counter. */
.ca-toc-item--h3 a {
  padding-left: 32px;
  font-size: 0.87rem;
  color: var(--ink-soft, #5C5550);
}

.ca-toc-item--h3 a::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 1px;
  background: #c9c2bc;
}

.ca-toc-item a:hover,
.ca-toc-item a:focus-visible {
  color: var(--ca-accent, #e71d39);
}

/* ============================================================
   SECTION SEPARATORS
   The reference page reads as discrete sections; ours ran as one
   undifferentiated column. A hairline plus a short accent mark
   above every H2 gives the eye a resting point without adding a
   box around each section.

   :first-child guarded so an article opening on an H2 does not
   start with a rule under the byline.
   ============================================================ */
.ca-article-content h2 {
  position: relative;
  margin-top: var(--s-5, 48px);
  padding-top: var(--s-3, 24px);
  border-top: 1px solid var(--hairline, #ece8e4);
}

.ca-article-content h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: -2px;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: var(--ca-accent, #e71d39);
}

.ca-article-content > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.ca-article-content > h2:first-child::before { display: none; }

.ca-article-content h3 {
  margin-top: var(--s-4, 32px);
}

/* In-content horizontal rules match the separator language
   rather than the browser default. */
.ca-article-content hr {
  height: 1px;
  margin: var(--s-4, 32px) 0;
  border: 0;
  background: var(--hairline, #ece8e4);
}

/* Anchor targets must clear the sticky header when a TOC link
   jumps to them, otherwise the heading lands underneath it. */
.ca-article-content h2[id],
.ca-article-content h3[id] {
  scroll-margin-top: 90px;
}

/* ============================================================
   PREV / NEXT WITHIN THIS CATEGORY
   Two equal cards, stacked at 375px. The whole card is the tap
   target, well over 44px in both directions.
   ============================================================ */
.ca-adjacent {
  margin-top: var(--s-4, 32px);
  padding-top: var(--s-3, 24px);
  border-top: 1px solid var(--hairline, #ece8e4);
}

.ca-adj-head {
  margin: 0 0 var(--s-2, 16px);
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8b837d;
}

.ca-adj-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2, 16px);
}

@media (min-width: 640px) {
  .ca-adj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ca-adj-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  padding: var(--s-2, 16px);
  background: #ffffff;
  border: 1px solid var(--hairline, #ece8e4);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ca-adj-link:hover,
.ca-adj-link:focus-visible {
  border-color: var(--ca-accent-line, rgba(231, 29, 57, 0.22));
  box-shadow: var(--e-1, 0 1px 2px rgba(16, 12, 10, 0.04), 0 2px 8px rgba(16, 12, 10, 0.04));
}

/* The next card aligns right from two columns up, so the pair
   reads as a spread rather than as two identical cards. */
@media (min-width: 640px) {
  .ca-adj-link--next { text-align: right; align-items: flex-end; }
}

/* A next card with no previous sibling must not jump to the left
   column — it stays in its own half so the direction stays true. */
@media (min-width: 640px) {
  .ca-adj-link--next:first-child { grid-column: 2; }
}

.ca-adj-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ca-accent, #e71d39);
}

.ca-adj-arrow { font-size: 0.95rem; }

.ca-adj-title {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink, #14100E);
  overflow-wrap: anywhere;
}

.ca-adj-link:hover .ca-adj-title,
.ca-adj-link:focus-visible .ca-adj-title {
  color: var(--ca-accent, #e71d39);
}

.ca-adj-date {
  font-size: 0.78rem;
  color: var(--ink-soft, #5C5550);
}

/* ---------- wp_link_pages ---------- */
.ca-pagelinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: var(--s-3, 24px) 0 0;
  font-size: 0.9rem;
}

.ca-pagelinks a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--hairline, #ece8e4);
  border-radius: 8px;
  color: var(--ink, #14100E);
  text-decoration: none;
}

.ca-pagelinks a:hover,
.ca-pagelinks a:focus-visible {
  border-color: #e71d39;
  color: #e71d39;
}

/* ============================================================
   NEWS SOURCE LINE
   Quiet by design. It is an attribution, not a call to action —
   it must be findable without competing with the article.
   ============================================================ */
.ca-source {
  margin: var(--s-3, 24px) 0 0;
  padding: 12px var(--s-2, 16px);
  background: #fbf9f8;
  border-left: 3px solid #FF8C2B;
  border-radius: 0 10px 10px 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-soft, #5C5550);
}

.ca-source-label {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  color: var(--ink, #14100E);
  margin-right: 6px;
}

.ca-source a {
  color: #e71d39;
  text-decoration: underline;
  text-underline-offset: 2px;
  /* Source names are single tokens that can be long; never let one
     push the article column wide on a 375px screen. */
  overflow-wrap: anywhere;
}

/* ============================================================
   BACK TO THE DAY'S DIGEST
   The main navigation path on the reference site: a reader who
   arrives on one item wants the rest of that day.
   ============================================================ */
.ca-backlink {
  margin: var(--s-3, 24px) 0 0;
}

.ca-backlink a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgba(231, 29, 57, 0.22);
  border-radius: 999px;
  background: rgba(231, 29, 57, 0.05);
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
  color: #e71d39;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.ca-backlink a:hover,
.ca-backlink a:focus-visible {
  background: rgba(231, 29, 57, 0.11);
}

/* ============================================================
   RELATED
   ============================================================ */
.ca-related {
  margin-top: var(--s-5, 48px);
  padding-top: var(--s-4, 32px);
  border-top: 1px solid var(--hairline, #ece8e4);
}

.ca-related-head {
  position: relative;
  margin: 0 0 var(--s-3, 24px);
  padding-bottom: 12px;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(1.3rem, 4vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #111111;
}

/* Left-aligned rule, not the centred one .global-section-title
   draws — this heading sits in a text column, not a full-width
   section. */
.ca-related-head::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #e71d39, #FF8C2B);
}

.ca-rel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2, 16px);
}

@media (min-width: 700px) {
  .ca-rel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ca-rel-card {
  min-width: 0;
  padding: var(--s-2, 16px);
  background: #ffffff;
  border: 1px solid var(--hairline, #ece8e4);
  border-radius: 14px;
  box-shadow: var(--e-1, 0 1px 2px rgba(16, 12, 10, 0.04), 0 2px 8px rgba(16, 12, 10, 0.04));
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ca-rel-card:hover {
  box-shadow: var(--e-2, 0 2px 4px rgba(16, 12, 10, 0.04), 0 8px 24px rgba(16, 12, 10, 0.07));
  transform: translateY(-2px);
}

.ca-rel-title {
  margin: 0 0 8px;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.ca-rel-title a {
  color: var(--ink, #14100E);
  text-decoration: none;
}

.ca-rel-title a:hover,
.ca-rel-title a:focus-visible { color: #e71d39; }

.ca-rel-meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft, #5C5550);
}

.ca-rel-more {
  margin: var(--s-3, 24px) 0 0;
  font-size: 0.9rem;
}

.ca-rel-more a {
  color: #e71d39;
  font-weight: 600;
  text-decoration: none;
}

.ca-rel-more a:hover,
.ca-rel-more a:focus-visible { text-decoration: underline; }

/* ============================================================
   REDUCED MOTION
   The shared sheet kills transitions inside .ca-layout, which
   covers everything above; the lift is a transform, so it is
   named explicitly.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ca-rel-card,
  .ca-rel-card:hover {
    transform: none;
    transition: none;
  }

  .ca-lead-cta-link,
  .ca-adj-link {
    transition: none;
  }

  /* A TOC link is an instant jump for these readers, not a
     smooth scroll — main.css sets scroll-behavior on html and
     .yatharth-page-wrapper, so both are named. */
  html,
  .yatharth-page-wrapper {
    scroll-behavior: auto;
  }
}

/* ============================================================
   PRINT
   Aspirants print articles to revise offline. Keep the reading,
   drop the asking.
   ============================================================ */
@media print {
  .ca-backlink,
  .ca-related,
  .ca-lead-cta,
  .ca-adjacent { display: none !important; }

  .ca-source {
    background: transparent;
    border-left: 2px solid #999999;
  }

  /* The fact panel IS the revision material — keep it, drop the
     fill so it does not print as a grey slab. */
  .ca-about {
    background: transparent;
    border: 1px solid #cccccc;
    border-left: 2px solid #999999;
    break-inside: avoid;
  }

  /* The contents block survives too: a printed article is read
     out of order, which is exactly when an outline earns itself.
     The box around it does not. */
  .ca-toc {
    border: 0;
    box-shadow: none;
    padding: 0;
    break-inside: avoid;
  }

  .ca-toc-head::after,
  .ca-article-content h2::before { display: none; }

  .ca-article-content h2 { break-after: avoid; }
}