/**
 * CivicForce Marketing Site — site.css
 * Design tokens + global styles for the marketing site.
 * No build step. Plain CSS.
 */

/* ─────────────────────────────────────────────
   Google Fonts
───────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* ─────────────────────────────────────────────
   Design Tokens — Light Mode (default)
───────────────────────────────────────────── */

:root {
  /* Fonts */
  --cf-font-heading: 'Plus Jakarta Sans', sans-serif;
  --cf-font-body: 'Inter', sans-serif;
  --cf-font-mono: ui-monospace, Consolas, monospace;

  /* Font Sizes */
  --cf-font-size-body: 1rem;         /* 18px — body minimum */
  --cf-font-size-sm: 0.875rem;       /* 15.75px — small UI text (buttons, nav) */
  --cf-font-size-label: 0.778rem;    /* 14px — uppercase/bold labels only */

  /* Border Radius */
  --cf-radius-sm: 6px;
  --cf-radius-md: 10px;
  --cf-radius-lg: 16px;

  /* Spacing (4px base) */
  --cf-space-1:  4px;
  --cf-space-2:  8px;
  --cf-space-3:  12px;
  --cf-space-4:  16px;
  --cf-space-5:  20px;
  --cf-space-6:  24px;
  --cf-space-8:  32px;
  --cf-space-12: 48px;
  --cf-space-16: 64px;
  --cf-space-18: 72px;
  --cf-space-20: 80px;

  /* Colors — Light */
  --cf-primary:          #4338CA;
  --cf-primary-hover:    #3730A3;
  --cf-primary-light:    #EEF2FF;
  --cf-accent:           #5B8A72;
  --cf-accent-hover:     #4A7660;
  --cf-accent-text:      #3D6B55;
  --cf-dark:             #1E1B3A;
  --cf-surface:          #ffffff;
  --cf-surface-alt:      #f8fafc;
  --cf-card:             #f8fafc;
  --cf-elevated:         #f1f5f9;
  --cf-border:           #DDD9F3;
  --cf-border-subtle:    #e2e8f0;
  --cf-text:             #1E1B3A;
  --cf-text-secondary:   #6366A0;
  --cf-text-muted:       #94a3b8;
  --cf-text-on-primary:  #FFFFFF;
  --cf-badge-bg:         #EEF2FF;
  --cf-badge-text:       #4338CA;
  --cf-hero-gradient:    linear-gradient(135deg, #1E1B3A 0%, #4338CA 100%);
  --cf-shadow-card:      0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
  --cf-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.08);
  --cf-error:            #B91C1C;
  --cf-error-bg:         #FEF2F2;
  --cf-success:          #15803d;
  --cf-success-bg:       #f0fdf4;
  --cf-warning:          #92400E;
  --cf-warning-bg:       #FFFBEB;

  /* Theme transition */
  --cf-transition-theme: background-color 150ms ease, color 150ms ease;
}

/* ─────────────────────────────────────────────
   Design Tokens — Dark Mode
───────────────────────────────────────────── */

[data-theme="dark"] {
  --cf-primary:          #818CF8;
  --cf-primary-hover:    #A5B4FC;
  --cf-primary-light:    #1E1B3A;
  --cf-accent:           #7DB89E;
  --cf-accent-hover:     #9FCDB6;
  --cf-accent-text:      #7DB89E;
  --cf-dark:             #0F0E1F;
  --cf-surface:          #0f172a;
  --cf-surface-alt:      #0f172a;
  --cf-card:             #1e293b;
  --cf-elevated:         #334155;
  --cf-border:           #334155;
  --cf-border-subtle:    #1e293b;
  --cf-text:             #E8E7F5;
  --cf-text-secondary:   #9B99C7;
  --cf-text-muted:       #64748b;
  --cf-text-on-primary:  #0F0E1F;
  --cf-badge-bg:         #1E1B3A;
  --cf-badge-text:       #818CF8;
  --cf-hero-gradient:    linear-gradient(135deg, #0A0919 0%, #2D2878 100%);
  --cf-shadow-card:      0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.225);
  --cf-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.3);
  --cf-error:            #F87171;
  --cf-error-bg:         #3B0A0A;
  --cf-success:          #4ade80;
  --cf-success-bg:       #052e16;
  --cf-warning:          #FCD34D;
  --cf-warning-bg:       #2D1A00;
}

/* ─────────────────────────────────────────────
   Reset & Base
───────────────────────────────────────────── */

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

