/*
 * WordPress / Elementor compatibility layer for the Nyle design.
 * The original design CSS lives untouched in style.css; this file only
 * neutralises wrappers/defaults added by WordPress & Elementor so the
 * output stays 1:1 with the HTML version.
 */

/*
 * Global colors: the design palette follows Elementor → Site Settings → Global Colors.
 * (Fonts follow Site Settings → Global Fonts through the variables used in style.css.)
 * Elementor defines its variables on <body> (.elementor-kit-*), so they are mapped there.
 */
body {
	--saffron: var(--e-global-color-primary, #F8B735);
	--black: var(--e-global-color-secondary, #000000);
	--raisin-black: var(--e-global-color-text, #202020);
	--chinese-black: var(--e-global-color-accent, #151412);
	--white: var(--e-global-color-nyle_white, #FFFFFF);
	--cultured: var(--e-global-color-nyle_cultured, #F5F5F5);
	--pine-tree: var(--e-global-color-nyle_pine_tree, #2F2B24);
}

/* Nyle widgets render complete sections: no spacing from Elementor wrappers. */
.elementor .elementor-widget[class*="elementor-widget-nyle-"] {
	margin-block: 0;
	width: 100%;
}

/* The design styles every <section>; keep Elementor's own sections out of it. */
section.e-con,
section.elementor-section {
	float: none;
	width: auto;
}

/* Elementor resets "img { height:auto }" with a higher specificity than some design rules. */
.elementor .card-main-img {
	height: 100%;
}
.elementor .icon-img {
	height: 1.1rem;
}

/* Fallback footer background (overridden by the widget's background control). */
.footer_wrapper {
	background-image: url(../images/banner/footer-bg-img.jpg);
}

/* Sticky header below the WP admin bar. */
.admin-bar .header_wrapper.header-sticky {
	top: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar .header_wrapper.header-sticky {
		top: 46px;
	}
}

/* Hide the custom cursor on touch devices and inside the editor. */
@media (hover: none) {
	.custom-cursor-dot,
	.custom-cursor-circle {
		display: none;
	}
}
.elementor-editor-active .custom-cursor-dot,
.elementor-editor-active .custom-cursor-circle {
	display: none;
}

/* Newsletter feedback message. */
.footer_newslater .nyle-form-message {
	margin: 0.75rem 0 0;
	font-size: 1rem;
	color: var(--white);
}
.footer_newslater .nyle-form-message.is-error {
	color: var(--saffron);
}

/* Empty-state notice shown only inside the Elementor editor. */
.nyle-editor-notice {
	padding: 1.5rem;
	border: 1px dashed var(--saffron);
	color: var(--white);
	font-size: 1rem;
	width: 100%;
}

/* Accessibility helper (the parent theme stylesheet is not loaded). */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}