/* Custom Header Builder — frontend styles */

#chb-header, #chb-header * {
	box-sizing: border-box;
}

#chb-header {
	font-family: var(--chb-font-family, sans-serif);
	font-weight: var(--chb-font-weight, 400);
	position: relative;
	z-index: 9999;
	margin: 0;
	padding: 0;
	/* Clearfix: stops child top-margins from "collapsing" through this
	   wrapper and showing the page's background color as a gap. */
	display: flow-root;
}

/* The element that immediately follows the header is a common source of
   the "empty gap under header" bug — themes/page builders sometimes add
   their own top margin to the first section on the page. Zero it out. */
#chb-header + * {
	margin-top: 0 !important;
}

.chb-container {
	max-width: var(--chb-container, 1200px);
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
}

/* ---------- Announcement bar ---------- */
.chb-announcement {
	background: var(--chb-announce-bg, #ff6600);
	color: var(--chb-announce-color, #fff);
	margin: 0;
	display: flow-root;
}
.chb-announcement-inner {
	justify-content: center;
	gap: 12px;
	padding: 8px 20px;
	font-size: 14px;
	position: relative;
}
.chb-announcement-link {
	color: inherit;
	text-decoration: underline;
	font-weight: 600;
	white-space: nowrap;
}
.chb-announcement-close {
	background: none;
	border: none;
	color: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	position: absolute;
	inset-inline-end: 12px;
	top: 50%;
	transform: translateY(-50%);
	opacity: .8;
}
.chb-announcement-close:hover { opacity: 1; }
.chb-announcement.chb-hidden { display: none; }

/* ---------- Top bar ---------- */
.chb-topbar {
	background: var(--chb-topbar-bg, #111);
	color: var(--chb-topbar-color, #fff);
	font-size: 13px;
	margin: 0;
	display: flow-root;
}
.chb-topbar-inner {
	justify-content: space-between;
	padding: 6px 20px;
	gap: 16px;
}
.chb-topbar-left, .chb-topbar-right {
	display: flex;
	align-items: center;
	gap: 16px;
}
.chb-topbar-contact { color: inherit; text-decoration: none; opacity: .9; }
.chb-topbar-contact:hover { opacity: 1; text-decoration: underline; }

.chb-slider { position: relative; min-height: 1.2em; overflow: hidden; }
.chb-slider-line { display: block; animation: chb-fade .4s ease; }
@keyframes chb-fade {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ---------- Main header row ---------- */
.chb-header-inner {
	background: var(--chb-header-bg, #fff);
	transition: background .3s ease, box-shadow .3s ease;
	width: 100%;
	margin: 0;
	display: flow-root;
}
.chb-header-inner.chb-sticky {
	position: sticky;
	top: 0;
}
.chb-header-inner.chb-sticky.chb-is-stuck {
	box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.chb-main-row {
	justify-content: space-between;
	padding-top: 14px;
	padding-bottom: 14px;
	gap: 20px;
}

.chb-logo-img { max-width: var(--chb-logo-max-width, 160px); height: auto; display: block; }
.chb-logo-text { font-size: 22px; font-weight: 700; color: var(--chb-menu-color, #222); text-decoration: none; }
.chb-logo a { text-decoration: none; }

/* Menu */
.chb-nav { flex: 1; display: flex; justify-content: center; }
.chb-menu {
	list-style: none;
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
}
.chb-menu li { position: relative; }
.chb-menu a {
	color: var(--chb-menu-color, #222);
	text-decoration: none;
	font-size: 15px;
	padding: 6px 2px;
	display: inline-block;
	transition: color .2s ease;
}
.chb-menu a:hover,
.chb-menu li.current-menu-item > a {
	color: var(--chb-menu-hover, #ff6600);
}
.chb-menu .sub-menu {
	list-style: none;
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	background: #fff;
	min-width: 200px;
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
	padding: 8px 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: all .2s ease;
	border-radius: 6px;
	z-index: 10;
}
.chb-menu li:hover > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.chb-menu .sub-menu a { display: block; padding: 8px 16px; color: #222; }

/* Right side */
.chb-header-right { display: flex; align-items: center; gap: 16px; }

.chb-social-icons { display: flex; align-items: center; gap: 10px; }
.chb-social-icon { color: inherit; display: inline-flex; opacity: .85; }
.chb-social-icon:hover { opacity: 1; }

.chb-cta-button {
	background: var(--chb-cta-bg, #ff6600);
	color: var(--chb-cta-color, #fff);
	border-radius: var(--chb-cta-radius, 4px);
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	display: inline-block;
	transition: opacity .2s ease, transform .15s ease;
}
.chb-cta-button:hover { opacity: .88; }
.chb-cta-mobile { display: none; }

/* Hamburger */
.chb-hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 30px;
	height: 24px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}
.chb-hamburger span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--chb-menu-color, #222);
	transition: transform .25s ease, opacity .25s ease;
}
.chb-hamburger.chb-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.chb-hamburger.chb-open span:nth-child(2) { opacity: 0; }
.chb-hamburger.chb-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu panel */
.chb-mobile-menu {
	display: none;
	flex-direction: column;
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease;
	background: var(--chb-header-bg, #fff);
}
.chb-mobile-menu.chb-open { max-height: 600px; overflow-y: auto; }
.chb-mobile-menu-list { list-style: none; margin: 0; padding: 10px 20px; }
.chb-mobile-menu-list li { border-bottom: 1px solid rgba(0,0,0,.06); }
.chb-mobile-menu-list a { display: block; padding: 12px 4px; color: var(--chb-menu-color, #222); text-decoration: none; }
.chb-mobile-menu-list .sub-menu { list-style: none; padding-inline-start: 16px; }
.chb-mobile-menu .chb-cta-mobile { margin: 14px 20px; display: block; text-align: center; }

/* ---------- Transparent header ---------- */
/* Actual transparent-header rules are generated dynamically in
   class-chb-frontend.php (inline_dynamic_css) since they depend on the
   saved header background color. Kept here only as a safe static fallback. */
.chb-header-inner.chb-transparent { background: transparent; }

/* ---------- Responsive ---------- */
@media (max-width: 782px) {
	.chb-nav { display: none; }
	.chb-header-right .chb-cta-button:not(.chb-cta-mobile) { display: none; }
	.chb-hamburger { display: inline-flex; }
	.chb-mobile-menu { display: flex; }
	.chb-cta-mobile { display: block; }
	.chb-topbar-inner { flex-wrap: wrap; }
}

/* ---------- WP admin bar offset (logged-in users) ---------- */
body.admin-bar .chb-header-inner.chb-sticky { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .chb-header-inner.chb-sticky { top: 46px; }
}

/* ---------- RTL ---------- */
.chb-rtl .chb-menu,
.chb-rtl .chb-topbar-left,
.chb-rtl .chb-topbar-right,
.chb-rtl .chb-header-right {
	direction: rtl;
}
.chb-rtl .chb-mobile-menu-list { padding-inline-start: 0; padding-inline-end: 16px; }