/* ============================================================================
   site-chrome.css — CommUnity OS V43
   Shared styles for legal pages, informational pages, and global footer.

   Design posture:
   - Civic-infrastructure aesthetic (not marketing, not branded-SaaS)
   - High readability for diverse audiences (multilingual, mobile, assistive tech)
   - WCAG 2.1 AA contrast targets
   - No tracking scripts, no analytics, no external fonts
   ============================================================================ */

/* ---------- Reset and base ---------- */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  color: #1a1a1a;
  background: #fafafa;
}

/* ---------- Typography ---------- */

h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 1rem 0 1.5rem;
  color: #0d0d0d;
}

h2 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 2rem 0 1rem;
  color: #0d0d0d;
}

h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 1.5rem 0 0.75rem;
  color: #0d0d0d;
}

h4 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1rem 0 0.5rem;
}

p {
  margin: 0.75rem 0;
  max-width: 65ch;
}

ul, ol {
  max-width: 65ch;
  padding-left: 1.5rem;
}

li {
  margin: 0.25rem 0;
}

a {
  color: #0b5394;
  text-decoration: underline;
}

a:hover, a:focus {
  color: #073763;
  text-decoration-thickness: 2px;
}

strong {
  font-weight: 700;
}

small {
  font-size: 0.875rem;
  color: #555;
}

blockquote {
  border-left: 3px solid #999;
  padding-left: 1rem;
  margin: 1rem 0;
  color: #444;
}

address {
  font-style: normal;
  margin: 0.5rem 0;
}

hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 2rem 0;
}

/* ---------- Layout containers ---------- */

main.legal-page,
main.resource-page,
main.triage-page,
main.routing-page,
main.how-it-works {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

main.legal-page section,
main.resource-page section,
main.triage-page section,
main.routing-page section,
main.how-it-works section {
  margin-bottom: 1.5rem;
}

.last-updated {
  color: #666;
  font-size: 0.9rem;
  margin-top: -1rem;
  margin-bottom: 2rem;
}

/* ---------- Disclaimer and warning blocks ---------- */

.page-disclaimer,
.planning-disclaimer,
.authorship-block {
  background: #fff8e1;
  border-left: 4px solid #d97706;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 0 4px 4px 0;
}

.page-disclaimer p:first-child,
.planning-disclaimer p:first-child {
  margin-top: 0;
}

.page-disclaimer p:last-child,
.planning-disclaimer p:last-child {
  margin-bottom: 0;
}

.category-emphasis {
  background: #fef2f2;
  border-left: 4px solid #dc2626;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 0 4px 4px 0;
}

.short-version {
  background: #f0f9ff;
  border-left: 4px solid #0369a1;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 0 4px 4px 0;
}

.short-version h2 {
  margin-top: 0;
}

.emphasized-reminder,
.emphasized {
  background: #f9fafb;
  border: 1px solid #d1d5db;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  border-radius: 4px;
  font-size: 0.95rem;
}

/* ---------- Resource cards (for health-calc, etc.) ---------- */

.resource-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 6px;
}

.resource-card h2 {
  margin-top: 0;
}

a.outbound {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  background: #0b5394;
  color: #ffffff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
}

a.outbound:hover, a.outbound:focus {
  background: #073763;
  color: #ffffff;
  text-decoration: none;
}

/* ---------- Triage intake ---------- */

.intake textarea {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  font-family: inherit;
  margin: 0.5rem 0 1rem;
}

.intake textarea:focus {
  outline: none;
  border-color: #0b5394;
}

.intake button,
.acknowledgment button,
.feedback button {
  padding: 0.6rem 1.25rem;
  font-size: 1rem;
  background: #0b5394;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  margin-right: 0.5rem;
}

.intake button:hover,
.acknowledgment button:not(:disabled):hover,
.feedback button:hover {
  background: #073763;
}

.acknowledgment button:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.category-grid a {
  display: block;
  padding: 0.75rem 1rem;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  color: #0d0d0d;
  text-decoration: none;
  font-weight: 500;
}

.category-grid a:hover, .category-grid a:focus {
  background: #f0f9ff;
  border-color: #0b5394;
}

/* ---------- N-B-F blocks ---------- */

.nbf-block {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid transparent;
  background: #f9fafb;
  border-radius: 0 4px 4px 0;
}