html {
  font-size: 18px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--cf-font-body);
  background-color: var(--cf-surface);
  color: var(--cf-text);
  line-height: 1.6;
  transition: var(--cf-transition-theme);
  min-height: 100vh;
}

/* ─────────────────────────────────────────────
   Typography
───────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cf-font-heading);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--cf-text);
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 700; }
h3 { font-size: clamp(1.125rem, 2.5vw, 1.5rem); font-weight: 600; }
h4 { font-size: 1.125rem; font-weight: 600; }

p {
  max-width: 65ch;
  line-height: 1.6;
}

a {
  color: var(--cf-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--cf-primary-hover);
}

a:focus-visible {
  outline: 2px solid var(--cf-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─────────────────────────────────────────────
   Layout Utilities
───────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--cf-space-6);
}

.container--narrow {
  max-width: 720px;
}

section {
  padding-block: var(--cf-space-18);
}

.section-label {
  font-family: var(--cf-font-body);
  font-size: var(--cf-font-size-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cf-accent-text);
  margin-bottom: var(--cf-space-3);
}

.section-title {
  margin-bottom: var(--cf-space-4);
}

.section-lead {
  font-size: 1.125rem;
  color: var(--cf-text-secondary);
  max-width: 55ch;
}

/* ─────────────────────────────────────────────
   Cards
───────────────────────────────────────────── */

.card {
  background: var(--cf-card);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-lg);
  padding: var(--cf-space-8);
  box-shadow: var(--cf-shadow-card);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

/* Card hover removed — cards are not interactive elements.
   Hover effects on non-clickable elements create a false affordance. */

.card h3 {
  color: var(--cf-primary);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--cf-space-6);
}

/* ─────────────────────────────────────────────
   Buttons
───────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cf-space-2);
  padding: var(--cf-space-3) var(--cf-space-6);
  border-radius: var(--cf-radius-md);
  font-family: var(--cf-font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  min-height: 44px;
  min-width: 44px;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--cf-primary);
  outline-offset: 3px;
}

.btn-primary {
  background: var(--cf-primary);
  color: var(--cf-text-on-primary);
  border-color: var(--cf-primary);
}

.btn-primary:hover {
  background: var(--cf-primary-hover);
  border-color: var(--cf-primary-hover);
  color: var(--cf-text-on-primary);
}

.btn-outline {
  background: transparent;
  color: var(--cf-primary);
  border-color: var(--cf-primary);
}

.btn-outline:hover {
  background: var(--cf-primary-light);
}

/* ─────────────────────────────────────────────
   Badges / Tags
───────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cf-space-1);
  padding: var(--cf-space-1) var(--cf-space-3);
  border-radius: 999px;
  font-size: var(--cf-font-size-label);
  font-weight: 600;
  background: var(--cf-badge-bg);
  color: var(--cf-badge-text);
  letter-spacing: 0.02em;
}

.badge--accent {
  background: color-mix(in srgb, var(--cf-accent) 12%, transparent);
  color: var(--cf-accent);
}

/* ─────────────────────────────────────────────
   Hero Section
───────────────────────────────────────────── */

.hero {
  background: var(--cf-hero-gradient);
  color: white;
  padding-block: var(--cf-space-20);
  text-align: center;
}

.hero h1 {
  color: white;
  margin-bottom: var(--cf-space-5);
}

.hero .lead {
  font-size: 1.25rem;
  color: rgba(255,255,255,0.85);
  max-width: 55ch;
  margin-inline: auto;
  margin-bottom: var(--cf-space-8);
}

.hero-actions {
  display: flex;
  gap: var(--cf-space-4);
  justify-content: center;
  flex-wrap: wrap;
}

.hero .btn-outline {
  color: white;
  border-color: rgba(255,255,255,0.6);
}

.hero .btn-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: white;
}

/* ─────────────────────────────────────────────
   Trust Bar
───────────────────────────────────────────── */

.trust-bar {
  background: var(--cf-card);
  border-top: 1px solid var(--cf-border);
  border-bottom: 1px solid var(--cf-border);
  padding-block: var(--cf-space-5);
}

.trust-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cf-space-8);
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--cf-space-2);
  font-size: var(--cf-font-size-body);
  font-weight: 600;
  color: var(--cf-text-secondary);
}

.trust-item svg {
  width: 20px;
  height: 20px;
  color: var(--cf-accent);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   Feature Sections (alternating image/text)
───────────────────────────────────────────── */

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cf-space-12);
  align-items: center;
  padding-block: var(--cf-space-12);
  border-bottom: 1px solid var(--cf-border-subtle);
}

