/**
 * #.# Header
 * #.#  Client Custom Styles
 *
 * Header section styles including navigation and off canvas
*/

header{position:fixed;width:100%;top:0;padding:25px 0;height:115px;z-index:150;background-color:#fff;transition:transform .3s ease-in-out}
header.header-hidden{transform:translateY(-100%)}
.header-logo {position: absolute;  top: 29px;width:202px}
.header-logo img{width:100%;height:auto;width:202px}
.header-icon{position:absolute;display:inline-block;top:20px;left:calc(50% - 15px);max-width:30px;display:inline-block}
.header-icon img{width:100%;height:auto}
.hidden-height{height:115px}

.hamburger {
  color: var(--black);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  margin-top: 3px;
  position: absolute;
  right: 30px;
  top: 30px;
}


.main-header-menu {display:flex;list-style:none;padding:0;margin: 15px 0px 0px 30px;justify-content:space-between;width:100%}
.main-header-menu li {display:flex;align-items:center}
.main-header-menu li a {color:var(--black);cursor:pointer;font-size: 1.125rem;font-weight:500;letter-spacing:2.4px;font-family:var(--header);background-color: initial;position: relative;letter-spacing: -0.1px;
  display: flex;font-size: 18px; font-size: 15px; font-weight: 600; letter-spacing: normal;}


.main-header-menu li a::after {
  background-color: var(--black);
  bottom: -5px;
  content: "";
  height: 2px;
  left: auto;
  position: absolute;
  right: 20px;
  transition-duration: .18s;
  transition-timing-function: cubic-bezier(.5,0,.75,0);
  width: 0;
}
.main-header-menu li a::after:hover {
  cursor: pointer;
  transition-timing-function: cubic-bezier(.25,1,.5,1);
}

.main-header-menu li a::after {
  background-color: var(--black);
  bottom: -2px;
  content: "";
  height: 2px;
  left: auto;
  position: absolute;
  right: 0px;
  transition-duration: .18s;
  transition-timing-function: cubic-bezier(.5,0,.75,0);
  width: 0;
}
.main-header-menu li.current-menu-item a::after,
.main-header-menu li.current_page_item a::after{
  left: 0px;
  width: 100%;
}

.main-header-menu li a:hover::after {
  left: 0px;
  width: 100%;
}

.main-header-menu-additional{list-style:none;padding:0;margin:0;display:inline-block;margin-left:0px;text-align:right;margin-top: -5px;}
.main-header-menu-additional li {display:inline-block}
.header-cta {position: relative; top: -3px;}

.header-cta a {font-family: var(--header);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.37;
  border-radius: 48px;
  text-decoration: none;
  transition-duration: .18s;
  transition-timing-function: cubic-bezier(.5,0,.75,0);
  padding: 11px 24px 8px;
  background-color: var(--yellow);
  color: var(--green);
  background-color: var(--dark-green);
  color: var(--white);
  position: relative;
  font-size: 1rem; font-weight: 600;
}

.header-cta a:hover {
  background-color: #566b65;
  color: #fff;
}

.search-option {  
  cursor:pointer;
  position: relative;
  top: 8px;
  left: -20px;
}

.search-option a {
  border: 2px solid;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  transition: all .18s cubic-bezier(.45, 0, .4, 1);
  font-size: 0;
  width: 3rem;
  height: 3rem;
  cursor:pointer;
}

.search-option a::before {
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  background-color: var(--dark-green);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.search-option a:hover {background-color:var(--dark-green)}
.search-option a:hover::before {background-color:var(--cream)}

/* Hidden search bar — collapsed by default, expands on .active */
.hidden-search {
  align-items: center;
  background-color: #3b534f;
  color: #fff;
  display: flex;
  left: 0;
  max-height: 0;
  overflow: hidden;
  position: fixed;
  top: 115px;
  transition: max-height .3s cubic-bezier(.45, 0, .4, 1);
  width: 100%;
  z-index: 149; 
}

.hidden-search.active {
  max-height: 215px;
}
.c-searchbar__form-input {
  background-color: #3b534f;
  color: #fff;
  font-family: Protas Raisonne,Roboto,Helvetica Neue,Arial,sans-serif;
  font-size: 1.75rem;
  line-height: normal;
  border:0px;
  width: 90%;
}
.c-searchbar__form.u-flex.u-justify-between.u-items-center {
  padding: 50px 0px;

}
/* =============================
  # Off Canvas Menu
============================= */

.off-canvas{position:fixed;transition:all .9s ease-in-out;right:-100svw;height:100svh;width:100vw;z-index:100;background-color:var(--dark-green);padding-top:30px;top:0px}
.off-canvas.active{transition:all .9s ease-in-out;right:0px}
.off-canvas nav ul{list-style:none;padding:0;margin:0;display:block;padding-left:0px;padding-top:70px}
.off-canvas nav ul li{margin-bottom:7px}
.off-canvas nav ul li a{font-size:32px;font-weight:var(--semi);color:var(--cream);line-height:54px;font-size: 2.25rem;
  font-weight: 500;}
.off-canvas nav ul li a:hover{color:var(--yellow)}
.off-canvas nav{margin-top:0;display:block;width:90%;position:relative;top:20px}
.menu-nav{top:12px;position:absolute;right:20px;color:var(--black);font-size:22px;cursor:pointer;transition:all .2s ease;mix-blend-mode:unset;background-color:transparent}
.menu-nav:hover{color:var(--pink)}
.open-menu{top:12px;position:absolute;right:20px;color:var(--white);font-size:22px;cursor:pointer;transition:all .2s ease;mix-blend-mode:unset;background-color:transparent}
.cnavas-logo{top:6px;position:relative;display:inline-block}
.open-menu:hover{color:var(--skyblue);cursor:pointer}
.off-canvas .contact-details{border-top:1px solid var(--white);margin-top:50px}
.off-canvas .contact-details h3{color:var(--white);padding:20px 0 10px}
.off-canvas .contact-details p{color:var(--white)}
.off-canvas .contact-details p a{font-weight:var(--semi);color:var(--white)}
.off-canvas .contact-block.content-block a{color:var(--offwhite);border-bottom:1px solid rgba(225,225,225,0.1)}
.off-canvas .contact-block.content-block a:hover{color:var(--white);border-bottom:1px solid rgba(225,225,225,1)}
.off-canvas .footer-socials.contact-socials h3{color:var(--white);padding-top:20px;padding-bottom:0}
.off-canvas .footer-socials.contact-socials .social-links li a{color:var(--pink);background-color:var(--white)}
.off-canvas .footer-socials.contact-socials .social-links li a:hover{background-color:var(--skyblue)}
.off-canvas{opacity:0;z-index:-1}
.off-canvas.active{opacity:1;z-index: 99999;}
.off-canvas h4{font-size:20px;color:var(--purple);line-height:34px;font-family:var(--header);padding-bottom:20px;position:relative;top:-10px}
.off-canvas .image-block{max-height:200px;overflow:hidden}
.off-canvas-menu-block{margin-top:20px;border-left:solid 1px var(--Calico);padding-left:20px}
.off-canvas-menu-block ul{list-style:none;padding-left:0}
.off-canvas-menu-block ul li{margin-bottom:12px}
.off-canvas-menu-block ul li.menu-item-has-children{position:relative;margin-bottom:10px}
.off-canvas-menu-block ul li.menu-item-has-children::before{content:"";height:1px;background-color:var(--purple);top:13px;left:0;width:100%;position:absolute;display:block;z-index:1}
.off-canvas-menu-block ul li.menu-parent > a{background-color:var(--off-white);padding-right:10px;position:relative;z-index:2;border-bottom:0!important;cursor:default}
.off-canvas-menu-block ul li a{color:var(--black);font-size:16px;background-color:var(--off-white);font-style:normal;font-weight:400;line-height:24px;border-bottom:1px solid rgba(0,0,0,.0);transition:.2s ease-in-out all}
.off-canvas-menu-block ul li a:hover,.off-canvas-menu-block ul li a:focus{color:var(--black);border-bottom:1px solid rgba(0,0,0,9);transition:.2s ease-in-out all}
.offcanvas-extras-menu-container{margin-top:75px}
.offcanvas-extras-menu-container li{display:inline-block;margin-left:30px}
.offcanvas-extras-menu-container li a{color:var(--black);font-size:18px;font-style:normal;font-weight:400;line-height:24px;border-bottom:1px solid rgba(0,0,0,.0);transition:.2s ease-in-out all}
.offcanvas-extras-menu-container li a:hover,.offcanvas-extras-menu-container li a:focus{color:var(--black);border-bottom:1px solid rgba(0,0,0,9);transition:.2s ease-in-out all}
.off-canvas-menu-block .sub-menu{margin-top:13px;margin-left:20px;margin-bottom:22px}

/* =============================
  # Theme Colours
============================= */

.menu-close{position:absolute;left:27px;top:31px;border-bottom:1px solid rgba(0,0,0,.0);transition:.2s ease-in-out all}
.menu-close:hover{border-bottom:1px solid rgba(0,0,0,9);transition:.2s ease-in-out all}
.menu-open{transform:rotate(-90deg) translate(-100%,0);transform-origin:top left;position:absolute;left:20px;top:15px}
.header-menu{margin-top:2px;margin-right:-3px}

/* =============================
  # Theme Colours
============================= */




header .container {
  max-width: 90rem;
  padding-top: 3px;
}

.header-light-logo {opacity:0}
.header-purple-logo {opacity: 0}
.single-post .header-purple-logo,
.single-post .header-light-logo{opacity:0}
.header-logo.header-white-logo,
.inview .header-logo.header-white-logo {opacity: 0;}

.menu-colour-menu-white header {background-color:transparent}
.menu-colour-menu-white .main-header-menu li a {color: var(--dark-green);}
.menu-colour-menu-white .main-header-menu li a::after {background-color: var(--dark-green);}
.menu-colour-menu-white .header-cta a {background-color: var(--yellow);color: var(--dark-green);}
.menu-colour-menu-white .header-cta a:hover {background-color: #566b65; color: #fff;}
.menu-colour-menu-white .header-dark-logo {opacity:1}
.menu-colour-menu-white .header-light-logo {opacity:0}
.menu-colour-menu-white .header-purple-logo {opacity:0}
.menu-colour-menu-white .search-option a {border-color: var(--dark-green)}
.menu-colour-menu-white .search-option a::before {background-color: var(--dark-green)}
.menu-colour-menu-white .search-option a:hover {border-color: var(--cream)}
.menu-colour-menu-cream header {background-color:var(--cream)}
.menu-colour-menu-cream .header-dark-logo {opacity:1}
.menu-colour-menu-cream .header-light-logo {opacity:0}
.menu-colour-menu-cream .header-purple-logo {opacity:0}

.menu-colour-menu-trans header {background-color:transparent}
.menu-colour-menu-trans .main-header-menu li a {color: #fff;}
.menu-colour-menu-trans .main-header-menu li a::after {background-color: #fff;}
.menu-colour-menu-trans .header-cta a {background-color: var(--yellow);color: var(--dark-green);}
.menu-colour-menu-trans .header-cta a:hover {background-color: #566b65; color: #fff;}
.menu-colour-menu-trans .header-dark-logo {opacity:0}
.menu-colour-menu-trans .header-light-logo {opacity:0}
.menu-colour-menu-trans .header-purple-logo {opacity:0}
.menu-colour-menu-trans .header-white-logo {opacity:1}
.menu-colour-menu-trans .search-option a {border-color: #fff}
.menu-colour-menu-trans .search-option a::before {background-color:#fff}
.menu-colour-menu-trans .search-option a:hover {border-color: var(--dark-green)}


.menu-colour-menu-green header {background-color:transparent}
.menu-colour-menu-green  .main-header-menu li a {color: var(--cream);}
.menu-colour-menu-green .main-header-menu li a::after {background-color: var(--cream);}
.menu-colour-menu-green .header-cta a {background-color: var(--yellow);color: var(--dark-green);}
.menu-colour-menu-green .header-cta a:hover {background-color: #566b65; color: #fff;}
.menu-colour-menu-green .header-dark-logo {opacity:0}
.menu-colour-menu-green .header-light-logo {opacity:1}
.menu-colour-menu-green .header-purple-logo {opacity:0}
.menu-colour-menu-green .search-option a {border-color: var(--cream)}
.menu-colour-menu-green .search-option a::before {background-color: var(--cream)}
.menu-colour-menu-green .search-option a:hover {border-color: var(--dark-green)}

.menu-colour-menu-yellow .header-dark-logo {opacity:1}
.menu-colour-menu-yellow .header-light-logo {opacity: 0}
.menu-colour-menu-yellow .header-purple-logo {opacity: 0}
.menu-colour-menu-yellow header {background-color:var(--yellow)}

.menu-colour-menu-purple .header-dark-logo {opacity:0}
.menu-colour-menu-purple .header-light-logo {opacity: 0}
.menu-colour-menu-purple .header-purple-logo {opacity: 1}
.menu-colour-menu-purple .main-header-menu li a {color: var(--purple);}
.menu-colour-menu-purple .main-header-menu li a::after {background-color: var(--purple);}
.menu-colour-menu-purple .header-cta a {background-color: var(--purple);color: var(--white);}
.menu-colour-menu-purple .header-cta a:hover {background-color: #35307d; color: #fff;}
.menu-colour-menu-purple header {background-color:var(--light-purple)}
.menu-colour-menu-purple .search-option a {border-color: var(--purple)}
.menu-colour-menu-purple .search-option a::before {background-color: var(--purple)}
.menu-colour-menu-purple .search-option a:hover {border-color: var(--purple);background-color:var(--purple)}
.menu-colour-menu-purple .search-option a:hover::before {background-color: var(--white)}

.scheme-white .inview {background-color:var(--cream)}
.scheme-white .inview li a {color: var(--dark-green);}
.scheme-white .inview li a::after {background-color: var(--dark-green);}
.scheme-white .inview .header-cta a {background-color: var(--dark-green);color: var(--cream);}
.scheme-white .inview .header-cta a:hover {background-color: #566b65;color: #fff;}


.scheme-white .inview .header-dark-logo {opacity:1}
.scheme-white .inview .header-light-logo {opacity:0}
.scheme-white .inview .header-purple-logo {opacity: 0}

.single-post .inview {background-color:var(--cream)}
.single-post .inview li a {color: var(--dark-green);}
.single-post .inview li a::after {background-color: var(--dark-green);}
.single-post .inview .header-cta a {background-color: var(--dark-green);color: var(--cream);}
.single-post .inview .header-cta a:hover {background-color: #566b65;color: #fff;}
.single-post .inview .header-dark-logo {opacity:1}
.single-post .inview .header-light-logo {opacity:0}
.single-post .inview .header-purple-logo {opacity: 0}


.menu-colour-menu-purple.scheme-purple .inview {background-color:var(--light-purple)}
.menu-colour-menu-purple.scheme-purple .inview li a {color: var(--purple);}
.menu-colour-menu-purple.scheme-purple .inview li a::after {background-color: var(--purple);}
.menu-colour-menu-purple.scheme-purple .inview .header-cta a {background-color: var(--purple);color: var(--white);}
.menu-colour-menu-purple.scheme-purple .inview .header-cta a:hover {background-color: #35307d; color: #fff;}
.menu-colour-menu-purple.scheme-purple .inview .header-dark-logo {opacity:0}
.menu-colour-menu-purple.scheme-purple .inview .header-light-logo {opacity:0}
.menu-colour-menu-purple.scheme-purple .inview .header-purple-logo {opacity:1}



.menu-colour-menu-trans .inview .search-option a {border-color: var(--dark-green);}
.menu-colour-menu-trans .inview .search-option a::before {background-color: var(--dark-green);}
.menu-colour-menu-trans .inview .search-option a:hover::before {background-color:  var(--cream);}




@media (max-width: 1180px) {
  header nav {display:none}
  .menu-main-menu-additional .search-option {display:none}
  .main-header-menu-additional {margin-top: 10px;}
  .menu-main-menu-additional {margin-right: 30px;}
  /* Hamburger icon */
  .hamburder {margin-top:4px}
  .hamburger-lines {
      display: flex;
      flex-direction: column;
      gap: 4px;
      width: 26px;
      cursor: pointer;
      margin-top: 5px;
  }

  .hamburger-lines .top-bun,
  .hamburger-lines .meat,
  .hamburger-lines .bottom-bun {
      display: block;
      width: 26px;
      height: 2px;
      background-color: var(--dark-green);
      border-radius: 2px;
      transition: transform 0.3s ease, opacity 0.3s ease;
      transform-origin: center;
  }
  .off-canvas .hamburger-lines .top-bun,
  .off-canvas .hamburger-lines .meat,
  .off-canvas .hamburger-lines .bottom-bun {background-color: var(--cream);}


  /* Active — cross state */
  .hamburger.active .hamburger-lines .top-bun {
      transform: translateY(6px) rotate(45deg);
  }

  .hamburger.active .hamburger-lines .meat {
      opacity: 0;
      transform: scaleX(0);
  }

  .hamburger.active .hamburger-lines .bottom-bun {
      transform: translateY(-6px) rotate(-45deg);
  }

  .menu-colour-menu-white .hamburger-lines .top-bun, 
  .menu-colour-menu-white .hamburger-lines .meat, 
  .menu-colour-menu-white .hamburger-lines .bottom-bun {background-color: var(--dark-green)}

  .menu-colour-menu-white .off-canvas .main-header-menu li a,
  .menu-colour-menu-purple .off-canvas .main-header-menu li a {color: var(--cream);}

  .menu-colour-menu-trans .hamburger-lines .top-bun, 
  .menu-colour-menu-trans .hamburger-lines .meat, 
  .menu-colour-menu-trans .hamburger-lines .bottom-bun {background-color: var(--cream)}

  .menu-colour-menu-green .hamburger-lines .top-bun, 
  .menu-colour-menu-green .hamburger-lines .meat, 
  .menu-colour-menu-green .hamburger-lines .bottom-bun {background-color: var(--cream)}

  .menu-main-menu-additional {margin-right: 50px;}

  .main-header-menu li a::after {background-color: transparent!important;}


  .menu-colour-menu-white .off-canvas .hamburger-lines .top-bun, 
  .menu-colour-menu-white .off-canvas .hamburger-lines .meat, 
  .menu-colour-menu-white .off-canvas .hamburger-lines .bottom-bun {
    background-color: var(--cream);
  }
}


@media (max-width: 768px) {
.header-logo img {
  width: 100%;
  height: auto;
  max-width: 130px;
  margin-top: 10px;
}
.header-logo {
  position: absolute;
  top: 20px;
  width: 132px;
}
}