/**
 * @file
 * Editorial content-page layout and typography.
 *
 * Covers the .np-content-page wrapper used by node--full.html.twig for
 * informational / legacy node types (page, faq, resource, site_news, etc.).
 *
 * Per DESIGN.md governing_principle: "Expressive frame, calm page."
 * These are calm_required_in surfaces — no entrance header, no spotlight
 * cards, no atmospheric effects. White field, Charter prose, hairline rule.
 *
 * Token references (from tokens.css):
 *   --np-container-narrow  720px
 *   --np-measure-prose     65ch
 *   --np-font-serif        Charter stack
 *   --np-font-sans         system sans
 *   --np-text-primary      #1A1A1A
 *   --np-text-secondary    #5F5E5A
 *   --np-text-tertiary     #888780
 *   --np-color-accent      #D85A30  persimmon
 *   --np-border-hairline   0.5px
 *   --np-border-tertiary   rgba(0,0,0,0.15)
 *   --np-space-*           4px grid
 */

/* ─── 1. Outer layout column ─────────────────────────────────────────── */

.np-content-page {
  background: var(--np-bg-primary);
}

.np-content-page__inner {
  max-width: var(--np-container-narrow);   /* 720px — narrow long-form column */
  margin: 0 auto;
  padding: var(--np-space-12) var(--np-space-5) var(--np-space-16);
}

@media (max-width: 767px) {
  .np-content-page__inner {
    padding-top: var(--np-space-8);
    padding-bottom: var(--np-space-12);
  }
}

/* ─── 2. Title block ─────────────────────────────────────────────────── */

.np-content-page__header {
  margin-bottom: var(--np-space-8);
}

.np-content-page__title {
  font-family: var(--np-font-serif);
  font-weight: var(--np-weight-regular);   /* serif single weight — no synthesis */
  font-style: normal;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: var(--np-leading-tight);    /* 1.2 */
  letter-spacing: var(--np-tracking-snug); /* -0.01em */
  color: var(--np-text-primary);
  margin: 0 0 var(--np-space-4);
  font-feature-settings: "kern", "liga", "onum";
  font-synthesis: none;
}

/* Persimmon hairline rule — structural, not decorative. DESIGN.md notes:
   "structural.rule" = persimmon; echoes the logo mark at editorial scale. */
.np-content-page__rule {
  height: 0;
  border: none;
  border-top: var(--np-border-hairline) solid var(--np-color-accent);
  margin: 0 0 var(--np-space-5);
}

/* Optional dek — italic Charter, text.secondary, ~16px. Renders only when
   has_summary is TRUE (body.summary or field_summary is non-empty). */
.np-content-page__dek {
  font-family: var(--np-font-serif);
  font-style: italic;
  font-weight: var(--np-weight-regular);
  font-size: var(--np-text-base);          /* 16px */
  line-height: var(--np-leading-relaxed);  /* 1.65 */
  color: var(--np-text-secondary);
  margin: 0;
  max-width: var(--np-measure-aside);      /* 55ch — narrower than prose, editorial */
  font-feature-settings: "kern", "liga", "onum";
  font-synthesis: none;
}

/* ─── 3. Body prose container ────────────────────────────────────────── */

/* .np-prose is the existing convention (see reading.css); body content
   inside this wrapper inherits Charter and the italic register. */
.np-content-page__body {
  font-family: var(--np-font-serif);
  font-weight: var(--np-weight-regular);
  font-size: var(--np-text-base);          /* 16px — comfortable editorial body */
  line-height: var(--np-leading-relaxed);  /* 1.65 */
  color: var(--np-text-primary);
  font-feature-settings: "kern", "liga", "onum";
  font-synthesis: none;
}

/* Prose measure — only running text, not cards / metadata. */
.np-content-page__body > .text-formatted,
.np-content-page__body > .field--type-text-with-summary,
.np-content-page__body > .field--type-text-long,
.np-content-page__body .field__item {
  max-width: var(--np-measure-prose);      /* 65ch — DESIGN.md typography.measure.prose */
}

/* Paragraph rhythm */
.np-content-page__body p {
  margin: 0 0 var(--np-space-4);
}

.np-content-page__body p:last-child {
  margin-bottom: 0;
}

/* Headings inside body — Charter at content scale, never bold per DESIGN.md. */
.np-content-page__body h2 {
  font-family: var(--np-font-serif);
  font-weight: var(--np-weight-regular);
  font-size: var(--np-text-xl);            /* 24px */
  line-height: var(--np-leading-snug);
  letter-spacing: var(--np-tracking-snug);
  color: var(--np-text-primary);
  margin: var(--np-space-8) 0 var(--np-space-4);
  font-feature-settings: "kern", "liga", "onum";
  font-synthesis: none;
}

