/* landing-core.css
 * Minimal critical CSS: color tokens, typography base, nav, hero layout, focus ring.
 * Keep <10KB uncompressed ideally.
 */

/* --- Utility Classes (CSP-safe replacement for inline styles) --- */
.is-hidden {
  display: none !important;
}

.is-fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
}

.inline-block {
  display: inline-block !important;
}

.no-pointer {
  pointer-events: none !important;
}

.no-scroll {
  overflow: hidden !important;
}

/* Flex / layout helpers for replaced inline style clusters */
.flex-center-wrap {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.gap-sm {
  gap: .75rem !important;
}

.mt-1-rem {
  margin-top: 1rem !important;
}

/* Visibility helper (replaces JS style.opacity mutations) */
.hero-overlay {
  opacity: 0;
  transition: opacity .25s ease-in-out;
}

.hero-overlay.is-visible {
  opacity: 1;
}

/* Light / default tokens */
:root,
[data-theme="light"] {
  --ed-text: #0f172a;
  --ed-text-muted: #334155;
  --ed-bg: #fff;
  --ed-link: #0b5ed7;

  /* using rgb / with alpha per modern syntax */
  --ed-nav-bg: rgb(255 255 255 / 85%);
  --ed-border: #e2e8f0;
}

/* Dark tokens */
[data-theme="dark"] {
  --ed-text: #e5e7eb;
  --ed-text-muted: #cbd5e1;
  --ed-bg: #0f1419;
  --ed-link: #93c5fd;
  --ed-nav-bg: rgb(15 20 25 / 85%);
  --ed-border: #334155;
}

html {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
}

body {
  margin: 0;
  color: var(--ed-text);
  background: var(--ed-bg);
  -webkit-font-smoothing: antialiased;
}

/* Smooth theme transitions (opt-in to avoid layout jank) */
.theme-transition body,
.theme-transition header.site-header,
.theme-transition .hero,
.theme-transition .navbar,
.theme-transition .btn,
.theme-transition .hero-overlay {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .theme-transition body,
  .theme-transition header.site-header,
  .theme-transition .hero,
  .theme-transition .navbar,
  .theme-transition .btn,
  .theme-transition .hero-overlay { transition: none !important; }
}

/* Hero badge larger variant when used in hero */
.hero-badge {
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 35%));
}

a,
.nav-link {
  font-weight: 600;
  letter-spacing: .5px;
}

/* Focus visibility */
:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Hero unified overlay layout */
.hero {
  position: relative;
  min-height: clamp(560px, 86vh, 960px);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Dynamic sentiment mix gradient (light/dark variants) */
/* Uses neutral -> accent palette blending; animated subtly to imply evolving sentiment */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 35% 42%, rgb(91 143 217 / 55%), transparent 55%),
    radial-gradient(circle at 68% 58%, rgb(91 143 217 / 45%), transparent 60%),
    linear-gradient(145deg, rgb(15 20 25 / 92%) 0%, rgb(18 24 32 / 88%) 60%, rgb(26 32 40 / 85%) 100%);
  opacity: .65;
  mix-blend-mode: normal;
  pointer-events: none;
  transition: opacity .6s ease, background-color .6s ease;
}

[data-theme="light"] .hero::before {
  background:
    radial-gradient(circle at 42% 40%, rgb(91 143 217 / 55%), transparent 55%),
    radial-gradient(circle at 70% 60%, rgb(91 143 217 / 35%), transparent 60%),
    linear-gradient(150deg, rgb(245 248 255 / 95%) 0%, rgb(240 244 250 / 90%) 55%, rgb(232 238 246 / 88%) 100%);
  opacity: .85;
}

@media (prefers-reduced-motion: no-preference) {
  .hero::before {
    animation: sentimentShift 18s linear infinite;
  }
}

@keyframes sentimentShift {
  0% {
    filter: hue-rotate(0deg) brightness(.97);
  }
  50% {
    filter: hue-rotate(20deg) brightness(1);
  }
  100% {
    filter: hue-rotate(0deg) brightness(.97);
  }
}

.hero-media {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.hero-media .hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9) brightness(.85);
}

