.competences-page {
  display: flex;
  flex-flow: column;
  align-items: center;
  background-color: $alabaster-grey;
  color: $charcoal-grey;
  text-rendering: optimizeLegibility;
}

.competences-page__domains {
  max-width: 940px;
  width: 100%;
  padding: 0 20px;
  margin-bottom: 50px;

  @include device-is('desktop') {
    padding: 0;
  }
}

.competences-domain {
  width: 100%;
  padding: 20px;

  @include device-is('desktop') {
    padding: 20px 40px;
  }
}

.cp-Panel-body-inner {
  overflow: visible;
}

.competences-domain__header {
  color: $charcoal-grey;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;

  &:hover,
  &:focus,
  &:active {
    color: $charcoal-grey;
    text-decoration: none;
  }
}

.competences-domain__title {
  margin: 15px 0;
  font-family: $font-raleway;
  font-weight: $font-medium;
  font-size: 26px;

  @include device-is('desktop') {
    font-size: 40px;
  }
}

.competences-domain__title-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  -webkit-transform: rotate(-315deg);
  transform: rotate(-315deg);
  border: solid 2px #979797;
  border-top: none;
  border-left: none;
}

/* XXX we do not have the choice here to bypass BEM for managing collapsible panel title in "closed" status. */
.cp-is-open > .competences-domain__title-icon {
  border: solid 2px $dusty-grey;
  border-bottom: none;
  border-right: none;
}

.domain-topic {
  border-top: 1px solid $gainsboro;
  padding: 26px 0 5px;
  margin-top: 30px;
}

.domain-topic__title {
  font-family: $font-raleway;
  font-size: 28px;
  font-weight: $font-semi-bold;
  color: $pix-blue;
  margin-top: 0;
  margin-bottom: 17px;
}

.domain-topic__description {
  font-family: $font-lato;
  font-size: 20px;
  margin-bottom: 20px;
  color: $charcoal-grey;
}

.domain-topic__themes-title {
  font-family: $font-lato;
  font-size: 12px;
  font-weight: $font-bold;
  text-transform: uppercase;
  margin: 0 0 5px 0;
}

.domain-topic__themes-content {
  font-family: $font-lato;
  font-size: 16px;
  font-weight: $font-light;
  color: $charcoal-grey;
}