.np-content-page__body h3 {
  font-family: var(--np-font-serif);
  font-weight: var(--np-weight-regular);
  font-size: var(--np-text-lg);            /* 20px */
  line-height: var(--np-leading-snug);
  color: var(--np-text-primary);
  margin: var(--np-space-6) 0 var(--np-space-3);
  font-feature-settings: "kern", "liga", "onum";
  font-synthesis: none;
}

.np-content-page__body h4 {
  font-family: var(--np-font-sans);
  font-weight: var(--np-weight-medium);
  font-size: var(--np-text-base);
  color: var(--np-text-primary);
  margin: var(--np-space-5) 0 var(--np-space-2);
}

/* Lists — proper spacing and hanging indent for future authored content.
   The asterisk-prefix legacy issue is a content problem, not a template one;
   these rules ensure correct-HTML list content renders well. */
.np-content-page__body ul,
.np-content-page__body ol {
  margin: 0 0 var(--np-space-4);
  padding-left: var(--np-space-6);
}

.np-content-page__body li {
  margin-bottom: var(--np-space-2);
  line-height: var(--np-leading-relaxed);
}

.np-content-page__body li:last-child {
  margin-bottom: 0;
}

/* Links — persimmon, inherited from chrome.css .main-content a. Stated here
   for clarity; the global rule handles the actual color. */
.np-content-page__body a {
  color: var(--np-text-link);
  text-decoration-line: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.np-content-page__body a:hover {
  color: var(--np-text-link-hover);
}

/* Blockquote — italic register per reading.css convention; just make sure
   the body container doesn't override or suppress it. */
.np-content-page__body blockquote {
  font-style: italic;
}

/* Tables — body-scale Charter with hairline borders. Legacy content uses
   tables for structured information on some pages. */
.np-content-page__body table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--np-space-6) 0;
  font-family: var(--np-font-sans);
  font-size: var(--np-text-sm);
  color: var(--np-text-primary);
}

.np-content-page__body th,
.np-content-page__body td {
  padding: var(--np-space-2) var(--np-space-3);
  border: var(--np-border-width) solid var(--np-border-tertiary);
  text-align: left;
}

.np-content-page__body th {
  font-family: var(--np-font-sans);
  font-weight: var(--np-weight-medium);
  background: var(--np-bg-secondary);
}

/* ─── 4. Forum comments block ────────────────────────────────────────── */
/* Forum nodes show their comment thread below the body. Other bundles
   suppress comments in the template. */

.np-content-page__forum-comments {
  margin-top: var(--np-space-12);
  padding-top: var(--np-space-6);
  border-top: var(--np-border-hairline) solid var(--np-border-tertiary);
}

/* ─── 5. Admin-only metadata footer ─────────────────────────────────── */
/* Visible only to administrator / director / trustee / cofounder roles.
   Sans, tertiary text, small — quiet and scannable, not decorative. */

.np-content-page__admin-footer {
  margin-top: var(--np-space-12);
  padding-top: var(--np-space-5);
  border-top: var(--np-border-hairline) solid var(--np-border-tertiary);
}

.np-content-page__admin-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--np-space-4);
  row-gap: var(--np-space-1);
  font-family: var(--np-font-sans);
  font-size: var(--np-text-xs);            /* 12px — quiet, not competing */
  color: var(--np-text-tertiary);
  margin: 0;
}

.np-content-page__admin-meta dt {
  font-weight: var(--np-weight-medium);
  color: var(--np-text-secondary);
}

.np-content-page__admin-meta dd {
  margin: 0;
  color: var(--np-text-tertiary);
}

