/* ===== ATHENA TEXT - Color + Animation + Font Overrides ===== */

/* Geist variable font — body text */
@font-face {
  font-family: 'Geist';
  src: url('/webfonts/Geist[wght].woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

/* Clash Grotesk variable font — headings & numbers */
@font-face {
  font-family: 'Clash Grotesk';
  src: url('/webfonts/ClashGrotesk-Variable.woff2') format('woff2');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}

/* 0. Hide text logo spans so JS swap doesn't flash */
.ib-2024-nav a > span[style*="font-weight"],
footer a > span[style*="font-weight"] {
  visibility: hidden !important;
  height: 32px;
  display: inline-block;
}

/* 0a. Glassmorphism nav bar */
.ib-2024-nav {
  background: rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
  transition: transform 0.6s ease !important;
}
/* When collapsed, slide up using transform (no ghost box — transform doesn't repaint at old position) */
.ib-2024-nav.at-top-collapsed {
  transform: translateY(calc(-1 * var(--at-nav-offset, 36px) + 7px)) !important;
}

/* 0a3. Top bar + sub-nav fade-up on scroll */
.ib-2024-top-bar {
  transition: transform 0.6s ease, opacity 0.6s ease !important;
}
.ib-2024-top-bar.at-hidden {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.js-submenu-navigation {
  transition: transform 0.6s ease, opacity 0.6s ease !important;
}
.js-submenu-navigation.at-hidden {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.at-nav-backdrop {
  transition: transform 0.6s ease, opacity 0.6s ease !important;
}
.at-nav-backdrop.at-hidden {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 0b. CRITICAL: Cookiebot/consent scripts hide body - force it visible */
body { display: block !important; visibility: visible !important; opacity: 1 !important; }

/* 0a2. Living gradient background — soft orb drifting around the page */
@keyframes orbDrift {
  0%   { background-position: 20% 20%; }
  12%  { background-position: 75% 10%; }
  25%  { background-position: 85% 55%; }
  37%  { background-position: 50% 85%; }
  50%  { background-position: 10% 65%; }
  62%  { background-position: 30% 15%; }
  75%  { background-position: 80% 45%; }
  87%  { background-position: 15% 80%; }
  100% { background-position: 20% 20%; }
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background:
    radial-gradient(
      circle,
      #eddee4 0%,
      #e8dae1 30%,
      #f2f0f7 55%,
      #f5f7fa 80%
    );
  background-size: 250% 250%;
  animation: orbDrift 14s ease-in-out infinite;
}

/* 0b. Fonts: Geist for body, Clash Grotesk for H1/H2 + numbers */
h1, h2,
h1.font-display, h2.font-display,
h1[class*="font-a"], h2[class*="font-a"] {
  font-family: 'Clash Grotesk', 'Geist', sans-serif !important;
  font-weight: 500 !important;
}
h3, h4, h5, h6,
.font-display,
[class*="font-a"] {
  font-family: 'Geist', sans-serif !important;
}
body, p, a, span, li, button, input, textarea, label, div,
[class*="font-b"],
[class*="font-base"] {
  font-family: 'Geist', sans-serif !important;
}

/* 1. Remap base orange to Athena wine */
:root {
  --global-colors-orange: #B82050 !important;
  --global-colors-orange-values: 184 32 80 !important;
  --global-colors-orange-dark: #B82050 !important;
  --global-colors-orange-dark-values: 154 26 67 !important;
  --global-colors-orange-opacity-50: #B8205080 !important;
}
.bg-orange-900, [class*="bg-orange-900"] { background-color: #B82050 !important; }
.bg-orange-900.text-black, [class*="bg-orange-900"].text-black,
.ib-button.bg-orange-900, .ib-button[class*="bg-orange-900"],
a.bg-orange-900, a[class*="bg-orange-900"],
.bg-orange-900 span, [class*="bg-orange-900"] span { color: #fff !important; }
.bg-orange-800, [class*="bg-orange-800"] { background-color: #B82050 !important; }
.bg-orange-100, [class*="bg-orange-100"] { background-color: rgba(184,32,80,0.12) !important; }
.text-orange-900, [class*="text-orange-900"] { color: #B82050 !important; }
/* border-orange-900 only on elements that actually show a border */
.border-orange-900 { border-color: #B82050 !important; }
.marker\:text-orange-900 > li::marker { color: #B82050 !important; }
.hover\:bg-orange-800:hover { background-color: #B82050 !important; }
.hover\:border-orange-800:hover { border-color: #B82050 !important; }
.group-hover\:bg-orange-900 { background-color: #B82050 !important; }
.focus-visible\:border-orange-900:focus-visible { border-color: #B82050 !important; }
.focus-visible\:border-orange-800:focus-visible { border-color: #B82050 !important; }
.focus-visible\:ring-orange-900\/40:focus-visible { --tw-ring-color: rgba(184,32,80,0.4) !important; }
.focus-visible\:ring-offset-orange-900:focus-visible { --tw-ring-offset-color: #B82050 !important; }
footer .bg-orange-900 { background-color: #B82050 !important; }
footer [class*="ring-offset-orange"] { --tw-ring-offset-color: #B82050 !important; }
a:hover { color: #B82050; }
.inner-link\:hover\:text-orange-900 a:hover { color: #B82050 !important; }

/* White arrow inside wine-colored squircle circles */
.squircle-static { color: #fff !important; }

/* Quaternary buttons: light pink highlight on hover instead of arrow rotation */
.ib-button[data-button-variant="quaternary"] {
  padding: 8px 12px !important;
  border-radius: 8px !important;
  transition: background-color 0.15s ease !important;
}
.ib-button[data-button-variant="quaternary"]:hover {
  background-color: rgba(184, 32, 80, 0.08) !important;
}
.ib-button[data-button-variant="quaternary"]:hover .squircle-static svg,
.ib-button[data-button-variant="quaternary"]:focus-visible .squircle-static svg {
  transform: none !important;
  -webkit-transform: none !important;
  rotate: none !important;
}

/* 1b. Industry solutions section: blue-to-transparent gradient */
.bg-light-blue-300.wrapper-contained {
  background: linear-gradient(to bottom, #dbeafe, rgba(219, 234, 254, 0)) !important;
}

/* 2. Hide tracking/cookie/analytics elements */
/* top bar kept visible */
.cookiebot-dialogue { display: none !important; }
#CybotCookiebotDialog { display: none !important; }
.grecaptcha-badge { display: none !important; }
#db-sync, #db_lr_pixel_ad, [id^="batBeacon"] { display: none !important; }

/* 3. FAQ accordion styling */
.accordion-container { background-color: #B82050 !important; border-radius: 12px !important; }
.accordion-container [aria-expanded] { cursor: pointer; color: #fff !important; }
.accordion-container [aria-expanded] h3 { color: #fff !important; }
.accordion-container [aria-expanded] svg path { fill: #fff !important; }
.accordion-container section { background-color: #fff !important; border-radius: 0 0 12px 12px !important; }
.accordion-container section div { color: #000 !important; }

/* FAQ panel slide-down animation */
@keyframes accordionSlideDown {
  from { opacity: 0; max-height: 0; transform: translateY(-8px); }
  to { opacity: 1; max-height: 600px; transform: translateY(0); }
}
.accordion-container section[aria-hidden="false"],
.accordion-container section:not([hidden]) {
  animation: accordionSlideDown 0.3s ease-out forwards;
}

/* 3b. Wider max-width for the API section */
#section-api { max-width: 1400px !important; }

/* 3c. Sub-page nav dropdown positioning */
.js-submenu-navigation li { position: relative; }

/* 4. Logo color fix */
.ib-2024-nav span[style*="font-family"] { color: #121A28 !important; }
.ib-2024-nav span[style*="color:#B82050"] { color: #B82050 !important; }

/* 5. Hide injected overlay header */
#athena-header { display: none !important; }

/* 6. CRITICAL: Force all scroll-triggered animations to END state */
[class*="motion-delay"],
[class*="wrapper-contained"],
[class*="ib-wrapper-lite"],
.scroll-my-64 {
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* 6b. Active solution cards: full-card hover highlight + clickable */
.group.at-active-solution {
  cursor: pointer;
  border-radius: 10px;
  transition: background-color 0.15s ease;
}
.group.at-active-solution:hover {
  background-color: rgba(184, 32, 80, 0.06) !important;
}

/* 7. Constrain page content to 1200px max width */
.layout-base {
  --max-content-width: 1200px !important;
}

/* Override motion origin variables so animations start visible */
[class*="motion-delay"] {
  --motion-origin-opacity: 1 !important;
  --motion-origin-translate-x: 0 !important;
  --motion-origin-translate-y: 0 !important;
  --motion-origin-scale-x: 1 !important;
  --motion-origin-scale-y: 1 !important;
}

/* ===== MOBILE OVERRIDES (max-width: 767px) ===== */
@media (max-width: 767px) {
  /* 8. Move sub-page nav pill from bottom to directly below the main nav bar */
  .js-submenu-navigation {
    bottom: auto !important;
    top: 100px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: 95vw !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: top 0.3s ease !important;
  }
  .js-submenu-navigation.scrolled {
    top: 72px !important;
  }

  /* Keep the pill shape, just tighten for mobile */
  .js-submenu-navigation > ul {
    border-radius: 16px !important;
    padding: 4px !important;
    gap: 2px !important;
    font-size: 13px !important;
  }

  /* Smaller tab items inside the pill */
  .js-submenu-navigation > ul li a,
  .js-submenu-navigation > ul li button {
    padding: 6px 8px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
  }

  /* 9. Push main content below fixed nav (60px) + sub-nav (~44px) */
  .main-content {
    padding-top: 108px !important;
  }

  /* Scroll margin for anchored sections */
  [id^="section-"] {
    scroll-margin-top: 120px !important;
  }

  /* 10. Prevent horizontal overflow on mobile */
  body {
    overflow-x: hidden !important;
  }
  .wrapper-contained,
  .main-content {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* 11. Hero image: constrain on mobile */
  .main-content picture img {
    max-width: 100% !important;
    height: auto !important;
  }
}