/* =========================================================
   VacancyCall Mobile & Speed Optimizer — layout-safety layer
   Goal: nothing on the page can force horizontal scroll or
   overflow its container on any phone/tablet width, ever.
   Loaded on every page, independent of the Premium UI plugin.
   ========================================================= */

html {
	-webkit-text-size-adjust: 100%; /* stop iOS auto-inflating text after rotation */
	text-size-adjust: 100%;
}

html, body {
	max-width: 100%;
	overflow-x: hidden;
}

*, *::before, *::after {
	box-sizing: border-box;
}

/* Nothing should ever be wider than its parent. Images, iframes,
   embeds, and videos are the most common offenders when a job
   listing image or embedded map has a hard-coded width. */
img, svg, video, iframe, embed, object, canvas {
	max-width: 100%;
	height: auto;
}

/* Long unbroken strings (long job titles, URLs pasted into content,
   email addresses) wrap instead of stretching the container. */
h1, h2, h3, h4, h5, h6, p, li, a, span, div, td, th {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ---------------------------------------------------------
   Tables — the #1 cause of sideways-scrolling mobile pages.
   The plugin's PHP wraps every <table> in this container, so
   only the table itself scrolls, not the whole page.
   --------------------------------------------------------- */
.vc-table-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.2em 0;
	border-radius: 8px;
}
.vc-table-scroll table {
	width: 100%;
	min-width: 480px; /* keeps columns readable instead of crushing them */
	border-collapse: collapse;
}
.vc-table-scroll th,
.vc-table-scroll td {
	white-space: nowrap;
	padding: 8px 12px;
}
.vc-table-scroll td:first-child,
.vc-table-scroll th:first-child {
	white-space: normal; /* first column (usually a label) can still wrap */
}

/* ---------------------------------------------------------
   Forms & tap targets
   --------------------------------------------------------- */

/* iOS Safari auto-zooms the page if a focused input's font is
   under 16px — this is the single most common "why does my form
   jump around on iPhone" bug on WordPress sites. */
input, select, textarea, button {
	font-size: 16px;
}

/* Apple & Google's own mobile-usability guidelines call for at
   least ~44x44px touch targets on anything tappable. */
a, button, input[type="submit"], input[type="button"], .wp-block-button__link {
	min-height: 44px;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Inline text links (inside a paragraph) shouldn't be stretched
   into 44px boxes — only stand-alone tappable elements should. */
p a, li a, .entry-content a {
	min-height: unset;
	min-width: unset;
	display: inline;
}

/* ---------------------------------------------------------
   Fluid typography — scales smoothly between phone and desktop
   instead of jumping at fixed breakpoints.
   --------------------------------------------------------- */
h1 { font-size: clamp(1.6rem, 4vw + 1rem, 2.6rem); }
h2 { font-size: clamp(1.3rem, 3vw + 1rem, 2rem); }
h3 { font-size: clamp(1.1rem, 2vw + 1rem, 1.5rem); }
body { font-size: clamp(0.95rem, 1vw + 0.85rem, 1.05rem); }

/* ---------------------------------------------------------
   iOS notch / home-indicator safe areas
   --------------------------------------------------------- */
body {
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

/* Any fixed-position element (back-to-top button, sticky bars)
   should never sit under the iPhone home-indicator gesture area. */
.vc-fixed-safe-bottom,
#vc-back-to-top {
	bottom: max(20px, env(safe-area-inset-bottom));
}

/* ---------------------------------------------------------
   Grid / flex containers used by most themes for job/post
   listings — force them to actually wrap on narrow screens
   instead of relying on a theme's own breakpoints.
   --------------------------------------------------------- */
@media (max-width: 480px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap;
	}
	.wp-block-column {
		flex-basis: 100% !important;
	}
}