/*--------------------------------------------------------------
# Creative Header
# Cohesive with footer-creative.css. Pure CSS interactivity:
# - Top utility strip (deal of the day + counters)
# - Brand-tinted CTA button
# - Glass sticky menu with backdrop-filter
# - CSS-only mega-menu enhancement on primary nav
--------------------------------------------------------------*/

/* Shared brand tokens (mirror of footer palette so both files stay in
   sync without depending on each other). */
.ht-header-top,
.ht-topstrip,
.top-header.pos-stickymenu {
	--ht-brand-gold: #d4af37;
	--ht-brand-green: #07241f;
	--ht-brand-green-2: #0d3d33;
	--ht-brand-cream: #f1d27a;
}

/* ── Top utility strip ─────────────────────────────────── */
.ht-topstrip {
	position: relative;
	background:
		linear-gradient(90deg, var(--ht-brand-green) 0%, var(--ht-brand-green-2) 60%, #103d2f 100%);
	color: #f3ece0;
	font-size: .82rem;
	line-height: 1.2;
	border-bottom: 1px solid rgba(212, 175, 55, .25);
	overflow: hidden;
}
/* Subtle moving sheen — GPU-only transform, decorative */
.ht-topstrip::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 40%, rgba(212, 175, 55, .12) 50%, transparent 60%);
	transform: translateX(-100%);
	animation: ht-sheen 6s ease-in-out infinite;
	pointer-events: none;
}
@keyframes ht-sheen {
	0%   { transform: translateX(-100%); }
	60%  { transform: translateX(100%); }
	100% { transform: translateX(100%); }
}
.ht-topstrip__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	min-height: 40px;
}
.ht-topstrip__deal {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 4px 12px 4px 4px;
	background: rgba(212, 175, 55, .08);
	border: 1px solid rgba(212, 175, 55, .25);
	border-radius: 999px;
	transition: background .2s ease, border-color .2s ease;
}
.ht-topstrip__deal:hover {
	background: rgba(212, 175, 55, .14);
	border-color: rgba(212, 175, 55, .45);
}
.ht-topstrip__flame {
	display: inline-flex;
	width: 26px;
	height: 26px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ht-brand-gold), #ff8a3d);
	color: #3a1d00;
	flex: 0 0 26px;
	animation: ht-pulse 2.4s ease-in-out infinite;
	box-shadow: 0 0 0 0 rgba(255, 138, 61, .55);
}
@keyframes ht-pulse {
	0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 138, 61, .55); }
	50%      { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(255, 138, 61, 0); }
}
.ht-topstrip__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 4px;
	background: linear-gradient(135deg, #ef4444, #f97316);
	color: #fff;
	font-weight: 800;
	font-size: .72rem;
	letter-spacing: .4px;
	text-transform: uppercase;
	flex-shrink: 0;
}
.ht-topstrip__deal-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ht-topstrip__deal-text strong {
	color: var(--ht-brand-cream);
	font-weight: 700;
	margin-inline-end: 6px;
}
.ht-topstrip__deal-text a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px dotted rgba(255, 255, 255, .35);
}
.ht-topstrip__deal-text a:hover {
	border-bottom-color: var(--ht-brand-cream);
	color: var(--ht-brand-cream);
}

.ht-topstrip__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.ht-topstrip__meta > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .08);
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.ht-topstrip__meta > span:hover {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(212, 175, 55, .3);
	color: #fff;
}
.ht-topstrip__meta svg {
	opacity: .9;
	color: var(--ht-brand-cream);
}
.ht-topstrip__live {
	position: relative;
	padding-inline-start: 22px !important;
	background: rgba(74, 222, 128, .08) !important;
	border-color: rgba(74, 222, 128, .3) !important;
}
.ht-topstrip__live strong {
	color: #86efac;
	font-weight: 800;
	margin-inline-end: 2px;
}
.ht-topstrip__live::before {
	content: "";
	position: absolute;
	inset-inline-start: 10px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4ade80;
	transform: translateY(-50%);
	box-shadow: 0 0 0 0 rgba(74, 222, 128, .6);
	animation: ht-live-pulse 1.8s ease-out infinite;
}
@keyframes ht-live-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
	70%  { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
	100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* ── Brand mark next to logo (only when no logo image used) ─ */
.ht-header-logo .ht-header__brand-mark {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--ht-brand-gold), #2e8b57);
	color: var(--ht-brand-green);
	margin-inline-end: 10px;
	flex: 0 0 34px;
}
.ht-header-logo .site-title a {
	display: inline-flex;
	align-items: center;
}

