/*!
Theme Name: ETU NSW Apprentices
Author: Campaign Edge
Author URI: https://campaignedge.com.au
Description: Theme developed for ETU NSW Apprentices in August 2025.
Version: 1.0.12
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: etu-nsw-apprentices
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/*--------------------------------------------------------------
>>> etuapprentices:
---------------------------------------------------------------- */

/* General
--------------------------------------------- */
body .dashicons {
  width: 1em;
  height: 1em;
  font-size: inherit;
}

.first-no-margin > :first-child,
.fcnm > :first-child {
  margin-top: 0px;
}

.lcnm > :last-child {
  margin-bottom: 0px;
}

.mt0 {
  margin-top: 0;
}

.mb0 {
  margin-bottom: 0;
}

.pt0 {
  padding-top: 0;
}

.pb0 {
  padding-bottom: 0;
}

.pos-relative {
  position: relative;
}

/* Colours
--------------------------------------------- */
.pc-color {
  color: var(--wp--preset--color--primary);
}

.sc-color {
  color: var(--wp--preset--color--secondary);
}

.tc-color {
  color: var(--wp--preset--color--tertiary);
}

.white-color {
  color: var(--wp--preset--color--white);
}

.black-color {
  color: var(--wp--preset--color--black);
}

.pc-bg {
  background-color: var(--wp--preset--color--primary);
}

.sc-bg {
  background-color: var(--wp--preset--color--secondary);
}

.tc-bg {
  background-color: var(--wp--preset--color--tertiary);
}

.white-bg {
  background-color: var(--wp--preset--color--white);
}

.black-bg {
  background-color: var(--wp--preset--color--black);
}

.pc-fill {
  fill: var(--wp--preset--color--primary);
}

.sc-fill {
  fill: var(--wp--preset--color--secondary);
}

.tc-fill {
  fill: var(--wp--preset--color--tertiary);
}

.white-fill {
  fill: var(--wp--preset--color--white);
}

.black-fill {
  fill: var(--wp--preset--color--black);
}

.pc-border {
  border-color: var(--wp--preset--color--primary);
}

.sc-border {
  border-color: var(--wp--preset--color--secondary);
}

.tc-border {
  border-color: var(--wp--preset--color--tertiary);
}

.white-border {
  border-color: var(--wp--preset--color--white);
}
.black-border {
  border-color: var(--wp--preset--color--black);
}

/* Full BG's
- To give an element a full sized background in code give it the class .full-bg along with the 
class wp color class eg .has-primary-background-color
--------------------------------------------- */
.full-bg,
.wp-block-group.has-background {
  position: relative;
  overflow: visible;
}

.full-bg,
.wp-block-group.has-background > * {
  position: relative;
  z-index: 2;
}

.full-bg:before,
.wp-block-group.has-background:before {
  content: "";
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: calc(100% / 2);
  transform: translateX(-50%);
  z-index: 0;
  background-position: 50% 50%;
  background-size: cover;
  background: inherit;
}

/* Disable full BG's on nested groups */
.wp-block-group .wp-block-group.has-background:before,
.wp-block-group .wp-block-group.has-background:after,
.wp-block-group .wp-block-group.has-background[style*=".webp')"]:before,
.wp-block-group .wp-block-group.has-background[style*=".webp')"]:after,
.wp-block-group .wp-block-group.has-background[style*=".png')"]:before,
.wp-block-group .wp-block-group.has-background[style*=".png')"]:after,
.wp-block-group .wp-block-group.has-background[style*=".jpg')"]:before,
.wp-block-group .wp-block-group.has-background[style*=".jpg')"]:after {
  width: 100%;
  transform: none;
  left: 0;
}

/* If the group has both a colour and image selected then the colour is moved to the :after placed ontop of the image*/
.wp-block-group.has-background[style*=".webp')"]:before,
.wp-block-group.has-background[style*=".jpg')"]:before,
.wp-block-group.has-background[style*=".png')"]:before {
  background-color: unset;
}

