/*
 * Content tables – the base styling for a table in editor copy, and the three
 * colour variants the editor's Formats dropdown applies (inc/wysiwyg.php +
 * js/base/wysiwyg-table-styles.js). The variant classes name colour ROLES
 * (css/base/theme.css), not colours, so a school is restyled in theme.css
 * alone; only the dropdown titles name the school's colours, and the build
 * renames those in inc/wysiwyg.php.
 *
 * js/utilities/responsive-tables.js wraps every table in editor copy in
 * Bootstrap's .table-responsive for the sideways scroll on phones.
 */

table {
	width: 100%;
	margin-bottom: 1em;
}
tbody, td, th {
	padding: 0.3125rem 0.625rem;
}
tbody, td, tfoot, th, thead, tr {
	border-width: 1px;
}

.table-strong,
.table-panel,
.table-accent {
	border-collapse: collapse;
	margin: 14px 0 40px;

	/*
	 * Header cells carry the accent – the whole visible difference between the
	 * three variants. TinyMCE's Table button builds every row out of <td>, so a
	 * table the client made by hand has no <th> at all and picking a colour
	 * changed nothing you could see. Where there is no header cell anywhere,
	 * the first row stands in for one.
	 */
	th,
	/*
	 * ...and only the table's own first row, not the opening row of every
	 * section: a plain `tr:first-child` also matched the first row inside
	 * <tbody>, so a table split into <thead> + <tbody> came out with two
	 * header rows. Use the thead when there is one, the first tbody otherwise.
	 */
	&:not(:has(th)) > thead:first-of-type > tr:first-child > td,
	&:not(:has(th)):not(:has(thead)) > tbody:first-of-type > tr:first-child > td {
		font: var(--text-h4);
		line-height: 28px;
		color: var(--table-accent-text, var(--landing-on-accent));
		background: var(--table-accent, var(--landing-panel-bg));
		border: 1px solid transparent;
		/* Extra on top: the 28px line-height leaves only 3px of half-leading
		   above the caps, against 7px in the 34px body rows, so equal padding
		   read as tight to the top edge. */
		padding: 24px 32px 20px;
		text-align: left;
	}

	td {
		font: var(--text-body);
		color: var(--landing-text);
		border: 1px solid var(--landing-text);
		padding: 17px 32px;
	}

	/* Rows are as tall as their longest cell; centring left the short cells
	   floating against wrapped neighbours, so every cell starts at the top. */
	th,
	td {
		vertical-align: top;
	}
}

/* The strong accent (Cathedral: red) */
.table-strong {
	--table-accent: var(--landing-accent-strong);
}

/* The panel colour behind the image bands (Cathedral: navy) */
.table-panel {
	--table-accent: var(--landing-panel-bg);
	--table-accent-text: var(--landing-panel-text);
}

/* The accent (Cathedral: gold) */
.table-accent {
	--table-accent: var(--landing-accent);
}

/* The floor that makes the wrapper's sideways scroll actually happen:
   width: 100% alone lets a phone screen crush the columns to a word per
   line – the table never outgrows the wrapper, so overflow-x has nothing
   to do. Floors scale with the column count; a 2-column table fits any
   screen unaided. */
.table-responsive > table {
	&:has(tr > :nth-child(3)) {
		min-width: 640px;
	}

	&:has(tr > :nth-child(5)) {
		min-width: 900px;
	}
}