/* =====================================================================
   VIBEX MOBILE OVERFLOW FIX — v1.0
   Файл: /wp-content/themes/buddyboss-child/css/vibex-mobile-fix.css
   Підключається через style.css дочірньої теми (через @import у style.css).

   ВИРІШУЄ:
   - Горизонтальний скрол на головній (Hero з width:100vw виходить за viewport)
   - "kinkycouple My Account" поверх логотипу на мобільному
   - Hero background image зміщується вліво
   ===================================================================== */

/* ── 1. Жорстко блокуємо горизонтальний скрол УСЮДИ ── */
html, body {
	overflow-x: hidden !important;
	max-width: 100vw !important;
}

#page, .site, #content, .site-content {
	overflow-x: hidden !important;
	max-width: 100vw !important;
}

/* ── 2. Hero edge-to-edge: тільки на десктопі. На мобілці — звичайна 100% ── */
@media (max-width: 768px) {

	/* Hero секція — не виходити за межі екрану */
	.home .elementor-section:first-of-type,
	.home .elementor-section.elementor-section-stretched:first-of-type {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		left: auto !important;
		right: auto !important;
		padding-top: 80px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		overflow: hidden !important;
	}

	/* Background image — корректно cover'иться */
	.home .elementor-section:first-of-type {
		background-size: cover !important;
		background-position: center center !important;
		background-attachment: scroll !important;
		background-repeat: no-repeat !important;
	}

	/* Усередині — текст з відступами */
	.home .elementor-section:first-of-type .elementor-container,
	.home .elementor-section:first-of-type .e-con-inner,
	.home .elementor-section:first-of-type .elementor-column {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
		box-sizing: border-box !important;
	}

	/* Заголовок не вилазить ─ */
	.home .elementor-heading-title,
	.home h1.elementor-heading-title,
	.home h2.elementor-heading-title {
		font-size: clamp(28px, 7vw, 42px) !important;
		line-height: 1.15 !important;
		word-wrap: break-word;
		hyphens: auto;
	}

	/* Усі Elementor секції — без edge-to-edge на мобілці */
	.home .elementor-section,
	.home section.elementor-section-stretched {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		overflow-x: hidden !important;
	}

	/* Якщо є picsum/img/bg за межами екрану — обрізати */
	.home .elementor-element {
		max-width: 100vw;
	}

	/* Шапка сайту — статична на мобільному, не fixed з calc(100%-40px) */
	.home .site-header,
	body.home .site-header {
		position: static !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		border-radius: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
	}

	body.home .site-content,
	body.home #content {
		padding-top: 0 !important;
	}
}

/* ── 3. ФІКС "kinkycouple My Account" поверх логотипу ── */
/* BuddyBoss інколи відкриває юзер-dropdown як inline блок на мобільному. */
@media (max-width: 768px) {

	/* Header user dropdown — якщо відкрився як inline, ховаємо його */
	.bb-mobile-header-wrapper .user-link.sub-menu,
	.site-header .user-link > ul.sub-menu,
	.site-header #header-aside ul.sub-menu {
		display: none !important;
	}

	/* Активуємо тільки при кліку — клас "open" */
	.site-header .user-link.is-open > ul.sub-menu,
	.site-header #header-aside .menupop.hover > ul.sub-menu {
		display: block !important;
		position: absolute !important;
		top: 100% !important;
		right: 0 !important;
		left: auto !important;
		background: rgba(10,6,18,.95) !important;
		border: 1px solid var(--vx-line-pink, rgba(255,45,126,.25)) !important;
		border-radius: 12px !important;
		box-shadow: 0 8px 30px rgba(0,0,0,.6) !important;
		min-width: 200px !important;
		padding: 8px 0 !important;
	}

	/* Тримаємо ім'я юзера в одному рядку, не "стікаючи" вниз */
	.site-header .user-link,
	.site-header #header-aside {
		position: relative !important;
		white-space: nowrap !important;
	}
}

/* ── 4. На малому мобільному (<420px) — ще тісніше ── */
@media (max-width: 420px) {
	.home .elementor-section:first-of-type {
		padding-top: 70px !important;
		min-height: 75vh !important;
	}
	.home .elementor-heading-title,
	.home h1.elementor-heading-title {
		font-size: clamp(24px, 6vw, 32px) !important;
	}
}

/* ── 5. Картки vibex_ultra_hero_profiles на мобільному ── */
@media (max-width: 768px) {
	.vibex-hero-profiles-inner {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
		padding: 0 12px;
	}
}

@media (max-width: 360px) {
	.vibex-hero-profiles-inner {
		grid-template-columns: 1fr !important;
	}
}