.feature-row:last-of-type {
  border-bottom: none;
}

.feature-row.reverse {
  direction: rtl;
}

.feature-row.reverse > * {
  direction: ltr;
}

.feature-screenshot {
  background: var(--cf-elevated);
  border-radius: var(--cf-radius-lg);
  border: 1px solid var(--cf-border);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cf-text-muted);
  font-size: var(--cf-font-size-body);
  font-style: italic;
}

.feature-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--cf-space-3);
  margin-top: var(--cf-space-5);
}

.feature-bullets li {
  display: flex;
  align-items: flex-start;
  gap: var(--cf-space-3);
  font-size: var(--cf-font-size-body);
  color: var(--cf-text);
}

.feature-bullets li::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cf-accent);
  flex-shrink: 0;
  margin-top: 7px;
}

/* ─────────────────────────────────────────────
   Compliance / Status Items
───────────────────────────────────────────── */

.status-achieved {
  color: var(--cf-success);
}

.status-inprogress {
  color: var(--cf-warning);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
}

.spec-table tr {
  border-bottom: 1px solid var(--cf-border-subtle);
}

.spec-table th,
.spec-table td {
  padding: var(--cf-space-4) var(--cf-space-3);
  font-size: var(--cf-font-size-body);
  vertical-align: top;
  text-align: left;
}

.spec-table thead th {
  font-weight: 600;
  color: var(--cf-text-muted);
  font-size: var(--cf-font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--cf-border);
}

.spec-table th[scope="row"] {
  font-weight: 600;
  width: 220px;
  color: var(--cf-text-secondary);
  padding-right: var(--cf-space-6);
}

/* ─────────────────────────────────────────────
   Blog Cards
───────────────────────────────────────────── */

.blog-card {
  background: var(--cf-card);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-lg);
  padding: var(--cf-space-8);
  box-shadow: var(--cf-shadow-card);
  transition: box-shadow 200ms ease, transform 200ms ease;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: var(--cf-space-3);
}

.blog-card:hover {
  box-shadow: var(--cf-shadow-card-hover);
  transform: translateY(-2px);
  text-decoration: none;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: var(--cf-space-3);
  font-size: var(--cf-font-size-body);
  color: var(--cf-text-muted);
}

.blog-card-title {
  font-family: var(--cf-font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--cf-text);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.blog-card-desc {
  font-size: var(--cf-font-size-body);
  color: var(--cf-text-secondary);
  line-height: 1.55;
  max-width: none;
  flex: 1;
}

/* Blog post reading layout */
.post-header {
  padding-block: var(--cf-space-12) var(--cf-space-8);
  border-bottom: 1px solid var(--cf-border-subtle);
  margin-bottom: var(--cf-space-12);
}

.post-back {
  display: inline-flex;
  align-items: center;
  gap: var(--cf-space-2);
  font-size: var(--cf-font-size-body);
  font-weight: 600;
  color: var(--cf-text-secondary);
  text-decoration: none;
  margin-bottom: var(--cf-space-6);
}

.post-back:hover {
  color: var(--cf-primary);
}

.post-meta {
  display: flex;
  align-items: center;
  gap: var(--cf-space-4);
  margin-top: var(--cf-space-4);
  color: var(--cf-text-muted);
  font-size: var(--cf-font-size-body);
}

.post-body {
  font-size: 1.0625rem;
  line-height: 1.75;
  max-width: 720px;
  margin: 0 auto var(--cf-space-16);
}

.post-body h2 {
  margin-top: var(--cf-space-12);
  margin-bottom: var(--cf-space-4);
  font-size: 1.5rem;
}

.post-body h3 {
  margin-top: var(--cf-space-8);
  margin-bottom: var(--cf-space-3);
}

.post-body p {
  max-width: none;
  margin-bottom: var(--cf-space-5);
}

.post-body ul, .post-body ol {
  margin-bottom: var(--cf-space-5);
  padding-left: var(--cf-space-6);
}

.post-body li {
  margin-bottom: var(--cf-space-2);
}

.post-body strong {
  font-weight: 600;
}

.post-body blockquote {
  border-left: 4px solid var(--cf-accent);
  padding-left: var(--cf-space-6);
  margin-block: var(--cf-space-8);
  color: var(--cf-text-secondary);
  font-style: italic;
}

/* ─────────────────────────────────────────────
   News List (compact)
───────────────────────────────────────────── */

.news-list {
  list-style: none;
  border-top: 1px solid var(--cf-border-subtle);
}

.news-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--cf-space-6);
  padding-block: var(--cf-space-5);
  border-bottom: 1px solid var(--cf-border-subtle);
}

