/*
Theme Name: Astra Child
Theme URI: https://meerath.com
Description: Child theme for Meerath. All custom theme code lives here so Astra updates never overwrite it.
Author: Meerath
Template: astra
Version: 1.0.8
Text Domain: astra-child
*/

/* Custom site-wide CSS goes below. */

/* Honeypot anti-spam: clip-based hide (RTL-safe — no -9999px offset that causes ~10kpx horizontal scroll on Arabic pages). */
.elementor-field-group-mrth_hp {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
}

/* Mobile burger menu: force dark icon on light headers (Elementor mega-menu + Astra fallback). */
@media (max-width: 921px) {
	.elementor-location-header .e-n-menu-toggle,
	.elementor-location-header .e-n-menu-toggle-icon,
	.elementor-location-header .e-n-menu-toggle-icon svg,
	.elementor-location-header .e-n-menu-toggle-icon svg path {
		color: var(--ast-global-color-2, #1e293b) !important;
		fill: var(--ast-global-color-2, #1e293b) !important;
	}

	[data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal,
	[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon,
	[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {
		color: var(--ast-global-color-2, #1e293b) !important;
		fill: var(--ast-global-color-2, #1e293b) !important;
	}
}

/* Header logo: keep intrinsic 500x170 aspect ratio (≈2.94:1). The WPR logo widget already
   sets responsive heights (50px desktop / 40px mobile) and wrapper max-widths (200px / 120px),
   but the img width was being clamped to the narrow wrapper, squishing it (~114x50 = 2.28:1).
   Force width to follow height with the correct aspect ratio (no clamp) so the logo never
   distorts. Do NOT force a fixed height here — let the widget's own responsive height apply,
   otherwise the desktop 50px leaks onto mobile and the 147px-wide logo gets clipped to "MEERAT"
   by the 120px mobile wrapper. overflow:visible stops the wrapper from clipping the mark. */
.elementor-location-header .wpr-logo,
.elementor-location-header .wpr-logo-image {
	overflow: visible !important;
}
.elementor-location-header .wpr-logo-image img {
	width: auto !important;
	max-width: none !important;
	aspect-ratio: 500 / 170 !important;
}

/* Icon Element fonts: font-display swap overrides (same families, later cascade). */
@font-face {
	font-family: "WPPageBuilder";
	src: url("/wp-content/plugins/icon-element/assets/wppagebuilder/fonts/WPPageBuilder.woff?o0ompx") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Ionicons";
	src:
		url("/wp-content/plugins/icon-element/assets/ionicons/fonts/ionicons.woff2?v=4.3.0") format("woff2"),
		url("/wp-content/plugins/icon-element/assets/ionicons/fonts/ionicons.woff?v=4.3.0") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* Mobile burger menu: Royal Elementor Addons off-canvas trigger renders a white SVG that is
   invisible on the light header. Force a dark icon on mobile/tablet (hidden on desktop, so the
   desktop header is unaffected). */
@media (max-width: 1024px) {
	.wpr-offcanvas-trigger,
	.wpr-offcanvas-trigger i,
	.wpr-offcanvas-trigger svg,
	.wpr-offcanvas-trigger svg path,
	.wpr-offcanvas-trigger .e-font-icon-svg {
		color: #1e293b !important;
		fill: #1e293b !important;
	}

	/* Clean white mobile off-canvas panel: the panel background was dark navy (#020817),
	   showing as a black frame around the white menu. Make it white. */
	.wpr-offcanvas-content {
		background-color: #ffffff !important;
	}

	/* Hide the decorative "Offcanvas" panel title (the trigger keeps its own aria-label,
	   so accessibility is unaffected). Keep the close (X) visible. */
	.wpr-offcanvas-content .wpr-offcanvas-title {
		display: none !important;
	}

	/* Close (X) must stay dark/visible on the now-white panel. */
	.wpr-offcanvas-content .wpr-close-offcanvas,
	.wpr-offcanvas-content .wpr-close-offcanvas i,
	.wpr-offcanvas-content .wpr-close-offcanvas svg,
	.wpr-offcanvas-content .wpr-close-offcanvas svg path {
		color: #1e293b !important;
		fill: #1e293b !important;
	}

	/* Mega-menu cards inside the mobile off-canvas: the sub-item titles/descriptions
	   were center-aligned, which looked disconnected from their left-aligned icons.
	   Align to the inline-start edge so text reads left on EN/ES (ltr) and right on
	   Arabic (rtl) automatically — `start` follows the panel's direction. */
	.wpr-offcanvas-content .elementor-heading-title {
		text-align: start !important;
	}
}