/*
 * Mobile UX polish — responsive tables, typography, touch targets.
 *
 * Loaded site-wide on the frontend. Small (~3KB), mobile-first.
 * Pairs with the existing main.css media queries; everything here
 * either adds new rules or tightens existing rules for small screens.
 */

/* ----------------------------------------------------------------- */
/*  Responsive tables                                                 */
/* ----------------------------------------------------------------- */
.rw-table-wrap {
	margin: 1.5rem 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--rw-radius);
}

.rw-table-wrap > table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.rw-table-wrap > table caption {
	caption-side: top;
	text-align: left;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: var(--rw-color-secondary);
}

.rw-table-wrap > table th,
.rw-table-wrap > table td {
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--rw-color-border);
	vertical-align: top;
}

.rw-table-wrap > table thead th {
	background: var(--rw-color-bg-soft);
	font-weight: 600;
	text-align: left;
}

.rw-table-wrap > table tbody tr:nth-child(even) td {
	background: rgba(15, 23, 42, 0.02);
}

/* Scroll-hint shadow so visitors notice the table extends sideways. */
@media (max-width: 700px) {
	.rw-table-wrap {
		background:
			linear-gradient(to right, var(--rw-color-bg), var(--rw-color-bg)) left center / 20px 100% no-repeat,
			linear-gradient(to right, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0)) left center / 20px 100% no-repeat,
			linear-gradient(to left,  var(--rw-color-bg), var(--rw-color-bg)) right center / 20px 100% no-repeat,
			linear-gradient(to left,  rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0)) right center / 20px 100% no-repeat;
		background-attachment: local, scroll, local, scroll;
	}
}

/* ----------------------------------------------------------------- */
/*  Responsive media                                                  */
/* ----------------------------------------------------------------- */
.rw-article__content iframe,
.rw-article__content embed,
.rw-article__content object {
	max-width: 100%;
	height: auto;
}

/* WordPress core wraps embeds in `.wp-block-embed__wrapper` with
 * `padding-top: aspect%`. Make sure non-block iframes still hold
 * their aspect ratio so we never push content with a late-loading
 * embed. */
.rw-article__content iframe[width][height] {
	aspect-ratio: attr(width) / attr(height);
}

/* ----------------------------------------------------------------- */
/*  Mobile typography polish                                          */
/* ----------------------------------------------------------------- */
@media (max-width: 600px) {
	body {
		font-size: 1.05rem;
		line-height: 1.7;
	}

	.rw-article__content {
		font-size: 1.05rem;
	}

	.rw-article__content p {
		margin-bottom: 1.1em;
	}

	.rw-article__content h2 {
		font-size: 1.35rem;
		margin-top: 1.75em;
	}

	.rw-article__content h3 {
		font-size: 1.15rem;
		margin-top: 1.5em;
	}

	.rw-article__content ul,
	.rw-article__content ol {
		padding-left: 1.25rem;
	}

	.rw-article__content li {
		margin-bottom: 0.4em;
	}
}

/* ----------------------------------------------------------------- */
/*  Touch target minimums                                             */
/*                                                                   */
/*  WCAG / mobile-UX guidance is ~44px square for interactive          */
/*  targets. The rules below bring the most-tapped controls up to a   */
/*  comfortable size without changing visual rhythm on desktop.       */
/* ----------------------------------------------------------------- */
@media (max-width: 700px) {
	.rw-menu-toggle,
	.rw-search-toggle {
		min-height: 44px;
		min-width: 44px;
	}

	.rw-button,
	button.rw-button,
	input[type="submit"] {
		min-height: 44px;
		padding-block: 0.7rem;
	}

	.rw-pagination .page-numbers,
	.navigation.pagination .page-numbers {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0.5rem 0.85rem;
	}

	/* Mobile drawer nav links — extra vertical padding for tap. */
	.rw-mobile-drawer a {
		min-height: 44px;
		padding: 0.85rem 0;
	}

	/* Footer + breadcrumb links — make adjacent links easier to hit. */
	.rw-breadcrumb a,
	.rw-site-footer__nav a,
	.rw-site-footer__policy a {
		padding-block: 0.25rem;
	}

	/* Pagination link spacing — keep them apart so misclicks are rare. */
	.rw-pagination .nav-links,
	.pagination .nav-links {
		gap: 0.5rem;
	}
}

/* ----------------------------------------------------------------- */
/*  Prevent horizontal scroll                                         */
/* ----------------------------------------------------------------- */
html, body { overflow-x: hidden; }

.rw-container, .rw-main, .rw-layout__primary {
	max-width: 100%;
}

img, video, iframe, embed, object {
	max-width: 100%;
}

/* ----------------------------------------------------------------- */
/*  Mobile-only visibility helpers                                    */
/* ----------------------------------------------------------------- */
.rw-show-mobile-only { display: none; }
.rw-hide-mobile-only { display: initial; }
@media (max-width: 700px) {
	.rw-show-mobile-only { display: initial; }
	.rw-hide-mobile-only { display: none; }
}