/* GovNet Ug — shared design tokens
   Palette: navy (authority/institution), green (growth/PDM), amber (attention/pending), coral (whistleblowing/sensitive)
*/
:root {
  /* Institutional black — from the flag, deepened for a UI surface rather than a poster */
  --gn-navy: #191714;
  --gn-navy-dark: #0E0D0B;
  --gn-navy-light: #2B2823;
  /* Status green — kept for semantics (completed/positive), not part of the brand identity */
  --gn-green: #1D8A5E;
  --gn-green-light: #E6F5EE;
  /* Refined flag gold — primary accent, participation, attention */
  --gn-amber: #B8860C;
  --gn-amber-light: #FBF1D9;
  --gn-gold-bright: #E4B71B;
  /* Refined flag red — reserved for urgency and whistleblowing */
  --gn-coral: #A32626;
  --gn-coral-light: #F9E7E5;
  --gn-cream: #FAF7F0;
  --gn-ink: #1E2430;
  --gn-muted: #6B7280;
  --gn-border: #E7E2D4;
  --radius: 10px;
}

body {
  font-family: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--gn-cream);
  color: var(--gn-ink);
  padding-bottom: 78px; /* room for bottom nav on citizen pages */
}

body.staff {
  padding-bottom: 0;
}

h1, h2, h3, h4, .display-font {
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gn-muted);
}

/* Top brand bar — present everywhere */
.gn-topbar {
  background: var(--gn-navy);
  color: #fff;
  padding: 0.65rem 1rem;
}
.gn-topbar .brand {
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.gn-topbar .brand .mark {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--gn-green);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
}
.gn-topbar .tagline {
  font-size: 0.72rem;
  color: #B9C6D6;
}

/* Hero */
.gn-hero {
  background: linear-gradient(155deg, var(--gn-navy) 0%, var(--gn-navy-light) 78%);
  color: #fff;
  padding: 2.75rem 1rem 3rem;
  border-bottom: 3px solid var(--gn-amber);
  position: relative;
}
.gn-hero h1 { font-size: 1.85rem; max-width: 640px; }
.gn-hero .accent { color: var(--gn-gold-bright); }
.gn-hero p { color: #C9C4B8; font-size: 1rem; max-width: 560px; }
.gn-topbar { border-bottom: 3px solid var(--gn-amber); }

/* Impact stats strip */
.gn-stats-strip {
  background: #fff;
  border: 1px solid var(--gn-border);
  border-radius: var(--radius);
  margin-top: -2.25rem;
  position: relative;
  z-index: 2;
  box-shadow: 0 8px 24px rgba(20,18,14,.08);
}
.gn-stats-strip .stat {
  padding: 1rem 0.5rem;
  text-align: center;
  border-right: 1px solid var(--gn-border);
}
.gn-stats-strip .stat:last-child { border-right: none; }
.gn-stats-strip .stat .num { font-size: 1.5rem; font-weight: 700; color: var(--gn-navy); line-height: 1.1; }
.gn-stats-strip .stat .lbl { font-size: 0.72rem; color: var(--gn-muted); font-weight: 600; }

/* How it works */
.how-step {
  text-align: center;
  padding: 1rem;
}
.how-step .num-badge {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gn-amber-light);
  color: var(--gn-amber);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  margin: 0 auto 0.75rem;
}
.how-step h4 { font-size: 0.98rem; margin-bottom: 0.35rem; }
.how-step p { font-size: 0.85rem; color: var(--gn-muted); margin-bottom: 0; }
.how-arrow { color: var(--gn-border); font-size: 1.3rem; }

/* Category chips */
.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  border: 1px solid var(--gn-border);
  border-radius: 20px;
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gn-ink);
}
.category-chip i { color: var(--gn-amber); }
.badge-category {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.25em 0.6em;
  border-radius: 6px;
  background: #F1EEE4;
  color: #5C5847;
  border: 1px solid var(--gn-border);
}

