/**
 * OAP Article Styles
 *
 * Owns all front-end presentation for plugin-injected markup:
 *   - .oap-about-block       (About This Article block)
 *   - .oap-article-disclosure (Disclosure section)
 *   - .oap-image-creditline  (image credit caption)
 *   - .oap-editorial-note    (editorial method note)
 *
 * Light mode rules are defined first.
 * Dark mode overrides follow in a single @media block at the end.
 *
 * Theme-level concerns (sticky header, logo swap, body/heading colors,
 * article listing layout) live in Appearance → Additional CSS, not here.
 */

/* =========================================================
   About This Article block — light mode
   ========================================================= */

.oap-about-block {
  background: #f4f4f4;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: 10px 13px;
  margin-bottom: 1.75em;
  font-size: 0.875em;
  line-height: 1.5;
}

.oap-about-block__heading {
  color: #2f3a45;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px 0;
}

/* Framing elements — appear before the About This Article metadata */
.oap-about-block__frame-heading {
  color: #1e3a5f;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 6px 0;
  line-height: 1.3;
}

.oap-about-block__frame-sentence {
  color: #475569;
  margin: 0 0 10px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.oap-about-block__description {
  color: #475569;
  margin: 0 0 7px 0;
}

.oap-about-block__description a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.75;
}

.oap-about-block__description a:hover {
  opacity: 1;
}

.oap-about-block__source {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  color: #555;
}

.oap-about-block__venue {
  font-style: italic;
}

.oap-about-block__sep {
  color: #bbb;
  margin: 0 2px;
}

.oap-about-block__date {
  color: #666;
}

.oap-about-block__badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.02em;
}

.oap-about-block__badge--peer-reviewed {
  background: #e6f4ea;
  color: #1e6e38;
  border: 1px solid #b7dfc4;
}

.oap-about-block__badge--preprint {
  background: #fff4e5;
  color: #8a5700;
  border: 1px solid #f5d08a;
}

.oap-about-block__doi {
  font-weight: 500;
  color: #1a73e8;
  text-decoration: none;
  font-size: 0.85rem;
  white-space: nowrap;
}

.oap-about-block__doi:hover {
  text-decoration: underline;
}

.oap-about-block__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.oap-about-block__term {
  display: inline-block;
  background: #e8eaed;
  color: #3c4043;
  border: 1px solid #d2d5d9;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 0.8rem;
  text-decoration: none;
}

.oap-about-block__term:hover {
  background: #dde0e4;
  color: #1a1a1a;
}

.oap-about-block__term--category {
  font-weight: 600;
}

.oap-about-block__disclaimer {
  margin-top: 10px;
  padding: 8px 12px;
  background: #fff8e1;
  border-left: 3px solid #f59e0b;
  border-radius: 0 4px 4px 0;
}

.oap-about-block__disclaimer-text {
  margin: 0;
  font-size: 0.8em;
  color: #78350f;
  line-height: 1.5;
}

/* =========================================================
   Disclosure block — light mode
   ========================================================= */

.oap-article-disclosure {
  background: #f5f7f9;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 22px 24px;
  font-size: 0.9em;
}

.oap-article-disclosure h3 {
  margin-top: 0;
  color: #2f3a44;
}

/* =========================================================
   Editorial note — light mode
   ========================================================= */

.oap-editorial-note {
  font-size: 0.85rem;
  line-height: 1.5;
  margin-top: 6px;
  margin-bottom: 18px;
  opacity: 0.65;
  color: #666;
}

