/**
 * DROIX Blog — layout: utility bar, sticky header, nav dropdowns, language
 * switcher, mobile drawer, footer.
 */

/* ── utility bar ── */
.dxb-topbar { background: var(--dxb-dark); color: #fff; position: relative; z-index: 90; }
.dxb-topbar__inner { height: 42px; display: flex; align-items: center; gap: 22px; }
.dxb-topbar__tagline { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,0.75); white-space: nowrap; }
.dxb-topbar__spacer { flex: 1; }
.dxb-topbar__link, .dxb-topbar__trust {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(255,255,255,0.85);
	white-space: nowrap;
}
.dxb-topbar__link:hover, .dxb-topbar__trust:hover { color: var(--dxb-green); }
.dxb-topbar__trust .dxb-i--star { color: var(--dxb-green); width: 13px; height: 13px; }

/* language switcher */
.dxb-lang { position: relative; }
.dxb-lang__toggle {
	all: unset;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--dxb-font-body);
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(255,255,255,0.85);
	padding: 6px 0;
	white-space: nowrap;
}
.dxb-lang__toggle:hover { color: var(--dxb-green); }
.dxb-lang__toggle img { border-radius: 2.5px; box-shadow: 0 0 0 1px rgba(255,255,255,0.25); }
.dxb-lang__toggle .dxb-i { width: 13px; height: 13px; }
.dxb-lang__panel {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 4px;
	background: #fff;
	border: 1px solid var(--dxb-stroke);
	border-radius: var(--dxb-r-lg);
	box-shadow: var(--dxb-shadow-lg);
	padding: 14px;
	width: 576px;
	max-width: calc(100vw - 24px);
	z-index: 99;
	color: var(--dxb-fg-1);
}
.dxb-lang__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 2px 8px 12px; }
.dxb-lang__head b { font-family: var(--dxb-font-head); font-weight: 700; font-size: 14px; }
.dxb-lang__head span { font-size: 11.5px; font-weight: 500; color: var(--dxb-fg-5); }
.dxb-lang__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; max-height: 60vh; overflow: auto; }
.dxb-lang__item {
	padding: 8px 10px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 500;
	color: var(--dxb-fg-2);
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
}
.dxb-lang__item:hover { background: var(--dxb-green-tint); color: var(--dxb-fg-2); }
.dxb-lang__item.is-active { background: var(--dxb-green-tint); font-weight: 700; }
.dxb-lang__item img { border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); flex: 0 0 auto; }
.dxb-lang__item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dxb-lang__note { padding: 10px 8px 0; border-top: 1px solid var(--dxb-stroke); margin-top: 12px; font-size: 11.5px; color: var(--dxb-fg-5); }

/* ── main header ── */
.dxb-header {
	position: sticky;
	top: 0;
	z-index: 80;
	background: rgba(255,255,255,0.96);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--dxb-stroke);
}
.dxb-header__inner { height: 74px; display: flex; align-items: center; gap: 20px; }
.dxb-logo { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.dxb-logo img { display: block; height: 36px; width: auto; }
.dxb-drawer .dxb-logo img { height: 30px; }
.dxb-logo__badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 9999px;
	background: var(--dxb-green);
	color: #1B2400;
	font-family: var(--dxb-font-head);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.09em;
}
.dxb-header__spacer { flex: 1; }

/* primary nav (menu hierarchy → dropdowns) */
.dxb-nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.dxb-nav__list > li { position: relative; }
.dxb-nav__list > li > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 10px 13px;
	border-radius: 12px;
	font-family: var(--dxb-font-head);
	font-weight: 500;
	font-size: 15px;
	color: var(--dxb-fg-2);
}
.dxb-nav__list > li > a:hover { background: var(--dxb-bg-3); color: var(--dxb-fg-2); }
.dxb-nav__list > li.menu-item-has-children > a::after {
	content: "";
	width: 13px; height: 13px;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>') center / contain no-repeat;
	color: var(--dxb-fg-5);
}
.dxb-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	padding: 8px;
	margin: 6px 0 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--dxb-stroke);
	border-radius: var(--dxb-r-lg);
	box-shadow: var(--dxb-shadow-lg);
	min-width: 256px;
	z-index: 95;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	pointer-events: none;
}
.dxb-nav li:hover > .sub-menu,
.dxb-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.dxb-nav .sub-menu a {
	display: block;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	color: var(--dxb-fg-2);
}
.dxb-nav .sub-menu a:hover { background: var(--dxb-green-tint); color: var(--dxb-fg-2); }

/* header search */
.dxb-search { position: relative; }
.dxb-search__toggle {
	all: unset;
	cursor: pointer;
	width: 42px; height: 42px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--dxb-fg-3);
}
.dxb-search__toggle:hover { background: var(--dxb-bg-3); }
.dxb-search__toggle .dxb-i { width: 18px; height: 18px; }
.dxb-search__panel {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 8px;
	width: 380px;
	max-width: calc(100vw - 32px);
	background: #fff;
	border: 1px solid var(--dxb-stroke);
	border-radius: var(--dxb-r-lg);
	box-shadow: var(--dxb-shadow-lg);
	padding: 10px;
	z-index: 95;
}

