/*
Theme Name: Yarnex Child
Template:   yarnex
Theme URI: https://1.envato.market/yarnex-wp
Description: Yarnex Child Theme
Author: AwaikenThemes
Author URI: https://awaikenthemes.com/
Version: 1.0.1
Text Domain: yarnex-child
*/

/* ==========================================================================
   Menu mobile (header ElementsKit) — correção + novo visual
   ==========================================================================
   O Elementor aplica um transform "fantasma" (perspective(0) rotate(0) ...)
   via classe .e-transform em todo container/widget, mesmo sem nenhum efeito
   de movimento configurado. Isso faz o painel off-canvas do ElementsKit
   (position: fixed) ficar "preso" dentro da caixa do header/widget em vez de
   ocupar a tela inteira no celular — essa era a causa do menu quebrado.
   As regras abaixo neutralizam esse transform dentro do header e redesenham
   o painel mobile com a identidade visual do site. */

#header-texfield.e-transform,
#header-texfield .e-transform,
#header-texfield .elementor-widget-container {
	transform: none !important;
}

@media (max-width: 1024px) {

	#header-texfield .elementskit-menu-hamburger {
		margin-right: 10px;
	}

	#header-texfield .elementskit-menu-container.elementskit-menu-offcanvas-elements {
		width: 100% !important;
		max-width: 100% !important;
		background: linear-gradient(160deg, var(--e-global-color-primary, #18191A) 0%, #26221c 100%) !important;
		padding: 0 !important;
	}

	#header-texfield .elementskit-nav-identity-panel {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 22px 24px !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	#header-texfield .elementskit-menu-close {
		background: var(--e-global-color-accent, #F40404) !important;
		width: 40px !important;
		height: 40px !important;
		border-radius: 50% !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
	}

	#header-texfield .elementskit-navbar-nav {
		padding: 12px 24px 32px !important;
		overflow-y: auto;
	}

	#header-texfield .elementskit-navbar-nav > li {
		margin: 0 !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	#header-texfield .elementskit-navbar-nav > li > a {
		color: #ffffff !important;
		font-size: 18px !important;
		font-weight: 500 !important;
		padding: 16px 4px !important;
	}

	#header-texfield .elementskit-navbar-nav > li > a:hover,
	#header-texfield .elementskit-navbar-nav > li > a:focus,
	#header-texfield .elementskit-navbar-nav > li.current-menu-item > a,
	#header-texfield .elementskit-navbar-nav > li.current-menu-ancestor > a {
		color: var(--e-global-color-accent, #F40404) !important;
	}

	#header-texfield .elementskit-navbar-nav .elementskit-submenu-indicator,
	#header-texfield .elementskit-navbar-nav .ekit-submenu-indicator-icon {
		color: rgba(255, 255, 255, 0.55) !important;
		transition: transform 0.25s ease;
	}

	#header-texfield .elementskit-navbar-nav .elementskit-dropdown-open > a .elementskit-submenu-indicator,
	#header-texfield .elementskit-navbar-nav .elementskit-dropdown-open > a .ekit-submenu-indicator-icon {
		color: var(--e-global-color-accent, #F40404) !important;
		transform: rotate(180deg);
	}

	#header-texfield .elementskit-navbar-nav .elementskit-submenu-panel {
		background: rgba(255, 255, 255, 0.06) !important;
		border-radius: 12px !important;
		margin: 4px 0 10px !important;
		padding: 4px 0 !important;
	}

	#header-texfield .elementskit-navbar-nav .elementskit-submenu-panel > li > a {
		color: rgba(255, 255, 255, 0.75) !important;
		font-size: 15px !important;
	}

	#header-texfield .elementskit-navbar-nav .elementskit-submenu-panel > li > a:hover,
	#header-texfield .elementskit-navbar-nav .elementskit-submenu-panel > li > a:focus {
		color: var(--e-global-color-accent, #F40404) !important;
	}

	#header-texfield .elementskit-menu-offcanvas-elements::before {
		background-color: rgba(10, 10, 10, 0.55) !important;
	}
}