/* ============================================================
   A11yPath — Homepage, "Native-HTML Motif" direction
   Layered ON TOP of design-system.css. Uses its tokens (colours,
   fonts, spacing) and chrome (.site-header/.footer/.btn/.tag), and
   adds the motif: markup-as-ornament. All nh- prefixed so nothing
   collides with the existing pattern/guide/checklist pages.

   KEY CROSS-THEME RULE: code areas are ALWAYS dark in both themes
   (mirrors how design-system.css keeps <pre> dark). So syntax colours
   are FIXED here — they must not use --color-primary, which is dark
   plum in light mode and would disappear on a dark panel.
   ============================================================ */

:root {
  --nh-code-bg: #161020;
  --nh-code-text: #e7e0d4;
  --syn-tag:  #e89a7c;  /* element name — coral */
  --syn-attr: #b58fd6;  /* attribute — plum */
  --syn-str:  #8fce9b;  /* string / value — green */
  --syn-punc: #9a8caa;  /* < > / = punctuation */
  --syn-com:  #8a7ea0;  /* comment */
  --header-height: 4rem;  /* approx height of the sticky .site-header */
}

/* The site header is position:sticky, so in-page anchor jumps (TOC links,
   skip link) must land below it rather than under it. */
html {
  scroll-padding-top: calc(var(--header-height) + var(--space-md));
}

/* Syntax spans — used in hero panel and card code strips */
.tk { color: var(--syn-tag); }
.at { color: var(--syn-attr); }
.st { color: var(--syn-str); }
.pn { color: var(--syn-punc); }
.cm { color: var(--syn-com); }

/* The recurring mono "comment" voice that introduces sections */
.nh-comment {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-success);
  letter-spacing: 0.01em;
}

/* ---------- HERO ---------- */
.nh-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-3xl);
  align-items: center;
  padding-block: var(--space-3xl) var(--space-2xl);
}
.nh-hero__lead .nh-comment { margin-bottom: var(--space-md); }
.nh-hero h1 {
  font-size: clamp(2.75rem, 5vw, 4rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 0;
}
.nh-hero p {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin-top: var(--space-lg);
  max-width: 44ch;
}
.nh-hero__actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  flex-wrap: wrap;
}

/* Code panel (decorative — aria-hidden in the markup) */
.nh-codepanel {
  background: var(--nh-code-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.nh-codepanel__bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nh-codepanel__bar i {
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: #3a3050; display: inline-block;
}
.nh-codepanel__bar .nh-file {
  margin-left: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--syn-com);
}
.nh-codepanel pre {
  margin: 0;
  background: transparent;
  border-radius: 0;
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.85;
  color: var(--nh-code-text);
  overflow-x: auto;
}
.nh-codepanel pre .ln { display: block; }
.nh-codepanel pre .indent { padding-left: 1.5rem; }
.nh-codepanel pre .indent2 { padding-left: 3rem; }
.nh-codepanel pre .note { margin-top: 0.6rem; }

/* ---------- SECTION HEADERS ---------- */
.nh-section { margin-top: var(--space-3xl); }
.nh-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.nh-section__head .nh-titles .nh-comment { display: block; margin-bottom: var(--space-xs); }
.nh-section__head h2 { font-size: var(--text-3xl); margin: 0; }
.nh-section__head p {
  margin: var(--space-sm) 0 0;
  color: var(--color-text-secondary);
  max-width: 62ch;
}
.nh-section__head .nh-viewall { flex-shrink: 0; white-space: nowrap; }

/* ---------- CARD GRID ---------- */
.nh-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nh-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Faint resting shadow lifts cards off the page — matters most in the
     light/cream theme, where surface and bg are nearly the same value. */
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.nh-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Tinted label-strip "tab" for non-code cards (guides, checklists, related).
   Mirrors the dark code-strip's structure so every card has a defined top
   edge — fixes the light-theme blend where the body alone vanished into bg. */
.nh-labelstrip {
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  padding: 0.65rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--color-success);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nh-labelstrip .dim { color: var(--color-text-muted); }

/* Pattern cards: authentic dark code strip up top */
.nh-codestrip {
  background: var(--nh-code-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 0.7rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nh-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.nh-card__body > .nh-comment { margin-bottom: var(--space-sm); }
.nh-card h3 {
  font-size: var(--text-xl);
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-sm);
}
.nh-card h3 a {
  color: var(--color-text);
  text-decoration: none;
  /* Theme-switch instant: var() color changes don't reliably re-fire a
     CSS transition in Chromium, which can leave the title briefly stuck
     on the old theme's colour during a live toggle. Snap instead. */
  transition: none;
}
/* Stretched link — the whole card is clickable, one link only */
.nh-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.nh-card:hover h3 a { color: var(--color-primary); }
.nh-card p {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-md);
}

/* Mono attribute-style tags */
.nh-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  margin: auto 0 0;
  padding: 0;
}
.nh-mtag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 0.2em 0.6em;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}
.nh-mtag.is-native { color: var(--color-primary); }
.nh-mtag.is-aria { color: var(--color-accent); }
.nh-mtag.is-beginner { color: var(--color-success); }
.nh-mtag.is-intermediate { color: var(--color-warning); }
.nh-mtag.is-advanced { color: var(--color-error); }

