/**
 * @file
 * Section styles for Aotearoa theme.
 */

.section {
  position: relative;
}

/* ==========================================================================
   Background Color Variants
   ========================================================================== */

.section--white {
  background-color: var(--white);
  color: var(--black);
}

.section--primary {
  background-color: var(--primary);
  color: var(--color-primary-text-color, var(--white));
}

.section--primary-dark {
  background-color: var(--primary-600);
  color: var(--white); 
}

.section--neutral {
  background-color: var(--neutral-200);
  color: var(--neutral-900);
}

/* ==========================================================================
   Opacity Variants
   ========================================================================== */

.section--opacity-10 { opacity: 0.1; }
.section--opacity-20 { opacity: 0.2; }
.section--opacity-30 { opacity: 0.3; }
.section--opacity-40 { opacity: 0.4; }
.section--opacity-50 { opacity: 0.5; }
.section--opacity-60 { opacity: 0.6; }
.section--opacity-70 { opacity: 0.7; }
.section--opacity-80 { opacity: 0.8; }
.section--opacity-90 { opacity: 0.9; }
.section--opacity-100 { opacity: 1; }

/* ==========================================================================
   Padding Variants
   ========================================================================== */

.section--padding-small {
  padding-top: var(--sp3);
  padding-bottom: var(--sp3);
  padding-inline: var(--sp3);
}

.section--padding-medium {
  padding-top: var(--sp5);
  padding-bottom: var(--sp5);
  padding-inline: var(--sp5);
}

.section--padding-large {
  padding-top: var(--sp8);
  padding-bottom: var(--sp8);
  padding-inline: var(--sp8);
}

/* ==========================================================================
   Alignment
   ========================================================================== */

.section--left {
  text-align: left;
  .section__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
}

.section--center {
  text-align: center;
  .section__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

.section--right {
  text-align: right;
  .section__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
  }
}

/* ==========================================================================
   Content Container
   ========================================================================== */

.section__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
}

.section__edge-to-edge {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0;
}