/* ── Content-body fills its container ────────────────────────────────── */
/* content-body no longer constrains width — it fills the page-layout    */
.content-body {
  width: 100%;
}

/* ── Two-column article layout on desktop ────────────────────────────── */
.article-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "breadcrumbs"
    "article"
    "related"
    "back";
}

@media (min-width: 1024px) {
  .article-layout {
    grid-template-columns: 1fr 300px;
    column-gap: var(--space-10);
    align-items: start;
    grid-template-areas:
      "breadcrumbs breadcrumbs"
      "article     related"
      "back        back";
  }

  .article-layout .related-content {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
    overflow-y: auto;
    max-height: calc(100vh - var(--header-height) - var(--space-12));
  }
}

.article-layout .breadcrumbs-nav  { grid-area: breadcrumbs; }
.article-layout .article-body     { grid-area: article;     }
.article-layout .related-content  { grid-area: related;     }
.article-layout .back-link-wrap   { grid-area: back;        }

/* ── Heading styles within content ──────────────────────────────────── */
.content-body h1 {
  color: var(--color-primary);
  font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-5xl));
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 3px solid var(--color-surface-alt);
}

/* Gradient text on h1 — progressively enhanced */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .content-body h1 {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* standard fallback */
  }
}

.content-body h2 {
  color: var(--color-primary);
  font-size: clamp(var(--font-size-2xl), 3vw, var(--font-size-3xl));
  font-weight: 700;
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-surface-alt);
}

.content-body h3 {
  color: var(--color-primary-mid);
  font-size: clamp(var(--font-size-xl), 2.5vw, var(--font-size-2xl));
  font-weight: 700;
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.content-body h4 {
  color: var(--color-primary-mid);
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

/* ── Header-anchor symbol (#) — appears on hover ────────────────────── */
/* markdown-it-anchor linkInsideHeader appends a small <a class="header-anchor"># */
.content-body .header-anchor {
  display: inline-block;
  margin-left: 0.4em;
  font-size: 0.65em;
  font-weight: 400;
  color: var(--color-accent-light);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
  vertical-align: middle;
  line-height: 1;
  -webkit-text-fill-color: var(--color-accent-light); /* cancel gradient inside h1 */
}
.content-body :is(h1, h2, h3, h4):hover .header-anchor,
.content-body :is(h1, h2, h3, h4):focus-within .header-anchor {
  opacity: 1;
}

/* ── Lists inside content-body ───────────────────────────────────────── */

/* Unordered — accent dot bullet */
.content-body ul:not(.breadcrumbs, .related-list) {
  list-style: none;
  padding-left: 0;
  margin: var(--space-4) 0 var(--space-6);
}
.content-body ul:not(.breadcrumbs, .related-list) > li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
  line-height: var(--line-height-body);
}
.content-body ul:not(.breadcrumbs, .related-list) > li::before {
  content: "";
  position: absolute;
  left: var(--space-2);
  top: 0.65em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* Nested ul — smaller / lighter bullet */
.content-body ul:not(.breadcrumbs) ul > li::before {
  width: 5px;
  height: 5px;
  background: var(--color-accent-pale);
  top: 0.7em;
}

/* Ordered — indigo numbered marker */
.content-body ol:not(.breadcrumbs) {
  list-style: none;
  padding-left: 0;
  counter-reset: ol-counter;
  margin: var(--space-4) 0 var(--space-6);
}
.content-body ol:not(.breadcrumbs) > li {
  position: relative;
  padding-left: calc(var(--space-8) + var(--space-2));
  margin-bottom: var(--space-4);
  counter-increment: ol-counter;
  line-height: var(--line-height-body);
}
.content-body ol:not(.breadcrumbs) > li::before {
  content: counter(ol-counter);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-mid) 100%);
  color: var(--color-white);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

/* Task-list specifics inside content — reset above list-none so checkboxes align */
.content-body li:has(> input[type="checkbox"]) {
  padding-left: 0;
}
.content-body li:has(> input[type="checkbox"])::before {
  display: none;
}

/* ── Code blocks ─────────────────────────────────────────────────────── */
pre[class*="language-"] {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-strong);
  margin: var(--space-6) 0;
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}

