/*
    ===================
	 TABLE OF CONTENTS
    ===================
	
	 1. SANITIZE / RESETS / NORMALIZE
	 2. ROOT VARIABLES
	 3. TYPOGRAPHY
	 4. HEADER
	 5. FOOTER
	 6. HERO
     7. CUSTOM BUTTON
	 8. GENERAL STYLING
	 9. CREDITS AND LICENSE

*/





/*
	==================================
	 1. SANITIZE / RESETS / NORMALIZE
  ==================================
	
	- You can find a reference to unpkg.com/sanitize.css in the header.php file.
*/




/*
    ===================
	 2. ROOT VARIABLES
    ===================
*/
:root {
  --green: #007139; /* 0,113,57 */
  --header-height: 50px; /* The height of the header bar that holds the logo and menu */
  --min-width-for-nav: 950px; /* 950px is just large enough to hold all of the nav links. */
  --mobile-gutters: 90vw;
  --desktop-gutters: 60vw;    
  --create-gutters:
    clamp(
      min(var(--min-width-for-nav),var(--mobile-gutters)),
      var(--desktop-gutters),
      var(--mobile-gutters)
    );

  --h1-font-size-mobile: clamp(1rem, 1rem + 10vw, 60px);
  --h1-font-size: var(--h1-font-size-mobile);
  --h2-font-size: max(1rem, calc( var(--h1-font-size) * 0.4 ));
  --h3-font-size: max(1rem, calc( var(--h1-font-size) * 0.27));

  --shadow-small-color: 0deg 0% 0% / 0.01;
  --shadow-small:
     0 1px 1px hsl(var(--shadow-small-color)),
      0 2px 2px hsl(var(--shadow-small-color)),
      0 4px 4px hsl(var(--shadow-small-color)),
      0 8px 8px hsl(var(--shadow-small-color)),
      0 16px 16px hsl(var(--shadow-small-color));
  --shadow-md-color: 0deg 0% 0% / 0.05;
  --shadow-md:
     0 1px 1px hsl(var(--shadow-md-color)),
      0 2px 2px hsl(var(--shadow-md-color)),
      0 4px 4px hsl(var(--shadow-md-color)),
      0 8px 8px hsl(var(--shadow-md-color)),
      0 16px 16px hsl(var(--shadow-md-color));
}

@media (min-width: 950px) {		
  :root {
    --header-height: 100px; 
    --h1-font-size: calc( var(--h1-font-size-mobile) * 1.40 );
  }
}
/* END OF ROOT VARIABLES */





/*
  ===============
   3. TYPOGRAPHY
  ===============

  - Import Gotham Font: https://gist.github.com/mfd/f3d96ec7f0e8f034cc22ea73b3797b59 
  - Includes weights 100,200,400,600, and 800
*/
@font-face {
  font-family: GothamPro;
  src: url(../fonts/Gotham/GothamPro-Light.eot);
  src: url(../fonts/Gotham/GothamPro-Light.woff2) format("woff2"),url(../fonts/Gotham/GothamPro-Light.woff) format("woff"),url(../fonts/Gotham/GothamPro-Light.ttf) format("truetype"),url(../fonts/Gotham/GothamPro-Light.svg#GothamPro-Light) format("svg"),url(../fonts/Gotham/GothamPro-Light.eot?#iefix) format("embedded-opentype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: GothamPro;
  src: url(../fonts/Gotham/GothamPro.eot);
  src: url(../fonts/Gotham/GothamPro.woff2) format("woff2"),url(../fonts/Gotham/GothamPro.woff) format("woff"),url(../fonts/Gotham/GothamPro.ttf) format("truetype"),url(../fonts/Gotham/GothamPro.svg#GothamPro) format("svg"),url(../fonts/Gotham/GothamPro.eot?#iefix) format("embedded-opentype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: GothamPro;
  src: url(../fonts/Gotham/GothamPro-Medium.eot);
  src: url(../fonts/Gotham/GothamPro-Medium.woff2) format("woff2"),url(../fonts/Gotham/GothamPro-Medium.woff) format("woff"),url(../fonts/Gotham/GothamPro-Medium.ttf) format("truetype"),url(../fonts/Gotham/GothamPro-Medium.svg#GothamPro-Medium) format("svg"),url(../fonts/Gotham/GothamPro-Medium.eot?#iefix) format("embedded-opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: GothamPro;
  src: url(../fonts/Gotham/GothamPro-Bold.eot);
  src: url(../fonts/Gotham/GothamPro-Bold.woff2) format("woff2"),url(../fonts/Gotham/GothamPro-Bold.woff) format("woff"),url(../fonts/Gotham/GothamPro-Bold.ttf) format("truetype"),url(../fonts/Gotham/GothamPro-Bold.svg#GothamPro-Bold) format("svg"),url(../fonts/Gotham/GothamPro-Bold.eot?#iefix) format("embedded-opentype");
  font-weight: 600;
  font-style: normal;
}

body {
  font-family: GothamPro;
  font-weight: 200;
  font-style: normal;      
}

h1 {
  margin: 0;
  font-size: var(--h1-font-size);
  font-weight: 600;
  text-transform: uppercase;
  background: linear-gradient(25deg, rgba(0,113,57,1) 0%, rgba(0,0,0,1) 80%); /* black to green, mostly black, bottom left is a bit green */
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

#page-title-text h1 {
  line-height: 1.25;
  margin-left: -5px;
  background: linear-gradient(10deg, rgba(0,113,57,1) 0%, rgba(0,0,0,1) 56%); /* black to green, mostly black, bottom left is a bit green */
  background-clip: text;
  -webkit-background-clip: text;
}

#page-1579 h1 {
  font-size: calc( var(--h1-font-size) - 5px); /* Keep 'CONTACT US' on one line. */
}

h2,
.h2,
#hero-text span,
#page-title-text p {
  font-size: var(--h2-font-size);
  color: var(--green);
}

h3 {
  font-size: var(--h3-font-size);
}

#hero-text span,
#page-title-text p {
  font-weight: 100;
  text-transform: uppercase;
  margin: 0;
}

/* 
  Styling for desktop screens. Any screen greater than or equal to 950px.
*/
@media (min-width: 950px) {	
  #hero-text span,
  #page-title-text p {
    margin: 0;
  }
}
/* END OF TYPOGRAPHY */




