/**
 * @file
 * CSS for Section Styling applied to layout sections.
 * Updated for Publideals Design System
 */

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

/* Background color classes - Publideals Colors */
.cms-section--bg-primary {
  background-color: #DA6630;
  color: #ffffff;
}

.cms-section--bg-accent {
  background-color: #68468F;
  color: #ffffff;
}

.cms-section--bg-tertiary {
  background-color: #f5f3f7;
  color: #1a1a2e;
}

.cms-section--bg-info {
  background-color: #3b82f6;
  color: #ffffff;
}

.cms-section--bg-warning {
  background-color: #f59e0b;
  color: #1a1a2e;
}

.cms-section--bg-light {
  background-color: #f9fafb;
  color: #1a1a2e;
}

.cms-section--bg-white {
  background-color: #FFFFFF;
  color: #1a1a2e;
}

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

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

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

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

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

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

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

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

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

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

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

/* Responsive padding adjustments - Tablet */
@media (max-width: 1024px) {
  .cms-section--padding-small {
    padding: 20px;
  }

  .cms-section--padding-medium {
    padding: 36px;
  }

  .cms-section--padding-large {
    padding: 56px;
  }

  .cms-section--padding-xlarge {
    padding: 96px;
  }
}

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

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

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

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

/* Responsive margin adjustments - Tablet */
@media (max-width: 1024px) {
  .cms-section--margin-small {
    margin: 20px;
  }

  .cms-section--margin-medium {
    margin: 36px;
  }

  .cms-section--margin-large {
    margin: 56px;
  }

  .cms-section--margin-xlarge {
    margin: 96px;
  }
}

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

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

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

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

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

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

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

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

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

/* Region background color classes - Publideals Colors */
.cms-region--bg-primary {
  background-color: #DA6630;
  color: #ffffff;
}

.cms-region--bg-accent {
  background-color: #68468F;
  color: #ffffff;
}

.cms-region--bg-tertiary {
  background-color: #f5f3f7;
  color: #1a1a2e;
}

.cms-region--bg-info {
  background-color: #3b82f6;
  color: #ffffff;
}

.cms-region--bg-warning {
  background-color: #f59e0b;
  color: #1a1a2e;
}

.cms-region--bg-light {
  background-color: #f9fafb;
  color: #1a1a2e;
}

.cms-region--bg-white {
  background-color: #FFFFFF;
  color: #1a1a2e;
}

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

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

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

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

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