/**
 * @package Softech_Addons_for_Elementor
 * @since   1.2.0
 * @updated 1.2.3
 */

/* ============================================================
   Wrapper — positions the overlay relative to the template
   ============================================================ */
.sits-hf-editor-wrapper {
	position: relative;
	width: 100%;
	display: block;
	cursor: pointer;
}
.site-header {
    display: none !important;
    
}

/* ============================================================
   Overlay — always visible black semi-transparent bar
   Shows the user which template is active without being able
   to interact with or accidentally click into the template.
   ============================================================ */
.sits-hf-editor-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #5eead45c;
	border: 2px solid #5eead4;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	pointer-events: none;
}

/* ============================================================
   Controls row inside the overlay
   ============================================================ */
.sits-hf-editor-controls {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ============================================================
   Dynamic label — "Header" or "Footer"
   Plain text, no link, white on dark overlay.
   ============================================================ */
.sits-hf-overlay-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 28px;
	background: #5eead4;
	color: #ffffff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 4px;
	border: 2px solid rgba(255, 255, 255, 0.25);
	user-select: none;
	pointer-events: auto;
	cursor: pointer;
}
.sits-hf-overlay-label i {
    color: #000;
}

/* ============================================================
   Template content — rendered but non-interactive in editor
   ============================================================ */
.sits-hf-template-content {
	position: relative;
	width: 100%;
	pointer-events: none;
	/* Ensure all child content including HTML widgets is visible */
	visibility: visible !important;
	display: block !important;
}

.sits-hf-template-content * {
	pointer-events: none !important;
	/* Never hide content in editor preview */
	visibility: visible !important;
}

/* Ensure Elementor HTML widget content shows in editor/preview */
.sits-hf-template-content .elementor-html,
.sits-hf-template-content .elementor-widget-html,
.sits-hf-template-content .elementor-widget-html .elementor-widget-container,
.sits-hf-template-content .elementor-widget-container,
.sits-hf-template-content .elementor-widget-container > * {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* ============================================================
   Minimum heights so the overlay is visible even if the
   template renders nothing (e.g. empty Elementor canvas).
   ============================================================ */
.sits-hf-editor-wrapper[data-template-type="header"] {
	min-height: 80px;
}

.sits-hf-editor-wrapper[data-template-type="footer"] {
	min-height: 80px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
	.sits-hf-overlay-label {
		font-size: 13px;
		padding: 8px 18px;
	}
}