.wp-block-group.has-background[style*=".webp')"]:after,
.wp-block-group.has-background[style*=".jpg')"]:after,
.wp-block-group.has-background[style*=".png')"]:after {
  content: "";
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: calc(100% / 2);
  transform: translateX(-50%);
  z-index: 1;
  background-position: 50% 50%;
  background-size: cover;
  background-color: inherit;
}

/* Content Areas
--------------------------------------------- */
.main-content {
  max-width: var(--wp--style--global--wide-size);
  width: 100%;
  margin: 0 auto;
}

.main-content .main-content-inner {
  padding: 0 4%;
}

.site-main .main-content .main-content-inner {
  padding-top: 3em;

  .page-title {
    margin-bottom: 0.75em;
  }

  h5,
  h6 {
	  display: flex;
	  align-items: baseline;
	  gap: 0.3em;
	  
    &:before {
      content: "";
      display: inline-block;
      width: 0.6em;
      height: 0.6em;
      background-color: var(--wp--preset--color--secondary);
      flex: 0 0 0.6em;
      vertical-align: baseline;
    }

	&.no-box {
		  display: block;
	} 
    &.no-box:before {
      content: none;
    }
  }
}

/* Header
--------------------------------------------- */
.site-header {
  position: relative;
  width: 100%;
  z-index: 3;
  padding-bottom: 15em;

  .header-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: 1;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .header-banner-bg-gradient {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0) 30%
      );
      z-index: 1;
    }

    .header-banner-bg-cutout {
      position: absolute;
      bottom: -1px;
      left: 0;
      width: calc((300px) + ((100vw - 1300px) / 2));
      transform: translateX(-300px);
      height: 7em;
      clip-path: polygon(0 0, 100% 0, calc(100% - 110px) 100%, 0 100%);
      z-index: 0;
      background: white;
    }
  }

  .header-join-icon {
    position: absolute;
    bottom: 0;
    right: calc(((100vw - 1200px) / 2));
    width: 200px;
    z-index: 1;
    line-height: 0;
    transform: translateY(50%);
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.site-header .main-content .main-content-inner {
  position: relative;
  display: flex;
  justify-content: space-between;
}

/* Header - Logo and Menu container
--------------------------------------------- */

.site-header .main-content-inner {
  .header-main-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: calc((1300px * 0.6) + ((100vw - 1300px) / 2));
    transform: translateX(calc(((100vw - 1300px) / 2) * (-1)));
    height: 100%;
    background-color: var(--wp--preset--color--secondary);
    clip-path: polygon(0 0, 100% 0, calc(100% - 195px) 100%, 0 100%);
    z-index: -1;
    background-image: url("/app/uploads/2025/08/YellowGrid.png");
    background-repeat: repeat;
    background-size: 20px 20px;
  }

  .header-main {
    flex: 0 1 60%;
    display: flex;
    justify-content: left;
    align-items: flex-end;
    padding: 2em 0;
    transition: padding 0.25s ease;
    column-gap: 2em;
    position: relative;
    z-index: 2;
  }

  .header-logo {
    transition: flex 0.25s ease;
    flex: 0 1 125px;
    position: relative;

    a {
      display: flex;
      width: 100%;
      line-height: 0;
      padding-bottom: 70%;

      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: left center;
      }
    }
  }

  .header-title {
    font-size: 2.5em;
    font-weight: 900;
    margin-bottom: 0em;
    text-transform: uppercase;
    font-family: var(--wp--preset--font-family--heading);
    color: var(--wp--preset--color--primary);
    line-height: 1em;
  }
}

.site-header-scrolled.site-header .main-content-inner .header-main {
  padding: 1em 0 1em 0;
}