.news-item-year {
  font-family: var(--cf-font-heading);
  font-weight: 700;
  font-size: var(--cf-font-size-body);
  color: var(--cf-accent);
  padding-top: 2px;
}

.news-item-text {
  font-size: var(--cf-font-size-body);
  color: var(--cf-text);
  line-height: 1.55;
  max-width: none;
}

/* ─────────────────────────────────────────────
   Filter tabs (blog)
───────────────────────────────────────────── */

.filter-tabs {
  display: flex;
  gap: var(--cf-space-2);
  flex-wrap: wrap;
  margin-bottom: var(--cf-space-8);
}

.filter-btn {
  padding: var(--cf-space-2) var(--cf-space-4);
  border-radius: 999px;
  border: 1px solid var(--cf-border);
  background: transparent;
  color: var(--cf-text-secondary);
  font-size: var(--cf-font-size-body);
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms, color 150ms, border-color 150ms;
  min-height: 44px;
}

.filter-btn:hover,
.filter-btn[aria-pressed="true"] {
  background: var(--cf-primary);
  color: var(--cf-text-on-primary);
  border-color: var(--cf-primary);
}

/* ─────────────────────────────────────────────
   Divider
───────────────────────────────────────────── */

.divider {
  border: none;
  border-top: 1px solid var(--cf-border-subtle);
  margin-block: var(--cf-space-12);
}

/* ─────────────────────────────────────────────
   Responsive
───────────────────────────────────────────── */

@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }

  .hero {
    padding-block: 140px;
  }

  section {
    padding-block: var(--cf-space-16);
  }
}

@media (max-width: 768px) {
  section {
    padding-block: var(--cf-space-12);
  }

  .feature-row {
    grid-template-columns: 1fr;
  }

  .feature-row.reverse {
    direction: ltr;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-block: var(--cf-space-16);
  }

  .post-body {
    font-size: 1rem;
  }

  .news-item {
    grid-template-columns: 56px 1fr;
    gap: var(--cf-space-4);
  }

  .trust-bar-inner {
    gap: var(--cf-space-4);
  }
}

@media (max-width: 480px) {
  html {
    font-size: 16px;
  }

  .container {
    padding-inline: var(--cf-space-4);
  }

  .trust-bar-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cf-space-3);
    justify-items: start;
  }
}

/* ─────────────────────────────────────────────
   Scroll Reveal Animation
───────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 400ms ease, transform 400ms ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────────
   Reduced motion
───────────────────────────────────────────── */

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

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─────────────────────────────────────────────
   Abbreviation Tooltips
───────────────────────────────────────────── */

abbr[title] {
  position: relative;
  text-decoration: underline dotted var(--cf-text-muted);
  text-underline-offset: 3px;
  cursor: help;
}

abbr[title]:hover::after,
abbr[title]:focus::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--cf-dark);
  color: white;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}

[data-theme="dark"] abbr[title]:hover::after,
[data-theme="dark"] abbr[title]:focus::after {
  background: var(--cf-elevated);
  color: var(--cf-text);
}

/* ─────────────────────────────────────────────
   Skip Link
───────────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--cf-primary);
  color: white;
  padding: 8px 16px;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  text-decoration: none;
  z-index: 999;
}

.skip-link:focus {
  top: 0;
}

/* ─────────────────────────────────────────────
   Visually Hidden (screen reader only)
───────────────────────────────────────────── */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────────────────────────
   Windows High Contrast Mode
───────────────────────────────────────────── */

@media (forced-colors: active) {
  .hero {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
  }

  .hero h1,
  .hero .lead {
    color: CanvasText;
  }

  .btn {
    border: 2px solid ButtonText;
  }

  .btn-primary {
    background: ButtonFace;
    color: ButtonText;
  }

  .card {
    border: 1px solid CanvasText;
  }

  .trust-item svg {
    color: CanvasText;
  }

  .cert-status--achieved,
  .cert-status--progress,
  .cert-status--planned {
    color: CanvasText;
  }

  .cert-card {
    border: 1px solid CanvasText;
  }
}

/* ─────────────────────────────────────────────
   Print
───────────────────────────────────────────── */

@media print {
  cf-site-nav, cf-site-footer {
    display: none;
  }
  .hero {
    background: white;
    color: black;
  }
  .hero h1 {
    color: black;
  }
}