/*
Theme Name: Kerr Gardner Theme
Author: Andrew Hopkins | Dante Creative
Description: Kerr Gardner custom wordpress theme
*/

@import url('assets/fonts/fonts.css');


:root{
  --ink-color: #000000;
  --bg-color: #FFFFFF;
  --hr-color: #666666;
  --overlay-color: rgba(0,0,0,.8);
  --outline-color: #999999;
  --active-color: rgba(0,0,0,.1);
  --loader-color: #666666;
  --input-focus-color: #333333;
  --input-focus-border-color: #666666;

  --font-size: 1px;
  --font-weight: 300;
  /* --font: Inter, Avenir, Helvetica, Arial, sans-serif; */
  --font: sofia-pro, sans-serif;
  --font-heading: 'Brandon', sans-serif;
  --h1-size: 34rem;
  --h1-line-height: 39rem;
  --h2-size: 58rem;
  --h2-line-height: 108rem;
  --h3-size: 54rem;
  --h3-line-height: 80rem;
  --h4-size: 24rem;
  --h4-line-height: 28rem;
  --h5-size: 37rem;
  --h5-line-height: 1.2;
  --h6-size: 24rem;
  --h6-line-height: 80rem;

  --h2-size-sm: 36rem;
  --h2-line-height-sm: 1.2;

  --box-width: 960rem;
  --mobile-padding: 24rem;
  --mobile-padding-sm: 1; /* boolean! */
}

.sofia{
  font-family: var(--font);
}

.brandon{
  font-family: var(--font-heading);
}

h1, h2, h3, h4, h5, h6{
  font-family: var(--font-heading);
  text-transform: uppercase;
}

h1.fluid{
  font-size: clamp(var(--h1-size), var(--h1-size) + 1vw, calc(var(--h1-size)*2));
}

h2.fluid{
  font-size: clamp(var(--h2-size), var(--h2-size) + 1vw, calc(var(--h2-size)*2));
}
h2.x2{
  font-size: var(--h2-size-x2);
}

h3.fluid{
  font-size: clamp(var(--h3-size), var(--h3-size) + 1vw, calc(var(--h3-size)*2));
}

h4.fluid{
  font-size: clamp(var(--h4-size), var(--h4-size) + 1vw, calc(var(--h4-size)*2));
}

h5.fluid{
  font-size: clamp(var(--h5-size), var(--h5-size) + 1vw, calc(var(--h5-size)*2));
}

h6.fluid{
  font-size: clamp(var(--h6-size), var(--h6-size) + 1vw, calc(var(--h6-size)*2));
}

/* colors */
:root{
  --body-text: #040505;        
  --dark-blue: #293679;
  --medium-blue: #1E73BA;
  --light-blue: #6EBCE9;
  --faint-blue: #EAF5FC;
  --pale-blue: #F3FAFD;
  --white: #FFFFFF;
  --transparent: transparent;
}

.body{ color: var(--body-text); }
.dark-blue{ color: var(--dark-blue); }
.medium-blue{ color: var(--medium-blue); }
.light-blue{ color: var(--light-blue); }
.faint-blue{ color: var(--faint-blue); }
.pale-blue{ color: var(--pale-blue); }
.white{ color: var(--white); }
.transparent{ color: var(--transparent); }

.dark-blue-bg{ background-color: var(--dark-blue); }
.medium-blue-bg{ background-color: var(--medium-blue); }
.light-blue-bg{ background-color: var(--light-blue); }
.faint-blue-bg{ background-color: var(--faint-blue); }
.pale-blue-bg{ background-color: var(--pale-blue); }
.white-bg{ background-color: var(--white); }
.transparent-bg{ background-color: var(--transparent); }

p{
  font-size: 18rem;
  line-height: 28rem;
  /* line-height: 24rem; */
}

p.large{
  font-size: 28rem;
  line-height: 48rem;
  /*
  font-size: 20rem;
  line-height: 33rem;*/
}


/* buttons */
button{
  font-family: var(--font);
  font-size: 20rem;
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
}

.btn{
  display: inline-flex;
  justify-content: space-between;
  align-items: baseline; 
  padding: 21rem 24rem;     
  font-family: var(--font);
  font-size: 18rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}


