/**
 * Intro Block Styles
 * 
 * Color combinations based on background:
 * - bg-white: border-top primary, tag primary, h2 primary
 * - bg-tertiary: border-top white, tag secondary, h2 secondary
 * - bg-secondary: border-top white, tag white, h2 primary, strong primary, h3 primary
 * - bg-accent: border-top secondary, tag secondary, h2 secondary, h3 secondary
 */

/* Base intro block */
.intro-block {
  position: relative;
}

/* Border top */
.intro-block .intro-block--border-top {
  height: 2px;
  width: 100%;
}

/* ========================================
   WHITE BACKGROUND THEME
   ======================================== */
.intro-block--theme-white {
  background-color: #ffffff;
}

/* Border top primary */
.intro-block--theme-white .intro-block--border-top {
  background-color: #87715a; /* Primary */
}

/* Tag primary */
.intro-block--theme-white .tag {
  color: #87715a; /* Primary */
}

/* H2 primary */
.intro-block--theme-white .h2 {
  color: #87715a; /* Primary */
}

/* ========================================
   TERTIARY BACKGROUND THEME
   ======================================== */
.intro-block--theme-tertiary {
  background-color: #9f8d70; /* Tertiary */

  a:hover,
  a:focus {
    color: #142832;
  }
}

/* Border top white */
.intro-block--theme-tertiary .intro-block--border-top {
  background-color: #ffffff;
}

/* Tag secondary */
.intro-block--theme-tertiary .tag {
  color: #142832; /* Secondary */
}

/* H2 secondary */
.intro-block--theme-tertiary .h2 {
  color: #142832; /* Secondary */
}

.intro-block--theme-tertiary ul > li::before {
  background-color: #142832 !important;
}

/* ========================================
   SECONDARY BACKGROUND THEME
   ======================================== */
.intro-block--theme-secondary {
  background-color: #142832; /* Secondary */

  a:hover,
  a:focus {
    color: #87715a;
  }
}

/* Border top white */
.intro-block--theme-secondary .intro-block--border-top {
  background-color: #ffffff;
}

/* H3 primary */
.intro-block--theme-secondary p {
  color: white;
}

/* Tag white */
.intro-block--theme-secondary .tag {
  color: #ffffff;
}

/* H2 primary */
.intro-block--theme-secondary .h2 {
  color: #87715a; /* Primary */
}

/* Strong primary */
.intro-block--theme-secondary strong {
  color: #87715a; /* Primary */
  font-weight: normal;
}

/* H3 primary */
.intro-block--theme-secondary .h3 {
  color: #87715a; /* Primary */
}

/* ========================================
   ACCENT BACKGROUND THEME
   ======================================== */
.intro-block--theme-accent {
  background-color: #93c9cb; /* Accent */

  a:hover,
  a:focus {
    color: #142832;
  }
}

/* Border top secondary */
.intro-block--theme-accent .intro-block--border-top {
  background-color: #142832; /* Secondary */
}

/* Tag secondary */
.intro-block--theme-accent .tag {
  color: #142832; /* Secondary */
}

/* H2 secondary */
.intro-block--theme-accent .h2 {
  color: #142832; /* Secondary */
}

/* H3 secondary */
.intro-block--theme-accent .h3 {
  color: #142832; /* Secondary */
}