/* Table Block – Frontend Styles
 * The parent theme's .table class handles all table styling.
 * This file only handles the block wrapper spacing. */

.wp-block-cwd-table {
	margin-bottom: 3em;
}

/* The table's own margin-bottom is redundant since the wrapper handles it */
.wp-block-cwd-table > .table {
	margin-bottom: 0;
}

/* Horizontal scrolling for wide tables.
 *
 * render.php only adds a .mobile-scroll class, on the assumption that the
 * theme's js/cwd_utilities.js wraps the element in a .table-scroller div and
 * appends a fade indicator. cd-wp-base has no such file: there is no
 * cwd_utilities.js, nothing that wraps .mobile-scroll, and no .table-scroller
 * CSS anywhere in the theme. The class was applied and nothing acted on it, so
 * a wide table pushed the whole page sideways instead of scrolling itself.
 *
 * No JS is needed. render.php already emits a wrapper div through
 * get_block_wrapper_attributes(), so scrolling it is enough. :has() keeps this
 * limited to tables that actually asked for it via the Mobile scroll toggle. */
.wp-block-cwd-table:has(> .table.mobile-scroll) {
	overflow-x: auto;
	/* Stops the scroll container clipping focus rings on the row above. */
	padding-bottom: 2px;
}

/* A scrollable region must be reachable and announced for keyboard and screen
 * reader users, which WordPress handles by making the container focusable. */
.wp-block-cwd-table:has(> .table.mobile-scroll):focus-visible {
	outline: 2px solid #b31b1b;
	outline-offset: 2px;
}

/* The table must be allowed to exceed the container, or it will just squash. */
.wp-block-cwd-table:has(> .table.mobile-scroll) > .table {
	min-width: 100%;
	width: auto;
}