/* ==========================================================================
   HCISS Components
   Reusable classes built on tokens.css. Load tokens.css first.
   These map directly to the patterns used in the approved homepage build —
   use them instead of re-writing inline styles when building new pages.
   ========================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--hciss-slate-050);
  color: #1A1A1A;
  font-family: var(--font-body);
}

a { color: var(--hciss-gold-600); text-decoration: none; }
a:hover { color: var(--hciss-gold-700); text-decoration: underline; }

html { scroll-behavior: smooth; }

/* ---- Layout ---- */
.hciss-container {
  max-width: var(--space-container-max);
  margin: 0 auto;
}

.hciss-section {
  padding: var(--space-section-y) var(--space-section-x);
}
.hciss-section--compact { padding: var(--space-section-y-compact) var(--space-section-x); }
.hciss-section--cta { padding: var(--space-section-y-cta) var(--space-section-x); text-align: center; }
.hciss-section--light { background: var(--hciss-slate-050); }
.hciss-section--white { background: var(--hciss-white); border-top: 1px solid var(--hciss-border); border-bottom: 1px solid var(--hciss-border); }
.hciss-section--dark { background: var(--hciss-navy-900); }
.hciss-section--hero { background: var(--hciss-navy-800); }

.hciss-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) { .hciss-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hciss-grid-4 { grid-template-columns: 1fr; } }

/* ---- Typography ---- */
.hciss-h1 { font: var(--text-h1); color: var(--hciss-slate-050); margin: 0 0 22px 0; }
@media (max-width: 640px) { .hciss-h1 { font-size: 36px !important; } }

.hciss-h2 { font: var(--text-h2); color: var(--hciss-navy-800); margin: 0 0 12px 0; }
.hciss-h2--on-dark { color: var(--hciss-slate-050); }

.hciss-h3 { font: var(--text-h3); color: var(--hciss-navy-800); }
.hciss-h3--on-dark { color: var(--hciss-slate-050); }

.hciss-body-lg { font: var(--text-body-lg); color: var(--hciss-ice-200); margin: 0 0 34px 0; }
.hciss-body { font: var(--text-body); color: var(--hciss-navy-700); margin: 0 0 44px 0; max-width: 640px; }
.hciss-body-sm { font: var(--text-body-sm); color: var(--hciss-navy-700); }

.hciss-eyebrow {
  font: var(--text-eyebrow);
  letter-spacing: 0.14em;
  color: var(--hciss-gold-600);
  text-transform: uppercase;
}

.hciss-label {
  font: var(--text-label);
  letter-spacing: 0.08em;
  color: var(--hciss-navy-700);
  text-transform: uppercase;
}

/* ---- Buttons ---- */
.hciss-btn-primary {
  font: var(--text-button);
  color: var(--hciss-navy-800);
  background: var(--hciss-gold-600);
  border: none;
  border-radius: var(--radius-button);
  padding: 15px 28px;
  cursor: pointer;
  transition: background var(--duration-hover) var(--ease-standard), transform var(--duration-hover) var(--ease-standard);
}
.hciss-btn-primary:hover { background: var(--hciss-gold-500); transform: translateY(-1px); }
.hciss-btn-primary--sm { padding: 12px 22px; font-size: 14px; }

.hciss-btn-outline {
  font: var(--text-button);
  color: var(--hciss-gold-600);
  background: transparent;
  border: 1.5px solid var(--hciss-gold-600);
  border-radius: var(--radius-button);
  padding: 14px 26px;
  cursor: pointer;
  transition: background var(--duration-hover) var(--ease-standard), border-color var(--duration-hover) var(--ease-standard);
}
.hciss-btn-outline:hover { background: rgba(201,151,28,0.14); }

/* ---- Nav link ---- */
.hciss-navlink {
  font: var(--text-nav);
  color: var(--hciss-navy-800);
  transition: color var(--duration-hover) var(--ease-standard);
}
.hciss-navlink:hover { color: var(--hciss-gold-600) !important; text-decoration: none; }

/* ---- Cards ---- */
.hciss-card {
  background: var(--hciss-white);
  border: 1px solid var(--hciss-border);
  border-radius: var(--radius-card);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color var(--duration-hover) var(--ease-standard), box-shadow var(--duration-hover) var(--ease-standard);
}
.hciss-card:hover { border-color: var(--hciss-gold-600); box-shadow: 0 8px 24px rgba(11,18,32,0.08); }

.hciss-card--roadmap { border: 1px dashed var(--hciss-gold-border); }

.hciss-icon-tile {
  width: 40px; height: 40px;
  border-radius: var(--radius-icon-tile);
  display: flex; align-items: center; justify-content: center;
}
.hciss-icon-tile--gold { background: rgba(201,151,28,0.14); }
.hciss-icon-tile--navy { background: rgba(19,35,63,0.08); }
.hciss-icon-tile--roadmap { background: rgba(178,136,22,0.12); }

/* ---- Status badges ---- */
.hciss-badge {
  display: inline-flex;
  font: var(--text-label);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  border-radius: var(--radius-badge);
  padding: 4px 8px;
  width: fit-content;
}
.hciss-badge--flagship { color: var(--hciss-navy-800); background: var(--hciss-gold-600); }
.hciss-badge--live { color: var(--hciss-slate-050); background: var(--hciss-navy-900); }
.hciss-badge--roadmap { color: var(--hciss-gold-900); background: transparent; border: 1px dashed var(--hciss-gold-900); padding: 3px 8px; }

/* ---- Motion: scroll reveal ---- */
.hciss-reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--duration-reveal) var(--ease-standard), transform var(--duration-reveal) var(--ease-standard); }
.hciss-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .hciss-reveal { opacity: 1; transform: none; transition: none; } }

/* ---- Motion: hero load-in ---- */
.hciss-hero-fade { opacity: 0; transform: translateY(14px); animation: hciss-hero-in 0.7s ease forwards; }
@keyframes hciss-hero-in { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .hciss-hero-fade { animation: none; opacity: 1; transform: none; } }

/* ---- Motion: pulse (used for "live" graphic nodes) ---- */
@keyframes hciss-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.hciss-pulse-node { animation: hciss-pulse var(--duration-pulse) ease-in-out infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .hciss-pulse-node { animation: none; } }
@media (prefers-reduced-motion: reduce) { .hciss-motion-guard { display: none; } }

/* ---- Responsive: hero row ---- */
@media (max-width: 900px) {
  .hciss-hero-row { flex-direction: column; align-items: flex-start !important; }
  .hciss-hero-row svg { width: 100%; height: auto; max-width: 360px; }
  .hciss-hero-copy { max-width: 100% !important; flex-shrink: 1 !important; width: 100%; }
}
@media (max-width: 640px) {
  .hciss-hero-section { padding: 88px var(--space-section-x-mobile) 64px var(--space-section-x-mobile) !important; }
}

/* ---- Responsive: nav ---- */
#hciss-hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
#hciss-hamburger span { display: block; width: 22px; height: 2px; background: var(--hciss-navy-800); margin: 4px 0; }
@media (max-width: 880px) {
  #hciss-hamburger { display: flex; flex-direction: column; justify-content: center; }
  #nav-links {
    display: none !important;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--hciss-white);
    flex-direction: column !important; gap: 0 !important;
    padding: 8px 0;
    border-bottom: 1px solid var(--hciss-border);
    box-shadow: 0 8px 16px rgba(11,18,32,0.06);
    z-index: 20;
  }
  #nav-links.is-open { display: flex !important; }
  #nav-links a { padding: 14px 24px; width: 100%; box-sizing: border-box; }
}