/* ============================================================================
   RavenCoreX — Components (v4)
   Buttons · cards · forms · navbar + mega-menu · footer · chips · overline.
   Hard rules: radius 0, stroke 1px, NO box-shadow on cards (hover = stroke
   azure), motion 150-300ms ease-out, no bounce/elastic.
   ============================================================================ */

/* ============================================================================
   OVERLINE / KICKER
   ============================================================================ */
.rcx-overline {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-overline);
  line-height: var(--leading-h5);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.rcx-overline--azure { color: var(--color-azure-500); }

/* ============================================================================
   CHIPS / TAGS
   ============================================================================ */
.rcx-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-label);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: var(--color-neutral-50);
  border: var(--icon-stroke) solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-2xs) var(--space-xs);
}
.rcx-chip--azure  { color: var(--color-azure-700);  border-color: var(--color-azure-300); background: var(--color-azure-50); }
.rcx-chip--malibu { color: var(--color-malibu-900); border-color: var(--color-malibu-300); background: var(--color-malibu-50); }
.rcx-chip--indigo { color: var(--color-indigo-700); border-color: var(--color-indigo-100); background: var(--color-indigo-50); }

/* ============================================================================
   BUTTONS
   ============================================================================ */
.rcx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-button);
  letter-spacing: var(--tracking-caption);
  line-height: 1;
  padding: var(--space-sm) var(--space-lg); /* 16 x 32 */
  border: var(--icon-stroke) solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: background-color var(--duration-hover) var(--easing-out),
              color var(--duration-hover) var(--easing-out),
              border-color var(--duration-hover) var(--easing-out);
  -webkit-appearance: none;
  appearance: none;
}

.rcx-btn .rcx-icon { width: 20px; height: 20px; flex: none; }

.rcx-btn:focus-visible {
  outline: 2px solid var(--color-azure-300);
  outline-offset: 2px;
}

/* Primary — Azure */
.rcx-btn--primary {
  background: var(--color-azure-500);
  color: var(--color-neutral-0);
  border-color: var(--color-azure-500);
}
.rcx-btn--primary:hover  { background: var(--color-azure-700); border-color: var(--color-azure-700); color: var(--color-neutral-0); }
.rcx-btn--primary:active  { background: var(--color-azure-900); border-color: var(--color-azure-900); }

/* Secondary — outline (stroke redraws azure on hover) */
.rcx-btn--secondary {
  background: transparent;
  color: var(--color-neutral-800);
  border-color: var(--color-neutral-800);
}
.rcx-btn--secondary:hover  { color: var(--color-azure-500); border-color: var(--color-azure-500); }
.rcx-btn--secondary:active { color: var(--color-azure-700); border-color: var(--color-azure-700); }

/* On dark surfaces */
.rcx-bg-dark .rcx-btn--secondary,
.rcx-bg-darkest .rcx-btn--secondary {
  color: var(--color-neutral-0);
  border-color: var(--color-neutral-200);
}
.rcx-bg-dark .rcx-btn--secondary:hover,
.rcx-bg-darkest .rcx-btn--secondary:hover {
  color: var(--color-malibu-300);
  border-color: var(--color-malibu-300);
}

/* Size variants */
.rcx-btn--sm {
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-caption);
  padding: var(--space-xs) var(--space-md);
}
.rcx-btn--full { width: 100%; }

/* Text/link button */
.rcx-btn--text {
  background: none;
  border: 0;
  padding: var(--space-2xs) 0;
  color: var(--color-azure-700);
}
.rcx-btn--text:hover { color: var(--color-azure-500); }

/* ============================================================================
   CARDS — planar, no box-shadow, hover = stroke azure
   ============================================================================ */
.rcx-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--color-neutral-0);
  border: var(--icon-stroke) solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  transition: border-color var(--duration-hover) var(--easing-out);
}
.rcx-card:hover { border-color: var(--color-azure-500); }
.rcx-card:active { border-color: var(--color-azure-700); }