/* "New" badge from main.js lands here (needs the .card hook) */
.nh-card.card > .tag--new { top: var(--space-md); right: var(--space-md); }
.nh-card.card { /* allow .card New-badge JS without inheriting .card layout */ }

/* ---------- "WHY NATIVE HTML" terminal band ---------- */
.nh-why {
  margin-top: var(--space-3xl);
  background: var(--nh-code-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.nh-why__bar {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nh-why__bar i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #3a3050; }
.nh-why__bar .nh-file { margin-left: 0.5rem; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--syn-com); }
.nh-why__body {
  padding: var(--space-2xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
}
.nh-why__body h2 {
  color: var(--nh-code-text);
  font-size: var(--text-2xl);
  margin: 0 0 var(--space-md);
}
.nh-why__body h2 .cm { font-family: var(--font-mono); font-size: 0.6em; font-weight: 400; display: block; margin-bottom: var(--space-xs); }
.nh-why__body p {
  color: #c5bcd4;
  font-size: var(--text-base);
  margin: 0 0 var(--space-md);
  max-width: none;
}
.nh-why__body p:last-child { margin-bottom: 0; }
.nh-why__body code {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--nh-code-text);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-sm);
}
.nh-why__body .tk { color: var(--syn-tag); }
.nh-why__body .at { color: var(--syn-attr); }

/* ---------- Responsive ---------- */
@media (max-width: 60rem) {
  .nh-grid { grid-template-columns: repeat(2, 1fr); }
  .nh-why__body { grid-template-columns: 1fr; gap: var(--space-lg); }
}
@media (max-width: 48rem) {
  .nh-hero { grid-template-columns: 1fr; gap: var(--space-xl); padding-block: var(--space-xl); }
  .nh-codepanel { order: 2; }
  .nh-grid { grid-template-columns: 1fr; }
  .nh-section__head { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .nh-card:hover { transform: none; }
}

/* ============================================================
   Inner-page motif primitives (used by the checklists index and
   the breadcrumb pattern page).
   ============================================================ */

/* Page header — motif comment kicker + Fraunces h1 + lead */
.nh-pagehead {
  padding-block: var(--space-xl) var(--space-2xl);
  margin-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--color-border);
}
.nh-pagehead .nh-comment { display: block; margin-bottom: var(--space-md); }
.nh-pagehead h1 {
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
}
.nh-pagehead p {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin-top: var(--space-lg);
  max-width: 68ch;
}
.nh-pagehead .nh-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Mono meta tag used in page headers / pattern meta */
.nh-mtag.is-zerojs { color: var(--color-success); }

/* Section eyebrow — the // comment that sits above a section h2 */
.pattern-section > .nh-comment,
.faq > .nh-comment {
  display: block;
  margin-bottom: var(--space-xs);
}

/* "Which checklist" guidance lists — give the bold lead-in presence */
.nh-guide-list { list-style: none; padding: 0; margin: 0 0 var(--space-lg); }
.nh-guide-list li {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}
.nh-guide-list li:last-child { border-bottom: none; }
.nh-guide-list li strong { color: var(--color-text); }
.nh-subhead {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--color-accent);
  margin: var(--space-lg) 0 var(--space-xs);
}

/* Related-resources as motif mini-cards */
.nh-related { margin-top: var(--space-3xl); }
.nh-related > .nh-comment { display: block; margin-bottom: var(--space-xs); }
.nh-related h2 { margin-bottom: var(--space-lg); }
.nh-related .nh-grid { grid-template-columns: repeat(2, 1fr); }
.nh-relstrip {
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  padding: 0.6rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* TOC restyled as a quiet panel (design-system .toc already works; this
   just tightens it inside the motif) */
.nh-toc { margin-bottom: var(--space-2xl); }

@media (max-width: 48rem) {
  .nh-related .nh-grid { grid-template-columns: 1fr; }
}

/* Pattern-category header (patterns index) — coral // eyebrow + h2 + count */
.nh-cat { margin-top: var(--space-2xl); }
.nh-cat:first-of-type { margin-top: var(--space-md); }
.nh-cat__head {
  display: flex; align-items: baseline; gap: var(--space-md);
  margin-bottom: var(--space-lg); padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}
.nh-cat__head .nh-cat__eyebrow {
  font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--color-accent); letter-spacing: 0.04em; flex-shrink: 0;
}
.nh-cat__head h2 { font-size: var(--text-2xl); margin: 0; }
.nh-cat__head .nh-cat__count {
  margin-left: auto; font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--color-text-muted); align-self: center;
}

