/**
 * @file
 * CSS for Section Styling applied to layout sections.
 */

/* Base section with styling */
.katacart-section--has-bg,
.katacart-section--has-padding,
.katacart-section--has-margin {
  transition: background-color 0.3s ease;
}

/* Background color classes */
.katacart-section--bg-primary {
  background-color: #002823;
  color: #ffffff;
}

.katacart-section--bg-accent {
  background-color: #FA5046;
  color: #ffffff;
}

.katacart-section--bg-tertiary {
  background-color: #82DCB4;
  color: #002823;
}

.katacart-section--bg-info {
  background-color: #0075FF;
  color: #ffffff;
}

.katacart-section--bg-warning {
  background-color: #FFA726;
  color: #002823;
}

.katacart-section--bg-light {
  background-color: #F5F5F5;
  color: #1F2937;
}

.katacart-section--bg-white {
  background-color: #FFFFFF;
  color: #1F2937;
}

/* Padding classes */
.katacart-section--padding-small {
  padding: 24px;
}

.katacart-section--padding-medium {
  padding: 48px;
}

.katacart-section--padding-large {
  padding: 72px;
}

.katacart-section--padding-xlarge {
  padding: 120px;
}

/* Margin classes */
.katacart-section--margin-small {
  margin: 24px;
}

.katacart-section--margin-medium {
  margin: 48px;
}

.katacart-section--margin-large {
  margin: 72px;
}

.katacart-section--margin-xlarge {
  margin: 120px;
}

/* Text color adjustments for dark backgrounds */
.katacart-section--bg-primary a,
.katacart-section--bg-accent a,
.katacart-section--bg-info a {
  color: #ffffff;
  text-decoration: underline;
}

.katacart-section--bg-primary a:hover,
.katacart-section--bg-accent a:hover,
.katacart-section--bg-info a:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Heading colors for dark backgrounds */
.katacart-section--bg-primary h1,
.katacart-section--bg-primary h2,
.katacart-section--bg-primary h3,
.katacart-section--bg-primary h4,
.katacart-section--bg-primary h5,
.katacart-section--bg-primary h6,
.katacart-section--bg-accent h1,
.katacart-section--bg-accent h2,
.katacart-section--bg-accent h3,
.katacart-section--bg-accent h4,
.katacart-section--bg-accent h5,
.katacart-section--bg-accent h6,
.katacart-section--bg-info h1,
.katacart-section--bg-info h2,
.katacart-section--bg-info h3,
.katacart-section--bg-info h4,
.katacart-section--bg-info h5,
.katacart-section--bg-info h6 {
  color: #ffffff;
}

/* Responsive padding adjustments */
@media (max-width: 768px) {
  .katacart-section--padding-small {
    padding: 16px;
  }

  .katacart-section--padding-medium {
    padding: 32px;
  }

  .katacart-section--padding-large {
    padding: 48px;
  }

  .katacart-section--padding-xlarge {
    padding: 72px;
  }
}

/* Responsive margin adjustments */
@media (max-width: 768px) {
  .katacart-section--margin-small {
    margin: 16px;
  }

  .katacart-section--margin-medium {
    margin: 32px;
  }

  .katacart-section--margin-large {
    margin: 48px;
  }

  .katacart-section--margin-xlarge {
    margin: 72px;
  }
}

/* Border base styling */
.katacart-section--has-border {
  box-sizing: border-box;
}

/* Layout Builder preview mode styling */
.layout-builder .katacart-section--has-bg {
  position: relative;
}

/* Ensure layout builder controls are visible on dark backgrounds */
.layout-builder .katacart-section--bg-primary .layout-builder__link,
.layout-builder .katacart-section--bg-accent .layout-builder__link,
.layout-builder .katacart-section--bg-info .layout-builder__link {
  background-color: rgba(255, 255, 255, 0.9);
  color: #1F2937;
}

/* ============================================
   Region-specific background styling
   ============================================ */

/* Base region with styling */
.katacart-region--has-bg {
  transition: background-color 0.3s ease;
}

/* Region background color classes */
.katacart-region--bg-primary {
  background-color: #002823;
  color: #ffffff;
}

.katacart-region--bg-accent {
  background-color: #FA5046;
  color: #ffffff;
}

.katacart-region--bg-tertiary {
  background-color: #82DCB4;
  color: #002823;
}

.katacart-region--bg-info {
  background-color: #0075FF;
  color: #ffffff;
}

.katacart-region--bg-warning {
  background-color: #FFA726;
  color: #002823;
}

