/* ============================================================
   GLOBAL STYLES
   ============================================================
   
   Global utilities and Dash overrides.
   All component styling is Bootstrap-native.
   ============================================================ */

/* Global font family - Bootstrap standard variables */
body {
  font-family: var(--bs-font-sans-serif) !important;
  font-size: 1rem;
  line-height: 1.5;
}

/* Space Grotesk for headings and branding using Bootstrap variables */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--bs-headings-font-family) !important;
}

.navbar-brand {
  font-family: var(--bs-headings-font-family) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Hide Dash loading spinner */
._dash-loading {
  visibility: hidden;
}

/* Ensure Bootstrap takes precedence */
* {
  box-sizing: border-box;
}

/* ============================================================
   NAVBAR THEME-AWARE TEXT COLORS
   ============================================================ */

/* Light theme - dark text */
.navbar-theme-text {
  color: var(--bs-body-color) !important;
}

.navbar-theme-text .navbar-brand,
.navbar-theme-text .navbar-nav .nav-link,
.navbar-theme-text .navbar-text {
  color: var(--bs-body-color) !important;
}

.navbar-theme-text .navbar-brand:hover,
.navbar-theme-text .navbar-nav .nav-link:hover {
  color: var(--bs-primary) !important;
}

/* Dark theme - light text */
[data-bs-theme="dark"] .navbar-theme-text {
  color: var(--bs-white) !important;
}

[data-bs-theme="dark"] .navbar-theme-text .navbar-brand,
[data-bs-theme="dark"] .navbar-theme-text .navbar-nav .nav-link,
[data-bs-theme="dark"] .navbar-theme-text .navbar-text {
  color: var(--bs-white) !important;
}

[data-bs-theme="dark"] .navbar-theme-text .navbar-brand:hover,
[data-bs-theme="dark"] .navbar-theme-text .navbar-nav .nav-link:hover {
  color: var(--bs-gray-200) !important;
}

/* ============================================================
   MOBILE RESPONSIVE OVERRIDES
   ============================================================ */

/* Mobile & portrait tablet: stack content vertically */
@media (max-width: 1199.98px) {
  /* Graph height adapts on mobile */
  #kg-graph {
    height: 60vh !important;
    min-height: 350px !important;
  }

  /* Chat panel uses more width on small screens */
  .kg-chat-panel {
    width: calc(100vw - 32px) !important;
    right: 16px !important;
    bottom: 80px !important;
  }

  /* Footer: stack items vertically */
  footer .d-flex.justify-content-center {
    flex-direction: column !important;
    gap: 0.5rem;
  }

  footer .d-inline-flex {
    justify-content: center;
  }

  /* Landing hero: reduce heading size */
  .display-3 {
    font-size: 2rem !important;
  }

  .display-4 {
    font-size: 1.75rem !important;
  }

  /* Landing hero: reduce lead text on small screens */
  .lead {
    font-size: 1rem !important;
  }
}

/* Desktop: hero fills viewport height, larger SVG */
@media (min-width: 992px) {
  #hero {
    min-height: calc(100vh - 200px);
  }

  .landing-hero-svg {
    max-width: 400px !important;
  }
}