/**
 * citAEOtion child — structural fixes.
 *
 * Kept OUT of custom.css on purpose: custom.css is rewritten by
 * citAEOtion Options -> Custom CSS, so anything parked there is lost the
 * next time that admin field is saved. This file is enqueued separately
 * from mu-plugins/cae-blog-fixes.php and is safe from that.
 *
 * 2026-09-21  (1) Restore .screen-reader-text.
 *             (2) Style unclassed content tables.
 */

/* --------------------------------------------------------------------------
 * 1. WordPress core accessibility utility.
 *
 * The theme rebuild dropped the .screen-reader-text class that WordPress core
 * assumes every theme provides. Core emits markup like
 * <h2 class="screen-reader-text">Posts pagination</h2> from
 * the_posts_pagination(), plus skip links, search form labels and comment form
 * labels. With no rule for the class, all of that rendered as visible body
 * text - the blog index was showing the literal words "Posts pagination"
 * above the page numbers.
 *
 * Visually hidden, still read by screen readers. Do NOT swap this for
 * display:none - that removes it from the accessibility tree, which is the
 * opposite of the intent.
 * -------------------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
	word-wrap: normal !important;
}

/* Skip links and anything else focusable must become visible on keyboard
   focus, otherwise a keyboard user tabs onto an invisible control. */
.screen-reader-text:focus {
	background-color: #0d1117;
	border-radius: 6px;
	box-shadow: 0 0 0 2px var(--orange, #fa903e);
	clip-path: none;
	color: #fbf6f1;
	display: block;
	font-size: 15px;
	font-weight: 600;
	height: auto;
	left: 16px;
	line-height: normal;
	padding: 14px 22px;
	text-decoration: none;
	top: 16px;
	width: auto;
	z-index: 100000;
}

/* --------------------------------------------------------------------------
 * 2. Unclassed content tables inside .cae.
 *
 * cae.css styles .cae table.feed only. A plain <table> written into page
 * content carries no class, matches nothing, and falls back to browser
 * defaults - unreadable on the dark skin. The aeo-tables block in custom.css
 * does not catch these either: it requires a .wp-block-table or
 * .aeo-table-wrap wrapper, and its dark-theme variables are commented out.
 *
 * :not(.feed) so the existing feed tables keep their own rules untouched.
 * Styling mirrors table.feed so content tables and feed tables match.
 * -------------------------------------------------------------------------- */

.cae table:not(.feed) {
	width: 100%;
	margin: 26px 0;
	border-collapse: collapse;
	font-size: 14.5px;
	color: var(--ink, #eef5fa);
	background: var(--panel, rgba(255, 255, 255, .035));
	border: 1px solid var(--line, rgba(255, 255, 255, .09));
	border-radius: var(--rad, 14px);
	overflow: hidden;
}

.cae table:not(.feed) th {
	text-align: left;
	padding: 13px 18px;
	color: var(--tealb, #37d6f0);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--line, rgba(255, 255, 255, .09));
	white-space: nowrap;
}

.cae table:not(.feed) td {
	padding: 12px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .05);
	vertical-align: top;
}

/* Numeric columns read far better right-aligned. Everything after the first
   cell in these content tables is a count or a percentage. */
.cae table:not(.feed) th + th,
.cae table:not(.feed) td + td {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.cae table:not(.feed) tbody tr:last-child td {
	border-bottom: none;
}

.cae table:not(.feed) tbody tr:hover td {
	background: rgba(255, 255, 255, .025);
}

/* Phones: let a wide table scroll instead of breaking the layout. */
@media (max-width: 720px) {
	.cae table:not(.feed) {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}

	.cae table:not(.feed) th,
	.cae table:not(.feed) td {
		padding: 11px 12px;
	}
}