/* Header - Menu
--------------------------------------------- */
.menu-container {
  flex: 1 1 auto;

  .menu {
    margin: 0px;
    list-style: none;
    padding: 0px;
    display: flex;
    flex-wrap: wrap;

    .menu-item {
      margin-left: 0em;
      margin-bottom: 0.35em;
      padding: 0.2em;

      a {
        width: max-content;
        color: black;
        font-weight: 400;
        text-decoration: none;
        transition: color 0.2s ease, background 0.2s ease,
          border-color ease 0.2s;
        font-size: 16px;
        padding: 0;
        display: block;
        border-bottom: 1px solid transparent;
        font-weight: 700;
      }

      &:hover > a {
        border-bottom: 1px solid var(--wp--preset--color--secondary);
      }

      &.menu-item-has-children:hover::before {
        color: black;
      }

      &.current-menu-item > a,
      &.menu-item-has-children.current-menu-item::before {
        border-bottom: 2px solid var(--wp--preset--color--primary);
      }

      &:last-child {
        margin-bottom: 0;
        a {
          padding-right: 0px;
        }
      }

      &.menu-item-has-children {
        position: relative;

        > a {
          padding-right: 1.25em;
        }

        &::before {
          width: 0.5em;
          height: 0.5em;
          background-color: var(--wp--preset--color--secondary);
          clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
          position: absolute;
          top: calc(50% - 0.25em);
          right: 0em;
          content: "";
          transition: 0.2s ease;
          transform: rotate(-90deg);
        }

        &:hover::before {
          transform: rotate(0deg);
        }

        &:hover > .sub-menu {
          opacity: 1;
          pointer-events: all;
        }

        .sub-menu {
          opacity: 0;
          transition: opacity 0.2s ease;
          pointer-events: none;
          padding: 0px 0.5em;
          margin: 0px;
          position: absolute;
          top: 100%;
          left: 0px;
          z-index: 2;
          list-style: none;
          width: max-content;
          max-width: 200px;
          background: var(--wp--preset--color--primary);
          display: block;

          .site-header-scrolled &,
          .site-header-bg & {
            background-color: var(--wp--preset--color--tertiary);
          }

          .menu-item {
            margin-left: 0px;
            padding-left: 0px;

            a {
              font-weight: 400;
              line-height: 1.2em;
            }

            &.menu-item-has-children > a {
              padding-right: 0.75em;
            }

            .sub-menu {
              left: 100%;
              top: 0%;
              width: max-content;
            }
          }
        }
      }
    }
  }
}

/* Menu - pullout */

.header-nav {
  position: relative;

  .menu-pullout {
    display: block;
    position: absolute;
    width: auto;
    right: 100%;
    top: 100%;
    transform: translateX(100%);
    transition: transform 0.25s ease, max-height 0.25s ease-out;
    z-index: 11;
    max-height: 0;
    overflow: hidden;
    box-shadow: 1px 1px 7px 0 #00000045;

    .menu-pullout-inner {
      display: block;
      padding: 0.5em;

      background: white;
    }

    &.menu-pullout-active {
      height: auto;
    }
  }
}

.menu-pullout-mask {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: var(--wp--preset--color--quaternary);
  z-index: 10;
  display: block;
}

.menu-pullout-active {
  transform: translateX(0%);
  overflow-y: scroll;
}

/* Hamburger */
.menu-center {
  position: relative;
  width: 2.6em;
  text-align: center;
  margin: 0 auto;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid var(--wp--preset--color--primary);
  height: 2.3em;
  padding: 0.5em;
}

.menu-center:before,
.menu-center:after,
.menu-center div {
  background: var(--wp--preset--color--primary);
  content: "";
  display: block;
  height: 2px;
  border-radius: 0px;
  margin: 6px 0;
  margin-top: 4px;
  transition: 0.5s;
}

.menu-center:before {
  margin-top: 0;
}

.menu-center:after {
  margin-bottom: 0;
}

.menu-center.menu-center-active:before {
  transform: translateY(7.5px) rotate(135deg);
}