/*
  ===========
   4. HEADER
  ===========
*/
header {
  display: flex;
  align-items: center;
  background-color: rgba(255,255,255,0.5);
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  position: fixed;
  top: 0;
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
  width: 100%;
  height: var(--header-height);
  z-index: 3;
  font-weight: 400;
}

#container-for-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Keep the logo on the left side and the links on the right side */
  align-items: center;
}

#container-for-header nav {
  position: absolute;
  top: var(--header-height);
  right: 0;
}

#menu-top-header-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: rgba(255,255,255,0.5);
  width: 100%;
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
  text-align: right;
}

#menu-top-header-menu li {
  display: block;
  padding: 20px 20px;
  border-right: 1px solid #f4f4f4;
  cursor: pointer;
}

#menu-top-header-menu li a {
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}

#menu-top-header-menu li:last-child {
  border-right: none;
}

#menu-top-header-menu li:hover,
#menu-button:hover {
  background-color: #f4f4f4;
}

#menu-top-header-menu li:-webkit-any-link:focus-visible {
  outline-offset: -1px;
}	

#logo-within-header img {
  height: var(--header-height);
  width: auto;
  padding: 5px 10px;
  margin-top: 2.5px; /* Bump logo downwards because theres some tall on the 'p' */
}

#hamburger-icon {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right:0;
  padding: 28px 20px;	  
  cursor: pointer;
  user-select: none;
}

#hamburger-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

#hamburger-icon .navicon:before,
#hamburger-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

#hamburger-icon .navicon:before {
  top: 5px;
}

#hamburger-icon .navicon:after {
  top: -5px;
}

#menu-button {
  display: none;
}

#menu-button:checked ~ nav #menu-top-header-menu {
  max-height: 400px;
}

#menu-button:checked ~ #hamburger-icon .navicon {
  background: transparent;
}

#menu-button:checked ~ #hamburger-icon .navicon:before {
  transform: rotate(-45deg);
}

#menu-button:checked ~ #hamburger-icon .navicon:after {
  transform: rotate(45deg);
}

#menu-button:checked ~ #hamburger-icon:not(.steps) .navicon:before,
#menu-button:checked ~ #hamburger-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 
  Styling for desktop screens. Any screen greater than or equal to 950px.
  950px is just large enough to hold all of the nav links. 
  You can't use vars in media querys, so 950px = --min-width-for-header
