/*
 * 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: #114A5F;
	--brand-2: #546A7B;
	--brand-3: #87A330;
	--brand-4: #59C3C3;
	--brand-5: #37123C;
	--brand-6: #2D95BC;
	--brand-7: #ffffff;
	--brand-8: #ffffff;
	--text-color: #546A7B;
	/* 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;
}

.color-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 4rem; }
.color-box {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-shadow: 0 .25rem .25rem rgba(0, 0, 0, .2);
    padding: 2rem;
    box-sizing: border-box;
    box-shadow: 0 1rem 1rem rgba(0, 0, 0, .2);
	border-radius: 2rem;
	
}

/* Block Shapes */
section{position: relative;}
.block-shapes{position: absolute; z-index: 0; width: 100%; height: 100%;}
.block-shape{position: absolute; z-index: 1; aspect-ratio: 1; overflow: hidden;}
.block-shape.block-shape--right{right: 0%; transform: translate(57.5%, -50%) rotate(45deg); border-bottom-left-radius: 5rem;}
.block-shape.block-shape--left{left: 0%; transform: translate(-57.5%, -50%) rotate(45deg); border-top-right-radius: 5rem;}

.block-shape.block-shape--right img{position: absolute; height: 150%; width: 150%; transform: translate(-20%, -10%) rotate(-45deg);}
.block-shape.block-shape--left img{position: absolute; height: 150%; width: 150%; right: -50% ;transform: translate(-35%, -35%) rotate(-45deg);}

.block-shape:first-of-type{z-index: 0;}
.block-shape:nth-of-type(2){z-index: -1;}
.block-shape:nth-of-type(3){z-index: -2;}
.block-shape:nth-of-type(4){z-index: -3;}

.block-editor-page .block-shape{z-index: 0 !important;}

.block-shape.image{position: absolute; z-index: 1; aspect-ratio: 1; overflow: hidden;}
.block-shape.image.block-shape--right{transform: rotate(unset);}
.block-shape.image.block-shape--left{transform: rotate(unset);}

.block-shape.image.block-shape--right .shape{rotate: -45deg;}
.block-shape.image.block-shape--left .shape{rotate: 45deg;}

.indented{position: relative; padding: 0 3rem;}
.indented::before{position: absolute; top: 50%;left: 0; transform: translateY(-50%); content: ""; width: 2.5rem; height: 5rem; background-image: url(/wp-content/themes/toast/assets/images/icons/indent.svg); background-size: contain; background-position: left; background-repeat: no-repeat}

.brand-1 { background-color: var(--brand-1); }
.brand-2 { background-color: var(--brand-2); }
.brand-3 { background-color: var(--brand-3); }
.brand-4 { background-color: var(--brand-4); }
.brand-5 { background-color: var(--brand-5); }
.brand-6 { background-color: var(--brand-6); }
.brand-7 { background-color: var(--brand-7); }
.brand-8 { background-color: var(--brand-8); }
.brand-shadow { background-color: var(--shadow); }

