/* =============================================================================
   Neo Money Transfer — Layout & Widths
   Overrides and new classes driven by CSS custom properties.
   The :root vars are set dynamically from theme_mods in wp_head.
   ============================================================================= */

/* ---------- DEFAULTS (overridden by inline wp_head output) ---------- */
:root {
	--neo-container-w: 1280px;
	--neo-hero-cols:   1fr 1fr;    /* left  right  on lg+ */
	--neo-hero-text-w: 560px;      /* hero left inner text max */
}

/* ---------- SITE-WIDE CONTAINER OVERRIDE ----------
   Redefines Tailwind's .max-w-7xl utility to track the CSS variable.
   Same specificity as the generated Tailwind rule; this stylesheet is
   enqueued AFTER tailwind-compiled.min.css so later-wins applies.
   Loading order is enforced via wp_enqueue_style dependency chain. */
.max-w-7xl {
	max-width: var(--neo-container-w, 80rem);
}

/* ---------- HERO GRID ----------
   Replaces the Tailwind `lg:grid-cols-2` class on the hero's inner grid.
   Mobile: single column (stacks text over globe).
   Desktop: split per --neo-hero-cols.

   CRITICAL: minmax(0, 1fr) instead of plain 1fr prevents grid cells from
   expanding beyond viewport when children have large min-content widths
   (e.g. the stats strip with 4 cells and uppercase labels). Without this,
   the grid blows out past 100vw and the hero's overflow-hidden clips
   everything on the right edge. */
.neo-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
	.neo-hero-grid {
		grid-template-columns: var(--neo-hero-cols, minmax(0,1fr) minmax(0,1fr));
	}
}

/* Defense-in-depth: explicit min-width:0 on direct children so flex/grid
   children can shrink below their min-content and wrap properly. */
.neo-hero-grid > * {
	min-width: 0;
}

/* ---------- HERO LEFT COLUMN PADDING ----------
   Replaces the Tailwind arbitrary class:
   `px-4 sm:px-8 lg:pl-[max(2rem,calc((100vw-1200px)/2+2rem))] lg:pr-16`
   We use 100cqi where available to stay in sync when hero is in a
   constrained layout, but fall back to 100vw. */
.neo-hero-left-pad {
	padding-left: 1rem;
	padding-right: 1rem;
}
@media (min-width: 640px) {
	.neo-hero-left-pad {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}
@media (min-width: 1024px) {
	.neo-hero-left-pad {
		/* Align content to container edge — matches the 1200px alignment
		   the theme had hardcoded, now tracking --neo-container-w. */
		padding-left: max(2rem, calc((100vw - var(--neo-container-w, 1280px)) / 2 + 2rem));
		padding-right: 4rem;
	}
}

/* ---------- HERO TEXT INNER WIDTH ----------
   Replaces Tailwind `max-w-[560px]` on the inner text block. */
.neo-hero-text-inner {
	max-width: var(--neo-hero-text-w, 560px);
	width: 100%;
}

/* ---------- GUARD: extreme-split responsiveness ----------
   When user picks an extreme split (e.g. 30/70), the narrower column
   might squeeze content badly. At below 1280px viewport the grid gently
   equalizes. This prevents layout breakage on laptops. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.neo-hero-grid {
		/* Squish extreme splits gently toward 50/50 on narrow laptops.
		   minmax(0,1fr) prevents content from blowing out its cell. */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* ---------- HERO STATS STRIP — responsive wrapping ----------
   The theme's original stats row uses `flex flex-1` on 4 cells, which
   forces a combined min-content width of ~600px (labels like
   "COOPERATIVES" and "PICKUP POINTS" with tracking-widest). On phones
   and narrow tablets this forces horizontal overflow that gets clipped
   by the hero's overflow-hidden. On screens < 640px we switch the row
   to a 2-column grid so all 4 stats stay visible and readable. */
@media (max-width: 639px) {
	.neo-hero-stats {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		row-gap: 1.5rem;
		column-gap: 1rem;
	}
	.neo-hero-stats > div {
		flex: 0 0 auto !important;
		padding: 0 !important;
	}
	/* Hide the tailwind after:: vertical divider pseudo on mobile */
	.neo-hero-stats > div::after {
		display: none !important;
	}
}

/* ---------- GLOBAL OVERFLOW SAFETY NET ----------
   Prevents any layout bug from introducing horizontal scroll on mobile.
   The hero already has overflow-hidden, but other sections might not —
   this catches anything that slips through. */
html, body {
	overflow-x: hidden;
}

/* ---------- HERO HEIGHT ON MOBILE/TABLET ----------
   The theme applies `min-h-screen` (100vh) to both the <section> and the
   inner grid. That makes sense on desktop where text-left and globe-right
   live side by side and should fill the viewport. But on mobile/tablet
   where they stack vertically, natural content often falls short of 100vh
   — especially on tall portrait-orientation viewports — so the grid
   stretches and leaves a large empty gap between the globe and the next
   section. Below the lg breakpoint we let the hero size to its content. */
@media (max-width: 1023px) {
	#hero,
	#hero > .neo-hero-grid {
		min-height: 0;
	}
}

/* ---------- HERO VERTICAL PADDING ON PHONES ----------
   The theme uses `py-28` (7rem = 112px top + 112px bottom) on the hero
   text column for mobile — generous on tablets, excessive on phones
   where every pixel of vertical space matters. Tighten it below 640px. */
@media (max-width: 639px) {
	.neo-hero-left-pad {
		padding-top: 2.5rem;
		padding-bottom: 1.5rem;
	}
}