/* 
 * Scoped table styles for [acha_table] shortcode only
 */

/**
 * remove default margin of the figure element
 */
figure.wp-block-table.is-style-regular{
    margin: 0;
}

/* desktop */
.acha-table-wrapper .wp-block-table.is-style-regular table {
    border-collapse: collapse;
}

.acha-table-wrapper .wp-block-table.is-style-regular thead th {
    font-family: Montserrat, sans-serif;
    color: #ffffff;
    line-height: 1.5;
    letter-spacing: 0.5px;
    font-size: 18px;
    margin: 5px;
}

.acha-table-wrapper .wp-block-table.is-style-regular tbody tr td {
    font-family: Montserrat, sans-serif;
    color: #444;
    line-height: 1.5;
    letter-spacing: 0.5px;
    font-size: 18px;
    margin: 5px;
}

.acha-table-wrapper figure table thead {
    font-family: Montserrat, sans-serif;
    background-color: var(--wbj-pink) !important;
    color: #ffffff;
    border-bottom: 3px solid var(--wbj-pink) !important;
}

.acha-table-wrapper .wp-block-table td, 
.acha-table-wrapper .wp-block-table th {
    border: 1px solid var(--wbj-pink);
    padding: .5em;
}


/* mobile layout */
@media (max-width: 600px) {

    .table-heading {
		display: none;
	}

    .acha-table-wrapper figure.wp-block-table.is-style-regular {
        margin: 0;
    }
    
    .acha-table-wrapper .wp-block-table.is-style-regular table {
        border-spacing: 0;
        border-collapse: collapse;
    }
    
    .acha-table-wrapper .wp-block-table.is-style-regular thead {
        display: none;
    }
    
    .acha-table-wrapper .wp-block-table.is-style-regular tbody tr {
        display: block;
        margin-bottom: 1.5em;
        border: 1px solid var(--wbj-pink);
        padding: 10px;
        /* background-color: var(--wbj-pink); */
    }

    .acha-table-wrapper .wp-block-table.is-style-regular tbody tr td {
        display: block;
        text-align: left;
        border: none;
        padding: 5px;
        margin-bottom: 8px;
        background-color: #ECFAE5;
    }

    .acha-table-wrapper .wp-block-table.is-style-regular tbody tr td::before {
        content: attr(data-label);
        display: block;
        font-weight: bold;
        background-color: var(--wbj-pink);
        color: #fff;
        padding: 6px 10px;
        border-radius: 3px 3px 0 0;
        margin-bottom: 5px;
    }

    .acha-table-wrapper .wp-block-table.is-style-regular tbody tr td:last-child {
        margin-bottom: 0;
    }
}