.menu-center.menu-center-active:after {
  transform: translateY(-7.5px) rotate(-135deg);
}

.menu-center.menu-center-active div {
  transform: scale(0);
}

.menu-center:hover {
  background: var(--wp--preset--color--tertiary);
}

.menu-center:hover::before,
.menu-center:hover::after,
.menu-center:hover div {
  background: var(--wp--preset--color--primary);
}

.menu-pullout-inner .menu-center:before,
.menu-pullout-inner .menu-center:after,
.menu-pullout-inner .menu-center div {
  background: var(--wp--preset--color--primary);
}

.menu-pullout-inner .menu-center {
  border-color: var(--wp--preset--color--primary);
}

.site-header-scrolled .menu-center:before,
.site-header-scrolled .menu-center:after,
.site-header-scrolled .menu-center div,
.site-header-bg .menu-center:before,
.site-header-bg .menu-center:after,
.site-header-bg .menu-center div {
  background: var(--wp--preset--color--tertiary);
}

.site-header-scrolled .menu-center,
.site-header-bg .menu-center {
  border-color: var(--wp--preset--color--tertiary);
}

.menu-pullout .menu-center {
  margin: 0 auto;
  display: block;
  margin-top: 3em;
}

/* Header Info
--------------------------------------------- */
.header-info {
  color: white;

  .header-info-inner {
    display: flex;
    column-gap: 0.5em;
    padding: 1em 0;
    align-items: center;

    .header-contacts {
      display: flex;
      column-gap: 1em;

      p {
        font-weight: 700;
        font-size: 1.15em;
        margin-bottom: 0;

        a {
          text-decoration: none;

          &:hover {
            text-decoration: underline;
            color: white;
          }

          .dashicons {
            vertical-align: middle;
            text-decoration: none;
          }
        }
      }
    }

    .header-home-icon {
      line-height: 0;

      img {
        width: 3em;
        height: 3em;
        max-width: 3em;
      }
    }
  }
}

/* Footer
--------------------------------------------- */

.site-footer {
  padding: 2.5em 0 1.5em 0;
  background-color: var(--wp--preset--color--primary);
  color: white;
  overflow: hidden;
  position: relative;
  margin-top: 3em;

  .footer-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .footer-cutout {
    position: absolute;
    top: -1px;
    right: 0;
    width: calc((0px) + ((100vw - 1196px) / 2));
    height: 5em;
    clip-path: polygon(calc(80px) 0, 100% 0, 100% 100%, 0 100%);
    z-index: 0;
    background: white;
  }

  .footer-info {
    position: relative;
    display: flex;
    column-gap: 2em;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;

    .footer-join {
      flex: 0 1 400px;

      p {
        font-size: 3em;
        text-transform: uppercase;
        font-weight: 700;
        text-align: left;
        font-family: var(--wp--preset--font-family--heading);
        margin-bottom: 0;

        a {
          color: var(--wp--preset--color--secondary);
          text-decoration-thickness: 0.15em;
        }
      }
    }
    .footer-contact {
      .footer-contact-details {
        display: flex;
        column-gap: 0.3em;
        padding: 1em 0;
        align-items: center;

        p {
          font-weight: 700;
          font-size: 1.2em;
          margin-bottom: 0;

          &:first-child {
            flex: 0 1 33%;
            padding-right: 1em;
          }

          a {
            text-decoration: none;
            vertical-align: middle;

            &:hover {
              text-decoration: underline;
              color: white;
            }

            .dashicons {
              vertical-align: middle;
            }
          }
        }
      }

      .footer-addresses {
        flex: 1 1 auto;
        display: flex;
        column-gap: 1em;
        font-weight: 700;
        font-size: 15px;

        .footer-address {
          flex: 1;
          flex-shrink: 0;
          flex-basis: 0;
        }
      }
    }
  }

  .authorisation {
    margin: 1em 0 0 0;
    font-size: 14px;
    text-align: center;
    color: var(--wp--preset--color--tertiary);
    z-index: 2;
    position: relative;
  }
}

