/*
 * Auto Responsive Content Fixer — base stylesheet
 *
 * This file only contains SAFE, always-necessary rules for the utility
 * wrapper elements the plugin's JS creates (table scroll wrapper, fluid
 * media wrapper) plus a couple of universal, non-destructive protections.
 *
 * All rules that target theme-specific content containers (.entry-content,
 * custom selectors, exclude selectors, etc.) are generated dynamically in
 * PHP (see class-arcf-frontend.php) because they depend on the
 * administrator's settings and cannot be hard-coded here.
 */

/* Never let the plugin's own wrappers create page-level horizontal scroll. */
html.arcf-active body {
	overflow-x: hidden;
}

/* Table horizontal-scroll wrapper: created by JS around any <table> that
   would otherwise overflow its container. The table itself is left alone;
   only this wrapper scrolls, so nothing is hidden or clipped. */
.arcf-table-wrap {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.arcf-table-wrap > table {
	/* Let the table keep its natural width; the wrapper handles overflow. */
	max-width: none;
}

/* Fluid media wrapper: created by JS around <iframe>/<embed>/<object> tags
   (YouTube embeds, page-builder video embeds, etc.) that don't already
   provide their own responsive wrapper. Uses the classic intrinsic-ratio
   technique so aspect ratio is preserved without JS resize listeners. */
.arcf-fluid-media {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: 0;
	overflow: hidden;
}
.arcf-fluid-media > iframe,
.arcf-fluid-media > embed,
.arcf-fluid-media > object {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Debug mode: only ever enqueued for users who can manage_options (see
   class-arcf-frontend.php), never shown to ordinary site visitors. */
.arcf-debug-outline {
	outline: 2px dashed #d63638 !important;
	outline-offset: 2px;
}
.arcf-debug-badge {
	position: absolute;
	z-index: 999999;
	background: #d63638;
	color: #fff;
	font: 11px/1.4 -apple-system, sans-serif;
	padding: 2px 6px;
	border-radius: 3px;
	pointer-events: none;
	transform: translateY(-100%);
}