/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* ==========================================================================
   Mobile / tablet off-canvas drawer — Elementor popup #832
   ==========================================================================
   The slide itself is driven by the popup's own Entrance/Exit Animation and
   Animation Duration settings (slideInRight @ 0.3s). Everything below is the
   part Elementor can't express through its controls.
   -------------------------------------------------------------------------- */

/* Ease-out curve: fast off the mark, gentle landing. Elementor leaves the
   default `ease`, which starts slow and reads as sluggish on a large panel. */
#elementor-popup-modal-832 .dialog-widget-content {
	animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);

	/* Promote to its own layer so the 23px drop shadow is painted once
	   instead of on every frame of the slide. */
	will-change: transform;
	backface-visibility: hidden;
}

/* Elementor shows the modal with a bare jQuery .show(), so the 80% black
   overlay snaps on. Fade it with the panel instead. */
#elementor-popup-modal-832 {
	animation: vw-drawer-overlay-in 0.3s ease forwards;
}

@keyframes vw-drawer-overlay-in {
	from { background-color: rgba(0, 0, 0, 0); }
	to   { background-color: rgba(0, 0, 0, 0.8); }
}

/* On close Elementor adds `.reverse` to the panel, then hides the whole modal
   300ms later. Hook that class to fade the overlay back out in step with the
   panel rather than cutting it at the end. */
@supports selector(:has(*)) {
	#elementor-popup-modal-832:has(.dialog-widget-content.reverse) {
		animation: vw-drawer-overlay-out 0.3s ease forwards;
	}

	@keyframes vw-drawer-overlay-out {
		from { background-color: rgba(0, 0, 0, 0.8); }
		to   { background-color: rgba(0, 0, 0, 0); }
	}
}

/* `fit_to_screen` emits height:100vh, which on mobile measures the viewport
   with the URL bar collapsed — the drawer ends up taller than the screen and
   the CTA at the bottom gets clipped. dvh tracks the visible viewport. */
@supports (height: 100dvh) {
	#elementor-popup-modal-832 .dialog-message {
		height: 100dvh;
	}
}

/* Let a long menu scroll without dragging the page behind it. */
#elementor-popup-modal-832 .dialog-message {
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
	#elementor-popup-modal-832,
	#elementor-popup-modal-832 .dialog-widget-content {
		animation-duration: 0.01ms !important;
	}
}