/*
Theme Name: Toast
Description: Lightweight, tasty and totally awesome.
Author: The Toast Development Team
Date: July 2024
Version: 15.0.0
Theme URI: http://www.toastwebsites.co.uk
Author URI: http://www.toastdesign.co.uk
Text Domain: toast
*/

/**Saved Styles**/
*:last-child{margin-bottom:0; }
.site-logo img{width:100%;}

/* Base Styles */
html { font-size: 62.5%; }
body{font-size: 1.75rem;line-height: 1.6;font-family: Montserrat, Helvetica, Arial, sans-serif;font-weight: 400;color: var(--text-color);margin: 0;padding: 0 !important; }
#page{overflow:hidden;clear:both;}

/* Site Banner - from Theme options */
.site-banner { background-color: var(--brand-2); color: #fff; text-align: center; padding: 1rem 0; min-height: 3rem; z-index: 999; }

/* Header */
.site-header .grid{grid-template-columns:16rem 1fr;align-items:center;}

/* Navbar & Menus */
.top-nav {text-align: right;}
.top-nav ul { margin: 0 auto; padding: 0;}
.top-nav li { display: inline-block; margin: 0;padding:0; position: relative;}
.top-nav li a { display: inline-block; padding: calc( var(--base-type-spacing) / 1.5 ) 1rem;line-height: 1; color:var(--brand-3); font-weight: 600; }
.top-nav li:hover > a, .top-nav li.current-menu-item a { color:var(--brand-2); }

/* Submenus Dropdowns*/
.top-nav .sub-menu{ position: absolute;padding: 0;bottom:0;left: 0; background: var(--brand-2);text-align: left;z-index:5;opacity:0;pointer-events:none;transition:all .5s;transform:translatey(100%);width:200px;}
.top-nav .sub-menu .sub-menu{position: absolute;top:0;right:0;transform:translatex(100%);background: var(--brand-2); text-align: left; z-index:10; }
.top-nav .sub-menu li{ display: block; margin: 0; }
.top-nav .sub-menu li a{ padding: 1rem; display: block; margin: 0;color:#ffffff;}
.top-nav li:hover > .sub-menu{opacity: 1;pointer-events:all;}

/* Sort the hovers on the dropdowns 16/06/23 DF */
.top-nav li ul.sub-menu li a { background: var(--brand-2); color:#fff;}
.top-nav li ul.sub-menu li a:hover { background: var(--brand-1); color:#fff;}

/* Sorts any drop down on the last menu li so the dropdown is ranged to the left, keeping it inside the menu container */
.top-nav li:last-child .sub-menu {left: auto; right: 0;}

/* Typography*/

:root {
	--base-type-spacing: 6rem;  /* You only need to change this value to change ALL of the type margings */
	--base-heading-size: 9rem;
}

/* Headings */
h1, h2, h3, h4, h5, h6 { margin-top: 0; line-height: 1.2; color: var(--brand-1);}
.has-bg h1, .has-bg .h1 { color: #fff; }
h1, .h1{ font-size: calc( var(--base-heading-size) / 1.25 ); }
h2, .h2{ font-size: calc( var(--base-heading-size) / 1.85 ); }
h3, .h3{ font-size: calc( var(--base-heading-size) / 2.25 ); font-weight: 600; color: var(--brand-3);}
h4, .h4{ font-size: calc( var(--base-heading-size) / 3); font-weight: 600;}
h5, .h5{ font-size: calc( var(--base-heading-size) / 3.55 ); font-weight: 600;}
h6, .h6{ font-size: calc( var(--base-heading-size) / 4 ); font-weight: 600;}
.has-bg h1, .has-bg .h1 { color: #fff; }
.has-bg h2, .has-bg .h2 { color: #fff; }
.has-bg h3, .has-bg .h3 { color: #fff; }
.has-bg h4, .has-bg .h4 { color: #fff; }
.has-bg h5, .has-bg .h5 { color: #fff; }
.has-bg h6, .has-bg .h6 { color: #fff; }

/* Paragraphs*/
p { margin:0;margin-bottom: calc( var(--base-type-spacing) / 3 ); }

/* Fine-tune typography */
h1 + p, h1 + div { margin-top: calc( var(--base-type-spacing) / 2 ); }
h2 + p, h2 + div { margin-top: calc( var(--base-type-spacing) / 2 ); }
h3 + p, h3 + div { margin-top: calc( var(--base-type-spacing) / 5 ); }
h4 + p, h4 + div { margin-top: calc( var(--base-type-spacing) / 5 ); }
h5 + p, h5 + div { margin-top: calc( var(--base-type-spacing) / 3.5 ); }
h6 + p, h6 + div { margin-top: calc( var(--base-type-spacing) / 4 ); }
p + ul, p + ol { margin-top: calc( var(--base-type-spacing) / 2 ); }
ul + p, ol + p { margin-top: calc( var(--base-type-spacing) / 1.75 ); }
h1 + table, h2 + table, h3 + table, h4 + table, h5 + table, h6 + table { margin-top: calc( var(--base-type-spacing) / 2 ); }
table + p { margin-top: calc( var(--base-type-spacing) / 1.75 ); }
h1 + ul, h2 + ul, h3 + ul, h4 + ul, h5 + ul, h6 + ul { margin-top: calc( var(--base-type-spacing) / 2 ); }
h1 + ol, h2 + ol, h3 + ol, h4 + ol, h5 + ol, h6 + ol { margin-top: calc( var(--base-type-spacing) / 2 ); }
ul + h1, ul + h2, ul + h3, ul + h4, ul + h5, ul + h6 { margin-top: calc( var(--base-type-spacing) / 1.75 ); }
ol + h1, ol + h2, ol + h3, ol + h4, ol + h5, ol + h6 { margin-top: calc( var(--base-type-spacing) / 1.75 ); }
a.button + h1, button + h1,
a.button + h2, button + h2,
a.button + h3, button + h3,
a.button + h4, button + h4,
a.button + h5, button + h5,
a.button + h6, button + h6 {
    margin-top: calc( var(--base-type-spacing) / 1.75 );
}

/* Tables */
table { width: 100%; border-collapse: collapse; margin-bottom: calc(var(--base-type-spacing) / 2); text-align: left; }
thead th { background-color: var(--brand-1); font-weight: bold; text-align: left; padding: 1rem; color: #fff; font-size: 120%; }
tbody tr:nth-child(even) { background-color: #fff; }
tbody tr:nth-child(odd) { background-color: var(--brand-8); }
tbody tr:hover { background: var(--brand-2); color: #fff; }
tbody td, tbody th { padding: 1rem; }
table { border: none; }
td { border: .15rem solid var(--brand-1);  }
th { border-width: .15rem .15rem .3rem .15rem; border-style: solid; border-color: var(--brand-1); }

@media screen and (max-width: 768px) {
  table {
   /* display: block;*/
    overflow-x: auto;
    width: 100%;
  }
}

/* Videos - uploaded mp4 files */

.wp-video {
    position: relative;
    width: 100% !important; /* Override inline width */
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.wp-video video,
.wp-video .mejs-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important; /* Override inline width */
    height: 100% !important; /* Maintain correct height */
}

.mejs-container {
    max-width: 100% !important; /* Ensure the player doesn't exceed its container */
}

/**Lists**/
ul { margin:0; padding-left: 2rem; list-style: disc outside; }
li { margin:0;margin-bottom: calc( var(--base-type-spacing) / 6 ); }

/*Buttons */
.button, a.button, a.button.primary { border-radius: .25rem; transition: all .5s ease-in; text-transform: uppercase; font-weight: 600; background: var(--brand-4);padding:1rem 8rem 1rem 2rem; overflow: hidden; color:#ffffff;display:inline-block; /*border-radius: var(--button-border-radius);*/ text-decoration: none; position: relative; }
a.button:after, a.button.primary:after { transition: all .5s ease-in; content: ""; height: 10rem; width: 10rem;  position: absolute; top: 50%; transform: translateY(-50%); right: -5rem; border-radius: 100%; background: var(--brand-1); display: block;  }
a.button:before, a.button.primary:before { 
content: "";
    background-image: url(/wp-content/themes/toast/assets/images/white-arrow.png);
    position: absolute;
    top: 50%;
    /* transform: translateY(-50%); */
    right: 1rem;
    /* height: 10rem; */
    /* width: 10rem; */
    display: block;
    z-index: 99999999;
    background-size: contain;
    top: 1rem;
    bottom: 1rem;
    width: 6rem;
    background-repeat: no-repeat;
    background-position: center right;
}

a.button:hover:after, a.button.primary:hover:after { transition: all .5s ease-in; transform: scale(2); opacity: 0; transition: all .5s ease-in; }

.button:hover, a.button:hover, a.button.primary:hover { background: var(--brand-2); }

/* Button options */
/*a.button.primary { background: var(--brand-1); color: #fff;  }
a.button.primary:hover { background: var(--brand-2);}
a.button.secondary { background: var(--brand-2); }
a.button.secondary:hover { background: var(--brand-3); }
a.button.tertiary { background: var(--brand-3); }
a.button.tertiary:hover { background: var(--brand-4); }*/

/*Links*/
a { text-decoration: none;color:inherit;}
p a { color: var(--brand-1);}
p a:hover { color: var(--brand-2);}
p a.button:hover{color: #fff;}

/**Generic Hero**/
.generic-hero{padding: 15rem 0; background:var(--brand-1); color:#fff; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover;}
.generic-hero::before{content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.4); z-index: -1;}
.generic-hero h1{color: #fff; font-size: 6rem;}
.generic-hero h3{color: #fff; font-weight: 300;}

/**Blog**/
.single #page{overflow: unset;}
.blog-grid{grid-template-columns:1fr 300px;}
.blog-grid .col.sidebar ul{list-style: none; padding: 0; margin-top: 1rem;}
.blog-grid .col.sidebar ul li{padding: 1rem 0; position: relative;}
.blog-grid .col.sidebar ul li::before{content: ''; width: 100%; height: 1px; background-color: var(--brand-3); position: absolute; bottom: 0; left: 0;}
.blog-grid .col.sidebar ul li:last-of-type::before{display: none;}
.blog-grid .col.sidebar .sticky-area > div{background-color: #efefefb0; margin-bottom: 2rem; padding: 2rem;}
.blog-grid .col.sidebar .sticky-area > div h5{font-size: 2rem;}
.blog-grid .col.sidebar .sticky-area .widget_text{background-color: #494455; color: #fff; padding: 2rem;}
.blog-grid .col.sidebar .sticky-area .widget_text h5{color: #fff; font-size: 3rem;}

.blog-grid .col.sidebar .sticky-area{position: sticky; top: 50px;}

.blog-grid .breadcrumbs{margin-bottom: 2rem;}
.blog-grid h2:first-of-type{color: var(--brand-3); margin-bottom: 3rem; font-size: 4rem;}

/**Case Study**/
.case-study-hero{background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; height: calc(100vh - 100px); display: flex; align-items: end;}
.case-study-hero .hero-content{position: relative; padding: 5rem 0; background-color: rgba(0,0,0,0.5); max-width: 66%;}
.case-study-hero .hero-content::before{content: ''; width: 20vw; right: 100%; background-color: rgba(0,0,0,0.5); height: 100%; position: absolute; top: 0;}

.case-study-hero h1, .case-study-hero h2, .case-study-hero h3{color: #fff;}
.case-study-hero h1{font-size: 4rem; font-weight: 500;}
.case-study-hero h2{font-size: 8rem;}

.single-project .blog-grid .col.sidebar .sticky-area .case-study-details{padding: 2rem; background-color: #3259cfbc;}
.single-project .case-study-details > div{padding-bottom: .5rem; color: #fff}
.single-project .case-study-details > div span{color: #fff; font-weight: 600; display: block;}

.single-project h3.subtitle{color: var(--brand-3); font-size: 4rem; margin-bottom: 5rem;}

.single-project .blog-grid{grid-template-columns: minmax(0, 1fr) minmax(0, 350px);}
.single-project .gallery .slick-list{margin: 0 -2rem;}
.single-project .gallery .gallery-item{margin: 0 2rem; max-height: 500px; display: flex; align-items: center; justify-content: center;}
.single-project .gallery .gallery-item img{height: 100%; width: 100%; object-fit: cover; object-position: center;}

.single-project .gallery .slick-dots{display: flex; justify-content: center; align-items: center; padding-left: 0; gap: 1rem; margin-top: 2rem;}
.single-project .gallery .slick-dots li{list-style-type: none; margin: 0; margin-bottom: 0; display: flex; justify-content: center; align-items: center;}
.single-project .gallery .slick-dots li button{list-style-type: none; width: 12px; height: 12px; background-color: #494455; border-radius: 100%; cursor: pointer;}
.single-project .gallery .slick-dots li button{border: 0; font-size: 0;}
.single-project .gallery .slick-dots li.slick-active button{background-color: var(--brand-1);}

@media(max-width: 768px) {
    .single-project .blog-grid{grid-template-columns: minmax(0, 1fr) !important;}
}

/*404*/
.search-404{padding: calc( var(--base-type-spacing) / 1.2 );background:var(--brand-2);color:#ffffff;max-width:768px;margin:0 auto;text-align:center;}

/*Footer*/
section.footer-contact-area { color: #fff; background: #000;   }
.footer-contacts { font-size: 3rem; display: grid; grid-template-columns: 1fr 120px;} 
.footer-contact-area .footer-contacts .col.contact{display: flex; align-items: center;}
.footer-contact-area .footer-contacts .col.contact > div{padding: 2rem;}
.footer-contact-area .footer-contacts .col.contact > div a{font-weight: 600;}
.footer-contact-area .footer-contacts .phone-number{border-right: 4px solid #fff;}
.footer-contact-area .footer-contacts .social-icons{margin-top: 0; display: flex; align-items: center; gap: 1rem; justify-content: end;}

.site-footer{color:#ffffff;}
.site-footer .footer-logo{margin-bottom: calc( var(--base-type-spacing) / 3 ); display:inline-block; max-width:20rem;}
.site-footer .footer-main{background: var(--brand-3);padding: calc( var(--base-type-spacing) / 1.2 ) 0;}
.site-footer .footer-main .grid{grid-template-columns:1fr 1fr 1fr;}

.site-footer .company-name{font-weight: 600;}
.site-footer .social-icons{margin-top:calc( var(--base-type-spacing) / 3 ); text-align: right;}

.site-footer .footer-main .footer-widget-title { font-size: 2.25rem; margin-bottom: calc( var(--base-type-spacing) / 3 ); font-weight: 600;}
.site-footer .footer-main ul { padding: 0; margin: 0; list-style: none; }
.site-footer .footer-main ul li { margin: 0; padding: 0; }

/* Sub footer */
.site-footer .footer-sub-wrapper {padding: calc( var(--base-type-spacing) / 3 ) 0; background: var(--brand-1);color: #fff;font-size:1.5rem;}
.site-footer .footer-sub-wrapper .grid{grid-template-columns:1fr 1fr;align-items:center;}
.site-footer .footer-sub-wrapper ul { text-align: right; }
.site-footer .footer-sub-wrapper ul li { display: inline-block;margin:0;padding:0;}
.site-footer .footer-sub-wrapper ul li a { display: inline-block; padding: 0 1rem; }

/**Social Icons**/
.social-icons a{width:3rem;height:3rem;background:var(--brand-1);display:inline-block;position:relative;border-radius:100rem;}
.social-icons a:hover { background:var(--brand-2); }
.social-icons a img{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%); width: 50%; max-width: 50%;}

/*Forms*/
input, textarea, select { width:100%;outline:none;font-family:inherit;border:1px solid var(--brand-2); padding: 1rem; }
input[type="submit"] {border:none;outline:none;cursor:pointer;background:var(--brand-3);width:auto;height:auto; font-size: inherit; color: #fff; }
input[type="submit"]:hover { background: var(--brand-3); }
input[type='checkbox'], input[type='radio'] { width: auto; height: auto; }

/* Search */
.search-form input.search-field { padding: 1rem; height: auto; font-family: inherit; font-size: 2rem; color: var(--brand-1); font-weight: 600; }
input.search-submit { padding: 1rem; display: block; width: 100%; margin-top: calc( var(--base-type-spacing) / 6 ); color: #fff; }
input.search-submit:hover { background-color: var(--brand-2); color: #fff !important; }
footer input.search-submit:hover { background-color: var(--brand-3); color: var(--brand-2); }
span.screen-reader-text { display: none; }

/* Author Box */
.author-box{background-color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);border-radius: 1rem;margin-top: calc( var(--base-type-spacing) / 3 ); padding: calc( var(--base-type-spacing) / 2 );}
.author-box.grid{grid-template-columns: 1fr 4fr; grid-gap:2rem;}
.author-box .author-image{display: flex; align-items: center; justify-content: center;}
.author-box .author-image img{border-radius: 100%;}
.author-box .author-text p{font-size:14px}
.author-box .author-socials-area{display: flex; justify-content: end;}
.author-box .author-socials-area .author-socials a{width:28px;height:28px;background:var(--brand-1);display:inline-block;padding: calc( var(--base-type-spacing) / 6 );position: relative;border-radius:100px;}
.author-box .author-socials-area .author-socials a img{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:17px;height:auto;}

/**Fix appearance of buttons iphone**/
input[type=text], input[type=button] { -webkit-appearance: none; -webkit-border-radius: 0; }

/* Popups */ 
.popup{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999;justify-content:center;align-items:center;display:none; transition: all 1s ease;}
.popup.active{display:flex;}
.popup .popup-bg{position:fixed;top:0;left:0;width:100%;height:100%; background: rgba(0,0,0,.75); backdrop-filter: blur(10px);z-index:-1;  transition: all 1s ease;}
.popup .popup-content{background:#ffffff;max-width:1024px;padding: calc( var(--base-type-spacing) / 1.7 );position:relative;width:100%; border-radius: 1rem; }
.popup .popup-content .popup-close{height: calc( var(--base-type-spacing) / 1.7 );width: calc( var(--base-type-spacing) / 1.7 );position: absolute;top:0;right:0;background:var(--brand-1);cursor: pointer; border-radius: 0 1rem 0 0;}
.popup.active { transition: all 1s ease; }
.popup-close:before, .popup-close:after{content:'';width: calc( var(--base-type-spacing) / 3 );height:.3rem;background-color:#ffffff;position: absolute;left:50%;}
.popup-close:before{top: 50%; transform: translate(-50%, -50%) rotate(45deg);}
.popup-close:after{bottom: 50%; transform: translate(-50%, 50%) rotate(-45deg);}

@media(max-width: 1400px) {
	.footer-contact-area .footer-contacts .col.contact > div{padding: 2rem 2rem 2rem 0; font-size: 2.25rem;}
	.footer-contact-area .footer-contacts .col.contact > div.email{padding: 2rem 0 2rem 2rem;}
}

@media screen and (max-width:999px ) {
	.site-header { display: none;}
}

@media(max-width: 768px) {
    .grid{grid-template-columns: 1fr !important;}

    .site-footer .footer-contacts{grid-template-columns: 1fr; text-align: center; padding: 2rem 0; font-size: 2rem;}
    .site-footer .footer-contact-area .footer-contacts .col.contact{display: block; text-align: center; margin-bottom: 2rem;}
    .site-footer .footer-contact-area .footer-contacts .col.contact > div{padding: 0;}
    .site-footer .footer-contact-area .footer-contacts .phone-number{border-right: 0; margin-bottom: 1rem;}
    .site-footer .footer-contact-area .footer-contacts .social-icons{justify-content: center;}

    .site-footer .footer-main, .site-footer .footer-sub-wrapper, .site-footer .footer-sub-wrapper ul{text-align: center;}

    .generic-hero h1{font-size: 4.75rem;}
}