/**
  * @file
  * General body styles to help with alignment and spacing, mostly used within templates and config.
  * alignment.css in the theme folder provides classes to content editors.
  **/

/** Related to mobile menu functionality. **/
body.is-fixed {
  position: fixed;
  overflow: hidden;
  width: 100%;
}

.is-overlay-active .overlay {
  display: block;
}

/** Main container spacing **/
.layout-main-wrapper {
  padding: var(--gutter-y) 0 0 0;
}

/** Full width **/
.full-width {
  width: 100%;
}

/** Flexible block to hold content **/
.flex-wide {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
  gap: 0 4%;
  clear: both;
}

.flex-centre {
  justify-content: center;
}

.vertical-align {
  align-items: center;
}

.flex-15em {
  width: 15em;
}

.flex-700px {
  max-width: 700px;
}

.flex-left,
.flex-start {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: 1rem;
}

.flex-start-column {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0 0.5rem;
}

.flex-centre {
  display: flex;
  justify-content: center;
  text-align: center;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
  text-align: right;
}

/** Columns **/

.col-73 {
  width: 73%;
}

.col-60 {
  display: flex;
  flex-direction: column;
  width: 60%;
}

.half-col,
.col-50 {
  display: flex;
  flex-direction: column;
  width: 48%;
}

.col-35 {
  display: flex;
  flex-direction: column;
  width: 35%;
}

.col-35 img {
  height: auto;
}

.col-23 {
  width: 23%;
}

@media (max-width: 1023px) {
  .col-73,
  .col-60,
  .half-col,
  .col-50,
  .col-35,
  .col-23 {
    width: 100%;
  }

  .half-col.right-col {
    text-align: left;
  }
}

.left-col {
  text-align: left;
}

.right-col {
  text-align: right;
}

/** Overlay for translucent effect when mobile menu is open **/

[dir] .overlay {
  background: var(--laurier-purple);
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  opacity: 0.2;
}

/** Border blocks, top (header) and bottom (footer) variations **/
.gold-header,
.border-bottom-gold:not(:last-child),
.border-bottom-grey:not(:last-child) {
  margin-bottom: 1rem;
}

.gold-header:after,
.border-bottom-gold:not(:last-child):after,
.border-bottom-grey:not(:last-child):after {
  content: "";
  display: block;
  margin: 0 auto;
  width: 70%;
}

.gold-header:after,
.border-bottom-gold:after {
  border-bottom: 1px solid var(--laurier-gold);
}

.border-bottom-grey:after {
  border-bottom: 1px solid var(--grey);
}

.border-top-gold,
.border-top-grey {
  padding-top: 1rem;
}

.border-top-gold:before,
.border-top-grey:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 70%;
  padding-top: 1rem;
}

.border-top-gold:before {
  border-top: 1px solid var(--laurier-gold);
}

.border-top-grey:before {
  border-top: 1px solid var(--grey);
}