/*
 * Font Overrides
 * Overrides the Next.js font families with Google Fonts
 */

:root {
  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --font-outfit: 'Outfit', sans-serif;
  --font-space-grotesk: 'Space Grotesk', sans-serif;
}

/* Override Next.js font class variables */
.__variable_f367f3 {
  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.__variable_c22fe1 {
  --font-space-grotesk: 'Space Grotesk', sans-serif;
}

.__variable_60a407 {
  --font-outfit: 'Outfit', sans-serif;
}

/* Override font-family declarations that use the Next.js font classes */
.__className_f367f3 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important;
}

.__className_c22fe1 {
  font-family: 'Space Grotesk', sans-serif !important;
}

.__className_60a407 {
  font-family: 'Outfit', sans-serif !important;
}

/* Ensure body and all text uses Outfit as the primary font */
body,
h1, h2, h3, h4, h5, h6,
p, a, span, div, li {
  font-family: var(--font-outfit), 'Outfit', sans-serif;
}

/* Navigation specific overrides */
.sm-toggle,
.sm-panel-item,
.sm-socials-title,
.sm-socials-link {
  font-family: var(--font-outfit), 'Outfit', sans-serif !important;
}

/* Brand Logo Shine Effect */
@keyframes brandLogoShine {
  to {
    background-position: 200% center;
  }
}

.brand-logo-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  isolation: isolate;
  width: 120px;
  height: 80px;
  max-width: 100%;
  max-height: 100%;
}

.brand-logo-shine {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 10 !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  /* Cover entire wrap - mask will clip to logo shape */
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 0, 0, 0.6) 20%,
    rgba(255, 50, 50, 0.9) 30%,
    rgba(255, 100, 100, 1) 40%,
    rgba(255, 0, 0, 1) 50%,
    rgba(255, 100, 100, 1) 60%,
    rgba(255, 50, 50, 0.9) 70%,
    rgba(255, 0, 0, 0.6) 80%,
    transparent 100%
  ) !important;

  background-size: 200% 100% !important;
  background-position: -200% center !important;
  mix-blend-mode: normal !important;

  /* Mask will be applied via JavaScript - set defaults */
  /* DO NOT set mask-image here - it must be set by JS to use the correct image URL */
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-origin: border-box !important;
  mask-origin: border-box !important;
  -webkit-mask-mode: alpha !important;
  mask-mode: alpha !important;
  -webkit-mask-clip: border-box !important;
  mask-clip: border-box !important;
  -webkit-mask-composite: source-over !important;
  mask-composite: add !important;
}

/* Ensure brand logo wrap contains the shine properly */
.brand-logo-wrap {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate;
}

/* Mobile-specific mask fixes */
@media (max-width: 768px) {
  .brand-logo-shine {
    /* Force mask properties on mobile */
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-position: center center !important;
    mask-position: center center !important;
  }
}

/* FAQ Toggle Styles - Ensure they work */
.faq-toggle {
  cursor: pointer !important;
  user-select: none;
}

.faq-content {
  transition: max-height 0.3s ease, opacity 0.3s ease !important;
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
}

.faq-content.active {
  max-height: 1000px !important;
  opacity: 1 !important;
  display: block !important;
}

.faq-content.hidden {
  max-height: 0 !important;
  opacity: 0 !important;
  display: none !important;
}

.faq-icon {
  transition: transform 0.3s ease !important;
}

.faq-toggle.active .faq-icon,
.faq-toggle[aria-expanded="true"] .faq-icon {
  transform: rotate(180deg) !important;
}

.brand-logo-shine.is-hovered,
.brand-logo-item:hover .brand-logo-shine,
.brand-logo-wrap:hover .brand-logo-shine {
  opacity: 1 !important;
  animation: brandLogoShine 2.2s linear infinite;
}


.brand-logo-shine-special-text {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 0, 0, 0.9) 15%,
    rgba(255, 50, 50, 1) 25%,
    rgba(255, 100, 100, 1) 35%,
    rgba(255, 0, 0, 1) 45%,
    rgba(255, 68, 68, 1) 50%,
    rgba(255, 0, 0, 1) 55%,
    rgba(255, 100, 100, 1) 65%,
    rgba(255, 50, 50, 1) 75%,
    rgba(255, 0, 0, 0.9) 85%,
    transparent 100%
  );
  
  background-size: 250% 100%;
  background-position: -250% center;
  animation: brandLogoShine 1.5s linear infinite;
  
  font-family: var(--font-outfit), sans-serif;
  font-size: 3rem;
  font-weight: 300;
  line-height: 1;
  
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.brand-logo-item:hover .brand-logo-shine-special-text {
  opacity: 1 !important;
}