.hero-overlay {
  position: relative;
  z-index: 2;
  max-width: min(1100px, 92vw);
  padding: clamp(12px, 2.5vw, 24px);
  text-align: center;
}

/* Utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (width >=992px) {
  .hero-overlay {
    text-align: center;
  }
}

/* --- NAV CORE (Compact, modern design) --- */
:root {
  --nav-height: 56px;
  --nav-bg: color-mix(in srgb, var(--bs-body-bg, #0f1a26) 92%, #000);
  --nav-link: color-mix(in srgb, #cfe3ff 88%, transparent);
  --nav-link-hover: #fff;
  --nav-ring: #5b8fd9;
}

header.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  -webkit-backdrop-filter: saturate(120%) blur(12px);
  backdrop-filter: saturate(120%) blur(12px);
  background: var(--nav-bg);
  border-bottom: 1px solid rgb(91 143 217 / 12%);
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--nav-height);
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 1.25rem;
  gap: 1.25rem;
}

.navbar-brand {
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: var(--nav-link);
  text-decoration: none;
  transition: color 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar-brand:focus,
.navbar-brand:hover {
  color: var(--nav-link-hover);
}

.brand-logo {
  height: 24px;
  width: auto;
}

.navbar-toggle {
  appearance: none;
  background: transparent;
  border: 1px solid rgb(91 143 217 / 25%);
  border-radius: 4px;
  padding: 0.35rem 0.45rem;
  line-height: 0;
  color: var(--nav-link);
  cursor: pointer;
  transition: all 0.15s ease;
}

.navbar-toggle svg {
  width: 20px;
  height: 20px;
}

.navbar-toggle:hover {
  border-color: var(--nav-ring);
  background: rgb(91 143 217 / 8%);
}

/* Hide hamburger on desktop */
@media (width >= 992px) {
  .navbar-toggle { display: none; }
}

.navbar-toggle:focus-visible {
  outline: 2px solid var(--nav-ring);
  outline-offset: 2px;
}

.navbar-collapse {
  display: none;
}

.navbar-collapse.show { display: block; }

/* Desktop: always show nav in horizontal flow */
@media (width >= 992px) {
  .navbar-collapse {
    display: flex !important;
    align-items: center;
    flex: 1;
    gap: 0;
    position: static !important;
    inset: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: 0 !important;
    flex-wrap: nowrap !important;
  }
}
/* Legacy compatible desktop enforcement */
@media (min-width: 992px) {
  .navbar-collapse,
  .navbar-collapse.show {
    display:flex !important;
    flex-direction:row !important;
  }
  .navbar-nav {
    flex-direction:row !important;
    flex-wrap:nowrap !important;
  }
  .navbar-nav .nav-link {
    width:auto !important;
  }
  .nav-surface {
    display:flex;
    align-items:center;
    gap:.25rem;
    padding:0;
    background:transparent;
    border:0;
    box-shadow:none;
  }
  .nav-surface .navbar-nav li + li::before {
    background: rgb(91 143 217 / 22%);
  }
}

.navbar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  align-items: center;
  flex: 1;
}

.navbar-nav .nav-link {
  color: var(--nav-link);
  text-decoration: none;
  font-weight: 400;
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  transition: all 0.15s ease;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.navbar-nav .nav-link:focus-visible,
.navbar-nav .nav-link:hover {
  color: var(--nav-link-hover);
  background: rgb(91 143 217 / 10%);
  text-decoration: none;
}

@media (width <= 991.98px) {
  .navbar {
    justify-content: space-between;
  }

  .navbar-collapse {
    display: none;
  }

  .navbar-collapse.show {
    display: block;
    position: absolute;
    inset: var(--nav-height) 0 auto 0;
    background: var(--nav-bg);
    padding: 0.75rem 1rem 1rem;
    box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
    border-bottom: 1px solid rgb(91 143 217 / 12%);
  }

  .navbar-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .navbar-nav .nav-link {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  .nav-utilities {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgb(91 143 217 / 15%);
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
  }
}

/* Nav utilities styling */
.nav-utilities {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
}

/* Tab bar surface (desktop) */
@media (width >= 992px) {
  .nav-surface {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .nav-surface .navbar-nav {
    flex: 0 1 auto;
    display: flex;
    flex-wrap: nowrap;
  }
  .nav-surface .navbar-nav li { position: relative; }
  .nav-surface .navbar-nav li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 30%;
    height: 40%;
    width: 1px;
    background: rgb(91 143 217 / 28%);
  }
  .nav-surface .navbar-nav .nav-link {
    padding: 0.5rem 0.9rem;
    font-weight: 500;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: background .15s ease,color .15s ease;
  }
  .nav-surface .navbar-nav .nav-link:hover,
  .nav-surface .navbar-nav .nav-link:focus-visible {
    background: rgb(91 143 217 / 18%);
    color:#fff;
  }
  .nav-surface .navbar-nav .nav-link[aria-current="page"] {
    background: rgb(91 143 217 / 30%);
    color:#fff;
  }
  .nav-surface .nav-utilities {
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:0.5rem;
    padding-left:0.75rem;
  }
  .nav-surface .nav-utilities .btn { height:30px; }
}

/* Mobile keeps previous vertical overlay; surface becomes block */
@media (width <= 991.98px) {
  .nav-surface { padding: 0; border: 0; background: transparent; box-shadow: none; }
  .nav-surface .nav-utilities { border-left: 0; }
}

.nav-utilities .btn {
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: 4px;
  font-weight: 500;
  letter-spacing: 0.005em;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.theme-toggle .bi {
  font-size: 0.8125rem;
}

.theme-toggle-label {
  font-size: 0.75rem;
}

.nav-utilities .btn-outline-secondary {
  border-color: rgb(91 143 217 / 25%);
  color: var(--nav-link);
  background: transparent;
}

.nav-utilities .btn-outline-secondary:hover {
  border-color: var(--nav-ring);
  background: rgb(91 143 217 / 10%);
  color: var(--nav-link-hover);
}

.nav-utilities .btn-primary {
  background: linear-gradient(135deg, #4a7dd9 0%, #5b8fd9 100%);
  border: none;
  color: #fff;
  box-shadow: 0 2px 6px rgb(74 125 217 / 20%);
}

.nav-utilities .btn-primary:hover {
  background: linear-gradient(135deg, #5b8fd9 0%, #6a9fe9 100%);
  box-shadow: 0 3px 10px rgb(74 125 217 / 30%);
  transform: translateY(-1px);
}

[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .navbar-nav .nav-link {
  color: #dbe9ff;
}

[data-theme="dark"] .navbar-nav .nav-link:hover {
  color: #fff;
}

/* --- HERO OVERLAY (refined) --- */
.hero {
  position: relative;
  isolation: isolate;
}

.hero-media {
  position: relative;
  height: clamp(48vh, 64vh, 72vh);
  border-radius: 14px;
  overflow: hidden;
}

.hero-media picture,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(16px, 4vw, 48px);
}

.hero-overlay .inner {
  max-width: min(88ch, 92vw);
  color: #e9f1ff;
  text-shadow: 0 2px 12px rgb(0 0 0 / 35%);
}

.hero-overlay .eyebrow {
  opacity: .85;
  font-size: .9rem;
  margin-bottom: .5rem;
}

.hero-overlay h1 {
  line-height: 1.1;
  letter-spacing: .2px;
  margin-bottom: .75rem;
}

.hero-overlay p {
  opacity: .94;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: radial-gradient(120% 120% at 50% 30%, rgb(0 0 0 / 6%), rgb(0 0 0 / 45%) 60%, rgb(0 0 0 / 65%));
  pointer-events: none;
  z-index: 0;
}

.hero-overlay {
  z-index: 1;
}

/* Chat bubble high z-index & clickability */
#chat-bubble,
.chat-bubble {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2147483000;
  pointer-events: auto;
}

/* Ensure underlying hero media not blocking chat bubble */
.hero-media {
  pointer-events: none;
}

.hero-media img,
.hero-media picture {
  pointer-events: none;
}

.hero-overlay {
  pointer-events: auto;
}