/* ==========================================================================
   VENUS — COMPONENTS
   Reusable building blocks. Consumes tokens.css variables only (no raw hex).
   Spec: 04_VISUAL_DESIGN_SYSTEM.md, 01_INFORMATION_ARCHITECTURE.md,
         02_PAGE_SPECIFICATIONS.md
   ========================================================================== */

/* ---------------------------------------------------------------- Buttons -- */
.btn-venus {
  --_bg: var(--color-accent);
  --_fg: var(--paper-50);
  --_bd: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.75rem 1.25rem;
  min-height: 44px;               /* touch target */
  border: 1px solid var(--_bd);
  border-radius: var(--radius-sm);
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.btn-venus:hover { background: var(--color-accent-strong); border-color: var(--color-accent-strong); color: var(--paper-50); text-decoration: none; }

.btn-venus--secondary {
  --_bg: transparent; --_fg: var(--color-text); --_bd: var(--text-strong);
}
.btn-venus--secondary:hover { background: var(--bg-surface); color: var(--color-text); border-color: var(--text-strong); }

.btn-venus--ghost {
  --_bg: transparent; --_fg: var(--color-link); --_bd: transparent;
  padding-left: 0; padding-right: 0; min-height: 0;
}
.btn-venus--ghost:hover { background: transparent; color: var(--color-link-hover); }
.btn-venus--ghost::after { content: "\2192"; transition: transform var(--dur-micro) var(--ease-out); }
.btn-venus--ghost:hover::after { transform: translateX(3px); }

/* On dark surfaces */
.on-dark .btn-venus--secondary { --_fg: var(--text-on-dark); --_bd: var(--text-on-dark); }
.on-dark .btn-venus--secondary:hover { background: rgba(255,255,255,0.06); color: var(--text-on-dark); }

/* ----------------------------------------------------------------- Header -- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--bg-page);
  border-bottom: var(--border-hairline);
  transition: box-shadow var(--dur-standard) var(--ease-out),
              background var(--dur-standard) var(--ease-out);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: var(--header-h);
  transition: height var(--dur-standard) var(--ease-out);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.site-header.is-scrolled .site-header__inner { height: var(--header-h-scrolled); }

/* Logo — fixed-height slot, image scales by height, never distorts */
.site-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.site-logo__img {
  height: 40px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  transition: height var(--dur-standard) var(--ease-out);
}
.site-header.is-scrolled .site-logo__img { height: 34px; }
@media (max-width: 575.98px) {
  .site-logo__img { height: 34px; }
}

/* -------------------------------------------------------------- Desktop nav */
.primary-nav { display: none; }         /* hidden until lg */
@media (min-width: 1200px) {
  .primary-nav { display: flex; align-items: center; gap: var(--space-6); }
}
.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-nav__link {
  position: relative;
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  padding: var(--space-2) 0;
}
.primary-nav__link:hover { color: var(--color-accent-strong); text-decoration: none; }
.primary-nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-standard) var(--ease-out);
}
.primary-nav__link:hover::after { transform: scaleX(1); }
.primary-nav__link[aria-current="page"] { color: var(--color-text); }
.primary-nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Header CTA + mobile toggle */
.site-header__actions { display: flex; align-items: center; gap: var(--space-3); }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text);
}
@media (min-width: 1200px) { .nav-toggle { display: none; } }
.header-cta { display: none; }
@media (min-width: 1200px) { .header-cta { display: inline-flex; } }

/* --------------------------------------------------------- Mobile nav (off-canvas)
   Intentional mobile UX (06_RESPONSIVE_SYSTEM): full-height panel, large tap
   targets, CTA inside, not a shrunk desktop bar. Uses Bootstrap Offcanvas. */
.mobile-nav.offcanvas { background: var(--bg-page); width: min(88vw, 380px); }
.mobile-nav__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: var(--border-hairline); }
.mobile-nav__list { list-style: none; margin: 0; padding: var(--space-4) 0; }
.mobile-nav__item { border-bottom: var(--border-hairline); }
.mobile-nav__link {
  display: block;
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  min-height: 52px;
}
.mobile-nav__link[aria-current="page"] { color: var(--color-accent-strong); box-shadow: inset 3px 0 0 var(--color-accent); }
.mobile-nav__footer { padding: var(--space-6); }
.mobile-nav__footer .btn-venus { width: 100%; justify-content: center; }

/* ------------------------------------------------------------- Breadcrumb -- */
.breadcrumb-venus { padding: var(--space-4) 0; font-size: var(--fs-small); }
.breadcrumb-venus ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.breadcrumb-venus li { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); }
.breadcrumb-venus li + li::before { content: "/"; color: var(--steel-300); }
.breadcrumb-venus a { color: var(--color-text-muted); }
.breadcrumb-venus a:hover { color: var(--color-accent-strong); }
.breadcrumb-venus [aria-current="page"] { color: var(--color-text); }