*/
@media (min-width: 950px) {		
  header {
    height: var(--header-height);
    justify-content: center;
  }
  
  #logo-within-header img {
    height: calc(var(--header-height) - 20px);
    max-width: 40vw;
  }
      
  #container-for-header {
    /* max-width: min(var(--min-width-for-header), var(--desktop-max-width)); Expand with vw but lock in at 1025px; */
    width: var(--create-gutters);
  }

  #container-for-header nav {
    position: initial;
    top: unset;
    right: unset;
  }
  
  #menu-top-header-menu {
    background-color: unset;
    width: unset;
    clear: none;
    float: right;
    max-height: none;
  }
  
  #menu-top-header-menu li {
    float: left;
    padding: 20px 29px;
  }		
  
  #hamburger-icon {
    display: none;
  }

  nav a.show-page-indicator {
    position: relative;
  }

  nav a.show-page-indicator::after {
    position: absolute;
    content: '';
    height: 7px;
    width: 100%;
    background-color: var(--green);
    left: 0;
    bottom: -20px;
  }
}
/* END OF HEADER */




/*
  ===========
   5. FOOTER
  ===========
*/
footer {
  font-weight: 400;
  padding-block: 20vw;
  /* background-image:
    linear-gradient(to left, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), 
    url('../../../../uploads/2022/Footer.jpg); */
  background-image:
    linear-gradient(to left, rgba(0,0,0,0.4), rgba(0,0,0,0.8));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

footer.visible {
  background-image:
    linear-gradient(to left, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), 
    url('../../../../uploads/2022/Footer.jpg');
}

#footer-container {
  display: grid;
  gap: 4rem;
  place-items: center;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: 1fr min-content;
  grid-template-areas:
    "logo"
    "form"
    "copyright";
}

#footer-container > * {
  max-width: 30em; /* Don't grow bigger than the copyright text on one line */
}

#footer-copyright {
  color: white;
  grid-area: copyright;
  align-self: end;
  text-align: center;
  font-size: min(1rem, 3vw);
}

#footer-logo-and-icons {
  grid-area: logo;
  display: flex;
  flex-direction: column;
/*   max-width: 400px; */
}

#footer-logo-and-icons img {
  height: auto;
  max-width: 100%;
}

#footer-icons {
  margin-top: 2em;
  display: flex; 
  justify-content: space-between;
}

#footer-icons img {
  width: 35px;
  height: auto;
  filter: brightness(0) invert(1); /* Change to white */
}

#footer-icons .pin-icon,
#footer-icons .phone-icon {
  width: 30px;
}

#footer-form { 
  padding: 1em;
  background-color: rgba(255,255,255,0.5);
  grid-area: form;
  border-radius: 20px;
  width: 100%;
}

#footer-form,
#footer-form *::placeholder {
  font-size: 12px;
}

#footer-form *::placeholder {
  color: var(--green);
  text-transform: uppercase;
}

#footer-form input, 
#footer-form textarea {
  min-height: 44px;
  border: 1px var(--green) solid;
  border-radius: 10px;
}

#footer-form .caldera-grid,
#footer-form form,
#footer-form textarea,
#footer-form .textarea-container,
#footer-form .textarea-container > div,
#footer-form form > .row[id*='row-2'] div {
  height: 100%;
}

#footer-form .caldera-grid .row {
  margin: 0;
}

#footer-form .caldera-grid .row .col-sm-12 {
  padding: 0;
}

#footer-form .caldera-grid .form-control {
  background-color: #ffffffbd;
}

/* Styling for desktop screens. Any screen greater than or equal to 950px */
@media (min-width: 950px) {
  #footer-container {
    height: 100%;
    place-items: unset;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "logo form"
      "copyright form";
  }
  
  footer {
    padding-block: 2.5vw;
    height: 600px;
    background-position-y: 87%;
  }

  #footer-icons a {
    transition: all .2s ease-in-out;
  }
  
  #footer-icons a:hover {
    transform: scale(1.1);
  }
  
  #footer-copyright {
    text-align: left; 
    font-size: clamp(0.69rem, 0.9vw, 1rem); /* Keep on one line always. */
  }
  
  #footer-form {
    width: 100%;
    height: 100%;
  }    

  #footer-form,
  #footer-form *::placeholder {
    font-size: 14px;
  }

  #footer-form form {
    display: flex;
    flex-direction: column;
  }

  /* Select the textarea/comments container */
  #footer-form form > .row[id*='row-2'] {
    flex: 1;
  }

  .caldera-grid {
    display: flex;
    flex-direction: column;
  }
}
/* END OF FOOTER */




/*
  =========
   6. HERO
  =========
*/
.hero {
  height: calc(100vh - var(--header-height));
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;    
  background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.05), rgba(255,255,255,0.8), rgba(255,255,255,1)),url(https://www.resgroup.ca/wp-content/uploads/2023/hero-background-image.jpg);
  background-position-y: top;
  background-position-x: 71%;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: -8vh;
  /* radial-gradient(ellipse 71% 163% at 77% -14%, black 50%, rgba(0, 0, 0, 0.6) 50%) */
}