/* Card WCAG line (patterns index) */
.nh-wcag {
  font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.4;
  color: var(--color-text-muted); margin: 0 0 var(--space-md);
}

/* Horizontal-scroll wrapper for wide tables in guides */
.table-wrap { overflow-x: auto; margin-bottom: var(--space-lg); }
.table-wrap .comparison-table { margin-bottom: 0; }

/* ============================================================
   Index-page prose width + content list styling
   ============================================================ */

/* Index pages use the wide .container (not .content-width). Their hub
   prose otherwise inherits the global `p { max-width: 65ch }`, leaving a
   narrow column floating beside the full-width card grid. Let it fill the
   container so the prose and the cards share one edge. (Detail pages keep
   the readable 65ch column — they live inside .content-width.) */
.container:not(.content-width):not(.doc-layout) .nh-pagehead p,
.container:not(.content-width):not(.doc-layout) .pattern-section p,
.container:not(.content-width):not(.doc-layout) .pattern-section li,
.container:not(.content-width):not(.doc-layout) .faq .faq-answer p {
  max-width: none;
}

/* Plain prose lists (no component class) had no base styling, so they
   fell back to cramped browser defaults. Give them room to breathe and an
   on-brand coral marker. Scoped with :not([class]) so component lists
   (.nh-grid, .nh-guide-list, .wcag-list, .toc, .checklist…) are untouched.
   Applies in pattern/guide prose and FAQ answers across the whole site. */
.pattern-section ul:not([class]),
.pattern-section ol:not([class]),
.faq-answer ul:not([class]),
.faq-answer ol:not([class]) {
  padding-left: 1.4rem;
  margin-block: var(--space-md);
}
.pattern-section ul:not([class]) > li,
.pattern-section ol:not([class]) > li,
.faq-answer ul:not([class]) > li,
.faq-answer ol:not([class]) > li {
  margin-block: var(--space-sm);
  padding-left: 0.35rem;
  line-height: 1.65;
}
.pattern-section ul:not([class]) > li::marker,
.pattern-section ol:not([class]) > li::marker,
.faq-answer ul:not([class]) > li::marker,
.faq-answer ol:not([class]) > li::marker {
  color: var(--color-accent);
}

/* ============================================================
   Documentation layout — sticky TOC sidebar (pattern + guide pages)
   .doc-layout replaces .content-width on long-form pages. It stays a
   readable single column when stacked, and on wide screens becomes a
   two-column grid with the .toc pinned to a sticky right rail. The TOC's
   DOM position is unchanged — CSS grid does the placement, so no per-page
   markup surgery was needed.
   ============================================================ */
.doc-layout {
  max-width: var(--content-width);   /* readable measure when stacked */
  margin-inline: auto;
}

@media (min-width: 64rem) {
  .doc-layout {
    max-width: 72rem;                /* widen to match the index pages */
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    column-gap: var(--space-2xl);
    align-items: start;
  }
  /* Everything flows in the main (left) column… */
  .doc-layout > *:not(.toc) {
    grid-column: 1;
    min-width: 0;                    /* let wide code blocks/tables scroll, not blow out the column */
  }
  /* …but the header (breadcrumb + page title) spans the full width on top,
     so the sidebar begins alongside the first content section rather than
     beside the title. */
  .doc-layout > .breadcrumb,
  .doc-layout > .nh-pagehead {
    grid-column: 1 / -1;
  }
  /* The TOC: a sticky right rail starting at row 3 — i.e. beside the first
     section, after the full-width breadcrumb (row 1) + pagehead (row 2).
     grid-row spans well past the real row count so its area is the full
     content height (extra implicit rows are 0-height), giving sticky room
     to travel. `top` clears the sticky site header. */
  .doc-layout > .toc {
    grid-column: 2;
    grid-row: 3 / span 50;
    position: sticky;
    top: calc(var(--header-height) + var(--space-md));
    align-self: start;
    margin: 0;
    max-height: calc(100vh - var(--header-height) - 2 * var(--space-md));
    overflow-y: auto;
  }
}

/* Scroll-spy: active section's TOC link, toggled by js/main.js. */
.toc a.is-active {
  color: var(--color-primary);
  font-weight: 600;
}

@media print {
  .doc-layout { display: block; max-width: none; }
}