/**
 * EDGE — frontend content styles for ACF WYSIWYG output rendered via the
 * `mfb/meta-field-block` (custom-meta-block) plugin. Tables are the
 * primary case (curators add them in the Grading section), but the
 * styles apply to anything ACF's WYSIWYG can emit.
 *
 * Selector strategy: target ACF's `.is-acf-field.is-wysiwyg-field` wrapper
 * so we don't bleed styles into other tables (Block-editor table blocks
 * have their own .wp-block-table styling pipeline).
 *
 * Color tokens come from the active theme (yoko-aacrao-main) but each
 * rule provides a hard-coded fallback so this CSS isn't theme-dependent.
 *
 * @since 1.3.0
 */

.is-acf-field.is-wysiwyg-field {
	/* Safety net for unusually wide content (e.g. an unbreakable code
	 * string). Tables themselves shouldn't trigger this — they wrap to
	 * fit available width per the rules below. */
	overflow-x: auto;
}

.is-acf-field.is-wysiwyg-field table {
	width: 100%;
	max-width: 100%;
	table-layout: auto;
	border-collapse: collapse;
	margin: 1em 0;
	border: 1px solid var( --wp--preset--color--core-border, #d0d2d4 );
	font-size: 0.95em;
	line-height: 1.5;
}

.is-acf-field.is-wysiwyg-field table caption {
	caption-side: top;
	text-align: left;
	padding: 0 0 8px;
	font-weight: 600;
	color: var( --wp--preset--color--core-heading, #1a1a1a );
}

.is-acf-field.is-wysiwyg-field table th,
.is-acf-field.is-wysiwyg-field table td {
	padding: 10px 14px;
	border: 1px solid var( --wp--preset--color--core-border, #e2e4e7 );
	text-align: left;
	vertical-align: top;
	/* Wrap long words / URLs so a single cell can't push the column wider
	 * than its share of the available container width. */
	word-break: break-word;
	overflow-wrap: anywhere;
}

.is-acf-field.is-wysiwyg-field table thead th {
	background: var( --wp--preset--color--core-tint, #f5f6f7 );
	color: var( --wp--preset--color--core-heading, #1a1a1a );
	font-weight: 600;
	border-bottom: 2px solid var( --wp--preset--color--core-border, #c8cacd );
}

/* When a curator only emits <tr><th> rows without a thead — common in pasted tables. */
.is-acf-field.is-wysiwyg-field table tr:first-child th {
	background: var( --wp--preset--color--core-tint, #f5f6f7 );
	font-weight: 600;
	border-bottom: 2px solid var( --wp--preset--color--core-border, #c8cacd );
}

.is-acf-field.is-wysiwyg-field table tbody tr:nth-child( even ) {
	background: var( --wp--preset--color--core-tint, #fafbfc );
}

.is-acf-field.is-wysiwyg-field table tbody tr:hover {
	background: var( --wp--preset--color--core-tint, #f0f1f3 );
}

/* Slightly weight first-column labels (grade letters, ranges, etc.) but
 * let them wrap — a long label shouldn't blow up the column width. */
.is-acf-field.is-wysiwyg-field table tbody td:first-child {
	font-weight: 500;
}

@media ( max-width: 600px ) {
	.is-acf-field.is-wysiwyg-field table th,
	.is-acf-field.is-wysiwyg-field table td {
		padding: 8px 10px;
	}
}