/* Card with a top accent bar (per business unit) */
.rcx-card--accent {
  border-top-width: 4px;
}
.rcx-card--accent.rcx-card--data       { border-top-color: var(--color-unit-data); }
.rcx-card--accent.rcx-card--automation { border-top-color: var(--color-unit-agents); }
.rcx-card--accent.rcx-card--products   { border-top-color: var(--color-unit-products); }

/* Hover stroke matches the unit accent */
.rcx-card--data:hover       { border-color: var(--color-unit-data); }
.rcx-card--automation:hover { border-color: var(--color-unit-agents); }
.rcx-card--products:hover   { border-color: var(--color-unit-products); }

.rcx-card__icon { width: 32px; height: 32px; color: var(--color-azure-500); }
.rcx-card__title { font-size: var(--text-h4); line-height: var(--leading-h4); letter-spacing: var(--tracking-h4); font-weight: var(--weight-semibold); }
.rcx-card__metric {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-h3);
  line-height: 1.1;
}
.rcx-card__metric--data       { color: var(--color-unit-data); }
.rcx-card__metric--automation { color: var(--color-malibu-700); } /* readable variant of malibu */
.rcx-card__metric--products   { color: var(--color-unit-products); }

.rcx-card--dark {
  background: var(--color-neutral-800);
  border-color: var(--color-neutral-800);
  color: var(--color-text-invert);
}

/* ============================================================================
   FORMS
   ============================================================================ */
.rcx-form { display: flex; flex-direction: column; gap: var(--space-md); }

.rcx-field { display: flex; flex-direction: column; gap: var(--space-2xs); }

.rcx-label {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}

.rcx-input,
.rcx-textarea,
.rcx-select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text);
  background: var(--color-neutral-0);
  border: var(--icon-stroke) solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-xs) var(--space-sm);
  transition: border-color var(--duration-hover) var(--easing-out);
}
.rcx-input::placeholder,
.rcx-textarea::placeholder { color: var(--color-neutral-300); }

.rcx-input:hover,
.rcx-textarea:hover,
.rcx-select:hover { border-color: var(--color-neutral-500); }

.rcx-input:focus,
.rcx-textarea:focus,
.rcx-select:focus {
  outline: none;
  border-color: var(--color-azure-500);
  box-shadow: inset 0 0 0 1px var(--color-azure-500); /* doubles stroke, not a drop shadow */
}

.rcx-textarea { min-height: 120px; resize: vertical; }

/* Honeypot — visually hidden, kept in tab order off */
.rcx-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Form messages */
.rcx-form-msg {
  font-size: var(--text-body-sm);
  padding: var(--space-xs) var(--space-sm);
  border: var(--icon-stroke) solid transparent;
  display: none;
}
.rcx-form-msg.is-visible { display: block; }
.rcx-form-msg--success { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.rcx-form-msg--error   { background: var(--color-error-bg);   border-color: var(--color-error);   color: var(--color-error); }

/* Inline newsletter (footer) */
.rcx-form--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  align-items: stretch;
}
.rcx-form--inline .rcx-input { flex: 1 1 200px; }

/* ============================================================================
   NAVBAR
   ============================================================================ */
/* The navbar is injected into [data-rcx-navbar]. That wrapper is what must be
   sticky: a sticky element only sticks within its PARENT's box, so making the
   .rcx-navbar sticky inside its own ~80px-tall wrapper would let it scroll away
   immediately. We stick the wrapper (parent = <body>, full page height) so the
   bar stays pinned to the top across every section. */
[data-rcx-navbar] {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
}
.rcx-navbar {
  position: relative; /* establishes stacking context above page reveals */
  z-index: var(--z-nav);
  background: var(--color-neutral-0);
  border-bottom: var(--icon-stroke) solid var(--color-border);
  transition: box-shadow var(--duration-hover) var(--easing-out);
}
/* Subtle elevation once the page is scrolled (added by rcx-nav.js) */
.rcx-navbar.is-scrolled { box-shadow: var(--shadow-sm); }
.rcx-navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-sm);
}
.rcx-navbar__logo { display: inline-flex; align-items: center; }
.rcx-navbar__logo img { width: 160px; height: auto; }

