/**
 * Elementor Compatibility CSS
 * Minimal styles for pages built with Elementor
 * Loaded instead of full framework CSS on Elementor pages
 *
 * @package Layers
 * @version 1.0.0
 */

/* ==========================================================================
   Base Reset & Box Model
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body {
	margin: 0;
	padding: 0;
	font-size: 1.5rem;
	line-height: 1.5;
}

img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Container Conflicts Prevention
   ========================================================================== */

/* Reset Layers container when inside Elementor sections */
.elementor .container,
.elementor-section .container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}

/* Prevent grid conflicts */
body.layers-elementor-page .container .grid {
	margin-left: 0;
	margin-right: 0;
}

/* Layers content main - remove padding on Elementor pages */
.layers-elementor-page .layers-content-main {
	padding: 0;
}

/* ==========================================================================
   Typography Inheritance
   ========================================================================== */

.elementor-widget h1,
.elementor-widget h2,
.elementor-widget h3,
.elementor-widget h4,
.elementor-widget h5,
.elementor-widget h6 {
	color: inherit;
	font-weight: inherit;
	margin: inherit;
}

.elementor-widget p {
	margin: inherit;
}

/* ==========================================================================
   Elementor Section Transitions
   ========================================================================== */

.elementor-section {
	transition: none;
}

/* ==========================================================================
   Off-Canvas Sidebar (Mobile Menu)
   Essential for mobile navigation when not using Elementor header
   ========================================================================== */

.off-canvas-left,
.off-canvas-right {
	background: #454545;
	padding-top: 30px;
	position: fixed;
	top: 0;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transform: scale(0.95);
	transition: all 0.3s ease-in-out 0s;
	font-size: 1.4rem;
	width: 300px;
	height: 100vh;
	overflow-y: auto;
}

.off-canvas-left {
	left: 0;
	transform: translateX(-100%);
}

.off-canvas-right {
	right: 0;
	transform: translateX(100%);
}

.off-canvas-left.open,
.off-canvas-right.open {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

/* Off-canvas overlay */
.off-canvas-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9998;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease-in-out;
}

.off-canvas-overlay.active {
	opacity: 1;
	visibility: visible;
}

/* Off-canvas navigation */
.off-canvas-left ul,
.off-canvas-right ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.off-canvas-left ul li a,
.off-canvas-right ul li a {
	display: block;
	padding: 12px 20px;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.off-canvas-left ul li a:hover,
.off-canvas-right ul li a:hover {
	background: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Responsive Nav Toggle Button
   ========================================================================== */

.responsive-nav {
	display: none;
	cursor: pointer;
	padding: 10px;
}

.responsive-nav span {
	display: block;
	width: 25px;
	height: 3px;
	background: #333;
	margin: 5px 0;
	transition: all 0.3s ease;
}

/* ==========================================================================
   Responsive Breakpoint Alignment
   Elementor: mobile < 767, tablet 768-1024, desktop > 1025
   ========================================================================== */

@media only screen and (max-width: 767px) {
	/* Mobile - matches Elementor mobile breakpoint */
	.layers-elementor-page .responsive-nav {
		display: block;
	}

	.layers-elementor-page .nav-horizontal ul {
		display: none;
	}

	/* Ensure proper stacking on mobile */
	.layers-elementor-page .header-site .container {
		flex-wrap: wrap;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	/* Tablet - matches Elementor tablet breakpoint */
	.layers-elementor-page .header-inline .inline-site-logo {
		width: auto;
	}
}

@media only screen and (min-width: 1025px) {
	/* Desktop - matches Elementor desktop breakpoint */
	.layers-elementor-page .nav-horizontal ul {
		display: inline-block;
	}

	.layers-elementor-page .responsive-nav {
		display: none;
	}
}

/* ==========================================================================
   WooCommerce Basic Compatibility
   Minimal styles when WooCommerce content appears on Elementor pages
   ========================================================================== */

.layers-elementor-page .woocommerce-message,
.layers-elementor-page .woocommerce-info,
.layers-elementor-page .woocommerce-error {
	padding: 1em 1.5em;
	margin-bottom: 1.5em;
	background-color: #f7f6f7;
	border-top: 3px solid #1e85be;
}

.layers-elementor-page .woocommerce-error {
	border-top-color: #b81c23;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.layers-elementor-page .clearfix::after {
	content: "";
	display: table;
	clear: both;
}

.layers-elementor-page .hidden {
	display: none !important;
}

.layers-elementor-page .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}