/* =============================================================================
   zegit.dev — site-specific layout and component styles
   Tokens and base components come from colors_and_type.css + components.css.
   This file ONLY adds layout, site sections, and page-specific styling.
   Never redefine or override token values here.
   ============================================================================= */

/* ---- Reset + base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--n-950);
  color: var(--fg);
  font: var(--text-body);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-xs); }
img, svg { display: block; }

/* ---- Layout wrapper ------------------------------------------------------- */
.site-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--sp-8);
}

@media (max-width: 640px) {
  .site-wrap { padding: 0 var(--sp-6); }
}

/* ---- Navigation ----------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklch, var(--n-950) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}

.site-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

/* Brand / wordmark */
.site-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
}

/* Nav links */
.site-nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav-links a {
  font-size: 0.875rem;
  color: var(--fg-secondary);
  transition: color 0.14s ease;
  white-space: nowrap;
}
.site-nav-links a:hover { color: var(--fg); }

.site-nav-links .github-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.site-nav-links .github-link i { width: 16px; height: 16px; }

@media (max-width: 768px) {
  .site-nav-links { display: none; }
}

/* ---- Eyebrow utility ------------------------------------------------------ */
.eyebrow {
  font: var(--text-eyebrow);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--brand-400);
}

/* ---- Hero section --------------------------------------------------------- */
.hero {
  padding: var(--sp-20) 0 var(--sp-16);
  position: relative;
  overflow: hidden;
}

.hero h1 {
  font: 600 clamp(2.4rem, 5vw, 3.9rem) / 1.04 var(--font-sans);
  letter-spacing: -0.03em;
  margin: var(--sp-5) 0 0;
  max-width: 18ch;
}

.hero .hero-sub {
  font: var(--text-body-lg);
  color: var(--fg-secondary);
  max-width: 60ch;
  margin: var(--sp-6) 0 0;
  text-wrap: pretty;
}

.hero-cta-row {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  align-items: center;
  flex-wrap: wrap;
}

/* Ghost/link-style secondary CTA */
.cta-link {
  font: 500 0.9375rem / 1 var(--font-sans);
  color: var(--fg-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.14s ease;
}
.cta-link:hover { color: var(--fg); }
.cta-link i { width: 15px; height: 15px; }

/* ---- Terminal window ------------------------------------------------------ */
.term-window {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-term);
  border: 1px solid var(--n-700);
  margin-top: var(--sp-12);
}

.term-chrome {
  background: var(--n-850);
  padding: 10px var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--n-700);
}

.term-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.term-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: block;
}
.term-dot--close  { background: #e06c5e; }
.term-dot--min    { background: #e0b35e; }
.term-dot--expand { background: #62c073; }

.term-title {
  font: 400 0.75rem / 1 var(--font-mono);
  color: var(--n-400);
  margin-left: var(--sp-2);
}

.term-body {
  background: #0c0e13;
  padding: var(--sp-6);
  font: 400 0.875rem / 1.8 var(--font-mono);
  color: var(--n-300);
  overflow-x: auto;
}

/* Semantic terminal colour classes (mapped to token palette) */
.t-g  { color: var(--green-400); }   /* pass / signed / ALLOW    */
.t-a  { color: var(--amber-400); }   /* warn / validated          */
.t-r  { color: var(--red-400); }     /* fail / BLOCK              */
.t-d  { color: var(--n-500); }       /* dim / secondary           */
.t-p  { color: var(--brand-300); }   /* prompt / brand            */
.t-c  { color: var(--blue-400); }    /* info / remote             */

/* Terminal line animation */
.term-line {
  display: block;
}
/* Lines start hidden; JS (or fallback) makes them visible */
.term-line--pending {
  visibility: hidden;
}

/* ---- Section base --------------------------------------------------------- */
.section {
  padding: var(--sp-20) 0;
}

.section h2 {
  font: var(--text-h1);
  letter-spacing: -0.025em;
  margin: var(--sp-4) 0 0;
  max-width: 24ch;
}

.section .section-lead {
  font: var(--text-body-lg);
  color: var(--fg-secondary);
  max-width: 62ch;
  margin: var(--sp-5) 0 0;
  text-wrap: pretty;
}

/* Divider between sections on the dark canvas */
.section + .section { border-top: 1px solid var(--hairline); }

/* ---- Problem section ------------------------------------------------------ */
.section-problem .problem-body {
  font: var(--text-body-lg);
  color: var(--fg-secondary);
  max-width: 68ch;
  margin: var(--sp-5) 0 0;
  text-wrap: pretty;
  line-height: 1.7;
}

/* ---- Workflow section ----------------------------------------------------- */
.workflow-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-12);
}

.workflow-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.workflow-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.workflow-card-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-5);
}
.workflow-card-icon i { width: 22px; height: 22px; }