.np-content-page__admin-meta a {
  color: var(--np-text-tertiary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.np-content-page__admin-meta a:hover {
  color: var(--np-text-secondary);
}

/* ─── 6. Workshop node — metadata and participants ───────────────────── */

/*
 * Workshop pages carry structured metadata fields (status, schedule,
 * duration, participant limit, skill level) before the body. These render
 * as Drupal field blocks inside .np-content-page__body with inline labels.
 *
 * Design intent (DESIGN.md):
 *   - Inline metadata uses sans-medium uppercase eyebrow label + value.
 *   - Each field row has its own line with adequate spacing.
 *   - Participants are a roster — inline comma-separated, not stacked.
 *   - Labels use text.tertiary; values use text.primary.
 *   - No weight higher than 500 (medium) per DESIGN.md weight discipline.
 */

/* Workshop metadata fields that use Drupal's "inline" label display.
   Selectors narrow to the workshop bundle to avoid bleeding into other types. */
.node--type-workshop.np-content-page .np-content-page__body .field--label-inline {
  display: flex;
  align-items: baseline;
  gap: var(--np-space-2);
  margin-bottom: var(--np-space-2);
  font-family: var(--np-font-sans);
  font-size: var(--np-text-sm);          /* 13px — metadata, not body prose */
  line-height: var(--np-leading-normal);
}

.node--type-workshop.np-content-page .np-content-page__body .field--label-inline .field__label {
  font-family: var(--np-font-sans);
  font-size: 13px;
  font-weight: var(--np-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--np-tracking-wide);  /* 0.08em — section_eyebrow spec */
  color: var(--np-text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

.node--type-workshop.np-content-page .np-content-page__body .field--label-inline .field__items,
.node--type-workshop.np-content-page .np-content-page__body .field--label-inline .field__item {
  font-family: var(--np-font-sans);
  font-size: var(--np-text-sm);
  font-weight: var(--np-weight-regular);
  color: var(--np-text-primary);
}

/* Unlink taxonomy labels on workshop metadata fields. Drupal renders them as
   <a href="/taxonomy/..."> by default; we want plain text for status / level. */
.node--type-workshop.np-content-page .np-content-page__body .field--name-field-workshopstatus a,
.node--type-workshop.np-content-page .np-content-page__body .field--name-field-workshoplevel a {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}

/* "above" label fields (e.g. Participants heading) get eyebrow treatment */
.node--type-workshop.np-content-page .np-content-page__body .field--label-above > .field__label {
  font-family: var(--np-font-sans);
  font-size: 13px;
  font-weight: var(--np-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--np-tracking-wide);
  color: var(--np-text-tertiary);
  margin-bottom: var(--np-space-1);
}

/* After the skill level field, add breathing room before participants */
.node--type-workshop.np-content-page .np-content-page__body .field--name-field-workshoplevel {
  margin-bottom: var(--np-space-4);
}

/* Participants — roster as inline comma-separated list, not a stack of blocks.
   Each .field__item holds one linked username. Commas are CSS-generated so
   the markup stays clean and screen readers skip them. */
.node--type-workshop.np-content-page .np-content-page__body .field--name-field-workshopparticipants {
  margin-bottom: var(--np-space-6);
  padding-bottom: var(--np-space-5);
  border-bottom: 0.5px solid var(--np-border-tertiary);
}

.node--type-workshop.np-content-page .np-content-page__body .field--name-field-workshopparticipants .field__items {
  display: inline;
}

.node--type-workshop.np-content-page .np-content-page__body .field--name-field-workshopparticipants .field__item {
  display: inline;
  font-family: var(--np-font-sans);
  font-size: var(--np-text-sm);
  color: var(--np-text-primary);
}

/* Comma after each participant except the last */
.node--type-workshop.np-content-page .np-content-page__body .field--name-field-workshopparticipants .field__item:not(:last-child)::after {
  content: ",";
  margin-right: var(--np-space-1);
  color: var(--np-text-tertiary);
}

/* Participant links — persimmon at sm size keeps them as roster metadata */
.node--type-workshop.np-content-page .np-content-page__body .field--name-field-workshopparticipants a {
  color: var(--np-text-link);
  text-decoration: none;
}

.node--type-workshop.np-content-page .np-content-page__body .field--name-field-workshopparticipants a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Body text block on workshop pages — standard prose,
   slightly more space above to clear the metadata/participants hairline. */
.node--type-workshop.np-content-page .np-content-page__body .field--name-body {
  margin-top: var(--np-space-6);
}

/* Workshop comments block */
.np-content-page__workshop-comments {
  margin-top: var(--np-space-12);
  padding-top: var(--np-space-6);
  border-top: 0.5px solid var(--np-border-tertiary);
}

/* ─── 7. Dark mode ───────────────────────────────────────────────────── */
/* Tokens handle color inversion automatically via tokens.css @media block.
   No overrides needed here — the token layer is the source of truth. */

/* ─── 8. Unpublished state ───────────────────────────────────────────── */
.node--unpublished.np-content-page {
  border-left: var(--np-border-width-rail) solid var(--np-color-amber);
  padding-left: var(--np-space-4);
}