/* css/components_patch.css — ADD THIS FILE AND IMPORT IN main.css @import url("components_patch.css"); */
/* FIXES: P7-01, P7-02, NEXACT styles, prefixes, reduced-motion, responsive */

/* Prefixes for backdrop-filter */
.glass, .btn-secondary, .ketravoice-message-bot, .ketravoice-chip, .form-input, .ketravoice-input {
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass, .btn-secondary { background: rgba(17,24,39,0.92) !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .glass::after, .glass::before, .btn-primary::before { display: none !important; }
  .ecosystem-card:hover, .btn-primary:hover { transform: none !important; }
}

/* Will-change for perf */
.btn-primary, .ecosystem-card, .solution-card { will-change: transform; }

/* Mission responsive — was 44px fixed */
.mission-statement { font-size: clamp(28px, 5vw, 44px); line-height: 1.25; }

/* Footer responsive */
@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .footer-top { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .button-group { flex-direction: column; align-items: center; }
  .badge-row { gap: 8px; }
  .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  .nexa-pricing-grid { grid-template-columns: 1fr !important; }
  .contact-panel { padding: 24px; }
}

/* NEXACT tier styles */
.nexa-pricing-grid { align-items: stretch; }
.nexa-tier { display: flex; flex-direction: column; gap: 16px; padding: 28px; position: relative; }
.nexa-price { font-size: 28px; font-weight: 800; color: var(--text-primary); }
.price-main { font-size: 32px; letter-spacing: -0.02em; }
.price-sub { font-size: 14px; color: var(--text-muted); font-weight: 400; }
.nexa-price-month { font-size: 16px; color: var(--text-secondary); margin-top: -12px; }
.nexa-price-month span { opacity: 0.7; font-size: 14px; }
.nexa-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--text-secondary); }
.nexa-features li::before { content: "✓ "; color: var(--status-live); font-weight: 700; margin-right: 4px; }
.nexa-tier.is-popular { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 30px rgba(90,125,255,0.25); border-color: var(--color-secondary) !important; }
.nexa-tier .btn { margin-top: auto; }

/* WhatsApp float */
.whatsapp-float {
  position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px;
  background: #25D366; color: white; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 999; transition: transform 0.2s ease;
}
.whatsapp-float:hover { transform: translateY(-3px) scale(1.05); }
@media (max-width: 600px) { .whatsapp-float { bottom: 16px; right: 16px; width: 52px; height: 52px; } }

/* Ketra Voice close button */
.ketravoice-close { background: transparent; border: 1px solid var(--border); color: var(--text-muted); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; margin-left: auto; }
.ketravoice-close:hover { color: white; border-color: white; }

/* Details FAQ */
details { border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: var(--bg-glass); }
details summary { cursor: pointer; font-weight: 600; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] summary { margin-bottom: 10px; color: var(--color-primary); }

/* Focus visible fallback */
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* Intake form: radio groups, file inputs, hint text (Section B–F, nexa-showroom.js) */
.form-grid input[type="checkbox"],
.form-grid input[type="radio"] {
  background: none;
  border: none;
  padding: 0;
  width: auto;
  accent-color: var(--color-primary);
}
.form-grid input[type="file"] {
  background: rgba(15, 23, 42, 0.4);
  padding: 6px 10px;
  font-size: 12px;
}
.radio-row, .radio-col {
  display: flex;
  gap: 10px 20px;
  margin-top: 4px;
}
.radio-col { flex-direction: column; }
.radio-row { flex-wrap: wrap; flex-direction: row; }
.radio-inline {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  font-size: 13px !important;
  text-transform: none;
  opacity: 1 !important;
}
.radio-inline input { margin: 0; }
.field-hint {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.85;
  margin-top: 2px;
}
.nexa-form-section[hidden] { display: none; }

/* Footer contact block — was rendering as one run-on line with no CSS at all */
.footer-contact-mini {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.footer-contact-mini a {
  color: var(--text-secondary, #C8D1E0);
  text-decoration: none;
}
.footer-contact-mini a:hover {
  color: var(--text-primary, #FFFFFF);
}
.footer-flag-line {
  font-size: 12px;
  opacity: 0.65;
  margin-top: 2px;
}

/* Compact socials section — logo-only icons, no oversized buttons */
.footer-socials {
  padding: 20px 0;
  border-top: 1px solid var(--border, rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-social-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-social-group-title {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, #7E8A9B);
  white-space: nowrap;
}
.footer-social-icons {
  display: flex;
  gap: 10px;
}
.footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-glass, rgba(255,255,255,.04));
  border: 1px solid var(--border, rgba(255,255,255,.08));
  transition: var(--transition, .2s ease);
}
.footer-social-icon:hover {
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}

/* Active-page glow indicator in the header nav — color follows the
   current page's accent token (set by navigation.js as --page-accent),
   falling back to the brand primary on pages with no dedicated theme.
   Text glow only — no underline bar. */
.site-nav a.is-active {
  color: var(--page-accent, var(--color-primary, #14D8FF));
  text-shadow: 0 0 8px color-mix(in srgb, var(--page-accent, var(--color-primary, #14D8FF)) 45%, transparent);
  position: relative;
}

/* Skip-to-content link (accessibility) — every page renders a
   <main id="main-content"> landmark already; this just gives keyboard
   and screen-reader users a way to jump straight to it. Hidden until
   focused, matching the site's existing --color-primary/--bg-primary. */
.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: var(--z-modal, 2000);
  background: var(--bg-primary, #05070A);
  color: var(--color-primary, #14D8FF);
  padding: 10px 18px;
  border-radius: var(--radius-small, 10px);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus {
  top: 12px;
}


/* Cards: one hover recipe (tokens in variables.css), one transition */
.ecosystem-card, .nexa-tier, .core-card, .tool-card, .built-banner-card,
.glass.tech-card-banner, .offering-banner-card, .glass.offering-banner-card,
.product-feature-card, .product-callout.glass, .problem-mini-card.glass, .problem-image-card.glass {
  transition: var(--card-transition);
}
@media (prefers-reduced-motion: reduce) { :root { --card-lift: none; --card-image-zoom: none; } }
.nexa-tier.is-popular:hover { transform: translateY(-10px); box-shadow: var(--card-shadow), 0 0 25px color-mix(in srgb, var(--card-accent, var(--card-glow)) 25%, transparent); }

/* Card images: same zoom timing everywhere */
.built-banner-card img, .offering-banner-img { transition: transform 0.3s ease; }

/* Price cards: the call to action is the same everywhere */
.nexa-tier > .btn { width: 100%; text-align: center; justify-content: center; box-sizing: border-box; }

/* Dropdown lists: on Windows the option list rendered white-on-white against the dark theme. */
select.form-input { color-scheme: dark; }
select.form-input option { background-color: #0b1118; color: #e8eef5; }