/*
 * Custom styles for Advanced Custom Fields (ACF) elements on the frontend.
 * These styles aim to improve the layout and appearance of ACF fields,
 * especially within tables and for responsive behavior.
 */

/*
 * Adjusts text alignment for input fields that are appended with another element
 * within ACF tables on the frontend (not in the WordPress admin).
 */
body:not(.wp-admin) table.acf-table .acf-input-append + .acf-input-wrap input {
    text-align: left;
}

/*
 * Media query for screens wider than 900px.
 * Ensures 'true/false' ACF fields within tables are displayed as table cells,
 * centered, vertically aligned, and take full height, overriding default display.
 */
@media (min-width: 900px) {
    body:not(.wp-admin) * td.acf-field-true-false {
        display: table-cell !important;
        text-align: center !important;
        vertical-align: middle !important;
        height: 100% !important;
    }
}

/*
 * Media query for screens 900px wide or narrower (mobile/tablet view).
 * Hides table headers and adjusts label and field styling for better
 * readability and layout on smaller screens.
 */
@media (max-width: 900px) {
    /* Hide table headers on small screens for ACF tables. */
    body:not(.wp-admin) .acf-table thead {
        display: none !important;
    }

    /* Style ACF field labels for better visibility on small screens. */
    body:not(.wp-admin) .acf-table .acf-label {
        font-weight: bold;
        margin-bottom: 4px;
        font-size: 13px;
    }

    /* Ensure ACF fields align to the top when displayed on small screens. */
    body:not(.wp-admin) .acf-table .acf-field {
        vertical-align: top;
    }
}