/* MyGradewell — front-end polish beyond what Tailwind's utility classes
   cover: header scroll state, focus rings, reduced-motion handling, and
   the handful of custom keyframes (gradient blob drift, counters). */

:root {
	--mgw-header-h: 72px;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* ---------- Mobile viewport safety net (v1.2.1) ----------
   Nothing should ever be wider than the screen, but if a decorative
   layer or an animation offset pokes out, clip it instead of letting
   iOS Safari widen the page and add sideways scrolling. `clip` (unlike
   `hidden`) doesn't turn <body> into a scroll container, so
   window.scrollY, the sticky-header state and AOS keep working.
   Older Safari (<16) without `clip` support falls back to `hidden`. */
html,
body {
	overflow-x: clip;
	max-width: 100%;
}
@supports not (overflow: clip) {
	body {
		overflow-x: hidden;
		position: relative;
	}
}
/* Same guard per homepage section, so desktop/iPad fade-left/right
   animations can't widen the page before they play either. */
#main-content > section {
	overflow-x: clip;
}
@supports not (overflow: clip) {
	#main-content > section {
		overflow: hidden;
	}
}

/* Block themes add a 24px block gap between top-level template parts
   (header / main / footer). The marketing sections are designed to sit
   flush, so remove that gap — it showed as white strips on mobile. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Long words / URLs / emails wrap instead of pushing the layout wide. */
.wp-site-blocks h1,
.wp-site-blocks h2,
.wp-site-blocks h3,
.wp-site-blocks p,
.wp-site-blocks li {
	overflow-wrap: break-word;
}

/* ---------- Logged-in admin bar ----------
   The header is position:fixed at top:0, so when logged in it sat
   underneath the WP admin bar (46px tall on phones, 32px on desktop). */
.admin-bar #site-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar #site-header {
		top: 46px;
	}
}
@media screen and (max-width: 600px) {
	/* WP makes the admin bar scroll away below 600px — pin header to 0. */
	.admin-bar #site-header {
		top: 0;
	}
	.admin-bar #wpadminbar {
		position: absolute;
	}
	.admin-bar .wp-site-blocks {
		padding-top: 0;
	}
}

body {
	font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Header scroll state ---------- */
#site-header {
	background: transparent;
}
#site-header.is-scrolled {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 0 rgba(15, 23, 42, 0.06), 0 8px 24px -12px rgba(15, 23, 42, 0.12);
}

/* ---------- Focus visibility (accessibility) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid #6366f1;
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------- Gradient blob drift (hero background) ---------- */
@keyframes mgw-drift {
	0% { transform: translate(-50%, 0) scale(1); }
	50% { transform: translate(-48%, 12px) scale(1.03); }
	100% { transform: translate(-50%, 0) scale(1); }
}
[data-parallax] {
	animation: mgw-drift 16s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	[data-parallax] { animation: none; }
	html { scroll-behavior: auto; }
}

/* ---------- Form status message ---------- */
#mgw-form-status.is-success {
	display: block;
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
}
#mgw-form-status.is-error {
	display: block;
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

/* ---------- Submit button loading state ---------- */
#mgw-submit-btn[data-loading="true"] #mgw-submit-label {
	visibility: hidden;
}
#mgw-submit-btn[data-loading="true"] {
	position: relative;
}
#mgw-submit-btn[data-loading="true"]::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2.5px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	animation: mgw-spin 0.7s linear infinite;
}
@keyframes mgw-spin {
	to { transform: rotate(360deg); }
}

/* ---------- Comparison table (why-switch) — stacked cards on phones ---------- */
@media (max-width: 639px) {
	.mgw-compare,
	.mgw-compare tbody,
	.mgw-compare tr,
	.mgw-compare th,
	.mgw-compare td {
		display: block;
		width: 100%;
	}
	.mgw-compare thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.mgw-compare tr {
		margin-bottom: 0.75rem;
		border-radius: 0.75rem;
		background: #f8fafc;
		overflow: hidden;
	}
	.mgw-compare th[scope="row"],
	.mgw-compare td {
		border-radius: 0 !important;
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}
	.mgw-compare th[scope="row"] {
		padding-bottom: 0.25rem;
	}
	.mgw-compare td + td {
		border-top: 1px solid #e2e8f0;
	}
}

/* ---------- Mobile menu ---------- */
#mgw-mobile-menu.is-open {
	display: block;
}

/* ---------- AOS tuning ---------- */
[data-aos] {
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}