.workflow-card h3 {
  font: 600 1.0625rem / 1.3 var(--font-sans);
  letter-spacing: -0.01em;
  margin: 0;
}

.workflow-card p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--fg-secondary);
  margin: var(--sp-3) 0 0;
}

.workflow-closer {
  font: 500 1.125rem / 1.5 var(--font-sans);
  color: var(--brand-400);
  margin: var(--sp-10) 0 0;
  font-style: italic;
}

@media (max-width: 768px) {
  .workflow-cards { grid-template-columns: 1fr; }
}

/* ---- How it works / triptych section ------------------------------------- */
.triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-12);
}

.triptych-card {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 28px;
  background: var(--n-900);
  position: relative;
  overflow: hidden;
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.triptych-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

/* Small accent dot — not a large fill, just wayfinding */
.triptych-accent {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: var(--sp-2);
  vertical-align: middle;
  flex-shrink: 0;
}

.triptych-label {
  font: 600 1.0625rem / 1 var(--font-mono);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.triptych-label em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--fg-secondary);
}

.triptych-card p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--fg-secondary);
  margin: var(--sp-4) 0 0;
}

.tri-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--sp-5);
  font: 500 0.8125rem / 1 var(--font-sans);
  color: var(--fg-muted);
  transition: color 0.14s ease;
}
.tri-link:hover { color: var(--fg); }
.tri-link i { width: 13px; height: 13px; }

@media (max-width: 768px) {
  .triptych { grid-template-columns: 1fr; }
}

/* ---- Envelope ladder ------------------------------------------------------ */
.envelope-ladder {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: var(--sp-10);
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.envelope-step {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.envelope-chip {
  font: 600 0.6875rem / 1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.envelope-chip i { width: 13px; height: 13px; }

.envelope-chip--unsigned   { color: var(--info-fg);   background: var(--info-bg); }
.envelope-chip--validated  { color: var(--warn-fg);   background: var(--warn-bg); }
.envelope-chip--signed     { color: var(--ok-fg);     background: var(--ok-bg); }

.envelope-arrow {
  color: var(--fg-faint);
  display: inline-flex;
  align-items: center;
}
.envelope-arrow i { width: 16px; height: 16px; }

.envelope-desc {
  font: 400 0.75rem / 1.4 var(--font-mono);
  color: var(--fg-muted);
  white-space: nowrap;
}

/* ---- Proof section -------------------------------------------------------- */
.proof-body {
  font: var(--text-body-lg);
  color: var(--fg-secondary);
  max-width: 64ch;
  margin: var(--sp-5) 0 0;
  text-wrap: pretty;
  line-height: 1.7;
}

.proof-closing {
  font: var(--text-small);
  color: var(--fg-muted);
  max-width: 60ch;
  margin: var(--sp-6) 0 0;
  line-height: 1.6;
  text-wrap: pretty;
}

.decision-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  align-items: center;
}

/* ---- Footer --------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding: var(--sp-12) 0 var(--sp-10);
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-10);
  flex-wrap: wrap;
}

.footer-brand-col {
  max-width: 280px;
}

.footer-tagline {
  font-size: 0.8125rem;
  color: var(--fg-muted);
  line-height: 1.6;
  margin: var(--sp-3) 0 0;
  font-family: var(--font-mono);
}

.footer-col h5 {
  font: var(--text-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--sp-4);
}

.footer-col a {
  display: block;
  font-size: 0.875rem;
  color: var(--fg-secondary);
  padding: 5px 0;
  transition: color 0.14s ease;
}
.footer-col a:hover { color: var(--fg); }

.footer-bottom {
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

.footer-bottom .mono-note {
  font-family: var(--font-mono);
  color: var(--fg-faint);
}

@media (max-width: 640px) {
  .footer-grid { flex-direction: column; gap: var(--sp-8); }
  .footer-bottom { flex-direction: column; gap: var(--sp-2); }
}

/* ---- Accessibility: focus rings are always visible ----------------------- */
/* Never remove :focus-visible outlines from interactive elements */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

button:focus-visible, a:focus-visible {
  border-radius: var(--r-xs);
}

/* ---- Reduced-motion: disable all decorative animation -------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .term-line--pending { visibility: visible; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----------------------------------------------------------------------
   The wedge — EU Cyber Resilience Act (#cra)
   Dark canvas, brand-accented "evidence bundle" panel.
   ---------------------------------------------------------------------- */
.eyebrow--brand { color: var(--brand-400); }

.cra-panel {
  margin: var(--sp-6) 0 var(--sp-5);
  padding: var(--sp-6);
  background: var(--bg-raised);
  border: 1px solid color-mix(in oklch, var(--brand-500) 38%, var(--border));
  border-radius: var(--r-lg);
}

.cra-answer {
  font: var(--text-body-lg);
  color: var(--fg);
  margin: 0;
}

.cra-tagline {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--brand-400);
}
.cra-tagline .prompt { color: var(--zegit); margin-right: var(--sp-1); }

.cra-points {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2) var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.cra-points li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--fg-secondary);
  font: var(--text-small);
}
.cra-points li svg {
  width: 16px; height: 16px;
  color: var(--brand-400);
  flex: 0 0 auto;
}

