/*
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**/
.site-logo img{width:100%;}

/* Base Styles */
html { font-size: 62.5%; }
body{background-color: #e7e7e7; font-size: 2rem; line-height: 1.6;font-family: "nassim-latin", sans-serif;font-weight: 400;color: var(--text-color);margin: 0;padding: 0 !important; margin-top: 100px;}
#page{overflow:hidden;clear:both;position: relative;}
#page::before{content:'';display: block;position: absolute;height: 205px; width: 205px;background-image: url('/wp-content/themes/toast/assets/images/moorish-tree-accent.svg');background-position: center;background-size: contain;background-repeat: no-repeat;z-index: -1;right: 0%; bottom: 0; opacity: .6;}

/* 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{height: 100px; z-index: 999; display: flex; align-items: center; position: fixed; width: 100%; top: 0; left: 0; background-color: #e7e7e7;}
.admin-bar .site-header{top: 32px;}
.site-header .grid{grid-template-columns:20rem 1fr; align-items:center;}

.site-header .col.nav{display: flex; justify-content: end; gap: 2rem; align-items: center;}
.site-header .col.nav .cart{display: flex; align-items: center; gap: 0.5rem}
.site-header .col.nav .cart .cart-icon{fill: #000;}
.site-header .col.nav .cart:hover .cart-icon{fill: var(--brand-2)}

.site-header .col.nav .shop.button:hover{text-decoration: none;}

.site-header a{color: #000;}
.site-header a:hover{color: var(--brand-2); text-decoration: underline;}

/* Hamburger */
.hamburger-icon{cursor: pointer; position: relative; width: 20px; height: 14px;}
.hamburger-icon > span { width: 20px; height: 3px; border-radius: 2px; background-color: #000; display: block; position: absolute; left: 0; }
.hamburger-icon > span:first-of-type { top: 0; transition: transform 0.2s, top 0.2s; }
.hamburger-icon > span:nth-of-type(2) { top: 6px; transition: opacity 0.2s; }
.hamburger-icon > span:last-of-type { top: 12px; transition: transform 0.2s, top 0.2s; }

.hamburger-icon:hover > span { background-color: var(--brand-2); }

.hamburger.menu-open .hamburger-icon > span{background-color: var(--brand-2);}
.hamburger.menu-open .hamburger-icon > span:first-of-type { transform: rotate(45deg); top: 6px; transition: transform 0.2s, top 0.2s; }
.hamburger.menu-open .hamburger-icon > span:nth-of-type(2) { opacity: 0; transition: opacity 0.2s; }
.hamburger.menu-open .hamburger-icon > span:last-of-type { transform: rotate(-45deg); top: 6px; transition: transform 0.2s, top 0.2s; }

.hamburger-menu{position: fixed; right: 0; top: 100px; transform: translateX(200%); transition: all .2s;}
.admin-bar .hamburger-menu{top: 132px;}
.hamburger.menu-open .hamburger-menu{transform: translateX(0); transition: all .2s;}

/* Hamburger Menu */
.hamburger-menu{width: 300px; padding: 5rem 5rem; background-color: rgba(0, 0, 0, 0.25); backdrop-filter: blur(8px); height: 100vh; overflow-y: auto; overflow-x: hidden; z-index: 999;}
.hamburger-menu .top-nav li a{color: #fff;}

/* Navbar & Menus */
.top-nav {text-align: left;}
.top-nav ul{display: grid; grid-template-columns: 1fr; list-style: none; padding-left: 0;}
.top-nav ul li{padding: 1rem 0; font-weight: bold;}

/* Typography*/
:root {--base-type-spacing: 6rem; --base-heading-size: 10rem;}

/* Headings */
h1, h2, h3, h4, h5, h6 { margin-top: 0; line-height: 1.2; margin:0; color: var(--brand-2); font-family: "cormorant-upright", sans-serif;}
.has-bg h1, .has-bg .h1 { color: #fff; }
h1, .h1{ font-size: calc( var(--base-heading-size) / 1.5 ); font-weight: 700;}
.block-hero h1 { margin-bottom: 2rem; }
h1.page-title { margin-top: 7rem; }
h2, .h2{ font-size: calc( var(--base-heading-size) / 2 ); color: var(--brand-1); font-weight: 400; }
h3, .h3{ font-size: calc( var(--base-heading-size) / 2.25 ); }
h4, .h4{ font-size: calc( var(--base-heading-size) / 3.5 ); }
h5, .h5{ font-size: calc( var(--base-heading-size) / 3.75 ); }
h6, .h6{ font-size: calc( var(--base-heading-size) / 4 ); }
.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) / 4 ); }

/* 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) / 2.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 );
}

/** WooCommerce **/
/* Add to cart */ 

.woocommerce div.quantity input.qty, 
.woocommerce button.single_add_to_cart_button {height: 50px; /* Set a consistent height */padding: 0 10px;box-sizing: border-box;}
.woocommerce div.quantity {display: inline-flex; /* Align the input and button horizontally */}
.woocommerce button.single_add_to_cart_button {
    margin-left: 10px; /* Add space between input and button */
}

.woocommerce div.quantity input.qty {width: 80px; /* Adjust width as needed */}
.woocommerce button.single_add_to_cart_button {font-size: 16px; /* Optional: Make text size consistent */line-height: 1; /* Ensures the text is centred within the button */}

/* 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 */
a.button {position: relative; border-radius: 4rem; background: var(--brand-1); padding: .5rem 2rem; color:#ffffff; display:inline-block; text-decoration: none;}
a.button:hover {background: var(--brand-2); color: #fff;}   

/* Button options */
a.button.primary { background: var(--brand-1); color: #fff; box-shadow: 0 0 0 0 var(--brand-2); transition: box-shadow 0.2s}
a.button.primary:hover { background: var(--brand-2); box-shadow: 4px 3px 0 0 var(--brand-3); transition: box-shadow 0.2s}
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);}
.has-bg a { color: #fff; text-decoration: underline; }
.has-bg a:hover { color: #fff; text-decoration: none; }

/**Generic Hero**/
.generic-hero{padding: calc( var(--base-type-spacing) / 2 ) 0;background:var(--brand-1);color:#ffffff;}

/**Blog**/
.blog-grid{grid-template-columns:1fr 350px;}

/*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*/
.site-footer .footer-main{ padding: calc( var(--base-type-spacing) / 1.2 ) 0;}
.site-footer .footer-main .grid{grid-template-columns: 1fr 1fr 1fr; grid-gap: 2rem;}
.site-footer .footer-main .grid .col.address{justify-items: start; border-right: 1px solid #d5d5d5;}
.site-footer .footer-main .grid .col.contact{justify-items: end; border-left: 1px solid #d5d5d5;}
.site-footer .footer-main .grid .col.logo{justify-self: center;}
.site-footer .footer-logo{margin-bottom: calc( var(--base-type-spacing) / 3 );display:inline-block;max-width:25rem; margin: 0rem 0 3rem; }

.site-footer .social-icons{margin-top:calc( var(--base-type-spacing) / 3 );}

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

/* Sub footer */
.site-footer .footer-sub-wrapper {padding: calc( var(--base-type-spacing) / 3 ) 0; color: var(--text-color); 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; color: var(--text-color); }
.site-footer .footer-sub-wrapper ul li a:hover { display: inline-block; padding: 0 1rem; color: var(--brand-2); }

/**Social Icons**/
.social-icons a{width:3rem;height:3rem;background:var(--brand-2);display:inline-block;position:relative;border-radius:100rem;}
.social-icons a:hover { background:var(--brand-1); }
.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-1);width:auto;height:auto; font-size: inherit; color: #fff; }
input[type="submit"]:hover { background: var(--brand-2); }
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: var(--border-radius);margin-top: calc( var(--base-type-spacing) / 3 );}
.author-box.grid{grid-template-columns: 20rem 1fr; grid-gap:0;}
.author-box .author-image img{object-fit:cover;height:100%;}
.author-box .author-text p{font-size:14px}
.author-box .author-text{padding: calc( var(--base-type-spacing) / 2 ) ;}
.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 screen and (max-width:999px ) {
	.site-header { display: none;}
    body{margin-top: 0;}
}

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

    .site-footer .footer-main .grid{grid-template-columns: 1fr !important; text-align: center;}
    .site-footer .footer-main .grid .col.address{border-bottom: 1px solid #d5d5d5; border-right: none; text-align: center; justify-items: center; padding-bottom: 2rem;}
    .site-footer .footer-main .grid .col.logo .footer-logo{margin-bottom: 0;}
    .site-footer .footer-main .grid .col.contact{border-top: 1px solid #d5d5d5; border-left: none; text-align: center; justify-items: center; padding-top: 2rem;}

    .site-footer .footer-sub-wrapper .grid{grid-template-columns: 1fr !important; text-align: center; grid-gap: 2rem;}
    .site-footer .footer-sub-wrapper ul{text-align: center; padding-left: 0;}
}