/* ============================================================
   VAM Global Theme Layer
   Harmonizes every VAM page (constellation / vam-unified /
   vam-volanta themes) into one cohesive product identity.
   Loaded AFTER each page's base stylesheet.

   What this layer guarantees everywhere:
     - The official VAM logo renders crisp, high-quality, and visible
       (transparent mark + subtle ring) in every header / footer / nav.
     - A consistent signature "flight path" accent (used on the homepage)
       is available via .vam-eyebrow and .vam-flightrule.
     - Buttons, links, and focus states share VAM's cyan accent.
   It does NOT rewrite existing component markup — it aligns it.
   ============================================================ */

:root {
  --vam-cyan: #8ec9d8;
  --vam-cyan-bright: #a6dbe8;
  --vam-night: #07080a;
  --vam-line: rgba(231, 238, 247, 0.12);
  --vam-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* ---- Official logo: high quality, transparent, visible everywhere ---- */
/* Header / nav marks (constellation + others) */
.brand-logo-mark,
.brand-lockup img,
.site-header .brand-lockup img,
header .logo img,
img[src*="logo/vam-logo"],
img[src*="logo/vam-logo-transparent"] {
  background: rgba(142, 201, 216, 0.10);
  border-radius: 9px;
  box-shadow: 0 0 0 1px rgba(142, 201, 216, 0.30), 0 6px 18px rgba(0, 0, 0, 0.45);
  padding: 3px;
  object-fit: contain;
}

/* Footer marks */
.footer-icon,
.site-footer img[src*="logo"] {
  border-radius: 8px;
}

/* Wordmark usages (official VAM wordmark) get the same crisp treatment */
img[src*="vam-wordmark"] {
  object-fit: contain;
}

/* ---- Signature flight-path accent (VAM identity hook) ---- */
.vam-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--vam-cyan);
  font: 600 0.74rem/1 var(--vam-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.vam-eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--vam-cyan);
}

/* Thin "sector line" rule used to separate sections with a plane node */
.vam-flightrule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 40px 0;
  color: var(--vam-muted, #9aa3ac);
  font: 600 0.72rem/1 var(--vam-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.vam-flightrule::before,
.vam-flightrule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(142,201,216,0.5), transparent);
}
.vam-flightrule .node { color: var(--vam-cyan); }

/* ---- Accent alignment for links/buttons across themes ---- */
a { color: inherit; }
a:hover { color: var(--vam-cyan); }

/* Consistent focus ring (accessibility + cohesion) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--vam-cyan);
  outline-offset: 2px;
}

/* Primary buttons share the cyan fill regardless of base theme.
   VAM's brand accent is cyan (--aero/#8ec9d8). The default .button in
   constellation.css uses an orange --signal; we harmonize to cyan so every
   page's primary CTA matches the homepage. Secondary/ghost stays outlined. */
.button,
.btn,
button.button,
.button:not(.secondary):not(.ghost),
.btn:not(.secondary):not(.ghost) {
  background: var(--vam-cyan);
  color: #04141a;
  border: 1px solid var(--vam-cyan);
}
.button:hover,
.btn:hover {
  background: var(--vam-cyan-bright);
  border-color: var(--vam-cyan-bright);
  color: #04141a;
}
.button.secondary,
.btn.secondary,
.button.ghost,
.btn.ghost {
  background: transparent;
  color: var(--vam-cyan);
  border: 1px solid rgba(142, 201, 216, 0.5);
}
.button.secondary:hover,
.btn.secondary:hover {
  background: rgba(142, 201, 216, 0.10);
  color: #fff;
}

/* Subtle page background cohesion for light-on-dark themes */
body {
  background-color: var(--vam-night);
}