.nbf-block:nth-of-type(1) { border-left-color: #16a34a; }  /* Normal — green */
.nbf-block:nth-of-type(2) { border-left-color: #dc2626; }  /* Broken — red */
.nbf-block:nth-of-type(3) { border-left-color: #0369a1; }  /* Fix — blue */

.nbf-block h3 {
  margin-top: 0;
}

/* ---------- Referral lists ---------- */

.resource-referrals {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: #f5f3ff;
  border-left: 4px solid #7c3aed;
  border-radius: 0 4px 4px 0;
}

.resource-referrals h3 {
  margin-top: 0;
}

.resource-referrals ul {
  padding-left: 1.25rem;
}

/* ---------- Dispute letter disclaimer (high emphasis) ---------- */

.dispute-disclaimer-v2 {
  background: #fef2f2;
  border: 2px solid #dc2626;
  padding: 1.5rem;
  margin: 2rem 0;
  border-radius: 6px;
}

.dispute-disclaimer-v2 h2 {
  color: #991b1b;
  margin-top: 0;
}

.dispute-disclaimer-v2 .acknowledgment {
  background: #ffffff;
  border: 1px solid #fca5a5;
  padding: 1rem;
  margin-top: 1rem;
  border-radius: 4px;
}

/* ---------- Tables ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.95rem;
}

th, td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}

th {
  background: #f9fafb;
  font-weight: 600;
  border-bottom: 2px solid #d1d5db;
}

/* ---------- Knowledge-guide footer ---------- */

footer.knowledge-guide-footer {
  margin: 3rem 0 2rem;
  padding: 1.5rem;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
}

footer.knowledge-guide-footer section.en,
footer.knowledge-guide-footer section.es {
  margin: 0.5rem 0;
}

footer.knowledge-guide-footer h3 {
  margin-top: 0;
}

/* ---------- Global site footer ---------- */

footer.site-global-footer {
  background: #1f2937;
  color: #e5e7eb;
  padding: 2rem 1.5rem;
  margin-top: 4rem;
}

footer.site-global-footer .footer-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

footer.site-global-footer section {
  margin: 0;
}

footer.site-global-footer h4 {
  color: #f9fafb;
  font-size: 1rem;
  margin: 0 0 0.75rem;
}

footer.site-global-footer a {
  color: #93c5fd;
}

footer.site-global-footer a:hover,
footer.site-global-footer a:focus {
  color: #bfdbfe;
}

footer.site-global-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

footer.site-global-footer li {
  margin: 0.25rem 0;
  font-size: 0.95rem;
}

footer.site-global-footer .footer-dmca-block,
footer.site-global-footer .footer-attribution {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 1.5rem;
}

footer.site-global-footer hr {
  border-top-color: #374151;
  max-width: 1100px;
  margin: 1.5rem auto;
}

footer.site-global-footer small {
  color: #9ca3af;
  font-size: 0.85rem;
}

/* ---------- Homepage sources block ---------- */

.homepage-sources,
section#sources {
  max-width: 720px;
  margin: 2rem auto;
  padding: 1rem 1.25rem;
  background: #f9fafb;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.9rem;
}

.homepage-sources h3,
section#sources h2 {
  margin-top: 0;
  font-size: 1rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 600px) {
  html {
    font-size: 15px;
  }

  main.legal-page,
  main.resource-page,
  main.triage-page,
  main.routing-page,
  main.how-it-works {
    padding: 1.25rem 1rem 2rem;
  }

  h1 {
    font-size: 1.6rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  footer.site-global-footer .footer-grid {
    gap: 1.5rem;
  }
}

/* ---------- Accessibility ---------- */

:focus {
  outline: 3px solid #0b5394;
  outline-offset: 2px;
}

.category-grid a:focus,
footer.site-global-footer a:focus {
  outline-offset: 4px;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   V44 WCAG 2.1 AA Accessibility Remediation (April 2026)
   See v44-scope/B3-wcag-audit.md
   ============================================================ */

/* Skip-link (bypass-blocks, WCAG 2.4.1) */
.skip-link {
  position: absolute;
  top: -48px;
  left: 0;
  background: #182C28;
  color: #FAFAF7;
  padding: 12px 16px;
  text-decoration: none;
  font-weight: 600;
  z-index: 1000;
  transition: top 0.15s ease-in-out;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #D4704A;
  outline-offset: 2px;
}

#main-content:target {
  outline: none;
}

/* Enhanced keyboard-focus indicator (WCAG 2.4.7 enhancement) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #D4704A;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Mouse users don't get outline; keyboard users do */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}