.oap-editorial-note a,
.oap-editorial-note a:visited {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.oap-editorial-note a:hover {
  opacity: 0.85;
  text-decoration: none;
}

/* =========================================================
   Image credit line — light mode
   ========================================================= */

.oap-image-creditline {
  font-size: 0.8rem;
  color: #666;
  margin-top: 4px;
  margin-bottom: 0;
  line-height: 1.4;
}

/* =========================================================
   Dark mode overrides
   ========================================================= */

@media (prefers-color-scheme: dark) {

  /* About This Article block */
  .oap-about-block {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .oap-about-block__heading {
    color: #c9cdd2;
  }

  /* Frame heading: use a warm accent colour that reads clearly on dark bg */
  .oap-about-block__frame-heading {
    color: #93c5fd;
  }

  /* Frame sentence: ensure readable contrast on dark background */
  .oap-about-block__frame-sentence {
    color: #c9cdd2;
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .oap-about-block__description {
    color: #c9cdd2;
  }

  .oap-about-block__description a {
    color: #8ab4f8;
    opacity: 1;
  }

  .oap-about-block__source {
    color: #c9cdd2;
  }

  .oap-about-block__venue {
    color: #c9cdd2;
  }

  .oap-about-block__date {
    color: #9aa0a6;
  }

  .oap-about-block__sep {
    color: #374151;
  }

  .oap-about-block__badge--peer-reviewed {
    background: #052e16;
    color: #86efac;
    border-color: #166534;
  }

  .oap-about-block__badge--preprint {
    background: #2d1a00;
    color: #fcd34d;
    border-color: #78350f;
  }

  .oap-about-block__doi {
    color: #8ab4f8;
  }

  .oap-about-block__doi:hover {
    color: #aecbfa;
  }

  .oap-about-block__term {
    background: #1f2937;
    color: #d1d5db;
    border-color: rgba(255, 255, 255, 0.12);
  }

  .oap-about-block__term:hover {
    background: #263241;
    color: #f3f4f6;
  }

  .oap-about-block__disclaimer {
    background: #1c1400;
    border-left-color: #b45309;
  }

  .oap-about-block__disclaimer-text {
    color: #fcd34d;
  }

  /* Disclosure block */
  .oap-article-disclosure {
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .oap-article-disclosure h3 {
    color: #e2e8f0;
  }

  /* Editorial note */
  .oap-editorial-note {
    color: #a0a6ad;
    opacity: 0.85;
  }

  /* Image credit line */
  .oap-image-creditline {
    color: #9aa0a6;
  }

} /* End Dark Mode */

/* =========================================================
   Concept Directory ([oap_concept_directory] shortcode)
   ========================================================= */

.oap-concept-directory {
  margin: 2em 0;
}

.oap-concept-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 0.5em;
  margin-bottom: 2em;
  padding-bottom: 1em;
  border-bottom: 1px solid #e0e0e0;
}

.oap-concept-index a {
  display: inline-block;
  font-weight: 600;
  font-size: 0.95em;
  min-width: 1.4em;
  text-align: center;
  text-decoration: none;
  padding: 0.2em 0.3em;
  border-radius: 3px;
}

.oap-concept-index a:hover {
  text-decoration: underline;
}

.oap-concept-group {
  margin-bottom: 2em;
}

.oap-concept-letter {
  font-size: 1.1em;
  font-weight: 600;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 0.25em;
  margin-bottom: 0.5em;
}

.oap-concept-list {
  list-style: none;
  padding: 0;
  columns: 2;
  column-gap: 2em;
}

.oap-concept-list li {
  padding: 0.2em 0;
  break-inside: avoid;
}

.oap-concept-count {
  color: #888;
  font-size: 0.85em;
}

@media (prefers-color-scheme: dark) {
  .oap-concept-index {
    border-bottom-color: rgba(255, 255, 255, 0.15);
  }
  .oap-concept-letter {
    border-bottom-color: rgba(255, 255, 255, 0.15);
  }
  .oap-concept-count {
    color: #9aa0a6;
  }
}

@media (max-width: 600px) {
  .oap-concept-list {
    columns: 1;
  }
}

/* RSS subscribe link in the source banner — orange to stand out against the
   dark banner background. Uses the same #e07020 as the pillar/homepage RSS
   links for colour consistency across the site. */
.oap-about-block__rss {
  color: #e07020;
  opacity: 1;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.85em;
}
.oap-about-block__rss:hover {
  text-decoration: underline;
}
.oap-about-block__rss svg {
  fill: currentColor;
}

/* =============================================================================
   Publication Signals Panel — renamed from Evidence Strength (Evaluator-approved 2026-04-09)
   ============================================================================= */

.oap-evidence-panel {
  margin: 16px 0 0 0;
  padding: 14px 16px;
  border-radius: 6px;
  border-left: 4px solid #9ca3af;
  background: #f9fafb;
  font-size: 0.875rem;
}

/* Tier colour accents */
.oap-evidence-panel--strong      { border-left-color: #16a34a; background: #f0fdf4; }
.oap-evidence-panel--moderate    { border-left-color: #1a73e8; background: #eff6ff; }
.oap-evidence-panel--standard    { border-left-color: #d97706; background: #fffbeb; }
.oap-evidence-panel--insufficient{ border-left-color: #9ca3af; background: #f9fafb; }

/* <details> reset — remove default browser disclosure triangle */
.oap-evidence-panel {
  list-style: none; /* Firefox */
}
.oap-evidence-panel::-webkit-details-marker {
  display: none; /* Chrome/Safari */
}

.oap-evidence-panel__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  cursor: pointer;
  user-select: none;
  list-style: none; /* belt-and-braces for Safari */
}
.oap-evidence-panel__summary::-webkit-details-marker {
  display: none;
}
/* Remove the browser focus ring on mouse/touch click while preserving it
   for keyboard navigation (:focus-visible only fires on Tab, not on click). */
.oap-evidence-panel__summary:focus {
  outline: none;
}
.oap-evidence-panel__summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

.oap-evidence-panel__header {
  margin: 0;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Chevron rotates when panel is open */
.oap-evidence-panel__chevron {
  display: inline-block;
  margin-left: 2px;
  font-size: 0.7rem;
  transition: transform 0.15s ease;
}
.oap-evidence-panel__chevron::after {
  content: '\25BE'; /* ▾ downward-pointing small triangle */
}
details[open].oap-evidence-panel .oap-evidence-panel__chevron {
  transform: rotate(180deg);
}

/* Expandable body — add breathing room when open */
details[open].oap-evidence-panel .oap-evidence-panel__copy {
  margin-top: 10px;
}

.oap-evidence-panel__label {
  color: #6b7280;
}

.oap-evidence-panel__badge {
  color: #1a1a1a;
}

.oap-evidence-panel--strong      .oap-evidence-panel__badge { color: #15803d; }
.oap-evidence-panel--moderate    .oap-evidence-panel__badge { color: #1558b0; }
.oap-evidence-panel--standard    .oap-evidence-panel__badge { color: #92400e; }
.oap-evidence-panel--insufficient .oap-evidence-panel__badge { color: #4b5563; }

.oap-evidence-panel__copy {
  margin: 0 0 10px 0;
  color: #374151;
  line-height: 1.5;
}

.oap-evidence-panel__checks {
  margin: 0 0 6px 0;
  padding: 0;
  list-style: none;
}

.oap-evidence-panel__check {
  margin: 2px 0;
  color: #374151;
  font-size: 0.8125rem;
}

.oap-evidence-panel__check--bonus {
  color: #4b5563;
}

.oap-evidence-panel__hindex {
  color: #6b7280;
  font-size: 0.75rem;
}

.oap-evidence-panel__disclaimer {
  margin: 0;
  font-size: 0.75rem;
  color: #6b7280;
  font-style: italic;
  line-height: 1.4;
}

.oap-evidence-panel__disclaimer-icon {
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  color: #9ca3af;
  margin-right: 2px;
}

@media (prefers-color-scheme: dark) {
  .oap-evidence-panel              { background: #1e2736; border-left-color: #4b5563; }
  .oap-evidence-panel--strong      { background: #052e16; border-left-color: #16a34a; }
  .oap-evidence-panel--moderate    { background: #0d1f3c; border-left-color: #3b82f6; }
  .oap-evidence-panel--standard    { background: #2d1f00; border-left-color: #d97706; }
  .oap-evidence-panel--insufficient{ background: #1a1f2b; border-left-color: #4b5563; }
  .oap-evidence-panel__copy,
  .oap-evidence-panel__check       { color: #c9cdd2; }
  .oap-evidence-panel__label       { color: #9ca3af; }
  .oap-evidence-panel__disclaimer  { color: #9ca3af; } /* was #6b7280, 3.66:1 → now ≈7.6:1 WCAG AA */
  .oap-evidence-panel--strong      .oap-evidence-panel__badge { color: #4ade80; }
  .oap-evidence-panel--moderate    .oap-evidence-panel__badge { color: #60a5fa; }
  .oap-evidence-panel--standard    .oap-evidence-panel__badge { color: #fbbf24; }
  .oap-evidence-panel--insufficient .oap-evidence-panel__badge { color: #9ca3af; }
}

/* Evidence panel merged inside about-block (3.29.100) ----------------------- */

/* Divider line between source metadata and evidence section */
.oap-about-block__evidence-divider {
  margin: 10px -13px 0 -13px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* When inside about-block: remove standalone box, become a seamless section */
.oap-about-block .oap-evidence-panel {
  margin: 10px 0 0 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  border-left: none;
}

/* Tier accent: show as a coloured left border on the header only */
.oap-about-block .oap-evidence-panel__header {
  padding-left: 8px;
  border-left: 3px solid #9ca3af;
  margin-bottom: 5px;
}
.oap-about-block .oap-evidence-panel--strong   .oap-evidence-panel__header { border-left-color: #16a34a; }
.oap-about-block .oap-evidence-panel--moderate .oap-evidence-panel__header { border-left-color: #1a73e8; }
.oap-about-block .oap-evidence-panel--standard .oap-evidence-panel__header { border-left-color: #d97706; }

/* Tighten spacing within merged panel */
.oap-about-block .oap-evidence-panel__copy    { margin-bottom: 6px; }
.oap-about-block .oap-evidence-panel__checks  { margin-bottom: 6px; }
.oap-about-block .oap-evidence-panel__check   { margin: 2px 0; }

@media (prefers-color-scheme: dark) {
  .oap-about-block__evidence-divider {
    border-top-color: rgba(255, 255, 255, 0.1);
  }
}

/* ── Article page layout fixes ─────────────────────────────────────────────── */

/* Reduce top gap above H1 on single post pages.
 * WHY: The FSE theme applies padding-block-start to the first content group
 * inside main, creating excessive space above the title on article pages.
 * The existing main padding-top:16px override handles the main element itself;
 * this targets the inner wrapper. Scoped to body.single to avoid affecting
 * archives or other templates.
 */
body.single .wp-site-blocks > main > .wp-block-group:first-of-type,
body.single-post .wp-site-blocks > main > .wp-block-group:first-of-type {
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
}

/* Cap featured image height on article pages.
 * WHY: The FSE block template sets aspect-ratio:3/2 as an inline style on the
 * <figure> element. At ~880px content width this produces a ~587px container.
 * Our max-height on the <img> capped the image but the figure retained its
 * full inline aspect-ratio height, leaving blank space below the image.
 * Fix: override aspect-ratio on the figure and cap the figure height directly.
 * The image already has inline style="width:100%;height:100%;object-fit:cover"
 * set by WordPress, so it fills and crops within the capped figure correctly.
 * Marketing AI recommendation: 380–420px cap.
 */
body.single .wp-block-post-featured-image,
body.single-post .wp-block-post-featured-image {
  aspect-ratio: unset !important;
  /* overflow: hidden removed — it clips the image credit line that renders
     after the <img> inside this container (3.29.206 fix). Height cap is
     applied directly to the img instead. */
}

body.single .wp-block-post-featured-image img,
body.single-post .wp-block-post-featured-image img {
  max-height: 420px;
  width: 100%;
  object-fit: cover;
  display: block;
}

/* ── Mobile UX: thumbnail size on tag/category/search archive pages ──────────
 *
 * On narrow viewports the fixed 110×72px thumbnail (set in WP Additional CSS)
 * takes ~40% of the row width, leaving the title column too cramped and
 * forcing titles to wrap across 5–6 lines. Reduce container AND image to
 * 72×56px on small screens — targeting only the img was leaving a blank gap
 * where the container retained its original allocated width.
 * Marketing AI brief, 2026-04-06.
 */
@media (max-width: 480px) {
  body:not(.single):not(.single-post) .wp-block-post-featured-image {
    width: 72px !important;
    min-width: 72px !important;
    flex-basis: 72px !important;
    flex-shrink: 0 !important;
  }
  body:not(.single):not(.single-post) .wp-block-post-featured-image img {
    width: 72px !important;
    height: 56px !important;
  }
}

/* ── Mobile UX: search results excerpt truncation ────────────────────────────
 *
 * The search results page shows the full meta_description as an excerpt,
 * which runs long and truncates mid-word on mobile. Limit excerpt to 3 lines
 * with an ellipsis so it reads cleanly rather than cutting off abruptly.
 * The title and date remain fully visible above it.
 */
@media (max-width: 600px) {
  body.search .wp-block-post-excerpt__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ── Related Research — Phase 2 (3.29.142) ──────────────────────────────────
 *
 * Micro-summaries and "Related in [Category]" labels added in Phase 2.
 * Layout per AI ruling (Marketing + Architect, 2026-04-06):
 *   title → excerpt → label
 * The label below the excerpt reads as navigation, not a taxonomy tag.
 *
 * CSS line-clamp on excerpt (Evaluator + Architect ruling):
 *   Clamp to 2 lines visually — no PHP truncation. Preserves semantic text,
 *   avoids mid-word cuts, easy to tune later.
 */
.oap-related-research ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.oap-related-research li {
  margin-bottom: 1.25em;
  padding-bottom: 1.25em;
  border-bottom: 1px solid #e5e7eb;
}

.oap-related-research li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.oap-related-title {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3em;
  text-decoration: none;
}

.oap-related-title:hover {
  text-decoration: underline;
}

.oap-related-excerpt {
  margin: 0 0 0.3em 0;
  font-size: 0.9em;
  line-height: 1.5;
  color: #4b5563;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Dark mode contrast fix: #4b5563 on #0f1115 = 2.5:1 (fails). #9ca3af = ≈7.6:1 (WCAG AA). */
@media (prefers-color-scheme: dark) {
  .oap-related-excerpt { color: #9ca3af; }
}

.oap-related-label {
  display: block;
  font-size: 0.8em;
  color: #6b7280;
  font-style: italic;
}

/* ── Plain subtitle — listing pages only (3.29.143) ─────────────────────────
 *
 * Displayed beneath the post title on archive, category, home, and search
 * pages. Not shown on article pages (the_excerpt filter guards is_singular()).
 *
 * Design (Marketing + Evaluator ruling, 2026-04-06):
 *  - Secondary text element — never a heading.
 *  - Visually subordinate to the title but distinct from the excerpt body.
 *  - Single line preferred; clamp at 2 lines for edge-case long subtitles.
 */
.oap-plain-subtitle {
  margin: 0.2em 0 0.6em 0;
  font-size: 0.9em;
  font-style: italic;
  color: #4b5563;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Dark mode contrast fix (3.29.296, WCAG AA):
 * #4b5563 on #0f1115 fails at 2.5:1 (required 4.5:1).
 * #9ca3af on #0f1115 passes at ~7.6:1. */
@media (prefers-color-scheme: dark) {
  .oap-plain-subtitle {
    color: #9ca3af;
  }
}

/* Hide subtitle in "More Posts" and other h3-level post-title contexts.
 * WHY: The subtitle's job is scan-orientation on listing pages. In h3
 * query loops (More Posts footer, sidebar widgets), the subtitle floats
 * in a flex row disconnected from its title — visual noise, not signal.
 * Main listing pages use h2 post-titles and are unaffected.
 * Marketing AI ruling 2026-04-07. Bridge extraction will handle this
 * properly via context-aware rendering post-bootstrap.
 */
h3.wp-block-post-title + .oap-plain-subtitle {
  display: none;
}

/* Key findings framing line (3.29.281) */
.oap-kt-framing {
  font-size: 0.9em;
  opacity: 0.7;
  margin: 0.25em 0 0.5em;
  font-style: italic;
}