/**
 * Location: /assets/css/header-style/header-style.css
 * Purpose:
 * - Frontend CSS for Header Style settings.
 * - Values are applied through CSS variables set by /assets/js/header-style/header-style.js.
 *
 * Related PHP:
 * - /inc/features/header-style/header-style.php
 *
 * @package SuntechMallVPro
 */

/* ==========================================================================
   Header Style Variables
   ========================================================================== */

.stm-header {
	--stm-hs-header-bg: #ffffff;
	--stm-hs-header-text: #111111;
	--stm-hs-header-link: #111111;
	--stm-hs-header-link-hover: #000000;
	--stm-hs-header-accent: #ff7a00;

	--stm-hs-topbar-bg: #ffffff;
	--stm-hs-topbar-text: #222222;
	--stm-hs-topbar-border: #e5e5e5;
	--stm-hs-topbar-height: 32px;

	--stm-hs-middlebar-bg: #ffffff;
	--stm-hs-middlebar-text: #111111;
	--stm-hs-middlebar-border: #efefef;
	--stm-hs-middlebar-height: 92px;

	--stm-hs-navbar-bg: #ffffff;
	--stm-hs-navbar-text: #111111;
	--stm-hs-navbar-text-hover: #111111;
	--stm-hs-navbar-border: #efefef;
	--stm-hs-navbar-height: 48px;

	--stm-hs-desktop-logo-max-h: 45px;
	--stm-hs-mobile-logo-max-h: 36px;

	--stm-brand-orange: var(--stm-hs-header-accent);
	background: var(--stm-hs-header-bg);
	color: var(--stm-hs-header-text);
}

/* ==========================================================================
   Header States
   ========================================================================== */

.stm-header.stm-header-style--shadow {
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
}

.stm-header.stm-header-style--sticky {
	position: sticky;
	top: 0;
}

.stm-header:not(.stm-header-style--endpoint) .stm-header__endpoint {
	display: none !important;
}

/* ==========================================================================
   Global Header Links
   ========================================================================== */

.stm-header a,
.stm-header .stm-mb-action,
.stm-header ul.stm-primary-menu a,
.stm-header #stm-primary-menu a {
	color: var(--stm-hs-header-link);
}

.stm-header a:hover,
.stm-header .stm-mb-action:hover,
.stm-header ul.stm-primary-menu a:hover,
.stm-header #stm-primary-menu a:hover {
	color: var(--stm-hs-header-link-hover);
}

/* ==========================================================================
   Topbar
   ========================================================================== */

.stm-header .stm-topbar {
	min-height: var(--stm-hs-topbar-height);
	background: var(--stm-hs-topbar-bg);
	color: var(--stm-hs-topbar-text);
}

.stm-header.stm-header-style--border .stm-topbar {
	border-bottom-color: var(--stm-hs-topbar-border);
}

.stm-header:not(.stm-header-style--border) .stm-topbar {
	border-bottom-color: transparent;
}

.stm-header .stm-topbar__inner {
	min-height: var(--stm-hs-topbar-height);
	padding-top: 0;
	padding-bottom: 0;
}

.stm-header .stm-topbar__link,
.stm-header .stm-topbar__text {
	color: var(--stm-hs-topbar-text);
}

.stm-header.stm-header-style--topbar-hidden .stm-topbar {
	display: none !important;
}

@media (max-width: 1023px) {
	.stm-header.stm-header-style--topbar-tablet-hidden .stm-topbar {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.stm-header.stm-header-style--topbar-mobile-hidden .stm-topbar {
		display: none !important;
	}
}

/* ==========================================================================
   Middlebar
   ========================================================================== */

.stm-header .stm-middlebar {
	background: var(--stm-hs-middlebar-bg);
	color: var(--stm-hs-middlebar-text);
}

.stm-header.stm-header-style--border .stm-middlebar {
	border-bottom-color: var(--stm-hs-middlebar-border);
}

.stm-header:not(.stm-header-style--border) .stm-middlebar {
	border-bottom-color: transparent;
}

.stm-header .stm-middlebar__inner {
	min-height: var(--stm-hs-middlebar-height);
	display: flex;
	align-items: center;
}

.stm-header .stm-middlebar__layout {
	width: 100%;
}

.stm-header .stm-site-name,
.stm-header .stm-mb-action,
.stm-header .stm-mb-action__label {
	color: var(--stm-hs-middlebar-text);
}

/* ==========================================================================
   Navbar
   ========================================================================== */

.stm-header .stm-navbar {
	background: var(--stm-hs-navbar-bg);
}

.stm-header.stm-header-style--border .stm-navbar {
	border-bottom-color: var(--stm-hs-navbar-border);
}

.stm-header:not(.stm-header-style--border) .stm-navbar {
	border-bottom-color: transparent;
}

.stm-header .stm-navbar__inner {
	min-height: var(--stm-hs-navbar-height);
	padding-top: 0;
	padding-bottom: 0;
	align-items: center;
}

.stm-header ul.stm-primary-menu a,
.stm-header #stm-primary-menu a {
	color: var(--stm-hs-navbar-text);
}

.stm-header ul.stm-primary-menu a:hover,
.stm-header #stm-primary-menu a:hover {
	color: var(--stm-hs-navbar-text-hover);
}

/* ==========================================================================
   Logo Size
   ========================================================================== */

@media (min-width: 1024px) {
	.stm-header .stm-logo-link img,
	.stm-header .custom-logo {
		max-height: var(--stm-hs-desktop-logo-max-h);
	}
}

@media (max-width: 767px) {
	.stm-header .stm-logo-link img,
	.stm-header .custom-logo {
		max-height: var(--stm-hs-mobile-logo-max-h);
	}
}