/* ============================================================
   CloudWork Performance Toolkit — Mobile Polish
   Global safety CSS for overflow, touch target, font, safe-area.
   ============================================================ */

/* --- Overflow safety ------------------------------------------------------ */
html,
body {
	overflow-x: hidden;
	max-width: 100vw;
}

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

.entry-content table,
.post-content table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* --- Touch target (Google Mobile-Friendly ≥44px) -------------------------- */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"] {
	/* min-height: 44px; */
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

nav a,
.menu a,
.footer a {
	/* min-height: 44px; */
	padding: 8px 12px;
}

/* --- Mobile font baseline ------------------------------------------------- */
@media (max-width: 768px) {
	html {
		font-size: 16px;
	}
	body {
		-webkit-text-size-adjust: 100%;
	}
	input,
	select,
	textarea {
		font-size: 16px; /* prevents iOS zoom on focus */
		min-height: 48px;
	}
}

/* --- Heading clamp (fluid type) ------------------------------------------ */
h1 {
	font-size: clamp(28px, 6vw, 56px);
	line-height: 1.2;
}
h2 {
	font-size: clamp(24px, 5vw, 44px);
	line-height: 1.25;
}
h3 {
	font-size: clamp(20px, 4vw, 32px);
	line-height: 1.3;
}

/* --- iOS safe-area (notch / home indicator) ------------------------------ */
.footer-sticky,
.cloudgo-cta-social-sticky,
[data-cwpt-sticky-bottom] {
	padding-bottom: env(safe-area-inset-bottom);
}

/* --- Reduce motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Hero shape PNG clamp ------------------------------------------------- */
.hero-shape,
[class*="hero-shape"] {
	overflow: hidden;
	pointer-events: none;
	max-width: 100vw;
}

/* --- Swiper safety -------------------------------------------------------- */
.swiper,
.swiper-container {
	overflow: hidden;
	max-width: 100%;
}