/**
 * Fitohub front-end tweaks (loaded via mu-plugin).
 * Mobile header: constrain logo + keep header row on one line.
 * Homepage hero: extra top padding so title clears the fixed header.
 */

/*
 * Header typography: system font stack (standard UI look; overrides Elementor Signika).
 * Widget IDs match theme builder templates 1038 + 246.
 */
.elementor-1038 .elementor-element-2885cd46 .elementskit-navbar-nav > li > a,
.elementor-1038 .elementor-element-2885cd46 .elementskit-navbar-nav .elementskit-submenu-panel > li > a,
.elementor-1038 .elementor-element-2885cd46 button.elementskit-menu-hamburger,
.elementor-1038 .elementor-element-2885cd46 button.elementskit-menu-close,
.elementor-1038 .elementor-element-5a48de2b .elementor-button,
.elementor-1038 .elementor-element-5a48de2b .elementor-button-text,
.elementor-246 .elementor-element-f30f374 .elementskit-navbar-nav > li > a,
.elementor-246 .elementor-element-f30f374 .elementskit-navbar-nav .elementskit-submenu-panel > li > a,
.elementor-246 .elementor-element-f30f374 button.elementskit-menu-hamburger,
.elementor-246 .elementor-element-f30f374 button.elementskit-menu-close,
.elementor-246 .elementor-widget-button .elementor-button,
.elementor-246 .elementor-widget-button .elementor-button-text,
.elementor-1038.elementor-location-header .elementor-widget-heading .elementor-heading-title,
.elementor-1038.elementor-location-header .elementor-widget-text-editor,
.elementor-1038.elementor-location-header .elementor-widget-text-editor p,
.elementor-246.elementor-location-header .elementor-widget-heading .elementor-heading-title,
.elementor-246.elementor-location-header .elementor-widget-text-editor,
.elementor-246.elementor-location-header .elementor-widget-text-editor p {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Hero overlay: tint only — hide Elementor’s line-6.png vertical line texture */
.elementor-254 .elementor-element.elementor-element-9026231 > .elementor-background-overlay {
	background-image: none !important;
}

/* Post-hero grid section (83206e4): softer decorative grid on small screens */
@media (max-width: 767px) {
	.elementor-254 .elementor-element-83206e4::before {
		opacity: 0.4;
	}
}

/*
 * Pillars band (14a7c81): subtle “Ver más” — text-link style (matches static-site fh-pillar__more).
 */
.elementor-254 .elementor-element-14a7c81 .elementor-widget-button .elementor-button {
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--e-global-color-3467244, #4a5c7a) !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em;
	padding: 0.35rem 0 !important;
	border: none !important;
	gap: 0.35rem;
}

.elementor-254 .elementor-element-14a7c81 .elementor-widget-button .elementor-button:hover,
.elementor-254 .elementor-element-14a7c81 .elementor-widget-button .elementor-button:focus {
	color: var(--e-global-color-44ceba9, #8f5df4) !important;
}

.elementor-254 .elementor-element-14a7c81 .elementor-widget-button .elementor-button .elementor-button-icon {
	font-size: 0.85em;
}

/*
 * Pillar grid (4d76dea): when cards sit side-by-side (tablet/desktop), equal row height.
 * Elementor “align items: center” on the grid prevents stretch — override so columns share height.
 */
@media (min-width: 768px) {
	.elementor-254 .elementor-element-4d76dea.e-grid,
	.elementor-254 .elementor-element-4d76dea > .e-con-inner {
		align-items: stretch !important;
	}

	.elementor-254 .elementor-element-4d76dea > .e-con-inner {
		align-content: stretch !important;
		justify-items: stretch !important;
	}

	.elementor-254 .elementor-element-4d76dea .elementor-element-1b700ad,
	.elementor-254 .elementor-element-4d76dea .elementor-element-06c93f0,
	.elementor-254 .elementor-element-4d76dea .elementor-element-e4f565c,
	.elementor-254 .elementor-element-4d76dea .elementor-element-f84b697 {
		height: 100% !important;
		min-height: 0 !important;
		align-self: stretch !important;
		display: flex !important;
		flex-direction: column !important;
	}

	.elementor-254 .elementor-element-4d76dea .elementor-element-1b700ad > .e-con-inner,
	.elementor-254 .elementor-element-4d76dea .elementor-element-06c93f0 > .e-con-inner,
	.elementor-254 .elementor-element-4d76dea .elementor-element-e4f565c > .e-con-inner,
	.elementor-254 .elementor-element-4d76dea .elementor-element-f84b697 > .e-con-inner {
		flex: 1 1 auto !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		min-height: 0 !important;
		height: 100% !important;
	}

	.elementor-254 .elementor-element-4d76dea .elementor-element-1b700ad .elementor-widget-text-editor,
	.elementor-254 .elementor-element-4d76dea .elementor-element-06c93f0 .elementor-widget-text-editor,
	.elementor-254 .elementor-element-4d76dea .elementor-element-e4f565c .elementor-widget-text-editor,
	.elementor-254 .elementor-element-4d76dea .elementor-element-f84b697 .elementor-widget-text-editor {
		/*
		 * flex-grow off: otherwise the shortest copy (often pillar 1) leaves a tall empty band
		 * *inside* the text widget; margin-top:auto on the button already fills space above it.
		 */
		flex: 0 1 auto !important;
		min-height: 0 !important;
	}

	.elementor-254 .elementor-element-4d76dea .elementor-element-1b700ad .elementor-widget-button,
	.elementor-254 .elementor-element-4d76dea .elementor-element-06c93f0 .elementor-widget-button,
	.elementor-254 .elementor-element-4d76dea .elementor-element-e4f565c .elementor-widget-button,
	.elementor-254 .elementor-element-4d76dea .elementor-element-f84b697 .elementor-widget-button {
		margin-top: auto !important;
		flex-shrink: 0 !important;
	}
}

/*
 * Mobile pillar cards (413c59b): taller vertical rhythm, readable type, comfortable tap targets.
 * Cards were feeling “too wide / too short”; narrow column + stacked flex + stronger contrast.
 */
@media (max-width: 767px) {
	/*
	 * Side inset so cards never bleed edge-to-edge (26.5rem was still 100% on narrow phones).
	 */
	.elementor-254 .elementor-element-413c59b {
		padding-left: max(1.25rem, env(safe-area-inset-left, 0px)) !important;
		padding-right: max(1.25rem, env(safe-area-inset-right, 0px)) !important;
		box-sizing: border-box !important;
	}

	.elementor-254 .elementor-element-413c59b .elementor-element-6b76ac7,
	.elementor-254 .elementor-element-413c59b .elementor-element-ad6fb9d,
	.elementor-254 .elementor-element-413c59b .elementor-element-ab0b0cb,
	.elementor-254 .elementor-element-413c59b .elementor-element-25e3aac {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		/* Tighter foot: less empty space below “Ver más” (Elementor had ~28px bottom). */
		padding-top: 20px !important;
		padding-right: 18px !important;
		padding-bottom: 14px !important;
		padding-left: 18px !important;
		box-sizing: border-box !important;
	}

	.elementor-254 .elementor-element-413c59b .elementor-element-6b76ac7 .e-con-inner,
	.elementor-254 .elementor-element-413c59b .elementor-element-ad6fb9d .e-con-inner,
	.elementor-254 .elementor-element-413c59b .elementor-element-ab0b0cb .e-con-inner,
	.elementor-254 .elementor-element-413c59b .elementor-element-25e3aac .e-con-inner {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		row-gap: 0.65rem !important;
		min-height: 0;
		/* Variable card height: content + “Ver más” at end (no flex-fill). */
	}

	.elementor-254 .elementor-element-413c59b .elementor-widget-button {
		flex-shrink: 0 !important;
		margin-top: 0.15rem !important;
		margin-bottom: 0 !important;
	}

	.elementor-254 .elementor-element-413c59b .elementor-widget-icon-box .elementor-icon-box-wrapper {
		text-align: left !important;
	}

	.elementor-254 .elementor-element-413c59b .elementor-widget-icon-box.elementor-position-top .elementor-icon-box-icon {
		margin-bottom: 0.35rem !important;
	}

	.elementor-254 .elementor-element-413c59b .elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon {
		font-size: 2.5rem !important;
	}

	.elementor-254 .elementor-element-413c59b .elementor-widget-icon-box .elementor-icon-box-title {
		color: #0f172a !important;
		font-size: 1.1875rem !important;
		font-weight: 700 !important;
		line-height: 1.25 !important;
		letter-spacing: -0.01em;
	}

	.elementor-254 .elementor-element-413c59b .elementor-widget-icon-box .elementor-icon-box-description {
		margin-top: 0 !important;
		color: #334155 !important;
		font-size: 0.9375rem !important;
		line-height: 1.5 !important;
	}

	.elementor-254 .elementor-element-413c59b .elementor-widget-text-editor {
		flex: 0 1 auto !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.elementor-254 .elementor-element-413c59b .elementor-widget-text-editor p {
		color: #1e293b !important;
		font-size: 1.0625rem !important;
		line-height: 1.55 !important;
		letter-spacing: 0 !important;
		margin-bottom: 0;
	}

	.elementor-254 .elementor-element-413c59b .elementor-widget-button .elementor-button {
		display: inline-flex !important;
		align-items: center !important;
		font-size: 0.9375rem !important;
		font-weight: 600 !important;
		padding: 0 !important;
		min-height: 44px;
		align-self: flex-start;
		justify-content: flex-start;
		color: #1e3a5f !important;
		box-sizing: border-box !important;
	}

	.elementor-254 .elementor-element-413c59b .elementor-widget-button .elementor-button:hover,
	.elementor-254 .elementor-element-413c59b .elementor-widget-button .elementor-button:focus {
		color: var(--e-global-color-44ceba9, #7c3aed) !important;
	}
}

/*
 * Homepage hero (section 9026231): Elementor sets background-size:0 on the photo
 * layer at max-width:1024px. Restore the same image + overlay; use cover scaling and
 * a stable focal point so the crop works on narrow screens (desktop keeps Elementor’s auto).
 */
@media (max-width: 1024px) {
	.elementor-254 .elementor-element.elementor-element-9026231:not(.elementor-motion-effects-element-type-background),
	.elementor-254 .elementor-element.elementor-element-9026231 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
		background-color: #1e2334 !important;
		background-image: url("https://fitohub.com/wp-content/uploads/2026/04/beautiful-sports-couple-is-engaged-gym-scaled.jpg") !important;
		background-position: 50% 25% !important;
		background-repeat: no-repeat !important;
		background-size: cover !important;
	}

	.elementor-254 .elementor-element.elementor-element-9026231 > .elementor-background-overlay {
		background-color: var(--e-global-color-78349aa) !important;
		opacity: 0.86 !important;
	}
}

/* Phones: slightly higher anchor so portrait crops keep the subject area centered */
@media (max-width: 480px) {
	.elementor-254 .elementor-element.elementor-element-9026231:not(.elementor-motion-effects-element-type-background),
	.elementor-254 .elementor-element.elementor-element-9026231 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
		background-position: 50% 20% !important;
	}
}

/*
 * Tablet (768–1024px): ElementsKit uses the hamburger here too; same flex layout
 * as mobile so logo stays left and menu control stays flush right.
 */
@media (max-width: 1024px) and (min-width: 768px) {
	.elementor-1038 .elementor-element-66931d83 .elementor-container {
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		column-gap: 10px;
	}

	.elementor-1038 .elementor-element-552d681 {
		order: 1 !important;
		width: auto !important;
		max-width: 46% !important;
		flex: 0 1 auto !important;
	}

	.elementor-1038 .elementor-element-4b3d3818 {
		order: 2 !important;
		width: auto !important;
		max-width: none !important;
		flex: 0 0 auto !important;
	}

	.elementor-1038 .elementor-element-3e69c92 {
		order: 3 !important;
		flex: 0 0 auto !important;
		min-width: 0 !important;
		width: auto !important;
		margin-left: auto !important;
	}

	.elementor-1038 .elementor-element-3e69c92 > .elementor-element-populated {
		margin-left: auto !important;
	}

	.elementor-1038 .elementor-element-3e69c92 .elementor-widget-wrap {
		justify-content: flex-end !important;
	}

	.elementor-1038 .elementor-element-2885cd46 .elementor-widget-container {
		display: flex !important;
		justify-content: flex-end !important;
		width: 100% !important;
	}

	.elementor-1038 .elementor-element-2885cd46 button.elementskit-menu-hamburger {
		float: none !important;
	}

	.elementor-246 .elementor-element-62e3952b .elementor-container {
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		column-gap: 10px;
	}

	.elementor-246 .elementor-element-2c9c5b99 {
		width: auto !important;
		max-width: none !important;
		flex: 0 1 auto !important;
	}

	.elementor-246 .elementor-element-166be752 {
		flex: 0 0 auto !important;
		min-width: 0 !important;
		width: auto !important;
		max-width: none !important;
		margin-left: auto !important;
	}

	.elementor-246 .elementor-element-166be752 > .elementor-element-populated {
		margin-left: auto !important;
	}

	.elementor-246 .elementor-element-166be752 .elementor-widget-wrap {
		justify-content: flex-end !important;
	}

	.elementor-246 .elementor-element-f30f374 .elementor-widget-container {
		display: flex !important;
		justify-content: flex-end !important;
		width: 100% !important;
	}

	.elementor-246 .elementor-element-f30f374 button.elementskit-menu-hamburger {
		float: none !important;
	}
}

@media (max-width: 767px) {
	/* Header template 1038 — HFE logo + ElementsKit nav */
	.elementor-1038 .elementor-element-4c4684f1 .hfe-site-logo-img,
	.elementor-1038 .elementor-element-4c4684f1 .hfe-site-logo-container img {
		max-width: 138px !important;
		width: auto !important;
		height: auto !important;
	}

	.elementor-1038 .elementor-element-66931d83 .elementor-container {
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		column-gap: 10px;
	}

	/* Logo + CTA stay left; nav column last and pinned to the far right */
	.elementor-1038 .elementor-element-552d681 {
		order: 1 !important;
		width: auto !important;
		max-width: 46% !important;
		flex: 0 1 auto !important;
	}

	.elementor-1038 .elementor-element-4b3d3818 {
		order: 2 !important;
		width: auto !important;
		max-width: none !important;
		flex: 0 0 auto !important;
	}

	.elementor-1038 .elementor-element-3e69c92 {
		order: 3 !important;
		flex: 0 0 auto !important;
		min-width: 0 !important;
		width: auto !important;
		margin-left: auto !important;
	}

	.elementor-1038 .elementor-element-3e69c92 > .elementor-element-populated {
		margin-left: auto !important;
	}

	.elementor-1038 .elementor-element-3e69c92 .elementor-widget-wrap {
		justify-content: flex-end !important;
	}

	.elementor-1038 .elementor-element-2885cd46 .elementor-widget-container {
		display: flex !important;
		justify-content: flex-end !important;
		width: 100% !important;
	}

	.elementor-1038 .elementor-element-2885cd46 button.elementskit-menu-hamburger {
		float: none !important;
	}

	/* Header template 246 — alternate header */
	.elementor-246 .elementor-element-2a4b10b7 .hfe-site-logo-img,
	.elementor-246 .elementor-element-2a4b10b7 .hfe-site-logo-container img {
		max-width: 138px !important;
		width: auto !important;
		height: auto !important;
	}

	.elementor-246 .elementor-element-62e3952b .elementor-container {
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		column-gap: 10px;
	}

	.elementor-246 .elementor-element-2c9c5b99 {
		width: auto !important;
		max-width: none !important;
		flex: 0 1 auto !important;
	}

	.elementor-246 .elementor-element-166be752 {
		flex: 0 0 auto !important;
		min-width: 0 !important;
		width: auto !important;
		max-width: none !important;
		margin-left: auto !important;
	}

	.elementor-246 .elementor-element-166be752 > .elementor-element-populated {
		margin-left: auto !important;
	}

	.elementor-246 .elementor-element-166be752 .elementor-widget-wrap {
		justify-content: flex-end !important;
	}

	.elementor-246 .elementor-element-f30f374 .elementor-widget-container {
		display: flex !important;
		justify-content: flex-end !important;
		width: 100% !important;
	}

	.elementor-246 .elementor-element-f30f374 button.elementskit-menu-hamburger {
		float: none !important;
	}

	/* Homepage hero (page 254) — more space below sticky header */
	.elementor-254 .elementor-element-9026231 {
		padding-top: 168px !important;
	}

	/*
	 * Horizontal scroll: clip page to the viewport (stops stray overflow; no effect
	 * on vertical scroll). Prefer clip over hidden so descendants can still “pop”.
	 */
	html,
	body {
		overflow-x: hidden;
		max-width: 100%;
	}

	@supports (overflow: clip) {
		html,
		body {
			overflow-x: clip;
		}
	}

	.lakit-site-wrapper {
		max-width: 100%;
		overflow-x: hidden;
	}

	@supports (overflow: clip) {
		.lakit-site-wrapper {
			overflow-x: clip;
		}
	}

	/*
	 * Nested carousel: post-254 sets arrow positions to -30px on mobile; keep arrows
	 * inside the track (variables + direct positioning as a fallback).
	 */
	.elementor-widget-n-carousel.elementor-element {
		--e-n-carousel-arrow-prev-left-position: 0px !important;
		--e-n-carousel-arrow-next-right-position: 0px !important;
		--e-n-carousel-arrow-prev-left-align: 0px !important;
		--e-n-carousel-arrow-next-right-align: 0px !important;
	}

	.elementor-widget-n-carousel .elementor-swiper-button.elementor-swiper-button-prev {
		left: 8px !important;
		right: auto !important;
	}

	.elementor-widget-n-carousel .elementor-swiper-button.elementor-swiper-button-next {
		right: 8px !important;
		left: auto !important;
	}

	.elementor-widget-n-carousel .e-n-carousel.swiper {
		overflow-x: clip;
		max-width: 100%;
	}

	/* Elementor shape dividers use width calc(100% + 1.3px); can add subpixel overflow */
	.elementor-element .elementor-shape-bottom svg {
		max-width: 100% !important;
	}
}