/*
 * patterns/tables.css — "Tables"
 * Markup: wp-content/themes/fcs/patterns/tables.php
 * Root:   .fcs-tables
 *
 * A 940px column of titled data tables. Figma 7989:7257 (Preschool Tuition) and
 * 7989:7329 (Registration & Application Fees), both on Admissions › Tuition &
 * Fees. Every table is a core/table block, so this file restyles core's table
 * rather than defining one of its own.
 *
 * MOBILE IS DERIVED. There is no mobile design for this section. The choices:
 *
 *   - the column runs full width inside the 20px section gutter
 *     (layout/spacing.css), which the 940px cap already does below 940px
 *   - cell padding drops from 14/20 to 12/12, so a three-column table in a
 *     350px column keeps roughly 90px of text per cell instead of 76px
 *   - the text stays 16px — prices are the point, and they fit
 *   - a table too wide for the screen scrolls sideways inside its own frame
 *     (core gives the figure overflow-x: auto) rather than scrolling the page
 */

/* Section ------------------------------------------------------------- */

/*
 * Section padding is NOT declared here for Medium and Large — the editor owns
 * those from the sidebar's Dimensions panel. Mobile is pinned in
 * layout/spacing.css. See CLAUDE.md § "Section padding".
 */

/*
 * Figma: 24px between every stacked item — title, subtitle, table, note — in
 * both designs. theme.json heading margins and core's figure margin both beat a
 * bare child selector; the repeated class lifts this to (0,2,0) without
 * !important — the same fix as .fcs-features__step.
 */
.fcs-tables.fcs-tables > * {
	margin-block: 0;
}

.fcs-tables.fcs-tables > * + * {
	margin-block-start: 24px;
}

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

/*
 * The frame is on the figure, not the table: the figure is what scrolls, and
 * its radius plus core's overflow-x: auto clips the header row's square blue
 * corners without a second overflow rule.
 */
.fcs-tables .wp-block-table {
	border: 2px solid var( --wp--preset--color--stroke );
	border-radius: var( --wp--preset--border-radius--medium );
	background-color: var( --wp--preset--color--background );
}

/* Core draws a 3px rule under <thead> and above <tfoot>; the design has neither. */
.fcs-tables .wp-block-table thead,
.fcs-tables .wp-block-table tfoot {
	border: 0;
}

/*
 * Core also gives every cell a 1px border and 0.5em padding. The design has no
 * cell rules at all — rows are told apart by the stripe below.
 */
.fcs-tables .wp-block-table th,
.fcs-tables .wp-block-table td {
	padding: 12px;
	border: 0;
	font-size: var( --wp--preset--font-size--medium );
	line-height: 1.5;
	text-align: start;
	vertical-align: top;
	color: var( --wp--preset--color--foreground );
}

@media ( min-width: 768px ) {
	.fcs-tables .wp-block-table th,
	.fcs-tables .wp-block-table td {
		padding: 14px 20px;
	}
}

/* Figma "Header Row": link blue, white, bold. */
.fcs-tables .wp-block-table thead th {
	background-color: var( --wp--preset--color--link );
	color: var( --wp--preset--color--on-primary );
	font-weight: 700;
}

/*
 * Figma: the first body row is white and the stripe starts on the second. Always
 * on, so a row added from the toolbar lands in the pattern without a setting.
 */
.fcs-tables .wp-block-table tbody tr:nth-child( even ) {
	background-color: var( --wp--preset--color--stripe );
}

/* Note ---------------------------------------------------------------- */

/*
 * Figma "Typography/Small text": 14/20. The 14px is the paragraph's own
 * font-size preset, editable from its sidebar; only the line height is here.
 */
.fcs-tables .fcs-tables__note {
	line-height: 20px;
}