/**
 * Contact Page Layout and Spacing
 * Comprehensive spacing system for the contact page
 * 
 * @package CMSMGA
 * @version 5.0
 */

/* ========================================
   CONTACT PAGE CONTAINER
   ======================================== */

.contact-page {
  position: relative;
  overflow-x: hidden;
}

/* Fallback styles for contact page sections */
.contact-page-fallback .cmsmga-section-light {
    background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-600));
    color: var(--text-inverse);
    padding: 60px 0;
    position: relative;
}

.contact-page-fallback .cmsmga-section-dark {
    background: linear-gradient(135deg, var(--color-primary-800), var(--color-primary-700));
    color: var(--text-inverse);
    padding: 60px 0;
    position: relative;
}

.contact-page-fallback .cmsmga-section-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Remove any unwanted margins from site-content */
.contact-page #content.site-content {
  margin: 0;
  padding: 0;
}

.contact-page #main-content {
  position: relative;
}

/* ========================================
   SECTION SPACING SYSTEM
   ======================================== */

/* Unified section spacing - all contact sections */
.contact-page .cmsmga-section-light,
.contact-page .cmsmga-section-dark {
  padding: var(--space-32) 0;
  margin: 0;
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* First section after hero - reduce top padding */
.contact-page .cmsmga-section-light:first-of-type {
  padding-top: var(--space-24);
}

/* Last section - add extra bottom padding */
.contact-page .cmsmga-section-light:last-of-type,
.contact-page .cmsmga-section-dark:last-of-type {
  padding-bottom: var(--space-40);
}

/* ========================================
   CONTAINER SPACING CONSISTENCY
   ======================================== */

.contact-page .cmsmga-section-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-8);
  position: relative;
  z-index: 3;
}

/* ========================================
   SECTION HEADER SPACING
   ======================================== */

.contact-page .cmsmga-section-header {
  text-align: center;
  margin-bottom: var(--space-20);
  position: relative;
}

.contact-page .cmsmga-section-badge {
  margin-bottom: var(--space-6);
}

.contact-page .cmsmga-section-title {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
}

.contact-page .cmsmga-section-subtitle {
  margin-bottom: 0;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* ========================================
   SECTION TRANSITIONS
   ======================================== */

/* Smooth visual transitions between sections */
.contact-page .cmsmga-section-light + .cmsmga-section-dark,
.contact-page .cmsmga-section-dark + .cmsmga-section-light {
  margin-top: -1px; /* Prevent gaps */
}

/* Add subtle shadow to create depth between sections */
.contact-page .cmsmga-section-dark {
  box-shadow: 
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 10%, transparent),
    0 -8px 32px color-mix(in srgb, var(--color-primary-900) 5%, transparent);
}

/* ========================================
   RESPONSIVE SECTION SPACING
   ======================================== */

@media (max-width: 1024px) {
  .contact-page .cmsmga-section-light,
  .contact-page .cmsmga-section-dark {
    padding: var(--space-24) 0;
  }
  
  .contact-page .cmsmga-section-light:first-of-type {
    padding-top: var(--space-20);
  }
  
  .contact-page .cmsmga-section-light:last-of-type,
  .contact-page .cmsmga-section-dark:last-of-type {
    padding-bottom: var(--space-32);
  }
  
  .contact-page .cmsmga-section-container {
    padding: 0 var(--space-6);
  }
  
  .contact-page .cmsmga-section-header {
    margin-bottom: var(--space-16);
  }
}

@media (max-width: 768px) {
  .contact-page .cmsmga-section-light,
  .contact-page .cmsmga-section-dark {
    padding: var(--space-20) 0;
  }
  
  .contact-page .cmsmga-section-light:first-of-type {
    padding-top: var(--space-16);
  }
  
  .contact-page .cmsmga-section-light:last-of-type,
  .contact-page .cmsmga-section-dark:last-of-type {
    padding-bottom: var(--space-24);
  }
  
  .contact-page .cmsmga-section-container {
    padding: 0 var(--space-4);
  }
  
  .contact-page .cmsmga-section-header {
    margin-bottom: var(--space-12);
  }
  
  .contact-page .cmsmga-section-title {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
  }
}

@media (max-width: 480px) {
  .contact-page .cmsmga-section-light,
  .contact-page .cmsmga-section-dark {
    padding: var(--space-16) 0;
  }
  
  .contact-page .cmsmga-section-light:first-of-type {
    padding-top: var(--space-12);
  }
  
  .contact-page .cmsmga-section-container {
    padding: 0 var(--space-3);
  }
  
  .contact-page .cmsmga-section-header {
    margin-bottom: var(--space-10);
  }
}

/* ========================================
   HERO TO CONTENT TRANSITION
   ======================================== */

/* Ensure smooth transition from hero to first content section */
.contact-page .page-hero-section {
  margin-bottom: 0;
}

.contact-page .page-hero-section + #content {
  margin-top: 0;
}

/* ========================================
   ACCESSIBILITY AND PERFORMANCE
   ======================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .contact-page .cmsmga-section-header {
    animation: none;
  }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  .contact-page .cmsmga-section-dark {
    box-shadow: none;
    border-top: 2px solid var(--color-accent-400);
    border-bottom: 2px solid var(--color-accent-400);
  }
}