/* bookmarks */
.dxb-header__bookmarks {
	position: relative;
	width: 42px; height: 42px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--dxb-fg-3);
}
.dxb-header__bookmarks:hover { background: var(--dxb-bg-3); color: var(--dxb-fg-3); }
.dxb-header__bookmarks .dxb-i { width: 18px; height: 18px; }
.dxb-header__bookmark-count {
	position: absolute;
	top: 2px; right: 2px;
	min-width: 17px; height: 17px;
	padding: 0 4px;
	border-radius: 9999px;
	background: var(--dxb-green);
	color: #1B2400;
	font-family: var(--dxb-font-head);
	font-weight: 700;
	font-size: 10.5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* shop CTA (menu) */
.dxb-header__cta { display: flex; margin: 0; padding: 0; list-style: none; }
.dxb-header__cta a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	padding: 0 20px;
	border-radius: var(--dxb-r-lg);
	background: var(--dxb-green);
	color: #1B2400;
	font-family: var(--dxb-font-head);
	font-weight: 700;
	font-size: 14.5px;
	white-space: nowrap;
}
.dxb-header__cta a:hover { background: var(--dxb-green-dark); color: #fff; box-shadow: var(--dxb-shadow-cta); }

/* burger + drawer */
.dxb-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 42px; height: 42px;
	border: 0;
	background: none;
	border-radius: 12px;
	cursor: pointer;
	padding: 10px;
}
.dxb-burger span { display: block; height: 2px; border-radius: 2px; background: var(--dxb-fg-2); }
.dxb-burger:hover { background: var(--dxb-bg-3); }

.dxb-drawer { position: fixed; inset: 0; z-index: 100; }
.dxb-drawer__scrim { position: absolute; inset: 0; background: rgba(17,24,44,0.5); border: 0; cursor: pointer; }
.dxb-drawer__panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 320px;
	max-width: 88vw;
	background: #fff;
	z-index: 2;
	padding: 18px;
	overflow: auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: -20px 0 40px rgba(17,24,39,0.15);
}
.dxb-drawer__head { display: flex; align-items: center; justify-content: space-between; }
.dxb-drawer__close { all: unset; cursor: pointer; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 16px; color: var(--dxb-fg-3); }
.dxb-drawer__close:hover { background: var(--dxb-bg-3); }
.dxb-drawer__nav { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.dxb-drawer__nav > li > a {
	display: block;
	padding: 12px 10px;
	border-radius: 10px;
	font-family: var(--dxb-font-head);
	font-weight: 500;
	font-size: 16px;
	color: var(--dxb-fg-2);
}
.dxb-drawer__nav > li > a:hover { background: var(--dxb-bg-3); }
.dxb-drawer__nav .sub-menu { margin: 0; padding: 0 0 6px 14px; list-style: none; }
.dxb-drawer__nav .sub-menu a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--dxb-fg-3); }
.dxb-drawer__cta { margin: auto 0 0; padding: 0; list-style: none; }
.dxb-drawer__cta a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	border-radius: var(--dxb-r-lg);
	background: var(--dxb-green);
	color: #1B2400;
	font-family: var(--dxb-font-head);
	font-weight: 700;
	font-size: 15px;
}

/* ── footer ── */
.dxb-footer { background: var(--dxb-dark); color: #fff; margin-top: auto; }
.dxb-footer__grid {
	padding-top: 56px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 44px;
}
.dxb-footer__about { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.dxb-footer__brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--dxb-font-head); font-weight: 700; font-size: 20px; letter-spacing: 0.02em; }
.dxb-footer__brand b { color: var(--dxb-green); }
.dxb-footer__about p { margin: 0; font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,0.65); }
.dxb-footer__socials { display: flex; gap: 8px; flex-wrap: wrap; }
.dxb-footer__socials a {
	width: 36px; height: 36px;
	border-radius: 11px;
	border: 1px solid rgba(255,255,255,0.18);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.85);
}
.dxb-footer__socials a:hover { background: rgba(255,255,255,0.08); color: var(--dxb-green); }
.dxb-footer__socials .dxb-i { width: 16px; height: 16px; }
.dxb-footer__col > b {
	display: block;
	font-family: var(--dxb-font-head);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.5);
	margin-bottom: 16px;
}
.dxb-footer__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; font-size: 14px; }
.dxb-footer__col a { color: rgba(255,255,255,0.85); }
.dxb-footer__col a:hover { color: var(--dxb-green); }
.dxb-footer__legal {
	margin-top: 44px;
	padding-top: 22px;
	padding-bottom: 26px;
	border-top: 1px solid rgba(255,255,255,0.12);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 12.5px;
	color: rgba(255,255,255,0.55);
}
.dxb-footer__legal a { color: rgba(255,255,255,0.85); }
.dxb-footer__legal a:hover { color: var(--dxb-green); }

/* ── responsive ── */
@media (max-width: 1150px) {
	.dxb-nav { display: none; }
	.dxb-burger { display: flex; }
}
@media (max-width: 900px) {
	.dxb-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1020px) {
	.dxb-topbar__tagline { display: none; }
}
@media (max-width: 760px) {
	.dxb-topbar__tagline, .dxb-topbar__link { display: none; }
	.dxb-topbar__inner { gap: 14px; }
	.dxb-topbar__spacer { display: block; }
	.dxb-header__inner { height: 62px; gap: 10px; }
	.dxb-logo img { height: 28px; }
	.dxb-header__cta { display: none; }
}
@media (max-width: 560px) {
	.dxb-footer__grid { grid-template-columns: 1fr; gap: 28px; }
	.dxb-footer__legal { flex-direction: column; align-items: flex-start; }
}