/*
 * Chatc Theme — Modern Dark & Light Palette
 * Primary → Main brand color (white/accent), primary buttons, main CTAs
 * Accent → Secondary highlights, badges, links (Teal)
 * Background → Clean light foundation
 */
:root {
  /* Core brand / actions */
  --color-primary: #25d366;
  --color-primary-foreground: #ffffff;

  /* Accent / highlights */
  --color-accent: #1dd1a1;
  --color-accent-foreground: #ffffff;

  /* Neutral layers */
  --color-background: #ffffff;
  --color-surface: #f8fafb;
  --color-surface2: #f1f3f5;
  --color-surface3: #e9ecef;

  --color-muted: #e9ecef;
  --color-muted-foreground: #6c757d;

  --color-border: #dee2e6;
  --color-border2: #adb5bd;

  /* Text hierarchy */
  --color-foreground: #0d1117;
  --color-foreground-muted: #424242;
}

/* Shared sticky nav — solid opaque bar by default */
.sb-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 1.25rem;
  box-sizing: border-box;
  background-color: var(--color-surface, var(--color-background, #fff));
  color: var(--color-foreground, inherit);
}

@media (min-width: 1024px) {
  .sb-nav {
    padding-inline: 2rem;
  }
}

.sb-nav a:not(.sb-nav-cta):not([class^="bg-"]):not([class*=" bg-"]) {
  color: inherit;
}

/* Active nav link */
.sb-nav a[data-sb-active="true"] {
  color: var(--color-accent, var(--color-primary, inherit)) !important;
  font-weight: 600 !important;
}

/* Nav CTA button */
.sb-nav a.sb-nav-cta,
.sb-nav a[class^="bg-"],
.sb-nav a[class*=" bg-"] {
  color: var(--color-primary-foreground, #fff) !important;
}

.sb-nav a.sb-nav-cta[data-sb-active="true"],
.sb-nav a[class^="bg-"][data-sb-active="true"],
.sb-nav a[class*=" bg-"][data-sb-active="true"] {
  color: var(--color-primary-foreground, #fff) !important;
  font-weight: inherit !important;
}

/* Mobile hamburger */
.sb-nav .sb-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sb-nav .sb-nav-mobile[hidden],
.sb-nav .sb-nav-mobile.hidden {
  display: none !important;
}

@media (min-width: 768px) {
  .sb-nav .sb-nav-toggle,
  .sb-nav .sb-nav-mobile {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .sb-nav .sb-nav-mobile.sb-nav-open,
  .sb-nav .sb-nav-mobile.active {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
  }
}

/* Font family */
body {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

/* Logo scroll animation - More visible with larger movement */
@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0px) scale(0.95);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-24px) scale(1.05);
    opacity: 1;
  }
}

.sb-logo-scroll {
  animation: logoFloat 2.5s ease-in-out infinite;
}

.sb-logo-scroll:nth-child(1) {
  animation-delay: 0s;
}

.sb-logo-scroll:nth-child(2) {
  animation-delay: 0.15s;
}

.sb-logo-scroll:nth-child(3) {
  animation-delay: 0.3s;
}

.sb-logo-scroll:nth-child(4) {
  animation-delay: 0.45s;
}

.sb-logo-scroll:nth-child(5) {
  animation-delay: 0.6s;
}

/* sitebot:defaults:nav-scoping */
/* Shared sticky nav — solid opaque bar by default; transparent overlay is page-local via transparentnav when requested */
.sb-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 1.25rem;
  box-sizing: border-box;
  background-color: var(--color-surface, var(--color-background, #fff));
  color: var(--color-foreground, inherit);
}
@media (min-width: 1024px) {
  .sb-nav {
    padding-inline: 2rem;
  }
}
.sb-nav a:not(.sb-nav-cta):not([class^="bg-"]):not([class*=" bg-"]) {
  color: inherit;
}

/* Active nav link — accent/primary tokens; HTML uses data-sb-active only */
.sb-nav a[data-sb-active="true"] {
  color: var(--color-accent, var(--color-primary, inherit)) !important;
  font-weight: 600 !important;
}

/* sitebot:defaults:nav-cta */
.sb-nav a.sb-nav-cta,
.sb-nav a[class^="bg-"],
.sb-nav a[class*=" bg-"] {
  color: var(--color-primary-foreground, #fff) !important;
}
.sb-nav a.sb-nav-cta[data-sb-active="true"],
.sb-nav a[class^="bg-"][data-sb-active="true"],
.sb-nav a[class*=" bg-"][data-sb-active="true"] {
  color: var(--color-primary-foreground, #fff) !important;
  font-weight: inherit !important;
}

/* sitebot:defaults:nav-cta-v2 */
.sb-nav a[class^="bg-"],
.sb-nav a[class*=" bg-"] {
  color: var(--color-primary-foreground, #fff) !important;
}
.sb-nav a[class^="bg-"][data-sb-active="true"],
.sb-nav a[class*=" bg-"][data-sb-active="true"] {
  color: var(--color-primary-foreground, #fff) !important;
  font-weight: inherit !important;
}

/* sitebot:defaults:nav-cta-v3 */
/* Dropdown / hover:bg-* links keep theme foreground — not CTA white */
.sb-nav a[class*="hover:bg-"]:not(.sb-nav-cta):not([class^="bg-"]):not([class*=" bg-"]),
.sb-nav a[class*="focus:bg-"]:not(.sb-nav-cta):not([class^="bg-"]):not([class*=" bg-"]) {
  color: var(--color-foreground, inherit) !important;
}

/* sitebot:defaults:nav-fullwidth-v1 */
.sb-nav {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

/* sitebot:defaults:nav-mobile-v1 */
.sb-nav .sb-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sb-nav .sb-nav-mobile[hidden],
.sb-nav .sb-nav-mobile.hidden {
  display: none !important;
}
@media (min-width: 768px) {
  .sb-nav .sb-nav-toggle,
  .sb-nav .sb-nav-mobile {
    display: none !important;
  }
}

/* sitebot:defaults:nav-mobile-v2 */
@media (max-width: 767.98px) {
  .sb-nav .sb-nav-mobile.sb-nav-open,
  .sb-nav .sb-nav-mobile.active,
  .sb-nav .sb-nav-menu.sb-nav-open,
  .sb-nav .sb-nav-menu.active {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
  }
}