.rcx-navbar__nav {
  display: none;
  align-items: center;
  gap: var(--space-lg);
}
@media (min-width: 1024px) { .rcx-navbar__nav { display: flex; } }

.rcx-navbar__actions { display: none; align-items: center; gap: var(--space-md); }
@media (min-width: 1024px) { .rcx-navbar__actions { display: flex; } }

.rcx-navlink {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  background: none;
  padding: var(--space-2xs) 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  transition: color var(--duration-hover) var(--easing-out);
}
.rcx-navlink:hover,
.rcx-navlink[aria-expanded="true"] { color: var(--color-azure-500); }
.rcx-navlink.is-active { color: var(--color-neutral-800); }
.rcx-navlink.is-active::after {
  content: "";
  display: block;
  position: absolute;
}
.rcx-navlink__chev { width: 16px; height: 16px; transition: transform var(--duration-hover) var(--easing-out); }
.rcx-navlink[aria-expanded="true"] .rcx-navlink__chev { transform: rotate(180deg); }

/* Item that owns a mega-menu. NOT position:relative — the panel's offset parent
   is the .rcx-navbar (position:relative) so it centers to the container and
   never overflows the viewport, regardless of how far right its trigger sits.
   Hover safe-zone is the WHOLE navbar (handled in rcx-nav.js): the pointer can
   travel from the trigger down through the navbar into the panel without the
   menu closing — no fragile per-pixel bridge tied to the navbar's height. */
.rcx-navitem { position: static; }
.rcx-navitem .rcx-navlink { position: relative; }

/* Language switcher */
.rcx-lang {
  display: inline-flex;
  border: var(--icon-stroke) solid var(--color-border);
}
.rcx-lang a {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-3xs) var(--space-2xs);
}
.rcx-lang a.is-active { background: var(--color-neutral-800); color: var(--color-neutral-0); }
.rcx-lang a:not(.is-active):hover { color: var(--color-azure-500); }

/* ============================================================================
   MEGA-MENU — "3 doors" (Data / Automation / Products)
   ============================================================================ */
.rcx-megamenu {
  /* Offset parent is .rcx-navbar (position:relative). Centered to the navbar,
     width-capped to the container so it can NEVER overflow the viewport — the
     same on-screen position for every door (Stripe/Atlan-style mega-menu). */
  position: absolute;
  top: calc(100% + var(--space-2xs));
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: var(--z-mega);
  width: min(880px, calc(100vw - 2 * var(--space-lg)));
  max-width: var(--container-max);
  background: var(--color-neutral-0);
  border: var(--icon-stroke) solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-tooltip) var(--easing-out),
              transform var(--duration-tooltip) var(--easing-out),
              visibility 0s linear var(--duration-tooltip);
}
.rcx-navitem.is-open .rcx-megamenu,
.rcx-megamenu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity var(--duration-tooltip) var(--easing-out),
              transform var(--duration-tooltip) var(--easing-out);
}
/* Transparent pointer-bridge over the small visual gap between the navbar's
   bottom edge and the panel. Fixed height (not tied to navbar height), part of
   the panel, so the pointer is never over true dead space on the way down.
   Inherits the panel's visibility, so it can't intercept clicks when closed. */
.rcx-megamenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * (var(--space-2xs) + 2px));
  height: calc(var(--space-2xs) + 2px);
}

.rcx-megacol { display: flex; flex-direction: column; gap: var(--space-xs); }
.rcx-megacol__head {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding-bottom: var(--space-xs);
  border-bottom: 4px solid var(--color-border); /* door accent */
}
.rcx-megacol--data .rcx-megacol__head       { border-bottom-color: var(--color-unit-data); }
.rcx-megacol--automation .rcx-megacol__head { border-bottom-color: var(--color-unit-agents); }
.rcx-megacol--products .rcx-megacol__head   { border-bottom-color: var(--color-unit-products); }

.rcx-megacol__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h5);
  color: var(--color-text);
}
.rcx-megacol__icon { width: 24px; height: 24px; }
.rcx-megacol--data .rcx-megacol__icon       { color: var(--color-unit-data); }
.rcx-megacol--automation .rcx-megacol__icon { color: var(--color-malibu-700); }
.rcx-megacol--products .rcx-megacol__icon   { color: var(--color-unit-products); }

