/*--------------------------------------------------------------
# Mission Mischief Mobile-First Hero Styles hero-styles.css
    (Rewritten to remove conflicts and redundancy with main.css)
--------------------------------------------------------------*/

/* The primary Hero Section layout that overrides the generic #hero in main.css */
/* --- Aggressive Fix for Mobile Double Scroll Bar --- */

html {
  /* Also check for horizontal scrollbars, which can cause issues */
  overflow-x: hidden !important; 
}

body {
  /* Override main.css settings to allow the body content to dictate height */
  min-height: auto !important;
  height: auto !important;
  
  /* Ensure the body itself is the only element allowed to scroll */
  overflow-y: scroll !important; 
  overflow-x: hidden !important; 
  
  /* Reset the position to be safe */
  position: static !important;
}

/* Ensure the main container holding all content is unconstrained */
main {
    min-height: auto !important;
    height: auto !important;
    padding-bottom: 20px !important; /* Retain padding from main.css, but with !important */
}

/* FIX for Feature Card Clipping */
#hero {
  /* Change the height calculation for content visibility */
  min-height: auto; 
  height: auto; 
  align-items: flex-start; /* Ensures content starts high */

  /* Keep the rest of your hero styles */
  padding: calc(40px + env(safe-area-inset-top)) 20px 40px 20px;
  position: relative;
  overflow: hidden;
  display: flex;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 20px;
  padding: 20px 0;
}

/* Mayhem Mascot */
.mayhem-hero {
  order: 1;
  margin-bottom: 10px;
  position: relative;
  align-self: flex-end;
}

.mayhem-image {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 0 15px rgba(4, 170, 109, 0.5));
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* Hero Text - Overrides generic H1/H2 sizes from main.css */
.hero-text {
  order: 2;
  margin-bottom: 20px;
  text-align: center;
}

.hero-text h1 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  line-height: 1.2;
}

.hero-text h2 {
  font-size: 1rem;
  margin-bottom: 0;
  line-height: 1.3;
}

/* Feature Cards */
.feature-cards {
  order: 3;
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  max-width: 400px;
  margin-bottom: 20px;
}

.feature-card {
  /* These colors/borders are unique and kept */
  background: rgba(4, 170, 109, 0.1);
  border: 1px solid rgba(4, 170, 109, 0.3);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  z-index: 10;
}

.feature-card:hover {
  background: rgba(4, 170, 109, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(4, 170, 109, 0.15);
}

.feature-card i {
  font-size: 2rem;
  color: #04aa6d;
  margin-bottom: 10px;
}

.feature-card h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: #04aa6d;
}

.feature-card p {
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.4;
}

/* ------------------------------------------- */
/* CTA BUTTON OVERRIDES (Minimizing Conflicts) */
/* ------------------------------------------- */

/* Apply pulse animation and standard transition/size only */
.cta-btn {
  /* These properties are now used to override the default styles from main.css */
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px; /* Override the 4px from main.css */
  font-weight: bold;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  text-transform: uppercase;
  position: relative;
  z-index: 10;
  
  /* The aggressive styling (background/color) is removed here and must be managed 
     in the HTML using inline styles, or by renaming the button. 
     We'll rely on the global main.css hover state for consistency, 
     but ensure the pulse animation works. */
}

/* The pulse animation is unique and remains here */
.cta-btn {
  animation: pulse 2s infinite !important;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(4, 170, 109, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(4, 170, 109, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(4, 170, 109, 0);
  }
}

/* ------------------------------------------- */
/* RESPONSIVE & FIXED CTA BUTTON STYLES */
/* ------------------------------------------- */

/* Mobile specific adjustments (Fixed CTA) */
@media (max-width: 767px) {
  #hero {
    align-items: flex-start;
    padding-top: calc(40px + env(safe-area-inset-top));
    padding-bottom: 40px;
    padding-right: 60px;
    padding-left: 0px;
    min-height: 100vh;
  }
  
  .hero-text h1 {
    font-size: 1.6rem;
    line-height: 1.3;
  }
  
  .hero-text h2 {
    font-size: 0.9rem;
    line-height: 1.4;
  }
  
  .feature-cards {
    flex-direction: column;
    gap: 15px;
    max-width: 400px;
    margin: 0 auto;
  }
  
  /* Fixed Positioning for ALL CTA buttons on mobile */
  .cta-btn {
    position: fixed !important;
    bottom: 100px !important;
    right: 20px !important;
    z-index: 1000 !important;
  }
  
  /* Mobile-specific button size/shape */
  .cta-btn {
    padding: 12px 20px !important;
    font-size: 0.9rem !important;
    border-radius: 25px !important;
    box-shadow: 0 4px 15px rgba(4, 170, 109, 0.3) !important;
    animation: pulse 2s infinite !important;
  }
}

/* Tablet Styles */
@media (min-width: 768px) {
  #hero {
    align-items: center;
    padding-top: 60px;
    padding-bottom: 60px;
  }
  
  .hero-content {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
  }
  
  .mayhem-hero {
    order: 1;
    flex: 0 0 200px;
    margin-bottom: 0;
    position: absolute;
    top: calc(60px + env(safe-area-inset-top));
    right: 20px;
  }
  
  .mayhem-image {
    width: 180px;
    height: 180px;
  }
  
  .hero-text {
    order: 2;
    flex: 1;
    min-width: 300px;
    text-align: center;
    margin-bottom: 0;
  }
  
  .hero-text h1 {
    font-size: 2.5rem;
  }
  
  .hero-text h2 {
    font-size: 1.2rem;
  }
  
  .feature-cards {
    order: 3;
    flex: 1 1 100%;
    flex-direction: row;
    max-width: none;
    margin-bottom: 0;
  }
  
  .feature-card {
    flex: 1;
  }
  
  /* Fixed Positioning for ALL CTA buttons on tablet+ */
  .cta-btn {
    position: fixed !important;
    bottom: 80px !important;
    right: 20px !important;
    z-index: 1000 !important;
    order: 4;
  }
  
  /* Tablet-specific button size/shape */
 
  .cta-btn {
    padding: 12px 20px !important;
    font-size: 0.9rem !important;
    border-radius: 25px !important;
    box-shadow: 0 4px 15px rgba(4, 170, 109, 0.3) !important;
    animation: pulse 2s infinite !important;
  }
}

/* Desktop Styles */
@media (min-width: 1024px) {
  .hero-content {
    align-items: center;
  }
  
  .mayhem-hero {
    flex: 0 0 250px;
  }
  
  .mayhem-image {
    width: 220px;
    height: 220px;
  }
  
  .hero-text h1 {
    font-size: 3rem;
  }
  
  .hero-text h2 {
    font-size: 1.4rem;
  }
}

/* UX ENHANCEMENT: Improve legal text readability */
.cta .text-left p {
    line-height: 1.7; /* Increased line height */
    max-width: 800px; /* Constrain text width on wide screens */
    margin-left: auto;
    margin-right: auto;
}
/* ---------------------------------------------------- */
/* DELETED REDUNDANT CODE FROM ORIGINAL FILE */
/* ---------------------------------------------------- */

/* DELETED: scroll-behavior, body overflow-x, and #footer padding */