/*
 * article.css — Asherfield article shell
 *
 * Matches the homepage 3-column grid (200px left | 1fr center | 260px right).
 * All values use CSS custom properties from ash-tokens.css — no hardcoded hex.
 * Fallback values are provided inside var() for safety.
 *
 * Body class .ash-article-page resets the Blocksy theme container so the
 * full-width grid can render correctly, identical to .ash-hp-page on the homepage.
 */

/* ── Theme container reset ───────────────────────────────────────────────── */

body.ash-article-page .entry-content,
body.ash-article-page .page-content,
body.ash-article-page .content-area,
body.ash-article-page .ct-container,
body.ash-article-page .ct-main-content-container,
body.ash-article-page .site-content,
body.ash-article-page .wp-block-post-content {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important;
  width: 100% !important;
}

/* ── Theme H1 + post meta suppression ────────────────────────────────────── */
/* Plugin renders its own H1 inside the shell. Theme title would duplicate it. */

body.ash-article-page .entry-title,
body.ash-article-page .page-title {
  display: none !important;
}

body.ash-article-page .entry-meta,
body.ash-article-page .entry-footer,
body.ash-article-page .post-meta,
body.ash-article-page .ct-post-meta {
  display: none !important;
}

/* ── Admin bar offset ────────────────────────────────────────────────────── */

:root {
  --admin-bar: var(--wp-admin--admin-bar--height, 0px);
  --ash-article-left-w:   200px;
  --ash-article-right-w:  260px;
  --ash-article-body-max: 680px;
}

/* ── 3-column shell ──────────────────────────────────────────────────────── */