.cra-closing { color: var(--fg-secondary); }
.cra-closing strong { color: var(--fg); }

/* ---- Nav CTA pill --------------------------------------------------------- */
/* Used on "Get involved" in every page's nav. Subtle filled pill that reads   */
/* as a gentle call to action without overpowering the other nav links.        */
.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: color-mix(in oklch, var(--brand-500) 16%, transparent);
  border: 1px solid color-mix(in oklch, var(--brand-500) 40%, transparent);
  border-radius: var(--r-sm);
  color: var(--brand-400) !important;
  font-size: 0.875rem;
  font-family: var(--font-sans);
  font-weight: 500;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
  white-space: nowrap;
}
.nav-cta:hover {
  background: color-mix(in oklch, var(--brand-500) 26%, transparent);
  border-color: color-mix(in oklch, var(--brand-500) 60%, transparent);
  color: var(--fg) !important;
}

/* ---- get-involved --------------------------------------------------------- */
/* Two-column card grid that stacks on mobile.                                 */
.gi-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-8);
}

@media (max-width: 640px) {
  .gi-cards { grid-template-columns: 1fr; }
}

.gi-card h3 {
  font: 600 1.0625rem / 1.3 var(--font-sans);
  letter-spacing: -0.01em;
  margin: var(--sp-4) 0 0;
}

.gi-card p {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--fg-secondary);
  margin: var(--sp-3) 0 0;
  text-wrap: pretty;
}

.gi-cta-row {
  margin-top: var(--sp-8);
}

/* ----------------------------------------------------------------------
   Get involved — "Where we are" status list
   ---------------------------------------------------------------------- */
.status-list {
  list-style: none;
  margin: var(--sp-4) 0 var(--sp-5);
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.status-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: baseline;
  color: var(--fg-secondary);
  line-height: 1.55;
}
.status-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.status-tag--working  { color: var(--brand-400);   border-color: color-mix(in oklch, var(--brand-500) 45%, var(--border)); }
.status-tag--progress { color: var(--meerkat-dim); border-color: color-mix(in oklch, var(--meerkat) 45%, var(--border)); }
.status-tag--planned  { color: var(--fg-muted); }
.status-follow {
  margin-top: var(--sp-4);
  color: var(--fg-secondary);
}