/* =============================================================================
   RESPONSIVE FIXES — global safety net + fluid overrides
   -----------------------------------------------------------------------------
   Loaded AFTER style.css (see inc/enqueue.php) so the cascade lets it override
   surgical points without rewriting the main stylesheet.

   Scope:
     1. Global safety net (overflow guards, intrinsic minimums, wrapping)
     2. Long-content guards (tables, pre, iframe, embed)
     3. Fluid gap/padding overrides (replace fixed 80px/56px gaps with clamp())
     4. 320px floor — nothing overflows even at iPhone SE width
     5. Touch-target minimums (WCAG 2.5.5 — 44×44 CSS px)
     6. Em-based media queries that mirror existing px breakpoints (zoom-safe)
     7. Form/input responsive defaults
     8. Image/embed aspect-ratio fallbacks
     9. Print styles

   Token reuse: leans on the existing CSS custom properties from style.css
   (--ink, --hairline, --pad, etc.) and theme.json presets. No new tokens
   introduced — matches the project's design-system convention.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. Global safety net
   -------------------------------------------------------------------------- */

/* Prevent horizontal overflow at any viewport. Lets vertical scroll work
   normally while clamping any rogue overflow source (wide images, long words,
   off-canvas drawers that haven't been retracted). */
html {
	overflow-x: clip;            /* better than `hidden` — doesn't establish
	                                a scroll container, so position:sticky still works */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
body {
	overflow-x: clip;
	min-width: 320px;            /* smallest sane viewport */
	overflow-wrap: break-word;   /* long words/URLs wrap instead of overflowing */
	word-break: normal;
	hyphens: manual;
}

/* Half-pixel body font causes sub-pixel blurring at 1.5×/2× DPI. Round to 16. */
body { font-size: 16px; }

/* Grid/flex children default to `min-content` width which means a long string
   can blow the layout. Reset `min-width` so grid/flex children clamp to their
   container instead of their content. The single most important responsive fix. */
:where(.wp-block-group, .wp-block-columns, [class*="uk-"]) > * {
	min-width: 0;
}
:where([class*="grid"], [class*="__grid"], [class*="__cols"], [class*="__row"]) > * {
	min-width: 0;
	min-height: 0;
}

/* Headings and long inline labels: allow break on overflow rather than push out.
   `hyphens: manual` prevents the browser from inserting visible hyphens to break
   long words — long words wrap to the next line instead. `overflow-wrap` still
   lets unbreakable strings (URLs, slugs) wrap when there's no other option. */
:where(h1, h2, h3, h4, h5, h6) {
	overflow-wrap: break-word;
	hyphens: manual;
}

/* Container alias drift (style.css uses 1200px, theme.json wideSize is 1440).
   Keep the 1200px content width but make the gutter floor work at 320px. */
:root {
	--uk-pad-floor: 16px;        /* used at narrow viewports */
}


/* -----------------------------------------------------------------------------
   2. Long-content guards (tables / pre / iframe / embed / SVG)
   -------------------------------------------------------------------------- */

/* Tables in content areas overflow horizontally on narrow screens. Wrap the
   table in a horizontal-scroll container at the parent level. */
.entry-content table,
.uk-prose table,
[class*="uk-"] table:not(.uk-careers__table) {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-collapse: collapse;
}

/* Code blocks must scroll horizontally instead of overflowing. */
pre, code {
	max-width: 100%;
	overflow-wrap: normal;       /* don't break code mid-token */
	word-break: normal;
}
pre {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Iframes (YouTube, maps, Calendly, etc.) — fluid width, locked aspect. */
iframe, embed, object {
	max-width: 100%;
	border: 0;
}
.wp-block-embed__wrapper {
	position: relative;
}
.wp-block-embed__wrapper > iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
}

/* SVGs: never enforce intrinsic width over container. */
svg {
	max-width: 100%;
	height: auto;
}

/* Images: WP loads with width/height attrs; preserve aspect-ratio when scaling. */
img {
	height: auto;
	max-width: 100%;
}


/* -----------------------------------------------------------------------------
   3. Fluid gap & padding overrides
   -----------------------------------------------------------------------------
   The main stylesheet hard-codes large fixed gaps (gap: 80px, gap: 56px) that
   crush content at 360–768px widths. Replace with clamp() so they breathe.
   -------------------------------------------------------------------------- */

/* Section masthead grids — were 80px gap, now fluid 32→80px. */
.uk-glance__masthead,
.uk-h-disc__masthead,
.uk-h-receipts__masthead,
.uk-h-industries__masthead,
.uk-section__masthead,
.uk-c-life__masthead,
.uk-howit__masthead,
.uk-howit__statswrap,
.uk-s-engage__masthead,
.uk-s-deliver__masthead,
.uk-h-brief .uk-container {
	gap: clamp(2rem, 2vw + 1.5rem, 5rem);
}

/* Lead-CTA, hero grids — were 80px column gap, now fluid 28→80. */
.uk-lead-cta__grid,
.uk-h-hero__grid,
.uk-cs-hero__grid,
.uk-hero-s__grid,
.uk-hero__grid,
.uk-newsletter__inner,
.uk-i-newsletter__inner,
.uk-contact__grid,
.uk-h-contact__grid,
.uk-about__grid,
.uk-actmap__grid,
.uk-overview__grid,
.uk-h-engage__grid,
.uk-h-actigen__split,
.uk-cta-band--mid .uk-cta-band__inner,
.uk-stand__grid,
.uk-platform__grid,
.uk-leadership__grid,
.uk-careers__benefits,
.uk-i-listing__grid,
.uk-glance__grid,
.uk-howit__grid,
.uk-howit__flow,
.uk-c-deliver__phases,
.uk-s-deliver__phases,
.uk-loc__coverage,
.uk-pmod__features,
.uk-chal__grid,
.uk-uc__grid,
.uk-out__cols,
.uk-metrics__grid {
	gap: clamp(1.5rem, 1.5vw + 1rem, 3rem);
}

/* Footer grid — was 32px, fluid for breathing room at small. */
.uk-footer__cols {
	gap: clamp(1.5rem, 2vw, 2.5rem);
}

/* Section vertical padding (already fluid via theme.json --section,
   but enforce a 320px floor so nothing collapses to zero). */
section {
	padding-block: clamp(2.5rem, 6vw, 8rem);
}

/* Container side padding — ensure 16px minimum on tiny screens, even if
   --wp--preset--spacing--80 floor changes. */
.uk-container {
	padding-inline: max(var(--uk-pad-floor), var(--pad));
}


/* -----------------------------------------------------------------------------
   4. Auto-fit grid helpers — use these for new components.
   The existing site uses hand-broken breakpoints; these classes let new code
   skip media queries entirely.
   -------------------------------------------------------------------------- */

.uk-autogrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: clamp(1.5rem, 2vw, 2.5rem);
}
.uk-autogrid--sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.uk-autogrid--lg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }


