/* ==========================================================================
   site.css
   Styles specific to diagdebug.com (the umbrella site). Anything reusable by
   chapter sites belongs in diagdebug-base.v1.css, not here.
   No em dashes anywhere in this file.
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------- */

.dd-hero {
  padding: 108px 0 96px;
  border-bottom: 1px solid var(--dd-border);
  text-align: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% -10%, var(--dd-red-tint) 0%, transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, var(--dd-bg-soft) 100%);
}

.dd-hero .dd-eyebrow { justify-content: center; }

.dd-hero__title {
  max-width: 20ch;
  margin-inline: auto;
}

.dd-hero .dd-lead {
  margin-inline: auto;
}

.dd-hero__name-note {
  font-family: var(--dd-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--dd-muted);
  max-width: 64ch;
  margin: var(--dd-space-4) auto 0;
}

.dd-hero__name-note code {
  color: var(--dd-text);
  background: #fff;
  border: 1px solid var(--dd-border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.95em;
}

.dd-hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--dd-space-3);
  margin-top: var(--dd-space-6);
}

/* --- How the network works ------------------------------------------------ */

.dd-steps {
  display: grid;
  gap: var(--dd-space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  counter-reset: dd-step;
}

.dd-step {
  background: var(--dd-surface);
  border: 1px solid var(--dd-border);
  border-radius: var(--dd-radius);
  padding: var(--dd-space-5);
}

.dd-step__num {
  counter-increment: dd-step;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(204, 0, 0, 0.12);
  color: var(--dd-red-hover);
  font-weight: 700;
  margin-bottom: var(--dd-space-3);
}

.dd-step__num::before { content: counter(dd-step); }

.dd-step h3 { margin-bottom: var(--dd-space-2); }

/* --- Section headers ------------------------------------------------------ */

.dd-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dd-space-3);
  margin-bottom: var(--dd-space-6);
}

.dd-section-head h2 { margin: 0; }

.dd-section-head a {
  color: var(--dd-red-hover);
  font-weight: 600;
  font-size: 0.95rem;
}

.dd-section-head a:hover { text-decoration: underline; }

/* --- Directory controls --------------------------------------------------- */

.dd-controls {
  display: grid;
  gap: var(--dd-space-4);
  grid-template-columns: 2fr 1fr 1fr;
  align-items: end;
  margin-bottom: var(--dd-space-6);
}

@media (max-width: 720px) {
  .dd-controls { grid-template-columns: 1fr; }
}

.dd-controls__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--dd-space-2);
  color: var(--dd-muted);
  font-size: 0.9rem;
  margin-bottom: var(--dd-space-5);
}

.dd-controls__toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--dd-red);
}

.dd-result-count {
  color: var(--dd-muted);
  font-size: 0.9rem;
  margin-bottom: var(--dd-space-4);
}

/* --- Resource download cards ---------------------------------------------- */

.dd-resource {
  display: flex;
  flex-direction: column;
  gap: var(--dd-space-3);
}

.dd-resource__title { margin: 0; font-size: 1.15rem; }

.dd-resource__foot { margin-top: auto; padding-top: var(--dd-space-3); }

/* --- Page header (interior pages) ----------------------------------------- */

.dd-page-header {
  padding-block: var(--dd-space-7) var(--dd-space-6);
  border-bottom: 1px solid var(--dd-border);
}

/* --- Prose blocks --------------------------------------------------------- */

.dd-prose { max-width: 68ch; }
.dd-prose h2 { margin-top: var(--dd-space-7); }
.dd-prose h3 { margin-top: var(--dd-space-5); }
.dd-prose ul { padding-left: var(--dd-space-5); }
.dd-prose li { margin-bottom: var(--dd-space-2); }

/* --- Two-column split for start-a-chapter --------------------------------- */

.dd-provide-grid {
  display: grid;
  gap: var(--dd-space-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* --- Long-form documents (charter, playbook) ------------------------------ */

.dd-doc__updated {
  color: var(--dd-muted);
  font-size: 0.9rem;
  margin-top: var(--dd-space-2);
}

.dd-doc-meta {
  width: 100%;
  border-collapse: collapse;
  margin: var(--dd-space-5) 0 var(--dd-space-6);
  font-size: 0.95rem;
}

.dd-doc-meta th,
.dd-doc-meta td {
  text-align: left;
  padding: var(--dd-space-3) var(--dd-space-4);
  border: 1px solid var(--dd-border);
  vertical-align: top;
}

.dd-doc-meta th {
  width: 34%;
  background: var(--dd-surface);
  font-weight: 600;
}

.dd-toc {
  background: var(--dd-surface);
  border: 1px solid var(--dd-border);
  border-radius: var(--dd-radius);
  padding: var(--dd-space-4) var(--dd-space-5);
  margin-bottom: var(--dd-space-6);
}

.dd-toc h2 {
  font-size: 1rem;
  margin: 0 0 var(--dd-space-3);
}

.dd-toc ol {
  margin: 0;
  padding-left: var(--dd-space-5);
  color: var(--dd-muted);
}

.dd-toc a { color: var(--dd-red-hover); font-weight: 500; }
.dd-toc a:hover { text-decoration: underline; }

.dd-fillin {
  color: var(--dd-red-hover);
  font-style: italic;
}

/* Clean output when a chapter prints a document to PDF. */
@media print {
  .dd-nav,
  .dd-footer,
  .dd-skip-link,
  .dd-doc__print-note,
  .dd-toc {
    display: none !important;
  }
  body { background: #fff; color: #000; }
  .dd-page-header,
  .dd-section { padding-block: var(--dd-space-4); border: 0; }
  .dd-prose { max-width: none; }
  a { color: #000; text-decoration: underline; }
  .dd-doc-meta th { background: #fff; }
}