.rcx-megalink {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2xs);
  margin-inline: calc(-1 * var(--space-2xs));
  color: var(--color-text);
  transition: background-color var(--duration-hover) var(--easing-out);
}
.rcx-megalink:hover { background: var(--color-neutral-50); color: var(--color-text); }
.rcx-megalink__title { font-weight: var(--weight-semibold); font-size: var(--text-body); }
.rcx-megalink__desc  { font-size: var(--text-body-sm); color: var(--color-text-muted); }

/* ============================================================================
   MOBILE NAV (accordion drawer)
   ============================================================================ */
.rcx-navbar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: var(--icon-stroke) solid var(--color-border);
  color: var(--color-text);
}
@media (min-width: 1024px) { .rcx-navbar__toggle { display: none; } }
.rcx-navbar__toggle svg { width: 24px; height: 24px; }

.rcx-mobilenav {
  display: none;
  border-top: var(--icon-stroke) solid var(--color-border);
  background: var(--color-neutral-0);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.rcx-mobilenav.is-open { display: block; }
@media (min-width: 1024px) { .rcx-mobilenav { display: none !important; } }

.rcx-acc { border-bottom: var(--icon-stroke) solid var(--color-border); }
.rcx-acc__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  color: var(--color-text);
}
.rcx-acc__trigger svg { width: 20px; height: 20px; transition: transform var(--duration-hover) var(--easing-out); }
.rcx-acc__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.rcx-acc__panel {
  display: none;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-bottom: var(--space-sm);
  padding-left: var(--space-sm);
}
.rcx-acc__panel.is-open { display: flex; }
.rcx-acc__link { padding: var(--space-2xs) 0; color: var(--color-text-secondary); font-size: var(--text-body-sm); }
.rcx-acc__link:hover { color: var(--color-azure-500); }

.rcx-mobilenav__cta { padding-block: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }

/* ============================================================================
   FOOTER
   ============================================================================ */
.rcx-footer {
  background: var(--color-neutral-950);
  color: var(--color-neutral-200);
  border-top: var(--icon-stroke) solid var(--color-neutral-800);
  padding-block: var(--space-3xl) var(--space-xl);
}
.rcx-footer a { color: var(--color-neutral-200); }
.rcx-footer a:hover { color: var(--color-malibu-300); }

.rcx-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}
@media (min-width: 768px)  { .rcx-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1024px) { .rcx-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr; } }

.rcx-footer__brand img { width: 160px; height: auto; }
.rcx-footer__tagline { font-size: var(--text-body-sm); color: var(--color-neutral-300); max-width: 260px; margin-top: var(--space-sm); }

.rcx-footer__col-title {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--color-neutral-300);
  margin-bottom: var(--space-sm);
}
.rcx-footer__links { display: flex; flex-direction: column; gap: var(--space-2xs); }
.rcx-footer__links a { font-size: var(--text-body-sm); }

.rcx-footer__newsletter-copy { font-size: var(--text-body-sm); color: var(--color-neutral-300); margin-bottom: var(--space-sm); }
.rcx-footer .rcx-input { background: var(--color-neutral-950); color: var(--color-neutral-0); border-color: var(--color-neutral-700); }
.rcx-footer .rcx-input::placeholder { color: var(--color-neutral-500); }

.rcx-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--icon-stroke) solid var(--color-neutral-800);
}
.rcx-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.rcx-footer__legal a, .rcx-footer__copy { font-size: var(--text-caption); color: var(--color-neutral-500); }
.rcx-footer__social { display: flex; gap: var(--space-sm); }
.rcx-footer__social a { display: inline-flex; }
.rcx-footer__social svg { width: 20px; height: 20px; }

/* ============================================================================
   ICON base (Phosphor Thin-compatible — stroke 1px, square caps)
   ============================================================================ */
.rcx-icon {
  display: inline-block;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: square;
  stroke-linejoin: miter;
  fill: none;
  vertical-align: middle;
}
.rcx-icon--fill { fill: currentColor; stroke: none; }