/* WP Blocks
--------------------------------------------- */

.column-align-bottom {
  display: flex;
  align-items: flex-end;
}

.wp-block-cover a {
  text-decoration: none;
  transition: all 0.3s ease;
}

.wp-block-column {
  position: relative;
}

.is-layout-flow > *,
.is-layout-constrained > * {
  margin-block-start: 1em;
}

/* Youtube */
.is-provider-youtube .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  width: 100%;
}

.is-provider-youtube .wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* image fixing */

.wp-block-group.is-nowrap.is-layout-flex.wp-block-group-is-layout-flex img {
  max-width: unset;
  vertical-align: unset;
}

.wp-block-list li {
  margin-bottom: 0.5em;
}


/* Forms
--------------------------------------------- */

.gform_wrapper .gform-body .gform_fields {
}

.gform-body .gform_fields .gfield input,
.gform-body .gform_fields .gfield textarea {
}

.has-background .gform-body .gform_fields .gfield input {
}

.gform-body .gform_fields .gfield input::placeholder {
}

.gform-body .gform_fields .gfield .gfield-choice-input {
}

.gform_wrapper form .gform-body .gfield.gfield--type-submit .gform-button {
}

.gform_required_legend {
  display: none;
}

/* Archive
--------------------------------------------- */

/* Pagination
--------------------------------------------- */

.news-pagination {
  text-align: center;
  font-weight: 700;
  margin: 1em 0;
}

.page-numbers {
  padding: 0;
  text-align: right;
  list-style: none;
  margin: 0px;
  display: inline-block;
}
.page-numbers li {
  display: inline-block;
  width: 1.2em;
  height: 1.25em;
  line-height: 1.25em;
  font-weight: 600;
  margin: 0;
  text-align: center;
}

.page-numbers.current {
  text-decoration: underline;
  color: var(--wp--preset--color--primary);
}

.page-numbers a {
  color: var(--wp--preset--color--text);
}

.page-numbers li span,
.page-numbers li a {
  text-decoration: none;
}
.page-numbers li .next,
.page-numbers li .prev {
  display: block;
  position: relative;
  color: transparent;
  margin: 0px;
}

.page-numbers li .next:after,
.page-numbers li .prev:after {
  content: "";
  border-right: 0.2em solid black;
  border-bottom: 0.2em solid black;
  display: block;
  line-height: 1;
  font-weight: 400;
  font-style: normal;
  speak: never;
  text-decoration: inherit;
  text-transform: none;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 0.6em;
  height: 0.6em;
  font-size: 0.9em;
  vertical-align: top;
  text-align: center;
  transition: color 0.1s ease-in;
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 2;
  pointer-events: none;
  cursor: pointer;
}

.page-numbers li .prev:after {
  transform: translate(-50%, -50%) rotate(135deg);
  left: 60%;
}

/* Homepage
--------------------------------------------- */

.electrician-bg {
	position: relative;

	&:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
		background: url('/app/uploads/2025/09/electrician-rough-background.jpg') !important;
		opacity: 1;
		background-size: contain !important;
		background-position: left bottom !important;
		background-repeat: no-repeat !important;
	}
}



/* Team
--------------------------------------------- */

.team-image {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 3.5em solid transparent;
    border-bottom: 3.5em solid var(--wp--preset--color--white);
    z-index: 1;
  }

  .team-image-single {
position: relative;
padding-bottom: 100%;

.components-resizable-box__container {
  position: unset !important;
}

    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain !important;
      object-position: bottom center;

    }

    &.team-image-single1 img {
      width: 120%;
      max-width: unset;
      transform: translateX(-10%);
    }

    &.team-image-single2 img {
      width: 80%;
      left: unset;
      right: -10%;
    }

    &.team-image-single3 img {
      width: 85%;
      left: unset;
      right: -10%;
    }
  }
}

