/*
 * viewer-pages.css — Phase 7 L7.5 (2026-05-03)
 *
 * Mobile-first responsive + WCAG 2.2 AA + print stylesheet for the
 * stakeholder-governance viewer pages (constitution, comms-constitution,
 * decision-log, patterns, framework-consultations, pilots,
 * stakeholder-federation).
 *
 * Tested viewports: 320px (min), 375px (iPhone), 414px (iPhone Plus),
 * 768px (tablet), 1280px (laptop), 1920px+ (large display).
 *
 * Per-tenant primary colour via --tenant-primary CSS custom property
 * (set by /js/tenant-branding.js). Fallback: platform indigo #6366f1.
 *
 * Paired with markdown-page-loader.js (renders markdown body into
 * #com-content). Existing page-specific inline <style> blocks remain in
 * each viewer page; this stylesheet adds the responsive + a11y +
 * branded layer on top.
 */

/* ---------- 1. CSS custom properties (with fallbacks) ---------- */

:root {
  --tenant-primary: #6366f1;
  --tenant-primary-soft: #6366f120;
  --tenant-primary-strong: #4338ca;
  --vp-text: #1f2937;        /* body text — 14:1 against white */
  --vp-text-strong: #111827; /* headings — 19:1 */
  --vp-text-muted: #4b5563;  /* secondary — 7.6:1 */
  --vp-bg: #ffffff;
  --vp-bg-soft: #f9fafb;
  --vp-border: #e5e7eb;
  --vp-focus-ring: var(--tenant-primary);
}

/* ---------- 2. Skip-to-content link (WCAG 2.4.1) ---------- */

.vp-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--vp-text-strong);
  color: var(--vp-bg);
  padding: 0.5rem 1rem;
  text-decoration: none;
  z-index: 9999;
  border-radius: 0 0 0.25rem 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.vp-skip-link:focus {
  top: 0;
  outline: 3px solid var(--tenant-primary);
  outline-offset: 2px;
}

/* ---------- 3. Focus states (WCAG 2.4.7 — visible) ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--vp-focus-ring);
  outline-offset: 2px;
  border-radius: 0.125rem;
}

/* ---------- 4. Per-tenant accent overlay (cascades over inline styles) ---------- */

/* Constitution / comms-constitution / decision-log markdown loader pages */
.com-content h1 { border-bottom-color: var(--tenant-primary) !important; }
.com-content blockquote { border-left-color: var(--tenant-primary) !important; }
.com-content a { color: var(--tenant-primary-strong) !important; }
.com-toc a { color: var(--tenant-primary-strong) !important; }

/* Patterns page card accent */
.pl-card { border-left-color: var(--tenant-primary) !important; }
.pl-pill-cat { background: var(--tenant-primary-soft) !important; color: var(--tenant-primary-strong) !important; }

/* ---------- 5. Mobile-first responsive — base styles for ≥320px ---------- */

.com-container,
.pl-container,
.fc-container,
.pi-container {
  max-width: 100%;
  margin: 1rem auto;
  padding: 1rem;
  box-sizing: border-box;
}

@media (min-width: 375px) {
  .com-container, .pl-container, .fc-container, .pi-container {
    padding: 1.25rem;
  }
}

@media (min-width: 414px) {
  .com-container, .pl-container, .fc-container, .pi-container {
    padding: 1.5rem;
  }
}

@media (min-width: 768px) {
  .com-container, .pl-container, .fc-container, .pi-container {
    max-width: 720px;
    margin: 2rem auto;
    padding: 2rem;
  }
}

@media (min-width: 1280px) {
  .com-container { max-width: 980px; margin: 2.5rem auto; }
  .pl-container { max-width: 1100px; margin: 2.5rem auto; }
  .fc-container, .pi-container { max-width: 980px; margin: 2.5rem auto; }
}

@media (min-width: 1920px) {
  .com-container { max-width: 1100px; }
  .pl-container { max-width: 1200px; }
  .fc-container, .pi-container { max-width: 1100px; }
}

/* ---------- 6. Touch-friendly tap targets (WCAG 2.5.5 — 44×44 min) ---------- */

@media (max-width: 767px) {
  .com-toc a,
  .pl-card,
  .com-content a {
    min-height: 44px;
    display: inline-block;
    line-height: 1.5;
  }
  .pl-detail-close {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ---------- 7. Print stylesheet — paper-printable governance artifacts ---------- */

@media print {
  /* Hide non-content surfaces */
  #company-hub-navbar,
  #main-footer,
  .pl-detail-modal,
  [data-stakeholder-comment-form],
  .stakeholder-comment-form,
  .stakeholder-comment-display,
  #stakeholder-comments-display,
  .vp-skip-link,
  #maintenance-banner {
    display: none !important;
  }

  /* Reset to print-friendly */
  body {
    background: white !important;
    color: black !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11pt;
    line-height: 1.55;
  }

  .com-container,
  .pl-container,
  .fc-container,
  .pi-container {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .com-content,
  .pl-detail-content {
    background: white !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
  }

  /* Headings break-after avoided; orphans/widows */
  h1, h2, h3, h4 {
    page-break-after: avoid;
    break-after: avoid;
    color: black !important;
  }

  p, li, blockquote {
    orphans: 3;
    widows: 3;
  }

  /* Show URLs after links (paper-context) */
  .com-content a[href]:after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }

  /* Skip self-referential anchors */
  .com-content a[href^="#"]:after {
    content: "";
  }

  blockquote {
    border-left: 3px solid #999 !important;
    padding-left: 0.5rem;
    color: #333 !important;
  }

  table {
    page-break-inside: avoid;
  }

  /* Page footer — date + URL for print provenance */
  @page {
    margin: 2cm 1.5cm;
  }
}

/* ---------- 8. Reduced-motion (WCAG 2.3.3) ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 9. High-contrast preference ---------- */

@media (prefers-contrast: more) {
  :root {
    --vp-text: #000000;
    --vp-text-strong: #000000;
    --vp-text-muted: #1f2937;
    --vp-border: #6b7280;
  }
  .com-content a,
  .com-toc a {
    text-decoration: underline;
  }
}