/**
 * Ajustes de convivencia con Astra.
 *
 * Este archivo es el ÚNICO del plugin que menciona clases de Astra, y solo se
 * carga si Astra es el tema activo. El resto del CSS sigue siendo agnóstico,
 * así que el plugin se puede llevar a otro WordPress sin arrastrar nada de aquí.
 *
 * Todo lo de aquí sale de medir el DOM real del panel lateral, no de suponer.
 */

/* ==========================================================================
   1. Ancho del contenido del panel
   --------------------------------------------------------------------------
   Astra mete cada componente del off-canvas en un contenedor flex
   (.ast-builder-layout-element). Un elemento flex en fila se dimensiona por su
   contenido, así que el menú se ensanchaba o se encogía según qué acordeón
   estuviera abierto: con «Alquiler» desplegado, sus descripciones largas
   estiraban el bloque entero. Aquí ocupa siempre el ancho disponible.
   ========================================================================== */

.ast-mobile-popup-drawer .ast-builder-layout-element,
.ast-mobile-popup-drawer .ast-header-html,
.ast-mobile-popup-drawer .ast-builder-html-element {
	width: 100%;
	max-width: 100%;
	flex: 1 1 100%;
}

/* ==========================================================================
   2. El scroll del panel no arrastra la página de detrás
   --------------------------------------------------------------------------
   El elemento que hace scroll es .ast-mobile-popup-inner. Al llegar a su final,
   el navegador encadena el scroll al documento. overscroll-behavior corta esa
   cadena, y además se bloquea el scroll del documento mientras el panel está
   abierto: se comprobó que Astra deja el body en overflow-y auto.
   ========================================================================== */

.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-popup-drawer .ast-mobile-popup-content {
	overscroll-behavior: contain;
}

/* Bloqueo del scroll del documento: opcional y apagado por defecto. Cortar el
   encadenamiento con overscroll-behavior (arriba) ya evita que la página de
   detrás se mueva al llegar al final del panel. Tocar el overflow del body
   justo cuando el panel se abre es un cambio de más que puede pelearse con el
   JS del tema, así que solo se hace si se pide. */
body.aqm-bloquear-scroll.ast-popup-nav-open {
	overflow: hidden;
}

/* ==========================================================================
   3. El botón de cerrar
   --------------------------------------------------------------------------
   Astra lo deja pegado a la esquina: su contenedor no tiene relleno y el icono
   mide 20 px dentro de una caja que no es cuadrada. Aquí se separa de los
   bordes, se hace cuadrado y todas sus medidas salen de variables, así que se
   ajustan desde Apariencia → Mega menú AQURA sin tocar código.
   ========================================================================== */

.ast-mobile-popup-drawer .ast-mobile-popup-header {
	padding-top: var(--aqm-cerrar-arriba, 8px);
	padding-right: var(--aqm-cerrar-derecha, 8px);
}

.ast-mobile-popup-drawer .menu-toggle-close {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--aqm-cerrar-tam, 44px);
	height: var(--aqm-cerrar-tam, 44px);
	padding: 0;
	line-height: 1;
	/* !important a conciencia: Astra pinta este botón desde un selector con ID,
	   que gana a cualquier cadena de clases. Es la única forma de que el color
	   configurado en el plugin mande, y afecta solo a este botón. */
	color: var(--aqm-cerrar-color, #173F6B) !important;
}

/* Sin aro punteado al tocar o al pulsar con el ratón. Con teclado sí se ve:
   quitarlo del todo deja el panel inservible para quien no usa ratón. */
.ast-mobile-popup-drawer .menu-toggle-close:focus,
.ast-mobile-popup-drawer .menu-toggle-close:focus:not(:focus-visible) {
	outline: 0 !important;
	box-shadow: none !important;
}

.ast-mobile-popup-drawer .menu-toggle-close:focus-visible {
	outline: 2px solid var(--aqm-acento, #1CABE2);
	outline-offset: 2px;
	border-radius: 50%;
}

/* Y si se pide explícitamente, tampoco con teclado. */
body.aqm-sin-aro .ast-mobile-popup-drawer .menu-toggle-close:focus-visible {
	outline: 0;
}

/* --- La X dibujada por el plugin ---------------------------------------
   El icono de Astra es un SVG relleno: su grosor no se puede cambiar por CSS.
   Con esta opción activada se oculta y se dibujan dos barras cruzadas, que sí
   admiten tamaño y grosor a medida. Al desactivar el plugin vuelve el icono
   del tema, intacto. */

body.aqm-x-propia .ast-mobile-popup-drawer .menu-toggle-close .ast-svg-iconset {
	display: none;
}

body.aqm-x-propia .ast-mobile-popup-drawer .menu-toggle-close::before,
body.aqm-x-propia .ast-mobile-popup-drawer .menu-toggle-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--aqm-cerrar-x-tam, 18px);
	height: var(--aqm-cerrar-x-grosor, 2px);
	border-radius: var(--aqm-cerrar-x-grosor, 2px);
	background: currentColor;
}

body.aqm-x-propia .ast-mobile-popup-drawer .menu-toggle-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

body.aqm-x-propia .ast-mobile-popup-drawer .menu-toggle-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}