/* ── Search box: brand‑tinted focus ──────────────────────── */
.ht-search-form:focus-within {
	border-color: var(--ht-brand-gold) !important;
	box-shadow: 0 0 0 3px rgba(212, 175, 55, .18) !important;
}
.ht-search-form:focus-within .ht-search-icon {
	color: var(--ht-brand-green) !important;
}

/* ── CTA button next to search ──────────────────────────── */
.ht-header-cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: linear-gradient(135deg, var(--ht-brand-gold), #2e8b57);
	color: var(--ht-brand-green) !important;
	border-radius: 999px;
	font-weight: 700;
	font-size: .88rem;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(46, 139, 87, .25);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
	white-space: nowrap;
	will-change: transform;
}
.ht-header-cta:hover,
.ht-header-cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(46, 139, 87, .3);
	filter: brightness(1.05);
	color: var(--ht-brand-green) !important;
	outline: none;
}
.ht-header-cta svg {
	width: 16px;
	height: 16px;
}

/* ── Sticky menu glass effect ───────────────────────────── */
.gmr-sticky .top-header.pos-stickymenu {
	background: rgba(255, 255, 255, .78) !important;
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid rgba(0, 0, 0, .06);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
	transition: background .25s ease, box-shadow .25s ease;
}

/* ── Primary menu — subtle hover affordance + mega-menu ── */
.gmr-mainmenu #primary-menu > li > a {
	position: relative;
	transition: color .18s ease;
}
.gmr-mainmenu #primary-menu > li > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 6px;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--ht-brand-gold), #2e8b57);
	border-radius: 2px;
	transition: width .22s ease, left .22s ease;
}
.gmr-mainmenu #primary-menu > li:hover > a::after,
.gmr-mainmenu #primary-menu > li:focus-within > a::after,
.gmr-mainmenu #primary-menu > li.current-menu-item > a::after {
	width: calc(100% - 28px);
	left: 14px;
}

/* CSS-only mega panel for menu items with children.
   The base theme handles show/hide via display:none → display:block on
   :hover (with the ht-dropdown keyframe). We only restyle the panel
   here — overriding visibility/transform would actually disable that
   animation, so we leave it alone. */
.gmr-mainmenu #primary-menu > li.menu-item-has-children > .sub-menu,
.gmr-mainmenu #primary-menu > li.page_item_has_children > .sub-menu {
	border-radius: 14px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .06);
	border: 1px solid rgba(0, 0, 0, .05);
	padding: 8px 4px;
	min-width: 240px;
	background: #fff;
}
.gmr-mainmenu #primary-menu .sub-menu li a {
	border-radius: 8px;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.gmr-mainmenu #primary-menu .sub-menu li a:hover {
	background: linear-gradient(135deg, rgba(212, 175, 55, .12), rgba(46, 139, 87, .1));
	color: var(--ht-brand-green);
	transform: translateX(2px);
}
html[dir="rtl"] .gmr-mainmenu #primary-menu .sub-menu li a:hover {
	transform: translateX(-2px);
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.ht-topstrip::before,
	.ht-topstrip__flame,
	.ht-topstrip__live::before { animation: none; }
	.ht-header-cta,
	.gmr-mainmenu #primary-menu > li > a::after,
	.gmr-mainmenu #primary-menu .sub-menu li a {
		transition: none !important;
		transform: none !important;
	}
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1200px) {
	.ht-header-cta { display: none; }
}
@media (max-width: 768px) {
	.ht-topstrip { font-size: .76rem; }
	.ht-topstrip__meta { gap: 10px; }
	.ht-topstrip__meta .ht-topstrip__hide-sm { display: none; }
}
@media (max-width: 480px) {
	.ht-topstrip__inner {
		flex-wrap: wrap;
		gap: 6px;
		padding: 6px 0;
	}
	.ht-topstrip__meta { width: 100%; justify-content: space-between; }
}