.team-image-extend-20 {

}

.fredbarbin-image {

}


/* MOBILE
--------------------------------------------- */

@media only screen and (max-width: 1300px) {
  .site-header .main-content-inner {
    .header-main-bg {
      width: 720px;
      clip-path: polygon(0 0, 100% 0, calc(100% - 150px) 100%, 0 100%);
      transform: none;
    }

    .header-main {
      flex: 0 1 70%;
    }

    .header-info {
      flex: 0 1 30%;

      .header-info-inner {
        column-gap: 0.2em;

        .header-contacts {
          flex-wrap: wrap;
          column-gap: 0;
          row-gap: 0.5em;
        }
      }
    }
  }

  .site-header {
    .header-banner-bg {
      .header-banner-bg-cutout {
        width: calc(100px + 15%);
        left: 0;
        transform: unset;
        clip-path: polygon(0 0, 100% 0, calc(100% - (15% + 75px)) 100%, 0 100%);
      }

      .header-banner-bg-gradient {
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.85) 0%,
          rgba(0, 0, 0, 0) 40%
        );
      }
    }

    .header-join-icon {
      right: 4%;
    }
  }
}

/* MENU MOBILE TRIGGER - Move last submenus to the left */

@media only screen and (max-width: 1675px) {
  .menu-container .menu .menu-item:last-child > .sub-menu {
    left: unset;
    right: 0;
  }
}

@media only screen and (max-width: 1380px) {
  .menu-container .menu .menu-item:last-child > .sub-menu .menu-item {
    position: relative;
  }

  .menu-container
    .menu
    .menu-item:last-child
    > .sub-menu
    .menu-item
    > .sub-menu {
    top: 0;
    left: 0;
    transform: translateX(-100%);
  }
}


@media only screen and (max-width: 1200px) {

/* Homepage
--------------------------------------------- */
.electrician-bg {
	position: relative;

	&:before {
		content: none !important;
	}
}

}


@media only screen and (max-width: 1024px) {
  /* Header */
  .site-header .main-content-inner {
    .header-main-bg {
      width: 600px;
      clip-path: polygon(0 0, 100% 0, calc(100% - 120px) 100%, 0 100%);
    }

    .header-title {
      font-size: 2em;
    }

    .header-logo {
      flex: 0 1 90px;
    }

    .header-info {
      & .header-info-inner {
        .header-contacts {
          justify-content: right;

          p {
            font-size: 1em;
          }
        }

        .header-home-icon {
          display: none;
        }
      }
    }
  }
}

@media only screen and (max-width: 768px) {

  /* Flex Styling
	--------------------------------------------- */
  body .is-layout-grid.wp-block-group-is-layout-grid {
    display: flex;
    flex-direction: column;
  }

  /* Header */

  .site-header .main-content-inner {
    .header-main-bg {
      width: 80%;
      clip-path: polygon(0 0, 100% 0, calc(100% - 80px) 100%, 0 100%);
    }

    .header-main {
      flex: 0 1 66%;
      row-gap: 1em;
      flex-wrap: wrap;
      justify-content: right;
      padding: 1em 0;

      .header-logo {
        position: absolute;
        left: 0;
        width: 80px;
        top: 50%;
        transform: translateY(-50%);
      }

      .header-title {
        flex: 1 0 100%;
        text-align: right;
        font-size: 1.75em;
      }
    }

    .header-info {
      & .header-info-inner {
        justify-content: right;
        flex-wrap: nowrap;

        .header-contacts {
          column-gap: 0.75em;
          p {
            font-size: 1.5em;
            border: 1px solid var(--wp--preset--color--secondary);
            border-radius: 100%;
            width: 1.6em;
            height: 1.6em;
            text-align: center;

            .contact-text {
              display: none;
            }
          }
        }
      }
    }
  }

  .site-header {
    .header-banner-bg {
      .header-banner-bg-cutout {
        width: calc(100px + 10%);
        clip-path: polygon(0 0, 100% 0, calc(100% - (10% + 45px)) 100%, 0 100%);
        height: 5em;
      }
    }
  }

  /* Footer */

  .site-footer {
    padding: 1.5em 0 1em 0;

    .footer-info {
      flex-wrap: wrap;

      .footer-join {
        flex: 1 0 100%;
        padding-bottom: 0.5em;
        p {
          text-align: center;
        }
      }

      .footer-contact {
        .footer-contact-details {
          column-gap: 1.5em;
          justify-content: center;

          p {
            flex: 0 1 auto;

            &:first-child {
              padding-right: 0em;
              flex: 0 1 auto;
            }
          }
        }
      }
    }
  }

	/* WP BLOCKS
	--------------------------------------------- */
	.wp-block-columns.small-gap {
		gap: 0;
	}

	.extra-margin-top {
		margin-top: 6em;
	}

}