#hero-text {
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(50% - var(--header-height));
}

#hero-text span {
  margin-top: calc(var(--h1-font-size) * 0.25);
}

/* Styling for desktop screens. Any screen greater than or equal to 950px */
@media (min-width: 950px) {
  .hero {
    background-image:
    linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.04), rgba(255,255,255,0.05), rgba(255,255,255,1)), 
    url(https://www.resgroup.ca/wp-content/uploads/2023/hero-background-image.jpg);
    margin-top: unset;
    background-position-x: center;
    margin-bottom: calc( var(--header-height) * -1);
  }

  #hero-text {
    line-height: 0.9;
    text-align: left;
    align-items: flex-start;
    width: var(--create-gutters);
    margin-top: 0;
  }

  #hero-text span {
    margin-top: calc(var(--h1-font-size) * 0.4);
  }
}
/* END OF HERO */




/*
  ==================
   7. CUSTOM BUTTON
  ==================
*/
.button-container,
.custom-button,
.custom-button a {
  display: flex; 
  justify-content: center;
  align-items: center;
  font-weight: 400;
  color: white;
  text-transform: uppercase;
}

#footer-form .custom-button {
  font-size: 14px;
}

.button-container {
  margin: 4em 0;
}

#footer-form .button-container {
  display: flex;
  justify-content: center;
  margin: 0;
}

.custom-button {
  border-radius: 1em;
  width: fit-content;
  background-color: var(--green);
  box-shadow: var(--shadow-md);
  transition: all .2s ease-in-out;
  font-size: 92%; /* Keep on one line. Will change to 1rem after 382px. */
}

.custom-button:hover {
  transform: scale(1.05);
}

.custom-button a,
#footer-form .custom-button {
  border: unset;
  padding: 0.5em 1em;
  min-height: 44px;
  text-decoration: none;
}

.custom-button a.add-instagram-icon::after {
  content:'';
  margin-left: 0.5em;
  width: 40px;
  height: 40px;  
  background-image: url("data:image/svg+xml,%3Csvg fill='white' stroke='white' stroke-width='4' viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m128 84a44 44 0 1 0 44 44 44.05 44.05 0 0 0 -44 -44zm0 80a36 36 0 1 1 36 -36 36.041 36.041 0 0 1 -36 36zm44-132h-88a52.059 52.059 0 0 0 -52 52v88a52.059 52.059 0 0 0 52 52h88a52.059 52.059 0 0 0 52 -52v-88a52.059 52.059 0 0 0 -52 -52zm44 140a44.05 44.05 0 0 1 -44 44h-88a44.05 44.05 0 0 1 -44 -44v-88a44.05 44.05 0 0 1 44 -44h88a44.05 44.05 0 0 1 44 44zm-28-96a8 8 0 1 1 -8 -8 8.0092 8.0092 0 0 1 8 8z'/%3E%3C/svg%3E");
}

/* Styling for desktop screens. Any screen greater than or equal to 382px */
@media (min-width: 382px) {
  .custom-button {
    font-size: 1rem;
  }
}

/* Styling for desktop screens. Any screen greater than or equal to 950px */
@media (min-width: 950px) {
  #footer-form .custom-button {
    margin-top: 15px;
    font-size: 1rem;
  }  
}
/* END OF CUSTOM BUTTON */




/*
  ====================
   8. GENERAL STYLING
  ====================
*/
main {
  margin-top: var(--header-height);
}

main section:not(.hero) {
  margin-block: 6em;
}

.add-gutters {
  /* Creates a left and right gutter */
  width: var(--create-gutters);
  margin-inline: auto;
}

.hide-this {
  height: 0 !important;
  visibility: hidden !important;
  display: none !important;
}

#page-title-container {
  display:grid;
  place-items: center;
  padding-block: 6em;
  text-align: center;
}

/* Styling for desktop screens. Any screen greater than or equal to 950px */
@media (min-width: 950px) {
  #page-title-container {
    text-align: left;
  }
}
/* END OF GENERAL STYLING */






/*
=========================
 9. CREDITS AND LICENSE
=========================

- Some design and code was inspired and/or recycled from HTML5 UP (html5up.net/license | @ajlkn)
- COPYRIGHT © 2022 RES GROUP. ALL RIGHTS RESERVED.

*/