/* ==========================================================================
   site.css  (DiagDebug PNW chapter overrides)
   Layered on top of diagdebug-base.v1.css. Keep this file small: anything
   reusable by other chapters belongs in the base stylesheet on diagdebug.com,
   not here. No em dashes anywhere in this file.
   ========================================================================== */

/* --- Chapter brand affordance in the nav ---------------------------------- */

.dd-nav__chapter-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dd-muted);
  border: 1px solid var(--dd-border);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: var(--dd-space-2);
}

/* The "network" link that points back to the umbrella site. */
.dd-nav__network {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--dd-red-hover) !important;
  font-weight: 600 !important;
}

.dd-nav__network::after {
  content: "\2197"; /* north-east arrow, marks an off-site link */
  font-size: 0.85em;
}

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

.dd-hero {
  padding-block: var(--dd-space-8) var(--dd-space-7);
  border-bottom: 1px solid var(--dd-border);
  background:
    radial-gradient(1200px 420px at 85% -10%, rgba(204, 0, 0, 0.08), transparent 60%),
    var(--dd-bg);
}

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

.dd-hero__region {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dd-red-hover);
  margin-bottom: var(--dd-space-3);
}

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

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

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

/* --- 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; }

/* --- Steps / value props -------------------------------------------------- */

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

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

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

/* --- Luma calendar embed -------------------------------------------------- */

.dd-luma-embed {
  width: 100%;
  min-height: 640px;
  border: 1px solid var(--dd-border);
  border-radius: var(--dd-radius);
  background: var(--dd-surface);
}

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

.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); }