/* ============================================================
   Accessible Table Editor — Frontend / Public Table Styles
   ============================================================ */

/* ── Scroll wrapper ────────────────────────────────────────── */
.wp-accessible-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	margin-bottom: 1.5em;
	/* Visual cue: faint right-edge shadow when content overflows */
	background:
		linear-gradient(to right,  #fff 30%, rgba(255,255,255,0)) left  center / 30px 100% no-repeat,
		linear-gradient(to left,   #fff 30%, rgba(255,255,255,0)) right center / 30px 100% no-repeat,
		linear-gradient(to right,  rgba(0,0,0,.08), transparent)  left  center / 14px 100% no-repeat,
		linear-gradient(to left,   rgba(0,0,0,.08), transparent)  right center / 14px 100% no-repeat;
	background-attachment: local, local, scroll, scroll;
}

/* ── Base table styles ─────────────────────────────────────── */
.wp-accessible-table {
	border-collapse: collapse;
	width: 100%;
	font-size: 1em;
}

.wp-accessible-table caption {
	font-weight: 700;
	text-align: left;
	margin-bottom: 0.5em;
	caption-side: top;
}

.wp-accessible-table th,
.wp-accessible-table td {
	border: 1px solid #c3c4c7;
	padding: 0.55em 0.85em;
	text-align: left;
	vertical-align: top;
}

.wp-accessible-table thead th {
	background-color: #f0f0f1;
	font-weight: 700;
}

.wp-accessible-table tbody th {
	background-color: #f6f7f7;
	font-weight: 700;
}

/* Zebra striping */
.wp-accessible-table tbody tr:nth-child(even) td {
	background-color: #fafafa;
}

/* ============================================================
   Responsive card layout  (≤ 600px)

   Requires data-label attributes on <td> and body <th> cells.
   These are injected by table-frontend.js at page load.
   The table is "unstacked" back to normal above 600px via the
   media query boundaries — no JS needed for that.
   ============================================================ */
@media ( max-width: 600px ) {

	/* Allow wrapper to expand naturally in card mode */
	.wp-accessible-table-wrap {
		overflow-x: visible;
		background: none;   /* remove scroll-shadow — not needed in card mode */
	}

	/* Make everything block-level so rows become cards */
	.wp-accessible-table,
	.wp-accessible-table thead,
	.wp-accessible-table tbody,
	.wp-accessible-table tfoot,
	.wp-accessible-table tr,
	.wp-accessible-table th,
	.wp-accessible-table td {
		display: block;
	}

	/* Hide the header row visually but keep it for screen readers */
	.wp-accessible-table thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
		visibility: hidden;
	}

	/* Each table row becomes a card */
	.wp-accessible-table tbody tr {
		border: 1px solid #c3c4c7;
		border-radius: 4px;
		margin-bottom: 1em;
		padding: 0.25em 0;
		background: #fff;
	}

	/* Each cell: label on the left, value on the right */
	.wp-accessible-table td,
	.wp-accessible-table tbody th {
		border: none;
		border-bottom: 1px solid #ececed;
		/* Left half is for the label injected via ::before */
		padding: 0.6em 0.75em 0.6em 45%;
		position: relative;
		min-height: 2.2em;
		word-break: break-word;
		background: none !important;  /* override zebra striping in card mode */
	}

	.wp-accessible-table td:last-child,
	.wp-accessible-table tbody th:last-child {
		border-bottom: none;
	}

	/* Inject the column label before each cell value */
	.wp-accessible-table td::before,
	.wp-accessible-table tbody th::before {
		content: attr(data-label);
		position: absolute;
		left: 0.75em;
		top: 0.6em;
		width: 38%;
		font-weight: 700;
		font-size: 0.85em;
		color: #50575e;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}