/* TrioClick — shared base styles
   Design tokens, reset, typography, nav, footer, common buttons.
   Page-specific styles remain inline in each page's <style> block. */

:root {
  --bg:     #191919;
  --navy:   #191919;
  --navy2:  #1e1e1e;
  --slate:  #1e1e1e;
  --card:   #242424;
  --orange: #FF4C0B;
  --orange2:#e03d00;
  --peach:  #FFC79A;
  --beige:  #F6F1E7;
  --white:  #F6F1E7;
  --muted:  #9C8880;
  --green:  #7dd4a8;
  --amber:  #f5c842;
  --blue:   #a8c4e0;
  --border: rgba(255,76,11,0.18);
  /* legacy aliases */
  --teal:   #FF4C0B;
  --teal2:  #e03d00;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ─── NAV (shared shell) ─────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 3rem;
  background: rgba(25,25,25,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,76,11,0.08);
}

/* Compact logo (tender / documents / guides) */
.nav-logo { text-decoration: none; display: flex; flex-direction: column; gap: 1px; }
.logo-name-row { display: flex; align-items: baseline; gap: 0; line-height: 1; }
.logo-trio  { font-size: 1.15rem; font-weight: 800; color: var(--white); letter-spacing: -0.02em; }
.logo-click { font-size: 1.15rem; font-weight: 800; color: var(--orange); letter-spacing: -0.02em; }
.logo-ai {
  font-size: 0.55rem; font-weight: 800; color: var(--peach);
  background: rgba(255,76,11,0.1); border: 1px solid rgba(255,76,11,0.3);
  padding: 0.1rem 0.35rem; border-radius: 3px; margin-left: 4px;
  letter-spacing: 0.05em;
}
.logo-descriptor {
  font-size: 0.55rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}

.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
  text-decoration: none; color: var(--muted);
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; transition: color 0.2s;
}
.nav-links a:hover { color: var(--orange); }

.btn-nav {
  background: var(--orange); color: #fff;
  font-weight: 700; font-size: 0.8rem;
  padding: 0.55rem 1.3rem; border-radius: 3px;
  text-decoration: none; transition: background 0.2s, transform 0.15s;
  letter-spacing: 0.04em;
}
.btn-nav:hover { background: var(--orange2); transform: translateY(-1px); }

.nav-back {
  color: rgba(246,241,231,0.5); font-size: 0.8rem;
  text-decoration: none; transition: color 0.2s;
}
.nav-back:hover { color: var(--white); }

/* ─── FOOTER (shared shell) ──────────────────────────────────── */
footer {
  padding: 1.8rem 4rem;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(255,76,11,0.06);
  background: #111;
  flex-wrap: wrap; gap: 1rem;
}
.footer-links { display: flex; gap: 2rem; }
.footer-links a {
  color: rgba(246,241,231,0.45); font-size: 0.78rem;
  text-decoration: none; transition: color 0.2s;
  letter-spacing: 0.04em;
}
.footer-links a:hover { color: var(--orange); }
.footer-copy { font-size: 0.72rem; color: rgba(246,241,231,0.4); }

/* ─── HTMX placeholder anti-flash ──────────────────────────────
   Reserve space for nav/footer so partial swap doesn't cause layout shift.
   Nav is 64px tall (1.2rem padding × 2 + ~1.3rem content). */
.htmx-placeholder.nav-slot {
  min-height: 64px;
  background: rgba(25,25,25,0.95);
  border-bottom: 1px solid rgba(255,76,11,0.08);
  position: fixed; top: 0; left: 0; right: 0; z-index: 99;
}
.htmx-placeholder.footer-slot {
  min-height: 80px;
  background: #111;
  border-top: 1px solid rgba(255,76,11,0.06);
}
/* Hide placeholder skeleton once partial swapped in */
.htmx-placeholder { transition: opacity .15s ease-in; }