/** Main Header **/
.main-header { position: relative; padding: 10rem 0; overflow: hidden; color: #fff; background-color: var(--brand-1);}
.main-header .container { position: relative; z-index: 2; }
.main-header svg{width: 70%; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; mix-blend-mode: multiply;}
.main-header .col{position: relative; padding-right: 45%;}
.main-header .button{position: absolute; bottom: -4rem; left: 0;}

@media(max-width: 1023px) {
	.block-shape{display: none !important;}
	.block-shape.mobile{display: block !important; width: 100vw !important;}
}

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

/* Page Classes */
.page-colour-1 h1, .page-colour-1 h2, .page-colour-1 h3, .page-colour-1 h4, .page-colour-1 h5, .page-colour-1 h6 { color: var(--brand-1); } .page-colour-1 .button, .page-colour-1 .gform_button_wrap .gform_button { background: var(--brand-1) !important; color: #fff; } .page-colour-1 .button:hover{ background-color: var(--brand-4) !important; }
.page-colour-2 h1, .page-colour-2 h2, .page-colour-2 h3, .page-colour-2 h4, .page-colour-2 h5, .page-colour-2 h6 { color: var(--brand-2); } .page-colour-2 .button, .page-colour-2 .gform_button_wrap .gform_button { background: var(--brand-2) !important; color: #fff; } .page-colour-2 .button:hover{ background-color: var(--brand-4) !important; }
.page-colour-3 h1, .page-colour-3 h2, .page-colour-3 h3, .page-colour-3 h4, .page-colour-3 h5, .page-colour-3 h6 { color: var(--brand-3); } .page-colour-3 .button, .page-colour-3 .gform_button_wrap .gform_button { background: var(--brand-3) !important; color: #fff; } .page-colour-3 .button:hover{ background-color: var(--brand-4) !important; }
.page-colour-4 h1, .page-colour-4 h2, .page-colour-4 h3, .page-colour-4 h4, .page-colour-4 h5, .page-colour-4 h6 { color: var(--brand-4); } .page-colour-4 .button, .page-colour-4 .gform_button_wrap .gform_button { background: var(--brand-4) !important; color: #fff; } .page-colour-4 .button:hover{ background-color: var(--brand-3) !important; }
.page-colour-5 h1, .page-colour-5 h2, .page-colour-5 h3, .page-colour-5 h4, .page-colour-5 h5, .page-colour-5 h6 { color: var(--brand-5); } .page-colour-5 .button, .page-colour-5 .gform_button_wrap .gform_button { background: var(--brand-5) !important; color: #fff; } .page-colour-5 .button:hover{ background-color: var(--brand-4) !important; }
.page-colour-6 h1, .page-colour-6 h2, .page-colour-6 h3, .page-colour-6 h4, .page-colour-6 h5, .page-colour-6 h6 { color: var(--brand-6); } .page-colour-6 .button, .page-colour-6 .gform_button_wrap .gform_button { background: var(--brand-6) !important; color: #fff; } .page-colour-6 .button:hover{ background-color: var(--brand-4) !important; }

/* 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 6rem; border-left: 3rem solid var(--brand-1); margin: 0; }
section blockquote p { font-size: 4rem; 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 */ }

/* Single Styling */
.main-header{z-index: 1;}
.contact-shape{left: 0%; transform: translate(-57.5%, -50%) rotate(45deg); border-top-right-radius: 5rem; position: fixed; z-index: 0; aspect-ratio: 1; overflow: hidden; background-color: var(--brand-1); width: 15%; top: 50%;}
.contact-shape .content{rotate: -45deg; position: relative; height: 100%; width: 100%;}
.contact-shape .content .button{top: 50%; right: 0rem; transform: translateY(-50%); position: absolute;}

.col.sidebar ul{list-style: none; padding: 0; margin: 0; }


/* Contact Form */
.block-contact-form, .contact-form {padding-top: 20rem;}

.block-contact-form .grid, .contact-form .grid{grid-template-columns: 1fr 1fr; overflow: visible;}
.block-contact-form .col.content, .contact-form .col.content{background: var(--brand-1);color:#fff;position: relative; width: 125%;height: fit-content;border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem;}
.block-contact-form .col.content svg, .contact-form .col.content svg{position: absolute;top: calc(0px - 106.55px); left: 0px;max-width: 100%;}
.block-contact-form .col.content .text, .contact-form .col.content .text{padding: 2rem 30% 2rem 5rem !important;position: relative;margin-top: -10%;}

.block-contact-form .col.content, .contact-form .col.content{z-index: 2;}
.block-contact-form .col.form, .contact-form .col.form{position: relative; z-index: 3;}
.block-contact-form .col.form textarea, .contact-form .col.form textarea{height: 300px;}

.block-contact-form .col.content a, .contact-form .col.content a{color: #fff;}

@media(min-width: 1800px){
    .block-contact-form .col.content svg, .contact-form .col.content svg{left: 1px;}
}

@media(max-width: 1024px){
    .block-contact-form .grid, .contact-form .grid{grid-template-columns: 1fr;}
    .block-contact-form .col.content, .contact-form .col.content{width: 100%;}
    .block-contact-form .col.content .text, .contact-form .col.content .text{padding: 2rem 2rem 2rem 4rem !important;position: relative;margin-top: -15%;}
}

@media(max-width: 768px){
    .block-contact-form, .contact-form {padding-top: calc(10rem * var(--scale-factor));}
    .block-contact-form .col.content, .contact-form .col.content{border-radius: 1.5rem;}
    .block-contact-form .col.content svg, .contact-form .col.content svg{display: none;}
    .block-contact-form .col.content .text, .contact-form .col.content .text{margin-top: 0;}
}

@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; }




/* 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%; }
}