/*

Base Theme Styling for WIA sites
 - Variables
 - Typography
 - Utility classes
 - Breakpoints
 - Generic components

 /* Variables
 --------------------------------------------- */

@font-face {
 font-family: 'itc_stone_sans';
 src:  url('assets/fonts/ITC-stone-sans/itc_stone_sans_std.woff') format('woff2'),
       url('assets/fonts/ITC-stone-sans/itc_stone_sans_std.woff') format('woff');
 font-weight: bold;
}

html{
  font-size: 62.5%;
}
:root{
  --font-title: 'itc_stone_sans', sans-serif;
  --font-sans: 'Josefin Sans', sans-serif;
}

/* Utility classes
--------------------------------------------- */

/* Base Fonts */
.font-body{
  font-family: var(--font-sans);
}
.font-title{
  font-family: var(--font-title);
}

/* Font Weights */
.font-light{
  font-weight: 300;
}
.font-regular{
  font-weight: 400;
}
.font-medium{
  font-weight: 500;
}
.font-semibold{
  font-weight: 600;
}
.font-bold{
  font-weight: 700;
}

/* Bootstrap Gutters */

.gx-6{
  --bs-gutter-x: 4.8rem;
}

/* Colours / Hover States
--------------------------------------------- */

.hover\:has-dark-color:hover{
  color: var(--wp--preset--color--dark) !important;
}
.hover\:has-light-color:hover{
  color: var(--wp--preset--color--light) !important;
}
.hover\:has-primary-color:hover{
  color: var(--wp--preset--color--primary) !important;
}
.hover\:has-secondary-color:hover{
  color: var(--wp--preset--color--secondary) !important;
}
.hover\:has-tertiary-color:hover{
  color: var(--wp--preset--color--tertiary) !important;
}
.hover\:has-quaternary-color:hover{
  color: var(--wp--preset--color--quaternary) !important;
}

.hover\:has-dark-background-color:hover{
  background-color: var(--wp--preset--color--dark) !important;
}
.hover\:has-light-background-color:hover{
  background-color: var(--wp--preset--color--light) !important;
}
.hover\:has-primary-background-color:hover{
  background-color: var(--wp--preset--color--primary) !important;
}
.hover\:has-secondary-background-color:hover{
  background-color: var(--wp--preset--color--secondary) !important;
}
.hover\:has-tertiary-background-color:hover{
  background-color: var(--wp--preset--color--tertiary) !important;
}
.hover\:has-quaternary-background-color:hover{
  background-color: var(--wp--preset--color--quaternary) !important;
}
a{
  color:var(--wp--preset--color--dark);
}

/* Typography
--------------------------------------------- */

body{
  font-family: var(--font-sans);
  font-size: var(--wp--preset--font-size--copyright);
}

h1, h2, h3, h4,  .h1, .h2, .h3, .h4{
  font-family: var(--font-title);
  font-weight: 600;
  line-height: 1.2;
}

h1, h2, .h1, .h2{
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.1;
}

h3, .h3{
  font-size: var(--wp--preset--font-size--md);
}

h4, .h4{
  font-size: var(--wp--preset--font-size--base);
}

p a{
  text-decoration: underline;
}
p a.button{
  text-decoration: none;
}


/*
*  Small Tablet & Up
* Class prefix md:
*/
@media only screen and (min-width: 768px){
  h1, h2, .h1, .h2{
    font-size: var(--wp--preset--font-size--xl);
  }
  h3, .h3{
    font-size: var(--wp--preset--font-size--lg);
  }
}

/*
* Tablet & Up
* Class prefix lg:
*/
@media only screen and (min-width: 1024px){
  h1, h2, .h1, .h2{
    font-size: var(--wp--preset--font-size--2-xl);
  }
  body{
    font-size: var(--wp--preset--font-size--base);
  }
}

/*
* Laptop & Up
* Class prefix xl:
*/
@media only screen and (min-width: 1280px){
  h1, .h1{
    font-size: var(--wp--preset--font-size--3-xl);
  }
  h2, .h2{
    font-size: var(--wp--preset--font-size--2-xl);
  }
  h3, .h3{
    font-size: var(--wp--preset--font-size--xl);
  }
  h4, .h4{
    font-size: var(--wp--preset--font-size--lg);
  }
}

/* Desktop */
@media only screen and (min-width: 1680px){
}



/*
*  Small Tablet & Up
* Class prefix md:
*/
@media only screen and (min-width: 768px){
  .md\:has-nm-font-size{
    font-size: var(--wp--preset--font-size--nm) !important;
  }
  .md\:has-md-font-size{
    font-size: var(--wp--preset--font-size--md) !important;
  }
  .md\:has-lg-font-size{
    font-size: var(--wp--preset--font-size--lg) !important;
  }
  .md\:has-xl-font-size{
    font-size: var(--wp--preset--font-size--xl) !important;
  }
  .md\:has-2-xl-font-size{
    font-size: var(--wp--preset--font-size--2-xl) !important;
  }
  .md\:has-3-xl-font-size{
    font-size: var(--wp--preset--font-size--3-xl) !important;
  }
  .md\:has-4-xl-font-size{
    font-size: var(--wp--preset--font-size--4-xl) !important;
  }
}