/* Footer */
.gn-footer {
  background: var(--gn-navy);
  color: #A9A398;
  padding: 2rem 0 88px;
  margin-top: 2.5rem;
}
.gn-footer a { color: #E4DFD1; text-decoration: none; }
.gn-footer .brand-line { color: #fff; font-weight: 700; }
.gn-footer hr { border-color: #3a352c; }

/* Big tappable action cards for citizens */
.gn-action-card {
  display: block;
  background: #fff;
  border: 1px solid var(--gn-border);
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  text-decoration: none;
  color: var(--gn-ink);
  height: 100%;
  transition: box-shadow .15s ease, transform .15s ease;
}
.gn-action-card:hover { box-shadow: 0 6px 18px rgba(11,42,74,.1); transform: translateY(-2px); color: var(--gn-ink); }
.gn-action-card .icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}
.gn-action-card.tone-green .icon { background: var(--gn-green-light); color: var(--gn-green); }
.gn-action-card.tone-amber .icon { background: var(--gn-amber-light); color: var(--gn-amber); }
.gn-action-card.tone-coral .icon { background: var(--gn-coral-light); color: var(--gn-coral); }
.gn-action-card h3 { font-size: 1.05rem; margin-bottom: 0.25rem; }
.gn-action-card p { font-size: 0.87rem; color: var(--gn-muted); margin-bottom: 0; }

/* Bottom nav — citizen-facing pages only */
.gn-bottomnav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--gn-border);
  display: flex;
  z-index: 1030;
  box-shadow: 0 -2px 10px rgba(0,0,0,.04);
}
.gn-bottomnav a {
  flex: 1;
  text-align: center;
  padding: 0.55rem 0.25rem 0.6rem;
  color: var(--gn-muted);
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 600;
}
.gn-bottomnav a i { display: block; font-size: 1.2rem; margin-bottom: 2px; }
.gn-bottomnav a.active { color: var(--gn-navy); }

/* Status badges */
.badge-status {
  font-weight: 600;
  font-size: 0.72rem;
  padding: 0.35em 0.65em;
  border-radius: 20px;
}
.badge-not-started { background: var(--gn-coral-light); color: var(--gn-coral); }
.badge-in-progress { background: var(--gn-amber-light); color: var(--gn-amber); }
.badge-stalled { background: #F2E4E1; color: #8C2E20; }
.badge-completed { background: var(--gn-green-light); color: var(--gn-green); }

.gn-mismatch-flag {
  background: var(--gn-coral-light);
  color: var(--gn-coral);
  border: 1px solid #EBC3BB;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.gn-card {
  background: #fff;
  border: 1px solid var(--gn-border);
  border-radius: var(--radius);
}

.gn-tracking-code {
  font-family: "Courier New", monospace;
  font-size: 1.5rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  background: var(--gn-navy);
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  display: inline-block;
}

.gn-sidebar {
  background: var(--gn-navy-dark);
  min-height: 100vh;
  color: #cbd5e1;
}
.gn-sidebar a {
  color: #cbd5e1;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  margin: 0.15rem 0.6rem;
}
.gn-sidebar a:hover, .gn-sidebar a.active { background: rgba(255,255,255,.08); color: #fff; }
.gn-sidebar .brand { color: #fff; padding: 1rem; font-weight: 700; }

.stat-tile {
  background: #fff;
  border: 1px solid var(--gn-border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.stat-tile .num { font-size: 1.7rem; font-weight: 700; color: var(--gn-navy); }
.stat-tile .lbl { font-size: 0.78rem; color: var(--gn-muted); font-weight: 600; }

.btn-gn-primary {
  background: var(--gn-navy);
  border-color: var(--gn-navy);
  color: #fff;
}
.btn-gn-primary:hover { background: var(--gn-navy-light); border-color: var(--gn-navy-light); color: #fff; }

.form-label { font-weight: 600; font-size: 0.88rem; }
.form-hint { font-size: 0.78rem; color: var(--gn-muted); }

.step-pill {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gn-border);
  color: var(--gn-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700;
}
.step-pill.active { background: var(--gn-navy); color: #fff; }
.step-pill.done { background: var(--gn-green); color: #fff; }