/* Table
--------------------------------------------- */

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--base-2);
}


/* The main container for the table block */
.wp-block-table {
    margin: 2rem 0;  /* Adds vertical spacing above and below the table */
    border-collapse: collapse;  /* Ensures borders collapse into a single line, avoiding double borders */
    width: 100%;  /* Makes the table take up the full width of its container */
}

/* The <table> element inside the .wp-block-table */
.wp-block-table table {
    width: 100%;  /* Ensures the table spans the full width of the container */
    border: 1px solid var(--wp--preset--color--borderline);  /* Adds a border around the entire table */
    table-layout: fixed;  /* Fixes the column widths based on the table's width and column count, useful for responsive design */
}

/* Styling for table header cells (th) and table body cells (td) */
.wp-block-table th,
.wp-block-table td {
    padding: 12px;  /* Adds space inside each cell to make content easier to read */
    text-align: left;  /* Aligns the text to the left within each cell */
    border: 1px solid var(--wp--preset--color--borderline);  /* Adds a light grey border around each cell */
    word-wrap: break-word;  /* Ensures long words or URLs break to fit within the cell */
 
}

/* Additional styling for header cells (th) */
.wp-block-table th {
    background-color: var(--wp--preset--color--base-2);  /* Light background color to differentiate header cells */
    font-weight:600;

}

.wp-block-table table thead {
    border-bottom-width: 2px;
    border-color: var(--wp--preset--color--borderline);
}

/* Applies background color to alternate rows for better readability */
.wp-block-table tbody tr{
    background-color: var(--wp--preset--color--base);  /* Light grey background for odd-numbered rows */
}

/* Styling for the table footer (tfoot) */
.wp-block-table tfoot {
    background-color: var(--wp--preset--color--base-2);  /* Same background as header to visually separate footer */
    border-color: var(--wp--preset--color--borderline); 
    border-top-width: 2px;
    font-weight:600;
}

/* Styling for the table caption (figcaption) */
.wp-block-table figcaption {
    font-style: italic;  /* Makes the caption text italic */
    font-size: 0.875rem;  /* Slightly smaller font size than the table content */
    margin-top: 0.5rem;  /* Adds space between the table and its caption */
    color: var(--wp--preset--color--contrast-2);  /* Light grey text color for the caption */
    text-align: left;  /* Centers the caption text below the table */
}