/* ---------------------------------------------------------------- Section -- */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.55); }
/* Content-light sections (CTA bands, coming-soon empty-states) — the inner
   component carries its own padding, so the wrapping section stays tight and
   the content doesn't float in dead space. Applied by content, not globally. */
.section--compact { padding-block: clamp(1.5rem, 1.15rem + 1.4vw, 2.5rem); }
.section:has(> .container > .cta-band) { padding-block: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); }
.section--dark { background: var(--bg-dark); color: var(--text-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--text-on-dark); }
.section--surface { background: var(--bg-surface); }
.section__header { margin-bottom: var(--space-12); max-width: var(--measure); }
.section--dark .eyebrow { color: var(--copper-300); }
.section--dark p { color: var(--text-on-dark-muted); }

/* ------------------------------------------------------------------- Card -- */
.card-venus {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-6);
  background: var(--bg-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-standard) var(--ease-out),
              box-shadow var(--dur-standard) var(--ease-out);
}
.card-venus:hover { box-shadow: var(--shadow-md); }
.card-venus__title { font-size: var(--fs-h3); margin: 0; }
.card-venus__body { color: var(--color-text-muted); margin: 0; }
.card-venus__link { margin-top: auto; }
/* Whole-card link pattern (accessible): stretched link over the card */
.card-venus--linked { position: relative; }
.card-venus--linked .card-stretch::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
}
.on-dark .card-venus, .section--dark .card-venus {
  background: var(--bg-dark-alt); border-color: var(--color-border-dark);
}
.on-dark .card-venus__body, .section--dark .card-venus__body { color: var(--text-on-dark-muted); }

/* -------------------------------------------------------------------- CTA -- */
.cta-band {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 1.5rem + 3vw, 4rem);
}
.cta-band h2 { color: var(--text-on-dark); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* ---------------------------------------------------------------- Footer -- */
.site-footer { background: var(--bg-dark); color: var(--text-on-dark); padding-top: var(--space-16); }
.site-footer a { color: var(--text-on-dark-muted); }
.site-footer a:hover { color: var(--copper-300); text-decoration: none; }
.site-footer__brand { max-width: 34ch; }
.site-footer__wordmark {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--text-on-dark);
  margin: 0 0 var(--space-2);
}
.site-footer__tagline { font-size: var(--fs-small); letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-300); }
.footer-col__heading {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel-300);
  margin-bottom: var(--space-4);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--space-2); }
.footer-col li a { font-size: var(--fs-small); }
.site-footer__bottom {
  margin-top: var(--space-12);
  padding: var(--space-6) 0;
  border-top: var(--border-hairline-dark);
  font-size: var(--fs-small);
  color: var(--text-on-dark-muted);
}
.footer-legal-links { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }

/* --------------------------------------------- Placeholder & content-gating --
   Spec: 10_PLACEHOLDER_VERIFICATION_SYSTEM.md, 03_CONTENT_ARCHITECTURE.md
   Behaviour is driven by [data-env] on <html> + [data-content-status] on blocks.
   content-flags.js applies .is-gated-hidden; CSS styles the staging markers. */

/* Inline placeholder token — visible & obvious in staging only */
.placeholder-token {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--warning);
  background: rgba(181, 137, 43, 0.10);
  border: 1px dashed var(--warning);
  border-radius: var(--radius-sm);
  padding: 0.05em 0.4em;
  /* Long tokens must wrap in narrow columns (e.g. footer) — never force
     horizontal overflow. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Staging marker on any status-flagged block */
[data-env="staging"] [data-content-status] { position: relative; }
[data-env="staging"] [data-content-status]::before {
  content: attr(data-content-status);
  position: absolute; top: 0; right: 0;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: var(--radius-sm);
  background: var(--ink-800); color: var(--copper-300);
  z-index: 2; pointer-events: none; opacity: 0.9;
}
[data-env="staging"] [data-content-status="gated"] { outline: 1px dashed var(--danger); outline-offset: 4px; }
[data-env="staging"] [data-content-status="coming-soon"] { outline: 1px dashed var(--steel-500); outline-offset: 4px; }

/* In production, JS hides these entirely — no empty frame, no layout shift */
.is-gated-hidden { display: none !important; }

/* Production-only fallback copy: shown by default (production), hidden in the
   staging review where the placeholder token is displayed instead. */
[data-env="staging"] .prod-only { display: none; }

/* Coming-soon empty state (visible in both envs) */
.coming-soon {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-muted);
  background: var(--bg-surface);
}
.coming-soon__label {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel-500);
}