/* ========================================
   ASL HERO SECTION - DESIGN SYSTEM COMPLIANT
   Complete fix with all issues resolved
   ======================================== */

/* ========================================
   MINIMAL HEADER FIX - Keep header above hero
   ======================================== */
.elementor-location-header {
  position: relative !important;
  z-index: 9999 !important;
}

/* ============================================
   HERO SECTION - DESIGN SYSTEM STRUCTURE
   ============================================ */

/* Component Wrapper - Handles max-width for hero */
.asl-component-wrapper.asl-hero-wrapper {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Apply full-width breakout to ALL screen sizes */
body .asl-hero-section {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

/* ========================================
   MAIN HERO SECTION
   ======================================== */
body .asl-hero-section {
  position: relative !important;
  min-height: 100vh !important;

  /* Header compensation */
  padding-top: 130px !important;
  padding-bottom: 60px !important;
  padding-left: var(--padding-sides-desktop) !important;
  padding-right: var(--padding-sides-desktop) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
}

/* Background Image */
body .asl-hero-section-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  z-index: 1 !important;
}

/* Gradient Overlay */
body .asl-hero-section-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
}

/* ========================================
   CONTENT CONTAINER
   ======================================== */
body .asl-hero-section-content {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  color: var(--color-white) !important;
  animation: aslHeroFadeInUp 1s ease-out;
}

@keyframes aslHeroFadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   TYPOGRAPHY - DESIGN SYSTEM
   ======================================== */

/* Kicker (Small text above title) */
body .asl-hero-section-kicker {
  font-family: var(--font-body) !important;
  font-size: var(--font-caption) !important;
  font-weight: var(--weight-semibold) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--letter-spacing-button) !important;
  color: var(--color-gold) !important;
  margin-bottom: 20px !important;
  line-height: var(--line-height-caption) !important;
}

/* Main Title (H1) - FIXED */
body .asl-hero-section-title {
  font-family: var(--font-display) !important;
  font-size: var(--font-hero-display) !important;
  font-weight: var(--weight-semibold) !important;
  color: var(--color-white) !important;
  line-height: var(--line-height-hero) !important;
  letter-spacing: var(--letter-spacing-hero) !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  box-sizing: border-box !important;
}

/* Subtitle/Description - FIXED WIDTH */
body .asl-hero-section-subtitle {
  font-family: var(--font-body) !important;
  font-size: var(--font-body-large) !important;
  font-weight: var(--weight-regular) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  line-height: var(--line-height-body) !important;
  margin: 0 auto 40px auto !important;
  padding: 0 !important;
  max-width: var(--max-width-content) !important;
  box-sizing: border-box !important;
}

/* ========================================
   BUTTONS SECTION - COMPLETE FIX
   ======================================== */
body .asl-hero-section-buttons {
  display: flex !important;
  gap: var(--gap-small) !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 700px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Primary Button - DESIGN SYSTEM */
body .asl-hero-section-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: var(--button-padding-primary) !important;
  min-height: var(--button-min-height) !important;
  background: var(--gradient-terracotta) !important;
  color: var(--color-white) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--weight-semibold) !important;
  font-size: var(--button-font-size) !important;
  text-decoration: none !important;
  border-radius: var(--border-radius-full) !important;
  transition: var(--transition-fast) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--letter-spacing-button) !important;
  box-shadow: var(--button-shadow) !important;
  box-sizing: border-box !important;
  border: none !important;
  cursor: pointer !important;
}

/* CRITICAL FIX: Force button text white */
body .asl-hero-section-btn-primary,
body .asl-hero-section-btn-primary *,
body .asl-hero-section-btn-primary span,
body .asl-hero-section-btn-primary .asl-hero-section-btn-icon {
  color: var(--color-white) !important;
}

body .asl-hero-section-btn-primary:hover {
  background: var(--button-primary-hover) !important;
  box-shadow: var(--button-shadow-hover) !important;
}

/* Keep white on hover */
body .asl-hero-section-btn-primary:hover,
body .asl-hero-section-btn-primary:hover *,
body .asl-hero-section-btn-primary:hover span,
body .asl-hero-section-btn-primary:hover .asl-hero-section-btn-icon {
  color: var(--color-white) !important;
}

/* Secondary Button - DESIGN SYSTEM */
body .asl-hero-section-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: var(--button-padding-secondary) !important;
  min-height: var(--button-min-height) !important;
  background: transparent !important;
  color: var(--color-white) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--weight-semibold) !important;
  font-size: var(--button-font-size) !important;
  text-decoration: none !important;
  border-radius: var(--border-radius-full) !important;
  border: var(--border-width) solid var(--button-secondary-border) !important;
  transition: var(--transition-fast) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--letter-spacing-button) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

