/*
 * Primary → Main brand color, primary buttons, main CTAs
 * Accent → Secondary highlights, badges, links, decorative elements, hover states
 * Muted → Subtle backgrounds, disabled states, secondary text
 */
:root {
  /* Core brand / actions */
  --color-primary: oklch(0.42 0.18 200);
  --color-primary-foreground: white;

  /* Accent / highlights (what you use on special elements) */
  --color-accent: oklch(0.52 0.22 200);
  --color-accent-foreground: white;

  /* Neutral layers */
  --color-background: white;
  --color-surface: #d4d4d440;  /*oklch(0.985 0.002 247);*/
  --color-surface2: #00889a1e; /*oklch(0.977 0.013 264.5);*/
  --color-surface3: #00637219;  /*oklch(0.951 0.026 264.5);*/

  --color-muted: oklch(0.951 0.026 264.5);
  --color-muted-foreground: oklch(0.554 0.046 252);

  --color-border: oklch(0.869 0.022 252);
  --color-border2: oklch(0.83 0.03 252);

  /* Text hierarchy */
  --color-foreground: oklch(0.279 0.041 252);
  --color-foreground-muted: oklch(0.379 0.042 252);
}

/* Hero section — image ratio 3803:1583 (approximately 2.4:1) */
.sb-landing-hero-cover-tall {
  aspect-ratio: 3803 / 1583;
  background-size: cover;
  background-position: center;
}

/* Hero text stroke for definition against variable backgrounds */
.sb-landing-hero-cover-tall h1,
.sb-landing-hero-cover-tall p {
  -webkit-text-stroke: 0.8px var(--color-foreground);
  paint-order: stroke fill;
}

/* Trust bar — constrain background SVG only */
.sb-bg-waves-layer {
  position: absolute;
  inset: 0;
  max-height: 200px;
  overflow: hidden;
}

.sb-bg-waves-svg {
  height: 200px;
  width: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
  .sb-bg-story-scroll-wave-back {
    animation: wave-back 15s linear infinite;
  }

  .sb-bg-story-scroll-wave-front {
    animation: wave-front 10s linear infinite;
  }
}

@keyframes wave-back {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes wave-front {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Image slide-in from right on scroll */
@keyframes image-slide-in-from-right {
  0% {
    opacity: 0;
    transform: translateX(80px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.sb-image-slide-in {
  opacity: 0;
  transform: translateX(80px);
}

.sb-image-slide-in.animate {
  animation: image-slide-in-from-right 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Image slide-in from left on scroll */
@keyframes image-slide-in-from-left {
  0% {
    opacity: 0;
    transform: translateX(-80px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.sb-image-slide-in-left {
  opacity: 0;
  transform: translateX(-80px);
}

.sb-image-slide-in-left.animate {
  animation: image-slide-in-from-left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 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: 50;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 1.25rem;
  box-sizing: border-box;
  backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  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-fullwidth-v1 */
.sb-nav {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}
.sb-nav {
  padding-inline: 1.25rem;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .sb-nav {
    padding-inline: 2rem;
  }
}

/* Subtle floating animation — left and right movement */
@keyframes float-subtle {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(15px);
  }
}

.animate-float-subtle {
  animation: float-subtle 3s ease-in-out infinite;
}

/* 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-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;
  }
}