/* -----------------------------------------------------------------------------
   5. Touch-target minimums (WCAG 2.5.5 / 2.5.8)
   -------------------------------------------------------------------------- */

/* Apply only on touch-primary devices to avoid bloating desktop UI. */
@media (hover: none) and (pointer: coarse) {
	a, button, [role="button"], input[type="submit"], input[type="button"],
	.wp-block-button__link {
		min-height: 44px;
	}

	/* Header nav links in stacked mobile drawer */
	.uk-header__nav a,
	.uk-header__nav-toggle {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	/* Footer link rows */
	.uk-footer a {
		display: inline-block;
		padding-block: 6px;
	}
}


/* -----------------------------------------------------------------------------
   6. Em-based responsive overrides
   -----------------------------------------------------------------------------
   The main stylesheet uses `max-width: NNNpx` queries, which fail at user-zoom
   per WCAG 1.4.4. Replicate the most important breakpoints in `em` so the
   layout shifts respond to text-zoom too. (Both fire; em ones override.)
   1em in @media = 16px regardless of root size.
   -------------------------------------------------------------------------- */

/* < 60em ≈ 960px — primary nav collapse */
@media (max-width: 60em) {
	.uk-header__nav {
		display: none;
	}
	.uk-header[data-open="true"] .uk-header__nav {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
		padding: 16px;
		background: var(--white);
		border-top: 1px solid var(--hairline);
		max-height: calc(100dvh - 64px);
		overflow-y: auto;
	}
	.uk-header__menu-btn { display: inline-flex; }
}

/* < 56em ≈ 900px — common 2-column → 1-column flip used 30+ times */
@media (max-width: 56em) {
	.uk-lead-cta__grid,
	.uk-actmap__grid,
	.uk-chal__grid,
	.uk-uc__grid,
	.uk-out__cols,
	.uk-howit__grid,
	.uk-cs-hero__grid,
	.uk-hero__grid,
	.uk-h-hero__grid,
	.uk-newsletter__inner,
	.uk-contact__grid,
	.uk-h-contact__grid,
	.uk-about__grid,
	.uk-stand__grid,
	.uk-h-engage__grid,
	.uk-h-actigen__split,
	.uk-glance__masthead,
	.uk-h-disc__masthead,
	.uk-h-receipts__masthead,
	.uk-h-industries__masthead,
	.uk-section__masthead,
	.uk-c-life__masthead,
	.uk-h-brief .uk-container,
	.uk-s-engage__masthead,
	.uk-s-deliver__masthead {
		grid-template-columns: 1fr;
	}
}

/* < 40em ≈ 640px — drop multi-column metric/glance grids to 2 columns */
@media (max-width: 40em) {
	.uk-glance__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.uk-metrics__grid,
	.uk-platform__grid,
	.uk-howit__flow,
	.uk-i-listing__grid,
	.uk-careers__benefits,
	.uk-leadership__grid,
	.uk-pmod__features,
	.uk-c-deliver__phases,
	.uk-s-deliver__phases {
		grid-template-columns: 1fr;
	}
}

/* < 30em ≈ 480px — extreme small phones (320–480px). Collapse remaining 2-col. */
@media (max-width: 30em) {
	.uk-glance__grid {
		grid-template-columns: 1fr;
	}
	/* Hero buttons stack and span full width for touch. */
	.uk-hero__cta,
	.uk-h-hero__cta,
	.uk-hero-s__cta {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.uk-hero__cta > *,
	.uk-h-hero__cta > *,
	.uk-hero-s__cta > * {
		width: 100%;
		justify-content: center;
	}
	/* Cluster pills/tags wrap at full edge */
	.uk-tags, .uk-chips, .uk-pills {
		flex-wrap: wrap;
	}
}


/* -----------------------------------------------------------------------------
   7. Form & input responsive defaults
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
select,
textarea {
	max-width: 100%;
	width: 100%;
	font-size: max(16px, 1rem);  /* prevents iOS zoom on focus */
}

/* Fluent Forms specific (used in the Contact page). */
.frm-fluent-form .ff-el-group,
.frm-fluent-form .ff-el-input--content {
	max-width: 100%;
}
.frm-fluent-form input,
.frm-fluent-form textarea,
.frm-fluent-form select {
	width: 100%;
	max-width: 100%;
	font-size: max(16px, 1rem);
}


/* -----------------------------------------------------------------------------
   8. Block editor outputs — keep WP core blocks responsive
   -------------------------------------------------------------------------- */

.wp-block-image img,
.wp-block-cover__image-background,
.wp-block-cover__video-background {
	max-width: 100%;
	height: auto;
}

/* Cover blocks at narrow widths can become absurdly tall (100vh of mostly text). */
.wp-block-cover {
	min-height: clamp(20rem, 60vh, 40rem);
}

/* Columns block: stack early on narrow screens. (WP defaults to 600px.) */
@media (max-width: 48em) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-direction: column;
	}
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
}

