/*
 * Universal Layout Rules - Critical Foundation CSS
 *
 * These are the fundamental layout rules that were missing from the WordPress theme
 * but exist in the original landing.html. These rules ensure pixel-perfect container
 * widths and column padding across ALL sections.
 *
 * CRITICAL: These rules must be loaded FIRST to establish the base layout system.
 */

/* === CSS RESET === */
/* Critical: Remove default body margin that causes white border around page */
html, body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* Universal box-sizing */
*, *:before, *:after {
  box-sizing: border-box;
}

/* === UNIVERSAL CONTAINER SYSTEM === */
/* This is the most important rule - it constrains ALL sections to 1170px max-width */
.c-section > .inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1170px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}

/* === FULL-WIDTH BACKGROUND SECTIONS === */
/* Special handling for sections that need full-width backgrounds but constrained content */
.section-BLqiic1eOi > .inner {
  max-width: none !important;
  width: 100% !important;
}

/* But constrain the content inside these full-width sections */
.section-BLqiic1eOi .c-row > .inner {
  max-width: 1170px;
  margin: 0 auto;
}

/* === UNIVERSAL COLUMN PADDING === */
/* This creates the "padding left and right" effect the user noticed */
.c-column {
  padding-left: 15px;
  padding-right: 15px;
  flex: 1;
  position: relative;
}

/* === ROW LAYOUT SYSTEM === */
.c-row > .inner {
  display: flex;
  width: 100%;
}

.c-column > .inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: inherit;
  width: 100% !important;
}

/* === RESPONSIVE BEHAVIOR === */
/* Mobile responsive rules that match the original */
@media only screen and (max-width: 767px) {
  .c-row > .inner {
    flex-direction: column;
  }
  
  .desktop-only {
    display: none;
  }
  
  .c-column,
  .c-row {
    width: 100% !important;
  }
  
  .c-column,
  .c-column > .inner,
  .c-row > .inner,
  .c-section,
  .c-section > .inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .c-column,
  .c-column > .inner,
  .c-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .c-row {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media only screen and (min-width: 768px) {
  .mobile-only {
    display: none;
  }
}

/* === BUTTON ICON SPACING === */
/* Ensure proper spacing for phone icons in buttons */
.button-icon-start {
  margin-right: 5px;
}

.button-icon-end {
  margin-left: 5px;
}

/* === WRAPPER SYSTEM === */
.c-wrapper {
  position: relative;
}

/* === FLEX COLUMN BEHAVIOR === */
.c-column {
  flex: 1 1 auto !important;
}

.c-column > .inner.horizontal > div {
  flex: 1;
}

/* === NESTED COLUMN SUPPORT === */
.c-nested-column .c-row > .inner {
  width: 100% !important;
}

.c-nested-column .inner {
  border: none !important;
}

/* === ELEMENT POSITIONING === */
.c-element {
  position: relative;
}

/* === ADDITIONAL LAYOUT UTILITIES === */
.row-align-center {
  margin: 0 auto;
}

.row-align-left {
  margin: 0 auto;
  margin-left: 0 !important;
}

.row-align-right {
  margin: 0 auto;
  margin-right: 0 !important;
}