/*
 * GymHubPH Child Theme — Custom CSS
 * Colour palette (matches the GymHubPH app UI):
 *   Primary dark  : #0f172a
 *   Surface        : #1e293b
 *   Accent (cyan)  : #06b6d4
 *   Accent dark    : #0891b2
 *   Light bg       : #f8fafc
 *   Muted text     : #94a3b8
 */

/* ─────────────────────────────────────────────────────────────
   CSS Variables
───────────────────────────────────────────────────────────── */
:root {
	--gymhub-primary:   #0f172a;
	--gymhub-surface:   #1e293b;
	--gymhub-accent:    #06b6d4;
	--gymhub-accent-dk: #0891b2;
	--gymhub-light:     #f8fafc;
	--gymhub-gray:      #94a3b8;
	--gymhub-border:    #e2e8f0;
	--gymhub-white:     #ffffff;
}

/* ─────────────────────────────────────────────────────────────
   Base Typography
───────────────────────────────────────────────────────────── */
body,
.elementor-widget-container {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--gymhub-primary);
}

/* ─────────────────────────────────────────────────────────────
   Canvas / Page
───────────────────────────────────────────────────────────── */
.elementor-template-canvas,
.e-page-template-canvas {
	padding: 0 !important;
	margin:  0 !important;
}

/* ─────────────────────────────────────────────────────────────
   Buttons
───────────────────────────────────────────────────────────── */
.elementor-widget-button .elementor-button {
	border-radius:  10px !important;
	font-weight:    700 !important;
	transition:     background .2s, opacity .2s !important;
}

.elementor-widget-button .elementor-button:hover {
	opacity: .88;
}

.elementor-widget-icon-box .elementor-icon-box-title {
	font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────
   Scrollbar
───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }

/* ─────────────────────────────────────────────────────────────
   Global Responsive — Sections & Columns
───────────────────────────────────────────────────────────── */

/* Prevent horizontal scroll on all viewports */
.elementor-section-wrap,
.elementor-section,
.elementor-container {
	max-width: 100%;
	overflow-x: hidden;
}

/* Images always scale */
img { max-width: 100%; height: auto; }

/* ─────────────────────────────────────────────────────────────
   Tablet  (≤ 1024px)
───────────────────────────────────────────────────────────── */
@media ( max-width: 1024px ) {

	/* Elementor heading font sizes — scale down slightly */
	.elementor-widget-heading h1.elementor-heading-title { font-size: clamp(2rem, 5vw, 3.5rem) !important; }
	.elementor-widget-heading h2.elementor-heading-title { font-size: clamp(1.5rem, 4vw, 2.5rem) !important; }
	.elementor-widget-heading h3.elementor-heading-title { font-size: clamp(1.1rem, 3vw, 1.75rem) !important; }

	/* Hero mockup — slightly shrink */
	.elementor-element-gvcafd5 .elementor-widget-container {
		max-width: 480px;
		margin: 0 auto;
	}
}

