/*
Theme Name: ArileWP - Responsive fixes
Description: Safety-net rules that keep all pages (theme content + Elementor)
from overflowing or breaking layout on small screens. Loaded last so it wins.
*/

/* Stop the whole page from scrolling sideways on mobile.
   A single too-wide element makes the entire page look "not responsive"
   (zoomed out); clamping the width here prevents that. */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

/* Media always scales down to fit its container */
img,
svg,
video {
	max-width: 100%;
	height: auto;
}
iframe,
embed,
object {
	max-width: 100%;
}

/* Long words / URLs can't push the layout wider than the screen */
.entry-content,
.post-content,
.theme-builder,
.widget {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Wide tables scroll inside their own box instead of stretching the page */
.entry-content table {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Preformatted text wraps instead of overflowing */
pre {
	white-space: pre-wrap;
	word-wrap: break-word;
}

/* Extra small screens: make sure full-width rows never overflow */
@media (max-width: 767px) {
	.container,
	.container-full,
	.row {
		max-width: 100%;
	}
}