/* Galleries — auto-fit instead of fighting fixed columns at small widths. */
.wp-block-gallery.has-nested-images {
	gap: clamp(0.5rem, 1.5vw, 1rem) !important;
}
@media (max-width: 30em) {
	.wp-block-gallery.has-nested-images {
		display: grid !important;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
	}
	.wp-block-gallery.has-nested-images > figure {
		width: 100% !important;
	}
}


/* -----------------------------------------------------------------------------
   9. Sticky element safety
   -----------------------------------------------------------------------------
   Sticky sub-nav (Company page) eats screen real-estate on short viewports.
   -------------------------------------------------------------------------- */

@media (max-height: 36em) {
	.uk-subnav__inner,
	[class*="sticky"] {
		position: relative !important;
	}
}

/* Use dynamic viewport height for any 100vh layouts so mobile browser chrome
   doesn't cause sudden jumps. */
@supports (height: 100dvh) {
	[style*="100vh"], .is-100vh {
		min-height: 100dvh;
	}
}


/* -----------------------------------------------------------------------------
   10. Animation discipline (CWV / VSI)
   -----------------------------------------------------------------------------
   Cheap blanket: any inline styles or older blocks animating layout properties
   trigger CLS and tank INP. Promote known wrappers to GPU compositing.
   -------------------------------------------------------------------------- */

[data-uk-fade], [data-uk-rise], .uk-anim {
	will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
	[data-uk-fade], [data-uk-rise], .uk-anim {
		transform: none !important;
		opacity: 1 !important;
		transition: none !important;
		animation: none !important;
	}
}


/* -----------------------------------------------------------------------------
   11. Print styles
   -------------------------------------------------------------------------- */

@media print {
	.uk-header,
	.uk-footer,
	.uk-chat,
	[data-uk-chat],
	.uk-subnav,
	.uk-cta-band,
	nav, aside { display: none !important; }

	body { font-size: 11pt; color: #000; background: #fff; }
	a { color: #000; text-decoration: underline; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
	img, svg { max-width: 100% !important; page-break-inside: avoid; }
	h1, h2, h3 { page-break-after: avoid; }
	p, li { orphans: 3; widows: 3; }
}