.btn-group{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn-group .btn{
  width: 204px;
}

.btn.enquire:hover,
.btn.phone:hover{
  color: #040505;
  background-color: var(--light-blue);
}

.btn.enquire:hover span.icon.chevron-r{
  background-image: url('./assets/svg/chevron-right-dark.svg');
}
.btn.phone:hover span.icon.phone-white{
  background-image: url('./assets/svg/phone-dark.svg');
}


span.icon > svg{
  vertical-align: baseline;
}

span.icon.dark-blue > svg path{
  fill: var(--dark-blue);
}
span.icon.medium-blue > svg path{
  fill: var(--medium-blue);
}
span.icon.light-blue > svg path{
  fill: var(--light-blue);
}
span.icon.white > svg path{
  fill: var(--white);
}


span.icon.pointer{
  background-image: url('./assets/svg/pointer.svg');
  width: 16px;
  height: 19px;
}
span.icon.envelope{
  background-image: url('./assets/svg/envelope.svg');
  width: 19px;
  height: 16px;
}
span.icon.phone{
  background-image: url('./assets/svg/phone.svg');
  width: 18px;
  height: 18px;
}
span.icon.phone-white{
  background-image: url('./assets/svg/phone-white.svg');
  width: 17px;
  height: 17px;
  margin-right: 10px;
}
span.icon.chevron-r{
  background-image: url('./assets/svg/chevron-right.svg');
  width: 10px;
  height: 14px;
  margin-left: 20px;
}
span.icon.chevron-r-dark{
  background-image: url('./assets/svg/chevron-right-dark.svg');
  width: 10px;
  height: 14px;
  margin-left: 20px;
}
span.icon.money{
  background-image: url('./assets/svg/money.svg');
  width: 40px;
  height: 40px;
}
span.icon.ribbon{
  background-image: url('./assets/svg/ribbon.svg');
  width: 40px;
  height: 40px;
}
span.icon.tools{
  background-image: url('./assets/svg/tools.svg');
  width:40px;
  height:40px;
}
span.icon.time{
  background-image: url('./assets/svg/time.svg');
  width:40px;
  height:40px;
}
span.icon.house{
  background-image: url('./assets/svg/house.svg');
  width: 44px;
  height: 45px;
}
span.icon.hardhat{
  background-image: url('./assets/svg/hardhat.svg');
  width: 50px;
  height:32px;
}
span.icon.question{
  background-image: url('./assets/svg/question.svg');
  width: 43px;
  height: 43px;
}
span.icon.arrow-down{
  background-image: url('./assets/svg/arrow-down.svg');
  width: 23px;
  height: 12px;
}
span.icon.arrow{
  background-image: url('./assets/svg/arrow-right.svg');
  width: 20px;
  height: 34px;
}
span.icon.arrow.next{
  
}
span.icon.arrow.prev{
  transform: rotateZ(180deg);
}

span.icon.quote{
  background-image: url('./assets/svg/quote.svg');
  width: 126px;
  height: 143px;
}
span.icon.star-full{
  background-image: url('./assets/svg/star-full.svg');
  width: 21px;
  height: 21px;
}
span.icon.star-half{
  background-image: url('./assets/svg/star-half.svg');
  width: 21px;
  height: 21px;
}
span.icon.star-empty{
  background-image: url('./assets/svg/star-empty.svg');
  width: 21px;
  height: 21px;
}
span.icon.avatar{
  background-image: url('./assets/svg/avatar.svg');
  width: 31px;
  height: 31px;
}
span.icon.question-light{
  background-image: url('./assets/svg/question-light.svg');
  width: 40px;
  height: 40px;
}
span.icon.tick-shield{
  background-image: url('./assets/svg/tick-shield.svg');
  width: 41px;
  height: 40px;
}

h1.highlight-heading.fluid.inline{
	white-space:nowrap;
	margin-bottom:0;
	line-height:1.05;
}

h1.highlight-heading.fluid.inline > span{
vertical-align: top;
}

/* xs sm md */
  @media screen and (max-width: 63.9em) {
    p{
      font-size: 16rem;
      line-height: 24rem;
    }

    p.large{
      font-size: 20rem;
      line-height: 33rem;
    }
  }

/* xl */
@media screen and (min-width: 80em) {
  .w-box{
    max-width: 1200px;
  }
}

/* xxl */
@media screen and (min-width: 100em) {
  .w-box{
    max-width: 1600px;
  }
}