/*
 * These styles are outputted both of the frontend and backend of the site
 * Please note any changes you do make may also make changes to the WP backend default styles.
 * Edit with caution
 */

/* Client color variables */
:root {
	--brand-1: #621244;
	--brand-2: #FFABBA;
	--brand-3: #FE5000;
	--brand-4: #0D5257;
	--brand-5: #A2ACAB;
	--brand-6: #FFB81C;
	--text-color: #000000;
	/* Add other brand colours as required. Note that if you add more than 4 you will need to update the colour picker in functions.php */
	
	--shadow: #efefef;
}

/*Buttons */

a.button { background: var(--brand-1);padding:1rem 3rem;color:#ffffff;display:inline-block; border-radius: .75rem; text-decoration: none; text-transform: uppercase; font-weight: bold;}
a.button:hover { background: #fff; color: #000000; }

a.button1 {background: var(--brand-4);padding:1rem 3rem;color:var(--brand-2);display:inline-block; border-radius: .75rem; text-decoration: none; text-transform: uppercase;font-weight: bold;}
a.button1:hover { background: #fff; color: var(--brand-2); }

a.button2 {background: var(--brand-2);padding:1rem 3rem;color:var(--brand-4);display:inline-block; border-radius: .75rem; text-decoration: none; text-transform: uppercase;font-weight: bold;}
a.button2:hover { background: var(--brand-4); color: var(--brand-2); }

/* Slider Arrows */
.slick-arrow{font-size: 0; border: 0; background-color: unset; width: 40px; height: 60px; background-image: url('/wp-content/themes/toast/assets/images/chevron-green-lshtm.svg'); background-position: center; background-size: contain; background-repeat: no-repeat; position: absolute; top: 50%; cursor: pointer; scale: 1; transition: all .2s;}
.slick-next{right: -5rem; transform: translateY(-50%) rotate(-90deg);}
.slick-prev{left: -5rem; transform: translateY(-50%) rotate(90deg);}
.slick-arrow:hover{scale: 1.1; transition: all .2s;}

/* WooCommerce Overides */
body .woocommerce-info::before { color: var(--brand-1); }
body .woocommerce-info { border-top-color: var(--brand-1); }
body .woocommerce-error, body .woocommerce-info, body .woocommerce-message { background-color: var(--brand-3); color: var(--brand-1); border-top: 3px solid var(--brand-2); }

/* 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; }
.site-banner p { margin: 0; }
.site-banner.fixed { position: fixed; width: 100%; }
.site-banner.fixed > header { margin-top: 10rem; }

/* Generic site header section */
.main-header { background: var(--brand-4); color: #fff !important; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; padding: 15rem 0;}
.main-header h1,
.main-header h2,
.main-header h3 { margin-bottom: 0; }
.main-header a { color: #fff; text-decoration: underline; }
.main-header a.button{text-decoration: none;}
.main-header a:hover { text-decoration: none; }
.main-header .container .col a.button:last-of-type { margin-left: 4rem; }
.header-overlay { position: absolute; z-index: 1; }

.main-header.has-image::before{content: ''; display: block; background: rgba(0,0,0,0.4); position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

/* Fix Gravity Forms wrapper in admin */
.gform-settings__wrapper { max-width: 80% !important; }
html .wrap.gforms_edit_form { font-size: 140%; }

/* WYSIWYG Formats */
p.alert-paragraph { display: flex; align-items: center; background: var(--brand-1); color: #fff; padding: 2rem; border-radius: 2rem; margin: 4rem 0; position: relative; }
p.alert-paragraph:before { content:""; display: block; background: transparent url('/wp-content/themes/toast/assets/images/warning.svg') center center no-repeat; background-size: contain; height: 4rem; width: 6rem; margin-right: 2rem; }
ul.boxed-list { background: var(--shadow); padding: 4rem 4rem 3.5rem 4rem; list-style: inside; }
section blockquote { padding: 0 0 0 2rem; border-left: 3rem solid var(--brand-1); margin: 0; }
section blockquote p { font-size: 2.75rem; line-height: 1.1; }
section blockquote p:last-of-type { margin-bottom: 0; }

/* Base table styles */
section[class*="block-"] table { width: 100%; border-collapse: collapse; table-layout: auto; }
section[class*="block-"] th, section[class*="block-"] td { text-align: left; padding: 8px; }
section[class*="block-"] th { background-color: #f2f2f2; color: #333; }
section[class*="block-"] tr:nth-child(even) { background-color: #f9f9f9; }
section[class*="block-"] tr:hover { background-color: #e8e8e8; }
section[class*="block-"] table, section[class*="block-"] th, section[class*="block-"] td { border: 1px solid #ddd; }
/* Responsive wrapper */
.wrap-table100 { overflow-x: auto; /* Enable horizontal scrolling */ }

@media screen and (max-width: 600px) {
  th, td {
    padding: 15px; /* Increase padding for smaller screens for better readability */
  }
}

/* ACF Admin Field overrides */
.block-editor .edit-post-sidebar .acf-fields > .acf-field.quarter { width: 20% !important; float: left !important; margin: 10px 5px 10px 16px !important; }
.block-editor .edit-post-sidebar .acf-fields > .acf-field.quarter.-c0 { clear: none !important; }
.block-editor .edit-post-sidebar .acf-fields > .acf-field.half { width: 20% !important; float: left !important; margin: 10px 5px 10px 16px !important; }
.block-editor .edit-post-sidebar .acf-fields > .acf-field.half.-c0 { clear: none !important; }

/*Add your global styles below*/
.gallery dl.gallery-item img { border: 0 !important; /* Remove this if you want borders on the images in WP Galleries */ }

/*------------- Remove if neccessary -------------**/


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


/*------------- Do not remove the styles below this line -------------*/
li#wp-admin-bar-wpengine_adminbar, li#wp-admin-bar-wpseo-menu { display: none; } 
body.wp-admin .wp-block { padding: 0 !important; margin: 2rem 0 !important;} /* Removes the 2x padding or margin on blocks in the editor */
.wp-block{max-width:none;}
.admin-toast-support a, .admin-toast-support:hover a{background:#e88b39 !important;color:#ffffff !important;}
.admin-css-file a, .admin-css-file:hover a{background:#0c4e56 !important;color:#ffffff !important;}
#wp-admin-bar-directory-size .ab-item, li#wp-admin-bar-directory-size:hover {background: #d63638 !important; color: #fff !important; }
#wp-admin-bar-directory-size .ab-item:after { content: " of 3000 MB"; font-weight: normal;}
.ab-item span.mbs { font-weight: bold; }
.acf-repeater .acf-row:nth-child(odd) .acf-row-handle.order { background: var(--brand-1); }
.acf-repeater .acf-row:nth-child(even) .acf-row-handle.order { background: var(--brand-2); }
.acf-repeater .acf-row-handle.order { color: #fff !important; text-shadow: none !important; }

@media(max-width: 1024px){
	.main-header{padding: 8rem 0;}
	#page.scrolled .main-header{padding: 8rem 0 8rem !important;}
	#page.scrolled .main-header.has-image{margin-top: 0 !important;}
}


/* Adjust scale factor for different breakpoints */
@media (min-width: 993px) { /* Sets the margins and padding to standard over this viewport size */
    :root { --scale-factor: 1; }
}
@media (max-width: 992px) { /* Reduces the margins for the smaller screen sizes */
    :root { --scale-factor: 0.8; }
}
@media (max-width: 768px) {
    :root { --scale-factor: 0.6; }
}
@media (max-width: 576px) {
	:root { --scale-factor: 0.4; }
	p { word-break: break-word; }
	/* Site Banner */
	.site-banner.fixed { position: relative; width: 100%; }
	.site-banner.fixed > header { margin-top: 0rem; }
	.site-banner p { font-size: 80%; }
}