/**
 * Content overflow guard - keeps editor content inside the viewport on phones.
 *
 * Root cause this fixes: article bodies contain tables pasted from a document
 * with hardcoded pixel sizes (e.g. <table width="931" style="height:135px">).
 * The article column is ~312px on a 390px phone, so one such table stretched the
 * whole document to 970px. Because the site is RTL, the browser then anchored
 * the viewport at the right edge and the entire page rendered in a narrow strip
 * with a blank gutter beside it.
 *
 * Rule: wide content scrolls inside its own box; the page never scrolls sideways.
 * The wrapper below is added by damr_responsive_content_tables() in functions.php.
 */

/* ---------- Wide tables scroll inside their own container ---------- */
.table-scroll {
	margin: 0 0 1.75rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #e3e8ef;
	border-radius: 8px;
	background: #fff;
}

.table-scroll > table {
	width: 100%;
	/* Keeps columns readable on a phone; the container scrolls instead of the page. */
	min-width: 34rem;
	margin: 0;
	border-collapse: collapse;
	font-size: 16px;
}

.table-scroll th,
.table-scroll td {
	padding: 12px 14px;
	border: 1px solid #eef1f6;
	text-align: right;
	vertical-align: top;
	line-height: 1.8;
}

/* These tables carry their header as the first row of tbody, not a <thead>. */
.table-scroll thead th,
.table-scroll thead td,
.table-scroll tbody tr:first-child td {
	background: #f4f8fc;
	color: #1d4f78;
	font-weight: 700;
}

.table-scroll tbody tr:nth-child(even) td {
	background: #fafcfe;
}

.table-scroll tbody tr:first-child td {
	background: #f4f8fc;
}

/* ---------- Media and long strings stay inside the column ---------- */
.singlecontentbg img,
.pagecontentbg img {
	max-width: 100%;
	height: auto;
}

.singlecontentbg iframe,
.singlecontentbg video,
.singlecontentbg embed,
.pagecontentbg iframe,
.pagecontentbg video,
.pagecontentbg embed {
	max-width: 100%;
}

.singlecontentbg pre,
.pagecontentbg pre {
	overflow-x: auto;
}

.singlecontentbg,
.pagecontentbg {
	overflow-wrap: break-word;
}

/* ---------- Last-resort guard ----------
 * If an editor pastes something oversized tomorrow, the page still must not
 * scroll sideways. `clip` is preferred over `hidden` because it does not turn
 * the root into a scroll container; `hidden` is the fallback for old browsers.
 */
@media (max-width: 992px) {
	html {
		overflow-x: hidden;
		overflow-x: clip;
	}
}

@media (max-width: 767px) {
	.table-scroll > table {
		font-size: 15px;
	}

	.table-scroll th,
	.table-scroll td {
		padding: 10px 12px;
	}
}