/* ── Copy button ─────────────────────────────────────────────────────── */
.copy-btn {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: rgba(26, 35, 126, 0.08);
  color: var(--color-primary-mid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  z-index: 10;
  letter-spacing: 0.04em;
}
.copy-btn:hover {
  background: var(--color-surface-alt);
  color: var(--color-primary);
  border-color: var(--color-accent);
}
.copy-btn.copied {
  background: #e8f5e9;
  color: #2e7d32;
  border-color: #a5d6a7;
}

/* ── Mermaid diagrams ────────────────────────────────────────────────── */
pre.mermaid {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  overflow-x: auto;
}
pre.mermaid svg { max-width: 100%; height: auto; }

/* ── FAQ Accordions ──────────────────────────────────────────────────── */
.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-6) 0;
}
.accordion-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-xs);
}
.accordion-item[open] { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.accordion-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  list-style: none;
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(90deg, var(--color-surface) 0%, var(--color-bg) 100%);
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary);
  transition: background var(--transition-fast);
  user-select: none;
}
.accordion-question::-webkit-details-marker { display: none; }
.accordion-question::after {
  content: "›";
  font-size: 1.3em;
  color: var(--color-accent);
  transform: rotate(90deg);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
  display: inline-block;
}
.accordion-item[open] .accordion-question::after { transform: rotate(-90deg); }
.accordion-question:hover { background: var(--color-surface-alt); }
.accordion-answer {
  padding: var(--space-5);
  border-top: 1px solid var(--color-border);
  line-height: var(--line-height-body);
}
.accordion-answer p:last-child { margin-bottom: 0; }

/* ── Home page ───────────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-mid) 55%, var(--color-accent) 100%);
  color: var(--color-white);
  padding: var(--space-20) var(--space-6);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(255,255,255,0.08)'/%3E%3C/svg%3E") center/60px;
  pointer-events: none;
}
.hero-inner { position: relative; max-width: 800px; margin: 0 auto; }
.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-5);
  line-height: 1.15;
  color: var(--color-white);
}
.hero-subtitle {
  font-size: clamp(var(--font-size-lg), 2.5vw, var(--font-size-xl));
  opacity: 0.88;
  margin: 0 0 var(--space-10);
  line-height: 1.55;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 1.75rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition-fast);
  border: 2px solid transparent;
}
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); text-decoration: none; filter: brightness(1.08); }
.cta-btn--primary  { background: var(--color-white); color: var(--color-primary); }
.cta-btn--secondary { background: rgba(255,255,255,0.15); color: var(--color-white); border-color: rgba(255,255,255,0.4); }
.cta-btn--tertiary  { background: rgba(41,182,246,0.2);  color: var(--color-white); border-color: rgba(41,182,246,0.5); }
.cta-icon { font-size: 1.25em; line-height: 1; }

.home-intro { max-width: var(--content-max-width); margin: 0 auto; padding: var(--space-16) var(--space-6); }
.home-intro-text { max-width: 820px; margin: 0 auto var(--space-12); text-align: center; }
.home-intro-text p { font-size: var(--font-size-lg); color: var(--color-text-muted); line-height: 1.8; }
.home-pillars-heading {
  text-align: center;
  font-size: clamp(var(--font-size-xl), 3vw, var(--font-size-3xl));
  color: var(--color-primary);
  margin-bottom: var(--space-8);
}
.home-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
  overflow: hidden;
}
.home-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--card-color-a, var(--color-primary)) 0%, var(--card-color-b, var(--color-accent)) 100%);
}
.home-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--color-accent); text-decoration: none; }
.home-card-icon  { font-size: 2.5rem; margin-bottom: var(--space-4); line-height: 1; }
.home-card-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--color-primary); margin: 0 0 var(--space-3); }
.home-card-desc  { font-size: var(--font-size-base); color: var(--color-text-muted); flex: 1; margin: 0 0 var(--space-5); line-height: 1.65; }
.home-card-cta   { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-accent); display: flex; align-items: center; gap: var(--space-2); }
.home-card:hover .home-card-cta { gap: var(--space-3); }