@media only screen and (max-width: 500px) {

  /* Flex Styling
	--------------------------------------------- */

  /* Menu
	--------------------------------------------- */
  .menu-pullout {
    padding-left: 5%;
    padding-right: 5%;
  }

  /* Header */

  .site-header .main-content-inner {
    .header-main-bg {
      width: 83%;
      clip-path: polygon(0 0, 100% 0, calc(100% - 50px) 100%, 0 100%);
    }

    .header-main {
      justify-content: space-between;
      align-items: baseline;
      row-gap: 0.5em;
      flex: 0 1 85%;

      .header-logo {
        position: relative;
        left: unset;
        width: 80px;
        top: unset;
        transform: unset;
        flex: 0 1 80px;
      }

      .header-title {
        order: 2;
        text-align: left;
      }
    }

    .header-info {
      & .header-info-inner {
        .header-contacts {
          flex-wrap: wrap;
          flex-direction: column;
          p {
          }
        }
      }
    }
  }

  .header-nav {
    .menu-pullout {
      transform: translateX(calc(50% + 1.3em));
    }
  }

  .menu-container .menu {
    flex-wrap: wrap;
    font-size: 16px;

    .menu-item {
      flex: 1 1 100%;
      padding-right: 0px;
      padding-left: 0px;
      margin-bottom: 0.75em;
      margin-left: 0;

      a {
        display: inline-block;
      }

      &:hover > a {
        border-bottom: unset;
      }

      .sub-menu {
        position: relative;
        top: unset;
        left: unset;
        display: none;
        width: 100%;
        max-width: unset;
        padding-top: 0.5em;
        margin-bottom: 1em;

        li {
          margin-bottom: 0px;
        }
      }

      &.menu-item-has-children {
        &:hover > .sub-menu {
          display: block;
          border: 0px;
          padding-left: 1em;
          border-left: 1px solid white;
        }

        &::before,
        &:hover::before {
          top: 0.831em;
        }

        .sub-menu .menu-item .sub-menu {
          left: unset;
          top: unset;
          width: 100%;
        }
      }

      .site-header .main-content .main-content-inner .header-main & a {
        border-right: none;
      }
    }
  }

  .site-header {
    .header-banner-bg {
      .header-banner-bg-cutout {
        width: calc(100px + 5%);
        clip-path: polygon(0 0, 100% 0, calc(100% - 25px) 100%, 0 100%);
        height: 4em;
      }
    }

    .header-join-icon {
      width: 175px;
    }
  }

  /* Footer */
  .site-footer {
    .footer-info {
		.footer-join {
			p {
				font-size: 2em;
			}
		}

      & .footer-contact {
        .footer-contact-details {
          p {
            a {
              .dashicons {
                display: block;
                margin: 0 auto 0.2em auto;
              }
            }
          }
        }

        .footer-addresses {
          flex: 1 1 auto;
          flex-wrap: wrap;
          text-align: center;

          .footer-address {
            flex: 1 0 100%;
          }
        }
      }
    }
  }
}