/*
Block Name: Columns
Description: An extremely flexible block allowing simple and complex layouts. This block is used for images and static text purposes.
*/


body.wp-admin section { border: 1px solid #ccc; }
body.wp-admin section .container .grid:empty:before { color: red; font-weight: 600; content: "This is an empty *block* - add content"; padding: 2rem 0; display: block;}
body.wp-admin section .container .grid .col:empty:before { color: red; font-weight: 600; content: "This is an empty *column* - add content"; padding: 2rem 0; display: block;}

.block-columns .container{max-width:1340px;}
.block-columns .grid{grid-gap:80px;}
.block-columns .sticky-content .col-content{position:sticky;top:50px;}

.block-columns.boxed .grid{grid-gap:0rem !important;grid-template-columns: 3fr 1.5fr !important;box-shadow: 0 0 10px rgba(0,0,0,0.2);align-items:center;}
.block-columns.boxed .grid .col.text{padding: 4rem;}
.block-columns.boxed .grid .col.image{position: relative;}

.block-columns.three-quarters .container{max-width:1440px}
.block-columns.three-quarters .grid{grid-template-columns: 2fr 1fr !important;}
.block-columns.three-quarters .grid .col.three-images p{grid-gap:1rem;display: grid;grid-template-columns: 1fr 1fr 1fr !important;}

.block-columns.one-third .grid{grid-template-columns: 1fr 2fr !important;grid-gap:2rem}

.block-columns.full-width .container{max-width:1920px;padding:0}
.block-columns.full-width.large-pad .container{max-width:1920px;padding: 0 20rem}
.block-columns.full-width.small-pad .container{max-width:1920px;padding: 0 10rem}

.block-columns .col.floorscore .col-content{position: relative;padding-bottom: 4rem;}
.block-columns .col.floorscore .col-content::before{content: '';display: block;position: absolute;bottom:0rem;right: -3rem;z-index: 5;background: #f0f0f0;height: 100px;width: 100px;border-radius: 50%;padding: 3rem;}
.block-columns .col.floorscore .col-content::after{content: '';display: block;position: absolute;bottom:1.75rem;right: 0rem;z-index: 5;background-image: url('/wp-content/themes/toast/assets/images/floorscore.webp');height: 100px;width: 100px;background-size: contain;background-repeat: no-repeat;}

.block-columns .col.boxed{box-shadow: 0 0 10px rgba(0,0,0,0.2);padding: 8rem 6rem;margin-bottom: 2rem;background-color: #fff;}
.block-columns.form .grid{grid-gap:0rem;}
.block-columns.form .col.boxed{width: 115%;position: relative;z-index: 4;}
.block-columns.form .col.boxed .gform_wrapper{width: 90%;}
.block-columns.form .col:last-of-type{margin-top: 8rem;}
.block-columns.form .col:last-of-type img{position: relative;z-index: 5;}
.block-columns.form .col:last-of-type .col-content{position: relative;}
.block-columns.form .col:last-of-type .col-content::before{content:'';display: block;position: absolute;top: 100%;left: 55px;width: 90%;height: 90%;background-image: url(/wp-content/themes/toast/assets/images/bg-arrow.svg);z-index: -1;background-size: 300px;background-repeat: repeat-x;background-position: right;}

.block-columns .col.ignore-padding{margin-top: -5rem;}

.block-columns .col .box{display: flex;justify-content: space-between; padding: 3rem 2rem; box-shadow: 0 0 10px rgba(0,0,0,0.2);background-color: #fff;margin-right: 3rem;}
.block-columns .col .box > div{text-align: center;}

.block-columns.home-page-features .grid{grid-gap:30px;}
.block-columns.home-page-features h4 img{width:auto;height:16px;margin-right:1rem;}

/* Blue background with white text for thead */
th {
    background: #01a1d4;
    color: #ffffff;
    text-align: left;
}

/* Make all text in first column bold */
td:first-child {
    font-weight: bold;
}

/* Highlight flooring type row with orange left border */
tr:nth-child(1) td {
    background: linear-gradient(90deg, #fef7f0 0%, #ffffff 100%);
    font-weight: 500;
    border-left: 4px solid #d97923;
}

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 16px;
        }

        th, td {
            padding: 20px 30px;
            text-align: left;
            border-bottom: 1px solid #e8ecf0;
        }

        th {
            background: #01a1d4;
            color: #ffffff;
            font-weight: 600;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            width: 25%;
            text-align: left;
        }

        td {
            color: #392b2b;
            line-height: 1.6;
            font-weight: 400;
        }

        td:first-child {
            font-weight: bold;
        }

        tr:hover {
            background: #f7fafc;
            transform: scale(1.01);
            transition: all 0.3s ease;
        }

.pb4 {
    padding-bottom: 4rem;
}

p:has(+ .horizontal-products.grid) {
    margin-bottom: 4rem;
}

.col.outline {
    border: 4px solid #03a1d4;
    padding: 2rem;
}

section.block-columns.case-studies .horizontal-products.grid {
    grid-template-columns: 1fr !important;
}

section.block-columns.three-quarters .col-content a.button {
    margin-top: 2rem;
}

section.block-columns .col-content a.button {
    margin-top: 2rem;
}

@media(max-width:1024px){
    body .block-columns .grid{grid-template-columns:1fr !important;grid-gap:30px !important;}
    .block-columns.three-quarters .grid{grid-template-columns:1fr !important;}
    .block-columns.boxed .grid .col.image{position: relative;min-height: 300px;}
    .block-columns .col.floorscore .col-content::before{content: '';right: 15rem;}
    .block-columns .col.floorscore .col-content::after{content: '';right: 18rem;}
    .block-columns.form .col:last-of-type img{display: none;}
    .block-columns .col.boxed{margin-right: 2rem;}
}


@media(max-width:726px){
    .block-columns.form .col.boxed{max-width: 100%;}
    .block-columns.boxed .grid{grid-template-columns: 1fr !important;}
    .block-columns .col.floorscore .col-content::before{content: '';right: -3rem;}
    .block-columns .col.floorscore .col-content::after{content: '';right: 0rem;}
    .block-columns.full-width.large-pad .container{max-width:1920px;padding: 0 6rem}
    .block-columns.full-width.small-pad .container{max-width:1920px;padding: 0 4rem}   
    .block-columns .col.boxed{padding: 4rem 2rem;}
}

@media(max-width:550px){
    .block-columns .col.floorscore .col-content::before{content: '';width: 70px;height: 70px;}
    .block-columns .col.floorscore .col-content::after{content: '';width: 70px;height: 70px;}
    .block-columns.one-third .grid{grid-template-columns: 1fr !important;}
    .block-columns.full-width.large-pad .container{max-width:1920px;padding: 0 4rem}
    .block-columns.full-width.small-pad .container{max-width:1920px;padding: 0 2rem}
    .block-columns .col .box{margin-right: 0rem;}
}