/**
 * HeaderFlow frontend base styles.
 *
 * Provides shared frontend foundations for HeaderFlow modules.
 *
 * @package HeaderFlow
 */

/* ==========================================================================
   Shared Variables
   ========================================================================== */

:root {
	--hf-admin-bar-height: 0px;
}

/* ==========================================================================
   Shared HeaderFlow State
   ========================================================================== */

/*
 * HeaderFlow modules must not interfere with Elementor's visual/content
 * layer. These rules only provide interaction-layer foundations.
 */

.hf-sticky-header {
	box-sizing: border-box;
}

.hf-sticky-header *,
.hf-sticky-header *::before,
.hf-sticky-header *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/*
 * Keep keyboard focus visible for HeaderFlow-controlled interactive
 * elements. Do not remove Elementor's own focus treatment.
 */

.hf-nav-trigger:focus-visible,
.hf-nav-close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ==========================================================================
   Hidden Interaction State
   ========================================================================== */

/*
 * HeaderFlow uses explicit state classes rather than relying on
 * visibility hacks or DOM polling.
 */

.hf-is-hidden {
	visibility: hidden;
}

.hf-is-visible {
	visibility: visible;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.hf-sticky-header,
	.hf-sticky-header *,
	.hf-nav-trigger,
	.hf-nav-close {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ==========================================================================
   Responsive Foundation
   ========================================================================== */

/*
 * HeaderFlow breakpoints:
 *
 * Desktop: >= 1367px
 * Laptop:  1025px - 1366px
 * Tablet:  768px - 1024px
 * Mobile:  <= 767px
 *
 * Module-specific responsive behavior is implemented by the module CSS/JS.
 */

/* Desktop */
@media (min-width: 1367px) {
	.hf-desktop-only {
		display: block;
	}

	.hf-laptop-only,
	.hf-tablet-only,
	.hf-mobile-only {
		display: none;
	}
}

/* Laptop */
@media (min-width: 1025px) and (max-width: 1366px) {
	.hf-desktop-only,
	.hf-tablet-only,
	.hf-mobile-only {
		display: none;
	}

	.hf-laptop-only {
		display: block;
	}
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
	.hf-desktop-only,
	.hf-laptop-only,
	.hf-mobile-only {
		display: none;
	}

	.hf-tablet-only {
		display: block;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.hf-desktop-only,
	.hf-laptop-only,
	.hf-tablet-only {
		display: none;
	}

	.hf-mobile-only {
		display: block;
	}
}