/*
* Tablet & Up
* Class prefix lg:
*/
@media only screen and (min-width: 1024px){
  .lg\:has-nm-font-size{
    font-size: var(--wp--preset--font-size--nm) !important;
  }
  .lg\:has-md-font-size{
    font-size: var(--wp--preset--font-size--md) !important;
  }
  .lg\:has-lg-font-size{
    font-size: var(--wp--preset--font-size--lg) !important;
  }
  .lg\:has-xl-font-size{
    font-size: var(--wp--preset--font-size--xl) !important;
  }
  .lg\:has-2-xl-font-size{
    font-size: var(--wp--preset--font-size--2-xl) !important;
  }
  .lg\:has-3-xl-font-size{
    font-size: var(--wp--preset--font-size--3-xl) !important;
  }
  .lg\:has-4-xl-font-size{
    font-size: var(--wp--preset--font-size--4-xl) !important;
  }
}

/*
* Laptop & Up
* Class prefix xl:
*/
@media only screen and (min-width: 1280px){
  .xl\:has-nm-font-size{
    font-size: var(--wp--preset--font-size--nm) !important;
  }
  .xl\:has-md-font-size{
    font-size: var(--wp--preset--font-size--md) !important;
  }
  .xl\:has-lg-font-size{
    font-size: var(--wp--preset--font-size--lg) !important;
  }
  .xl\:has-xl-font-size{
    font-size: var(--wp--preset--font-size--xl) !important;
  }
  .xl\:has-2-xl-font-size{
    font-size: var(--wp--preset--font-size--2-xl) !important;
  }
  .xl\:has-3-xl-font-size{
    font-size: var(--wp--preset--font-size--3-xl) !important;
  }
  .xl\:has-4-xl-font-size{
    font-size: var(--wp--preset--font-size--4-xl) !important;
  }
}

/*
* Desktop & Up
* Class prefix 2xl:
*/
@media only screen and (min-width: 1440px){
  .xxl\:has-nm-font-size{
    font-size: var(--wp--preset--font-size--nm) !important;
  }
  .xxl\:has-md-font-size{
    font-size: var(--wp--preset--font-size--md) !important;
  }
  .xxl\:has-lg-font-size{
    font-size: var(--wp--preset--font-size--lg) !important;
  }
  .xxl\:has-xl-font-size{
    font-size: var(--wp--preset--font-size--xl) !important;
  }
  .xxl\:has-2-xl-font-size{
    font-size: var(--wp--preset--font-size--2-xl) !important;
  }
  .xxl\:has-3-xl-font-size{
    font-size: var(--wp--preset--font-size--3-xl) !important;
  }
  .xxl\:has-4-xl-font-size{
    font-size: var(--wp--preset--font-size--4-xl) !important;
  }
}



/* Generic components
--------------------------------------------- */


/* Image Container */
.image-container{
  position: relative;
  overflow: hidden;
  padding-bottom: 75%;
  display: block;
  width: 100%;
}
.image-container--square{
  padding-bottom: 100%;
}
.image-container--rectangle{
  padding-bottom: 50%;
}
.image-container img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.image-container.image-container--cover img{
  object-fit: cover;
}

/* END  Image Container */

/* Buttons */
.button {
  border:none;
  border-radius:5px;
  display:inline-block;
  line-height:1.4;
  margin-top:30px;
  padding:10px 40px;
  transition:opacity 0.5s;
}

.button--small{
  padding:10px 20px;
  position:relative;
}

.button:hover {
  opacity:0.6;
}

/* END Buttons */

/* Tags */
.tags{
  position: absolute;
  z-index: 2;
  top: 1rem;
  left: 1rem;
  display: flex;
}

.tags .tag{
  background: var(--wp--preset--color--dark);
  color: var(--wp--preset--color--light);
  border-radius: 5px;
  margin-right:10px;
  padding:10px 15px;
}

.tags .tag svg path{
  fill: var(--wp--preset--color--light);
}

.category-filter span{
  display: block;
  margin-bottom: 1rem;
  font-size: 1.4rem;
}

/* END Tags */

/* Select Boxes */
.select-wrapper{
  position: relative;
}

.select-wrapper select{
  padding:15px 20px;
  font-size:var(--wp--preset--font-size-nm);
  color: inherit;
  background-color: transparent;
  -webkit-appearance:none;
  -moz-appearance:none;
  border-radius:5px;
  cursor:pointer;
  width:100%;
  color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
}

.select-wrapper svg{
  position: absolute;
  top:50%;
  right: 2rem;
  transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
  -moz-transform:translateY(-50%);
  -o-transform:translateY(-50%);
  pointer-events: none;
  z-index: -1;
}

/* END Select Boxes */

/* Swiper pagination */
.swiper-pagination-bullets{
  margin-top:30px;
  text-align:center;
}

.swiper-pagination-bullets .swiper-pagination-bullet {
  height:1.5rem;
  width:1.5rem;
  background-color:var(--wp--preset--color--dark);
}

.swiper-pagination-bullets .swiper-pagination-bullet-active {
  background-color:var(--wp--preset--color--primary);
}

/* CTA Buttons */

.buttons-row{
  display: flex;
  justify-content: center;
}

.buttons-row .button{
  display:flex;
  align-items:center;
  color:var(--wp--preset--color--dark);
  border-radius:5px;
  font-size:1.8rem;
  font-weight:500;
  margin-top:2rem;
  padding:2rem;
  transition:opacity 0.5s;
}

.buttons-row a span{
  text-align: left;
  line-height:1.2;
  font-family: var(--font-title);
}

.button i {
  margin-right:20px;
  font-size: var(--wp--preset--font-size--lg);
}
.button span {
  text-align: center
}