/* =========================================================
   VacancyCall Mobile Fit & Engage - style.css
   Goal: nothing ever breaks or shifts sideways on any mobile
   device or iOS Safari, plus smooth engaging animations.
   ========================================================= */

/* 1) Stop ANY horizontal scroll / sideways shifting, site-wide */
html {
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%; /* stops iOS auto text zoom breaking layout */
}
body {
	overflow-x: hidden;
	max-width: 100vw;
	position: relative;
}

/* 2) Universal box-sizing so padding/border never adds hidden width */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* 3) Media always fits inside its container, never overflows */
img,
video,
iframe,
embed,
object,
svg {
	max-width: 100%;
	height: auto;
}

/* 4) Any element that ignores max-width still gets clamped */
.entry-content *,
.wp-block-post-content *,
.page-content *,
.site-content * {
	max-width: 100%;
}

/* 5) Long unbroken words/links/URLs won't push the page wide */
.entry-content,
.page-content,
.wp-block-post-content {
	word-break: break-word;
	overflow-wrap: break-word;
}

/* 6) Responsive tables: scroll INSIDE their own box, page stays fixed */
.vcmf-table-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.2em 0;
}
.vcmf-table-scroll table {
	width: 100%;
	border-collapse: collapse;
}

/* 7) Responsive embeds (YouTube, maps, forms) - true 16:9 ratio box */
.vcmf-iframe-wrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 */
	height: 0;
	overflow: hidden;
	margin: 1.2em 0;
	border-radius: 8px;
}
.vcmf-iframe-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* 8) Fluid, safe typography so text never overflows small screens */
.entry-content,
.page-content,
.wp-block-post-content {
	font-size: clamp(15px, 2.2vw, 18px);
	line-height: 1.7;
}
.entry-content h1,
.page-content h1 {
	font-size: clamp(22px, 5vw, 34px);
}
.entry-content h2,
.page-content h2 {
	font-size: clamp(20px, 4.2vw, 28px);
}
.entry-content h3,
.page-content h3 {
	font-size: clamp(18px, 3.6vw, 22px);
}

/* 9) Buttons/inputs never overflow their column on small screens */
input,
select,
textarea,
button,
.wp-block-button__link {
	max-width: 100%;
}

/* 10) iOS Safari safe-area support (notch phones) */
body {
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

/* =========================================================
   Engagement animation: gentle fade + rise on scroll
   ========================================================= */
.vcmf-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	will-change: opacity, transform;
}
.vcmf-reveal.vcmf-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Respect users who prefer less motion (accessibility + battery) */
@media (prefers-reduced-motion: reduce) {
	.vcmf-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Small screens: slightly smaller travel distance so it feels snappy, not slow */
@media (max-width: 600px) {
	.vcmf-reveal {
		transform: translateY(16px);
		transition: opacity 0.5s ease, transform 0.5s ease;
	}
}