.ash-article-shell {
  display: grid;
  grid-template-columns: var(--ash-article-left-w) minmax(0, 1fr) var(--ash-article-right-w);
  grid-template-areas: "left center right";
  align-items: start;
  min-height: 60vh;
  width: 100%;
  background: var(--background, #faf9f5);
  color: var(--foreground, #3d3929);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* Grid collapses when rails are disabled via data attributes */
.ash-article-shell[data-no-left-rail] {
  grid-template-columns: 0 minmax(0, 1fr) var(--ash-article-right-w);
}

.ash-article-shell[data-no-right-rail] {
  grid-template-columns: var(--ash-article-left-w) minmax(0, 1fr) 0;
}

.ash-article-shell[data-no-left-rail][data-no-right-rail] {
  grid-template-columns: 0 minmax(0, 1fr) 0;
}

/* ── Left rail — table of contents + cluster nav ─────────────────────────── */

.ash-article-rail--left {
  grid-area: left;
  position: sticky;
  top: calc(var(--admin-bar) + 32px);
  max-height: calc(100vh - var(--admin-bar) - 64px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 32px 16px 32px 24px;
  border-right: 1px solid var(--border, #dad9d4);
  background: var(--sidebar, #f5f4ee);
  scrollbar-width: none;
  align-self: start;
}

.ash-article-rail--left::-webkit-scrollbar { display: none; }

/* Hidden when shell carries data-no-left-rail */
.ash-article-shell[data-no-left-rail] .ash-article-rail--left {
  display: none;
}

/* TOC section label */
.ash-article-toc__head,
.ash-article-cluster-nav__head,
.ash-article-left-pages__head {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground, #7a7568);
  margin: 0 0 12px;
}

.ash-article-toc__list,
.ash-article-cluster-nav__list,
.ash-article-left-pages__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ash-article-toc__link,
.ash-article-cluster-nav__link,
.ash-article-left-pages__link {
  display: block;
  padding: 6px 10px;
  border-radius: var(--radius-sm, 6px);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sidebar-foreground, #3d3d3a);
  text-decoration: none;
  line-height: 1.4;
  transition: background 0.12s, color 0.12s;
}

.ash-article-toc__link:hover,
.ash-article-cluster-nav__link:hover,
.ash-article-left-pages__link:hover {
  background: var(--sidebar-accent, #e9e6dc);
  color: var(--sidebar-accent-foreground, #28261b);
}

.ash-article-toc__link--active {
  background: var(--sidebar-accent, #e9e6dc);
  color: var(--ash-ring, #c96442);
  font-weight: 600;
}

/* H3 sub-items in TOC — indented */
.ash-article-toc__link--h3 {
  padding-left: 20px;
  font-weight: 400;
  font-size: 0.75rem;
}

/* Current article in cluster nav — active state */
.ash-article-cluster-nav__link--current {
  color: var(--ash-ring, #c96442);
  font-weight: 600;
  pointer-events: none;
}

/* Cluster nav article type badge */
.ash-article-cluster-nav__type {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground, #7a7568);
  background: var(--border, #dad9d4);
  border-radius: var(--radius-full, 9999px);
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Left rail section divider */
.ash-article-rail-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border, #dad9d4);
}

/* ── Center column — article body ────────────────────────────────────────── */

.ash-article-body {
  grid-area: center;
  padding: 40px 48px 60px;
  max-width: var(--ash-article-body-max);
}

/* Plugin-rendered H1 */
.ash-article-h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.625rem, 3.5vw, 2.25rem);
  line-height: 1.2;
  color: var(--foreground, #3d3929);
  margin: 0 0 12px;
  text-wrap: balance;
}

/* Author + last-updated row */
.ash-article-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border, #dad9d4);
}

.ash-article-byline__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full, 9999px);
  object-fit: cover;
  flex-shrink: 0;
}

.ash-article-byline__avatar--fallback {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full, 9999px);
  background: var(--muted, #ede9de);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted-foreground, #7a7568);
}

.ash-article-byline__meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ash-article-byline__author {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground, #3d3929);
  line-height: 1.3;
}

.ash-article-byline__date {
  font-size: 0.75rem;
  color: var(--muted-foreground, #7a7568);
  line-height: 1.3;
}

/* ── Shared heading treatment for all headings in body ───────────────────── */

.ash-article-body h1,
.ash-article-body h2,
.ash-article-body h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.25;
  color: var(--foreground, #3d3929);
  text-wrap: balance;
}

/* ── Gutenberg native table ──────────────────────────────────────────────── */

.ash-article-body table,
.ash-article-body .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 32px 0;
}

.ash-article-body th {
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground, #7a7568);
  border-bottom: 2px solid var(--border, #dad9d4);
  padding: 10px 14px;
}

.ash-article-body td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #dad9d4);
  color: var(--foreground, #3d3929);
  vertical-align: top;
}

.ash-article-body tr:last-child td {
  border-bottom: none;
}

.ash-article-body .wp-block-table {
  overflow-x: auto;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border, #dad9d4);
}

/* ── Gutenberg pullquote ─────────────────────────────────────────────────── */

.ash-article-body .wp-block-pullquote,
.ash-article-body blockquote.wp-block-pullquote {
  border: none;
  border-left: 3px solid var(--ash-ring, #c96442);
  background: var(--ash-ring-tint, #fef6f2);
  border-radius: 0 var(--radius-md, 10px) var(--radius-md, 10px) 0;
  margin: 32px 0;
  padding: 20px 24px;
}

.ash-article-body .wp-block-pullquote p,
.ash-article-body .wp-block-pullquote blockquote p {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.45;
  color: var(--foreground, #3d3929);
  margin: 0;
  font-style: normal;
}

.ash-article-body .wp-block-pullquote cite {
  display: block;
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--muted-foreground, #7a7568);
  font-style: normal;
}

/* ── Right rail — CTA card + related + resources ──────────────────────────── */

.ash-article-rail--right {
  grid-area: right;
  position: sticky;
  top: calc(var(--admin-bar) + 32px);
  max-height: calc(100vh - var(--admin-bar) - 64px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 32px 20px 32px 16px;
  border-left: 1px solid var(--border, #dad9d4);
  scrollbar-width: none;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ash-article-rail--right::-webkit-scrollbar { display: none; }

/* Hidden when shell carries data-no-right-rail */
.ash-article-shell[data-no-right-rail] .ash-article-rail--right {
  display: none;
}

/* Right rail CTA card */
.ash-article-rail-cta {
  background: var(--ash-ring-tint, #fef6f2);
  border: 1px solid rgba(201, 100, 66, 0.18);
  border-radius: var(--radius-md, 10px);
  padding: 18px 16px;
}

.ash-article-rail-cta__hed {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--foreground, #3d3929);
  margin: 0 0 12px;
}

/* Right rail link sections */
.ash-article-rail-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ash-article-rail-links__hed {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-foreground, #7a7568);
  margin: 0 0 8px;
}

.ash-article-rail-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ash-article-rail-links a {
  display: block;
  padding: 5px 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--foreground, #3d3929);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.12s;
}

.ash-article-rail-links a:hover {
  color: var(--ash-ring, #c96442);
}

.ash-article-rail-links--ext a {
  color: var(--muted-foreground, #7a7568);
}

.ash-article-resources__pub {
  font-size: 0.75rem;
  color: var(--muted-foreground, #7a7568);
}

/* Right rail — related tools */
.ash-article-rail-tools {}

.ash-article-rail-tools__hed {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-foreground, #7a7568);
  margin: 0 0 8px;
}

.ash-article-rail-tools ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ash-article-rail-tools a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--background, #faf9f5);
  border: 1px solid var(--border, #dad9d4);
  border-radius: var(--radius-sm, 6px);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--foreground, #3d3929);
  text-decoration: none;
  transition: border-color 0.12s, color 0.12s;
}

.ash-article-rail-tools a:hover {
  border-color: var(--ash-ring, #c96442);
  color: var(--ash-ring, #c96442);
}

/* Sponsor wrapper — ensures disclosure label is always present */
.ash-article-sponsor-wrap {
  position: relative;
}

.ash-article-sponsor-wrap:has(.ash-sponsor-inset)::before {
  content: 'Sponsored';
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-foreground, #7a7568);
  margin-bottom: 6px;
}

/* ── CTA button — shared ─────────────────────────────────────────────────── */

.ash-article-cta {
  display: inline-block;
  padding: 12px 28px;
  border-radius: var(--radius-md, 10px);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s;
}

.ash-article-cta--primary  {
  background: var(--ash-ring, #c96442);
  color: #fff;
}

.ash-article-cta--primary:hover {
  background: var(--chart-1, #b05730);
  color: #fff;
}

.ash-article-cta--secondary {
  background: var(--foreground, #3d3929);
  color: #fff;
}

.ash-article-cta--secondary:hover {
  background: var(--ash-near-black, #141413);
  color: #fff;
}

/* Full-width variant in right rail */
.ash-article-cta--full {
  display: block;
  text-align: center;
  padding-left: 16px;
  padding-right: 16px;
}

/* Inline block in content (from shortcode or mobile inserts) */
.ash-article-cta-block {
  background: var(--background, #faf9f5);
  border: 1px solid var(--border, #dad9d4);
  border-radius: var(--radius-md, 10px);
  padding: 24px 20px;
  margin: 36px 0;
  text-align: center;
}

/* ── Article body components ─────────────────────────────────────────────── */

.ash-article-figure {
  margin: 32px 0;
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  border: 1px solid var(--border, #dad9d4);
}

.ash-article-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.ash-article-figure figcaption {
  padding: 10px 16px;
  font-size: 0.8125rem;
  color: var(--muted-foreground, #7a7568);
  background: var(--muted, #ede9de);
  border-top: 1px solid var(--border, #dad9d4);
  line-height: 1.45;
}

.ash-article-callout {
  background: var(--muted, #ede9de);
  border: 1px solid var(--border, #dad9d4);
  border-radius: var(--radius-md, 10px);
  padding: 16px 20px;
  margin: 20px 0;
}

.ash-article-callout p {
  margin: 0;
  color: var(--foreground, #3d3929);
  font-size: 0.9rem;
  line-height: 1.6;
}

.ash-article-callout p + p {
  margin-top: 8px;
}

.ash-article-callout strong:first-child {
  display: block;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--foreground, #3d3929);
  margin-bottom: 8px;
}

.ash-article-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}

@media (max-width: 599px) {
  .ash-article-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ── Intro summary ───────────────────────────────────────────────────────── */

.ash-article-intro {
  background: var(--ash-ring-tint, #fef6f2);
  border: 1px solid rgba(201, 100, 66, 0.18);
  padding: 16px 20px;
  margin-bottom: 28px;
  border-radius: var(--radius-md, 10px);
}

.ash-article-intro p {
  margin: 0;
  color: var(--foreground, #3d3929);
  font-size: 1rem;
  line-height: 1.65;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */

.ash-article-faq { margin: 40px 0; }

.ash-article-faq h2 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--foreground, #3d3929);
  margin: 0 0 16px;
}

.ash-article-faq dl { margin: 0; }

.ash-article-faq__item {
  border: 1px solid var(--border, #dad9d4);
  border-radius: var(--radius-sm, 6px);
  padding: 14px 18px;
  margin-bottom: 8px;
  background: var(--card, #faf9f5);
}

.ash-article-faq dt {
  font-weight: 600;
  color: var(--foreground, #3d3929);
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.ash-article-faq dd {
  margin: 0;
  color: var(--muted-foreground, #7a7568);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ── Author / editorial note ─────────────────────────────────────────────── */

.ash-article-author {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border, #dad9d4);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.ash-article-author__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full, 9999px);
  object-fit: cover;
  flex-shrink: 0;
}

.ash-article-author__avatar--fallback {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full, 9999px);
  background: var(--muted, #ede9de);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--muted-foreground, #7a7568);
}

.ash-article-author__body {}

.ash-article-author__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-foreground, #7a7568);
  margin: 0 0 2px;
}

.ash-article-author__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground, #3d3929);
  margin: 0 0 6px;
}

.ash-article-author__note {
  font-size: 0.875rem;
  color: var(--muted-foreground, #7a7568);
  line-height: 1.55;
  margin: 0;
}

/* ── Mobile inserts (shown only when rails are hidden) ───────────────────── */

/* Desktop: hide mobile inserts; show rails */
@media (min-width: 900px) {
  .ash-article-mobile-inserts { display: none; }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 899px) {
  .ash-article-shell {
    display: block;
  }

  .ash-article-rail {
    display: none;
  }

  .ash-article-body {
    padding: 24px 20px 48px;
    max-width: 100%;
  }

  /* Mobile H1 responsive size */
  .ash-article-h1 {
    font-size: clamp(1.375rem, 6vw, 1.75rem);
  }

  .ash-article-mobile-inserts {
    display: block;
  }

  /* Mobile cluster nav — horizontal scroll strip */
  .ash-article-mobile-cluster {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    margin: 0 -20px 24px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .ash-article-mobile-cluster::-webkit-scrollbar { display: none; }

  .ash-article-mobile-cluster a {
    flex-shrink: 0;
    display: inline-block;
    padding: 6px 14px;
    background: var(--background, #faf9f5);
    border: 1px solid var(--border, #dad9d4);
    border-radius: var(--radius-full, 9999px);
    font-size: 0.8125rem;
    color: var(--foreground, #3d3929);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
  }

  .ash-article-mobile-cluster a.is-current {
    border-color: var(--ash-ring, #c96442);
    color: var(--ash-ring, #c96442);
    font-weight: 600;
  }

  /* Mobile: related links as pills */
  .ash-article-related ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .ash-article-related a {
    display: inline-block;
    padding: 6px 14px;
    background: var(--background, #faf9f5);
    border: 1px solid var(--border, #dad9d4);
    border-radius: var(--radius-full, 9999px);
    font-size: 0.875rem;
    color: var(--foreground, #3d3929);
    text-decoration: none;
    font-weight: 500;
  }

  /* Mobile: tools as pills */
  .ash-article-mobile-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0;
  }

  .ash-article-mobile-tools a {
    display: inline-block;
    padding: 6px 14px;
    background: var(--background, #faf9f5);
    border: 1px solid var(--border, #dad9d4);
    border-radius: var(--radius-full, 9999px);
    font-size: 0.875rem;
    color: var(--foreground, #3d3929);
    text-decoration: none;
    font-weight: 500;
  }
}

/* ── TOC scroll-spy via JS class ─────────────────────────────────────────── */

/* Active state set by scroll-spy script in ArticleContentInjector output */

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ash-article-cta,
  .ash-article-toc__link,
  .ash-article-rail-links a,
  .ash-article-rail-tools a { transition: none; }
}