/* ============================================================================
   MOBILE SECTION LAYOUT UTILITY CLASSES
   Standardized mobile layout system for consistent responsive design
   ============================================================================ */

/* CSS Variables for mobile layout configuration */
:root {
  /* Mobile viewport calculations */
  --mobile-viewport-height: 100vh;
  --mobile-viewport-height-dynamic: 100dvh; /* Dynamic viewport height */
  --mobile-min-height: 400px;
  
  /* Mobile width constraints */
  --mobile-contained-width: 100%;
  --mobile-container-padding: 1rem;
  --mobile-container-padding-small: 0.75rem;
  
  /* Mobile spacing */
  --mobile-section-padding-vertical: 2rem;
  --mobile-section-padding-horizontal: 1rem;
  
  /* Breakpoints */
  --mobile-breakpoint-small: 375px;
  --mobile-breakpoint-medium: 414px;
  --mobile-breakpoint-large: 768px;
}

/* ============================================================================
   WIDTH UTILITIES - Mobile Optimized
   ============================================================================ */

/**
 * Full width mobile section
 */
.section-width--mobile-full {
  width: 100%;
  box-sizing: border-box;
}

/**
 * Contained width mobile section with responsive padding
 */
.section-width--mobile-contained {
  width: 100%;
  max-width: var(--mobile-contained-width);
  padding-left: var(--mobile-container-padding);
  padding-right: var(--mobile-container-padding);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/**
 * Full width container with contained content
 * Used when you want full-width backgrounds/images but contained text
 */
.section-width--mobile-full-container {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

/* Inner content wrapper for full-width containers */
.section-width--mobile-full-container .content-wrapper--mobile {
  padding-left: var(--mobile-container-padding);
  padding-right: var(--mobile-container-padding);
  box-sizing: border-box;
}

/* Small screens get less padding */
@media (max-width: 375px) {
  .section-width--mobile-contained {
    padding-left: var(--mobile-container-padding-small);
    padding-right: var(--mobile-container-padding-small);
  }
  
  .section-width--mobile-full-container .content-wrapper--mobile {
    padding-left: var(--mobile-container-padding-small);
    padding-right: var(--mobile-container-padding-small);
  }
}

/* ============================================================================
   HEIGHT UTILITIES - Mobile Optimized
   ============================================================================ */

/**
 * Flexible height mobile section - adapts to content
 */
.section-height--mobile-flexible {
  min-height: var(--mobile-min-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--mobile-section-padding-vertical);
  padding-bottom: var(--mobile-section-padding-vertical);
}

/**
 * Full viewport height mobile section
 * Uses dynamic viewport height for better mobile browser support
 */
.section-height--mobile-viewport {
  height: var(--mobile-viewport-height);
  height: var(--mobile-viewport-height-dynamic, var(--mobile-viewport-height));
  min-height: var(--mobile-min-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/**
 * Auto height for content-driven sections
 */
.section-height--mobile-auto {
  height: auto;
  padding-top: var(--mobile-section-padding-vertical);
  padding-bottom: var(--mobile-section-padding-vertical);
}

/* ============================================================================
   MOBILE CONTENT CONTAINER STYLES
   ============================================================================ */

.content-container-mobile {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  position: relative;
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom));
}

.content-header-mobile {
  padding: 2rem 1rem 1rem 1rem;
  text-align: center;
}

.content-header-mobile__title {
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  font-weight: bold;
  line-height: 1.2;
  margin: 0;
}

.content-header-mobile__subtitle {
  font-size: clamp(0.875rem, 3vw, 1rem);
  margin-top: 0.5rem;
  opacity: 0.8;
}

/* ============================================================================
   MOBILE SECTION ANIMATION STATES
   ============================================================================ */

.content-section-mobile {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease-out, 
              transform 0.4s ease-out;
  will-change: opacity, transform;
}

.content-section-mobile--animate {
  opacity: 1;
  transform: translateY(0);
}

/* Faster animations for touch devices */
@media (hover: none) and (pointer: coarse) {
  .content-section-mobile {
    transform: translateY(15px);
    transition-duration: 0.3s;
  }
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

/* iPhone SE and smaller */
@media (max-width: 375px) {
  .section-height--mobile-flexible {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    min-height: 350px;
  }
  
  .content-header-mobile__title {
    font-size: 1.75rem;
  }
}

/* Larger phones and small tablets */
@media (min-width: 414px) and (max-width: 768px) {
  .section-width--mobile-contained {
    padding-left: 0;
    padding-right: 0;
  }
  
  .section-height--mobile-flexible {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================ */

/* Reduce animations for low-power mode */
@media (prefers-reduced-motion: reduce) {
  .content-section-mobile,
  .content-section-mobile--animate {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Optimize for touch scrolling */
.content-section-mobile {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* GPU acceleration for animations */
.content-section-mobile--animate * {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* ============================================================================
   UTILITY HELPERS
   ============================================================================ */

/* Scroll snap for mobile sections */
.section-snap--mobile {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Safe area padding for notched devices */
.section-safe--mobile {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ============================================================================
   MOBILE NAVIGATION FOOTER - Shared Styles
   ============================================================================ */

/* Base mobile navigation container */
.mobile-nav {
  display: flex;
  justify-content: space-between;
  padding: 0px 20px;
  background: #ffffff;
  border-top: 1px solid #e0e0e0;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  flex-direction:  column;
  height: 100px;
  margin-bottom: 14px;
}

/* Override NavigationButton styles for mobile nav context */
.mobile-nav .nav-button {
  flex: none; /* Override flex: 1 from NavigationButton */
  height: auto; /* Override fixed height */
  background: transparent; /* Override white background */
  border: none; /* Override border */
  border-top: 1px solid #e0e0e0;
  padding: 10px; /* Match original padding */
  box-shadow: none; /* Remove shadow */
}

.mobile-nav .nav-button:first-child {
  border-top: none;
}

.mobile-nav .nav-button:hover {
  background: transparent; /* Override hover background */
  border: none; /* Override hover border */
  border-top: 1px solid #e0e0e0;
  box-shadow: none; /* Remove hover shadow */
}

.mobile-nav .nav-button:hover:first-child {
  border-top: none;
}

.mobile-nav .nav-button:hover .nav-button__text {
  color: #000000; /* Keep text black on hover */
}

.mobile-nav .nav-button:hover .nav-button__arrow {
  color: #000000; /* Keep arrow black on hover */
}

.mobile-nav .nav-button:focus {
  outline: none; /* Remove focus outline for mobile nav */
}

.mobile-nav .nav-button__text {
  color: #000000;
  font-family: 'Dallas'; font-weight: 300, 'League Spartan', sans-serif;
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 1; /* Override any opacity */
  flex-direction: column;
}

.mobile-nav .nav-button__arrow {
  width: 20px;
  height: 20px;
  color: #000000;
}

.mobile-nav .nav-button--left {
  border-right: none; /* Override border */
  justify-content: flex-start;
}

.mobile-nav .nav-button--right {
  justify-content: flex-end;
}

/* Legacy button styles for backwards compatibility */
.mobile-nav__button {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'Dallas'; font-weight: 300, 'League Spartan', sans-serif;
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #000000;
  padding: 10px;
}

.mobile-nav__button i {
  font-size: 20px;
}

.mobile-nav__button--prev {
  flex-direction: row;
}

.mobile-nav__button--next {
  flex-direction: row;
}

/* Responsive adjustments for very small screens */
@media (max-width: 375px) {
  .mobile-nav .nav-button__text {
    font-size: 14px;
  }
  
  .mobile-nav {
    padding: 8px 16px;
  }
}