.brand-logo-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Ensure shine is always on top when visible - dimensions set by JavaScript */
.brand-logo-wrap {
  position: relative !important;
}

/* Hover state - ensure shine shows on hover */
.brand-logo-item:hover .brand-logo-shine {
  opacity: 1 !important;
  animation: brandLogoShine 2.2s linear infinite !important;
}

/* Ensure navigation and video are properly styled */
#main-navigation {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  display: block !important;
  background-color: transparent;
}

#main-navigation .desktop-nav {
  display: flex !important;
  align-items: center;
  gap: 1.5rem;
}

@media (max-width: 1023px) {
  #main-navigation .desktop-nav {
    display: none !important;
  }
  
  #main-navigation .lg\\:flex {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  #main-navigation .desktop-nav-lg {
    display: block !important;
  }
  
  #main-navigation .lg\\:block {
    display: block !important;
  }
}

@media (max-width: 1023px) {
  #main-navigation .desktop-nav-lg {
    display: none !important;
  }
}

#hero-video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  z-index: 1 !important;
}

#nav-logo {
  display: block !important;
  height: 4rem !important;
  width: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#video-poster {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
}

/* Navigation color schemes - Homepage vs Other Pages */
/* Homepage: White logo and menu on black background */
.nav-homepage #nav-logo {
  filter: brightness(0) invert(1) !important;
}

.nav-homepage .sm-toggle {
  color: #fff !important;
}

.nav-homepage #mobile-menu-toggle {
  color: #fff !important;
}

.nav-homepage #mobile-menu a {
  color: #fff !important;
}

/* Other Pages: Dark logo and menu on white background */
.nav-other-pages #nav-logo {
  filter: none !important;
}

.nav-other-pages .sm-toggle {
  color: #000 !important;
}

.nav-other-pages #mobile-menu-toggle {
  color: #000 !important;
}

.nav-other-pages #mobile-menu a {
  color: #000 !important;
}

/* Ensure menu button stays red when open on all pages */
.sm-toggle[aria-expanded="true"] {
  color: #E11C22 !important;
}

/* Brand Logo Grid - Mobile Responsive */
@media (max-width: 640px) {
  .brand-logo-wrap {
    width: 80px !important;
    height: 60px !important;
  }
  
  .brand-logo-img {
    max-width: 100% !important;
    max-height: 100% !important;
  }
}

/* Logo Loop - Force visibility on ALL devices */
#logo-loop-container,
.logoloop {
  --logoloop-logoHeight: 80px !important;
  --logoloop-gap: 40px !important;
  overflow: hidden !important;
  min-height: 100px !important;
}

#logo-loop-track,
.logoloop__track {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 80px !important;
}

.logoloop__list {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  min-height: 80px !important;
}

.logoloop__item {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 auto !important;
  margin-right: 40px !important;
}

.logoloop__item img,
.logoloop__node img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: 80px !important;
  width: auto !important;
  max-width: 200px !important;
  min-height: 50px !important;
  filter: brightness(0) invert(1) !important;
}

/* Brand Logo Grid - Force visibility */
.brand-logo-grid .brand-logo-wrap,
.brand-logo-item .brand-logo-wrap {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
}

.brand-logo-img {
  display: block !important;
  visibility: visible !important;
  opacity: 0.7 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  height: auto !important;
  width: auto !important;
  filter: brightness(0) invert(1) !important;
}

.brand-logo-item:hover .brand-logo-img {
  opacity: 1 !important;
}

/* Mobile specific overrides */
@media (max-width: 768px) {
  #logo-loop-container,
  .logoloop {
    --logoloop-logoHeight: 60px !important;
    --logoloop-gap: 25px !important;
    min-height: 80px !important;
  }
  
  .logoloop__item img,
  .logoloop__node img {
    height: 60px !important;
    max-width: 150px !important;
  }
  
  .logoloop__item {
    margin-right: 25px !important;
  }
  
  .brand-logo-wrap {
    width: 70px !important;
    height: 50px !important;
  }
}

@media (max-width: 480px) {
  #logo-loop-container,
  .logoloop {
    --logoloop-logoHeight: 50px !important;
    --logoloop-gap: 20px !important;
    min-height: 70px !important;
  }
  
  .logoloop__item img,
  .logoloop__node img {
    height: 50px !important;
    max-width: 120px !important;
  }
  
  .logoloop__item {
    margin-right: 20px !important;
  }
  
  .brand-logo-wrap {
    width: 60px !important;
    height: 45px !important;
  }
}