.katacart-region--bg-light {
  background-color: #F5F5F5;
  color: #1F2937;
}

.katacart-region--bg-white {
  background-color: #FFFFFF;
  color: #1F2937;
}

/* Region text color adjustments for dark backgrounds */
.katacart-region--bg-primary a,
.katacart-region--bg-accent a,
.katacart-region--bg-info a {
  color: #ffffff;
  text-decoration: underline;
}

.katacart-region--bg-primary a:hover,
.katacart-region--bg-accent a:hover,
.katacart-region--bg-info a:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Region heading colors for dark backgrounds */
.katacart-region--bg-primary h1,
.katacart-region--bg-primary h2,
.katacart-region--bg-primary h3,
.katacart-region--bg-primary h4,
.katacart-region--bg-primary h5,
.katacart-region--bg-primary h6,
.katacart-region--bg-accent h1,
.katacart-region--bg-accent h2,
.katacart-region--bg-accent h3,
.katacart-region--bg-accent h4,
.katacart-region--bg-accent h5,
.katacart-region--bg-accent h6,
.katacart-region--bg-info h1,
.katacart-region--bg-info h2,
.katacart-region--bg-info h3,
.katacart-region--bg-info h4,
.katacart-region--bg-info h5,
.katacart-region--bg-info h6 {
  color: #ffffff;
}

/* Layout builder preview mode styling for regions */
.layout-builder .katacart-region--has-bg {
  position: relative;
}

/* Ensure layout builder controls are visible on dark region backgrounds */
.layout-builder .katacart-region--bg-primary .layout-builder__link,
.layout-builder .katacart-region--bg-accent .layout-builder__link,
.layout-builder .katacart-region--bg-info .layout-builder__link {
  background-color: rgba(255, 255, 255, 0.9);
  color: #1F2937;
}

/* ============================================
   Responsive Column Layout Classes
   ============================================ */

/* Base styles for responsive columns - child elements get flex basis */
[class*="katacart-cols-"]>* {
  box-sizing: border-box;
}

/* Tablet/iPad columns (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .katacart-cols-tablet-1>* {
    flex: 1 1 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
  }

  .katacart-cols-tablet-2>* {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    margin-bottom: 1rem !important;
  }

  .katacart-cols-tablet-3>* {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    width: 33.333% !important;
  }

  .katacart-cols-tablet-4>* {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
}

/* Mobile columns (below 768px) */
@media (max-width: 767px) {
  .katacart-cols-mobile-1>* {
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
  }

  .katacart-cols-mobile-2>* {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    margin-bottom: 1rem !important;
  }
}

/* ============================================
   Responsive Flex Direction Classes
   ============================================ */

/* Tablet/iPad flex direction (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .katacart-flex-tablet-row {
    flex-direction: row !important;
  }

  .katacart-flex-tablet-row-reverse {
    flex-direction: row-reverse !important;
  }

  .katacart-flex-tablet-column {
    flex-direction: column !important;
  }

  .katacart-flex-tablet-column-reverse {
    flex-direction: column-reverse !important;
  }
}

/* Mobile flex direction (below 768px) */
@media (max-width: 767px) {
  .katacart-flex-mobile-row {
    flex-direction: row !important;
  }

  .katacart-flex-mobile-row-reverse {
    flex-direction: row-reverse !important;
  }

  .katacart-flex-mobile-column {
    flex-direction: column !important;
  }

  .katacart-flex-mobile-column-reverse {
    flex-direction: column-reverse !important;
  }
}

/* ============================================
   Responsive Align Items Classes
   ============================================ */

/* Tablet/iPad align items (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .katacart-align-tablet-flex-start {
    align-items: flex-start !important;
  }

  .katacart-align-tablet-flex-end {
    align-items: flex-end !important;
  }

  .katacart-align-tablet-center {
    align-items: center !important;
  }

  .katacart-align-tablet-stretch {
    align-items: stretch !important;
  }

  .katacart-align-tablet-baseline {
    align-items: baseline !important;
  }
}

/* Mobile align items (below 768px) */
@media (max-width: 767px) {
  .katacart-align-mobile-flex-start {
    align-items: flex-start !important;
  }

  .katacart-align-mobile-flex-end {
    align-items: flex-end !important;
  }

  .katacart-align-mobile-center {
    align-items: center !important;
  }

  .katacart-align-mobile-stretch {
    align-items: stretch !important;
  }

  .katacart-align-mobile-baseline {
    align-items: baseline !important;
  }
}