/* ─────────────────────────────────────────────────────────────
   Mobile  (≤ 767px)
───────────────────────────────────────────────────────────── */
@media ( max-width: 767px ) {

	/* ── Default: stack ALL columns ── */
	.elementor-column {
		width: 100% !important;
	}

	/* ── Stats bar: 2 × 2 grid on mobile ── */
	.elementor-element-4b0fo94 .elementor-column {
		width: 50% !important;
	}

	/* ── Footer link columns: 2 × 2 ── */
	.elementor-element-gqlkepr,
	.elementor-element-lzeri6g {
		width: 50% !important;
	}

	/* ── Navbar: keep logo + hamburger on same line ── */
	.elementor-element-pzc4900 .elementor-container {
		flex-wrap: nowrap !important;
		align-items: center;
	}
	.elementor-element-wfws4b8 {
		width: auto !important;
		flex: 0 0 auto !important;
	}
	.elementor-element-2thgchu {
		width: auto !important;
		flex: 1 1 auto !important;
	}

	/* ── Hero section — text first, mockup second ── */
	.elementor-element-sy2f8nq .elementor-container {
		flex-direction: column !important;
	}
	.elementor-element-isn9zvr {
		order: 1 !important;
	}
	.elementor-element-gvcafd5 {
		order: 2 !important;
		max-width: 100% !important;
	}

	/* Hero mockup — cap height on small screens */
	.elementor-element-gvcafd5 .elementor-widget-container > div {
		overflow: hidden;
		max-height: 420px;
	}

	/* ── Feature sections: text above mockup ── */
	/* Feature 1 (6n5p1av): mockup left col → move below */
	.elementor-element-6n5p1av .elementor-container {
		flex-direction: column !important;
	}
	.elementor-element-37w3tyc { order: 2 !important; }
	.elementor-element-52y2tr6 { order: 1 !important; }

	/* Feature 2 (erk280l): text left, mockup right → text first */
	.elementor-element-erk280l .elementor-container {
		flex-direction: column !important;
	}
	.elementor-element-uzf32j8 { order: 1 !important; }
	.elementor-element-itqnoqn { order: 2 !important; }

	/* Feature mockups — limit height */
	.elementor-element-37w3tyc .elementor-widget-container > div,
	.elementor-element-itqnoqn .elementor-widget-container > div {
		overflow: hidden;
		max-height: 360px;
	}

	/* ── Typography scaling ── */
	.elementor-widget-heading h1.elementor-heading-title {
		font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
		line-height: 1.2 !important;
	}
	.elementor-widget-heading h2.elementor-heading-title {
		font-size: clamp(1.4rem, 6vw, 2rem) !important;
		line-height: 1.25 !important;
	}
	.elementor-widget-heading h3.elementor-heading-title {
		font-size: clamp(1.1rem, 5vw, 1.5rem) !important;
	}

	/* ── Text editor (body copy) ── */
	.elementor-widget-text-editor p {
		font-size: clamp(.85rem, 3.5vw, 1rem) !important;
	}

	/* ── Spacers — halve height on mobile ── */
	.elementor-widget-spacer .elementor-spacer-inner {
		height: 50% !important;
	}

	/* ── Section inner padding ── */
	.elementor-section .elementor-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* ── Stats bar items — centre & readable ── */
	.elementor-element-4b0fo94 .elementor-widget-container {
		padding: 14px 8px !important;
	}

	/* ── Pricing cards — full width, add breathing room ── */
	.elementor-element-8qecca1,
	.elementor-element-oqomzy9,
	.elementor-element-1hpcap5 {
		padding: 0 4px !important;
	}

	/* ── Testimonials — full width ── */
	.elementor-element-oxsyh1o .elementor-container {
		flex-direction: column !important;
	}

	/* ── Footer brand — full width, centre ── */
	.elementor-element-jr6rx3y .elementor-widget-container {
		text-align: left;
	}

	/* ── CTA section (fmg5kpn) — narrow col centred ── */
	.elementor-element-tg8tshc {
		width: 100% !important;
	}

	/* ── General: remove overflow on tall HTML mockups ── */
	.elementor-widget-html {
		overflow: hidden;
	}
}

/* ─────────────────────────────────────────────────────────────
   Small Mobile  (≤ 480px)
───────────────────────────────────────────────────────────── */
@media ( max-width: 480px ) {

	/* Stats — force 1 column on very small screens */
	.elementor-element-4b0fo94 .elementor-column {
		width: 50% !important;
	}

	/* Footer link columns — stack fully */
	.elementor-element-gqlkepr,
	.elementor-element-lzeri6g {
		width: 100% !important;
	}

	/* CTA buttons — full width */
	.elementor-element-fmg5kpn .elementor-widget-html a,
	.elementor-element-sy2f8nq .elementor-widget-html a {
		display: block !important;
		text-align: center !important;
		width: 100% !important;
		box-sizing: border-box !important;
		white-space: normal !important;
	}

	/* Reduce section side padding further */
	.elementor-section {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}