/* CRITICAL FIX: Force button text white */
body .asl-hero-section-btn-secondary,
body .asl-hero-section-btn-secondary *,
body .asl-hero-section-btn-secondary span,
body .asl-hero-section-btn-secondary .asl-hero-section-btn-icon {
  color: var(--color-white) !important;
}

body .asl-hero-section-btn-secondary:hover {
  background: var(--color-white) !important;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.3) !important;
}

/* Change to navy on hover */
body .asl-hero-section-btn-secondary:hover,
body .asl-hero-section-btn-secondary:hover *,
body .asl-hero-section-btn-secondary:hover span,
body .asl-hero-section-btn-secondary:hover .asl-hero-section-btn-icon {
  color: var(--color-navy) !important;
}

/* Button Icon */
body .asl-hero-section-btn-icon {
  font-size: 18px !important;
  transition: transform var(--transition-fast) !important;
}

/* ========================================
   DESKTOP HOVER EFFECTS (768px+)
   ======================================== */
@media (min-width: 768px) {
  body .asl-hero-section-btn-primary:hover .asl-hero-section-btn-icon,
  body .asl-hero-section-btn-secondary:hover .asl-hero-section-btn-icon {
    transform: translateX(4px) !important;
  }

  body .asl-hero-section-btn-primary:hover {
    transform: translateY(-2px) !important;
  }

  body .asl-hero-section-btn-secondary:hover {
    transform: translateY(-2px) !important;
  }
}

/* ========================================
   SCROLL INDICATOR
   ======================================== */
body .asl-hero-section-scroll {
  position: absolute !important;
  bottom: 40px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
  animation: aslHeroBounce 2s infinite !important;
  cursor: pointer !important;
}

@keyframes aslHeroBounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

body .asl-hero-section-scroll-icon {
  font-size: 32px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  transition: color var(--transition-fast) !important;
}

body .asl-hero-section-scroll:hover .asl-hero-section-scroll-icon {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ========================================
   TABLET RESPONSIVE (768px - 1024px)
   ======================================== */
@media (max-width: 1024px) {
  body .asl-hero-section {
    padding-top: 110px !important;
    padding-bottom: 50px !important;
  }

  body .asl-hero-section-content {
    padding: 0 30px !important;
  }

  body .asl-hero-section-title {
    font-size: 52px !important;
  }

  body .asl-hero-section-subtitle {
    font-size: 19px !important;
  }

  body .asl-hero-section-btn-primary,
  body .asl-hero-section-btn-secondary {
    padding: var(--button-padding-tablet) !important;
    font-size: var(--button-font-size-tablet) !important;
  }
}

/* ========================================
   MOBILE RESPONSIVE (< 768px)
   ======================================== */
@media (max-width: 768px) {
  body .asl-hero-section {
    min-height: 100svh !important;
    padding-top: 100px !important;
    padding-bottom: 40px !important;
    padding-left: var(--padding-sides-mobile) !important;
    padding-right: var(--padding-sides-mobile) !important;
  }

  body .asl-hero-section-content {
    padding: 0 var(--gap-small) !important;
  }

  body .asl-hero-section-kicker {
    font-size: var(--font-caption-mobile) !important;
    margin-bottom: 16px !important;
  }

  body .asl-hero-section-title {
    font-size: var(--font-hero-display-mobile) !important;
  }

  body .asl-hero-section-subtitle {
    font-size: 17px !important;
    margin-bottom: 32px !important;
  }

  body .asl-hero-section-buttons {
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  body .asl-hero-section-btn-primary,
  body .asl-hero-section-btn-secondary {
    width: 90% !important;
    max-width: 360px !important;
    padding: var(--button-padding-mobile) !important;
    min-height: var(--button-min-height-mobile) !important;
    font-size: var(--button-font-size-mobile) !important;
    justify-content: center !important;
  }

  /* Mobile tap feedback */
  body .asl-hero-section-btn-primary:active,
  body .asl-hero-section-btn-secondary:active {
    transform: none !important;
    opacity: 0.85 !important;
  }

  body .asl-hero-section-scroll {
    bottom: 30px !important;
  }

  body .asl-hero-section-scroll-icon {
    font-size: 28px !important;
  }
}

/* ========================================
   SMALL MOBILE (< 480px)
   ======================================== */
@media (max-width: 480px) {
  body .asl-hero-section-content {
    padding: 0 15px !important;
  }

  body .asl-hero-section-title {
    font-size: 32px !important;
  }

  body .asl-hero-section-subtitle {
    font-size: 16px !important;
  }

  body .asl-hero-section-btn-primary,
  body .asl-hero-section-btn-secondary {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ========================================
   ELEMENTOR EDITOR SAFETY
   ======================================== */
body.elementor-editor-active .asl-hero-section-content {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}