/**
 * Magezix HFB - Frontend CSS
 *
 * Uses CSS variables fed by inline <style> per template.
 */
.mzx-hfb {
	background: var(--mzx-hfb-bg, transparent);
	color: var(--mzx-hfb-color, inherit);
	font-size: var(--mzx-hfb-fs, inherit);
}
.mzx-hfb a { color: var(--mzx-hfb-link, inherit); }

.mzx-hfb-row { padding: var(--mzx-hfb-pad, 10px 0); }
.mzx-hfb-row-inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.mzx-hfb-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: center; }

.mzx-hfb-col--1  { grid-column: span 1; }
.mzx-hfb-col--2  { grid-column: span 2; }
.mzx-hfb-col--3  { grid-column: span 3; }
.mzx-hfb-col--4  { grid-column: span 4; }
.mzx-hfb-col--5  { grid-column: span 5; }
.mzx-hfb-col--6  { grid-column: span 6; }
.mzx-hfb-col--7  { grid-column: span 7; }
.mzx-hfb-col--8  { grid-column: span 8; }
.mzx-hfb-col--9  { grid-column: span 9; }
.mzx-hfb-col--10 { grid-column: span 10; }
.mzx-hfb-col--11 { grid-column: span 11; }
.mzx-hfb-col--12 { grid-column: span 12; }

.mzx-hfb-align--center { justify-self: center; text-align: center; }
.mzx-hfb-align--end    { justify-self: end; text-align: end; }

.mzx-hfb-el { display: inline-block; vertical-align: middle; }
.mzx-hfb-col .mzx-hfb-el + .mzx-hfb-el { margin-left: 12px; }

/* Logo */
.mzx-hfb-logo { display: flex; align-items: center; text-decoration: none; width: 100%; }
.mzx-hfb-logo-text { font-weight: 700; font-size: 1.4em; }

/* Menu */
.mzx-hfb-menu-list { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.mzx-hfb-menu--vertical .mzx-hfb-menu-list { flex-direction: column; }
.mzx-hfb-menu-list a { text-decoration: none; }
/* Dropdown arrows (WordPress adds .menu-item-has-children) */
.mzx-hfb-menu-list li.menu-item-has-children > a::after {
	content: "\25BE"; /* ▾ */ margin-inline-start: 5px; font-size: .75em; opacity: .75;
	display: inline-block; transition: transform .2s ease;
}
.mzx-hfb-menu-list li.menu-item-has-children:hover > a::after { transform: rotate(-180deg); }
/* Arrow for nested levels (right-pointing) */
.mzx-hfb-menu-list .sub-menu li.menu-item-has-children > a::after {
	content: "\203A"; /* › */ transform: none;
}
.mzx-hfb-menu-list .sub-menu li.menu-item-has-children:hover > a::after { transform: none; }

/* Buttons */
.mzx-hfb-btn { display: inline-block; padding: 8px 16px; border-radius: 4px; text-decoration: none; font-weight: 600; }
.mzx-hfb-btn--primary   { background: #2271b1; color: #fff; }
.mzx-hfb-btn--secondary { background: transparent; color: inherit; border: 1px solid currentColor; }
.mzx-hfb-btn--ghost     { background: transparent; color: inherit; }

/* Social */
.mzx-hfb-social { display: inline-flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.mzx-hfb-social a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; text-decoration: none; }
.mzx-hfb-social a:hover { background: rgba(0,0,0,.06); }

/* Search */
.mzx-hfb-search-toggle { background: none; border: 0; cursor: pointer; }
.mzx-hfb-search-popup { display: none; position: absolute; top: 100%; right: 0; background: #fff; padding: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.1); z-index: 1000; }
.mzx-hfb-search-popup.is-open { display: block; }
.mzx-hfb-search--inline { display: inline-flex; }
.mzx-hfb-search--inline input { padding: 6px 10px; border: 1px solid #ddd; border-radius: 3px 0 0 3px; }
.mzx-hfb-search--inline button { padding: 6px 10px; border: 1px solid #ddd; border-left: 0; background: #f6f7f7; border-radius: 0 3px 3px 0; cursor: pointer; }

/* Lang */
.mzx-hfb-lang { display: inline-flex; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: .9em; }

/* Sticky */
.mzx-hfb--sticky { position: sticky; top: 0; z-index: 999; transition: transform .25s; }
.mzx-hfb--sticky-hide.is-hidden { transform: translateY(-100%); }

/* Off-canvas */
.mzx-hfb-offcanvas {
	position: fixed; inset: 0 auto 0 0; width: 320px; max-width: 90vw;
	background: #fff; box-shadow: 4px 0 24px rgba(0,0,0,.15);
	transform: translateX(-100%); transition: transform .3s; z-index: 9999;
}
.mzx-hfb-offcanvas.is-open { transform: translateX(0); }
.mzx-hfb-offcanvas[hidden] { display: block; }
.mzx-hfb-offcanvas-close { position: absolute; top: 8px; right: 8px; background: none; border: 0; font-size: 28px; cursor: pointer; }
.mzx-hfb-offcanvas-inner { padding: 48px 20px 20px; }

/* Mega menu (basic) */
.mzx-hfb-megamenu .sub-menu {
	display: none; position: absolute; left: 0; right: 0;
	background: #fff; padding: 20px; box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.mzx-hfb-megamenu li:hover > .sub-menu { display: grid; grid-template-columns: repeat(var(--mzx-mega-cols,4), 1fr); gap: 16px; }

/* Breaking news */
.mzx-hfb-breaking { display: inline-flex; align-items: center; gap: 12px; overflow: hidden; }
.mzx-hfb-breaking-label { background: #d63638; color: #fff; padding: 4px 10px; border-radius: 3px; font-weight: 700; }
.mzx-hfb-breaking-list { display: inline-flex; gap: 24px; list-style: none; margin: 0; padding: 0; animation: mzxhfb-ticker 30s linear infinite; }
@keyframes mzxhfb-ticker { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

/* Newsletter */
.mzx-hfb-newsletter-form { display: flex; gap: 0; max-width: 360px; }
.mzx-hfb-newsletter-form input { flex: 1; padding: 8px 10px; border: 1px solid #ddd; border-radius: 3px 0 0 3px; }
.mzx-hfb-newsletter-form button { padding: 8px 14px; background: #2271b1; color: #fff; border: 0; border-radius: 0 3px 3px 0; cursor: pointer; }

/* Responsive hide */
@media (min-width: 1024px) { .mzx-hfb-hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1023px) { .mzx-hfb-hide-tablet  { display: none !important; } }
@media (max-width: 767px) { .mzx-hfb-hide-mobile { display: none !important; } }

/* RTL */
.mzx-hfb--lang-ar { direction: rtl; text-align: right; }
.mzx-hfb--lang-ar .mzx-hfb-col .mzx-hfb-el + .mzx-hfb-el { margin-left: 0; margin-right: 12px; }

/* ==========================================================================
   Magezix HFB - Frontend enhancements (menu / social / breaking news)
   ========================================================================== */

/* Alignment helpers on grid columns (justify-self positions the col within the grid track) */
.mzx-hfb-col.mzx-hfb-align--start  { justify-items: start; }
.mzx-hfb-col.mzx-hfb-align--center { justify-items: center; }
.mzx-hfb-col.mzx-hfb-align--end    { justify-items: end; }

/* ===== Navigation menu ===== */
.mzx-hfb-menu { display: block; }
.mzx-hfb-menu .mzx-hfb-menu-list,
.mzx-hfb-menu-list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; align-items: center;
	gap: var(--mzx-menu-gap, 24px);
}
.mzx-hfb-menu--vertical .mzx-hfb-menu-list { flex-direction: column; align-items: flex-start; }
.mzx-hfb-menu-list li { position: relative; }
.mzx-hfb-menu-list a {
display: inline-block; padding: 8px 4px; line-height: 1.2;
text-decoration: none; color: inherit; transition: color .15s ease, background .15s ease;
font-weight: 500;
}
.mzx-hfb-menu-list a:hover,
.mzx-hfb-menu-list .current-menu-item > a { color: var(--mzx-hfb-link, #2271b1); }

/* Pill style */
.mzx-hfb-menu--pill .mzx-hfb-menu-list a {
padding: 8px 14px; border-radius: 999px;
}
.mzx-hfb-menu--pill .mzx-hfb-menu-list a:hover,
.mzx-hfb-menu--pill .mzx-hfb-menu-list .current-menu-item > a {
background: var(--mzx-hfb-link, #2271b1); color: #fff;
}

/* Underline style */
.mzx-hfb-menu--underline .mzx-hfb-menu-list a { position: relative; }
.mzx-hfb-menu--underline .mzx-hfb-menu-list a::after {
content: ""; position: absolute; left: 4px; right: 4px; bottom: 2px;
height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left center;
transition: transform .25s ease;
}
.mzx-hfb-menu--underline .mzx-hfb-menu-list a:hover::after,
.mzx-hfb-menu--underline .mzx-hfb-menu-list .current-menu-item > a::after { transform: scaleX(1); }

/* Sub-menus */
.mzx-hfb-menu-list .sub-menu {
list-style: none; margin: 0; padding: 6px 0;
position: absolute; top: 100%; left: 0; min-width: 200px;
background: #fff; color: #1d2327; border: 1px solid rgba(0,0,0,.08);
border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.08);
opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
z-index: 50;
}
.mzx-hfb-menu-list li:hover > .sub-menu,
.mzx-hfb-menu-list li:focus-within > .sub-menu {
opacity: 1; visibility: visible; transform: translateY(0);
}
.mzx-hfb-menu-list .sub-menu a { display: block; padding: 8px 14px; }
.mzx-hfb-menu-list .sub-menu a:hover { background: rgba(0,0,0,.04); }
.mzx-hfb-menu-list .sub-menu .sub-menu { top: 0; left: 100%; }

/* ===== Social icons ===== */
.mzx-hfb-social {
list-style: none; margin: 0; padding: 0;
display: inline-flex; align-items: center; gap: 8px;
}
.mzx-hfb-social a {
display: inline-flex; align-items: center; justify-content: center;
width: var(--mzx-soc-size, 32px); height: var(--mzx-soc-size, 32px);
color: inherit; background: rgba(0,0,0,.06); text-decoration: none;
transition: background .15s ease, color .15s ease, transform .15s ease;
}
.mzx-hfb-social a:hover { background: var(--mzx-hfb-link, #2271b1); color: #fff; transform: translateY(-1px); }
.mzx-hfb-social a .dashicons { font-size: calc(var(--mzx-soc-size, 32px) * .55); width: 1em; height: 1em; line-height: 1; }
.mzx-hfb-social--circle  a { border-radius: 50%; }
.mzx-hfb-social--rounded a { border-radius: 6px; }
.mzx-hfb-social--square  a { border-radius: 0; }
.mzx-hfb-social--plain   a { background: transparent; }
.mzx-hfb-social--plain   a:hover { background: transparent; color: var(--mzx-hfb-link, #2271b1); }

/* Brand color hints (override on hover) */
.mzx-hfb-social-facebook:hover  { background: #1877f2 !important; color: #fff !important; }
.mzx-hfb-social-twitter:hover   { background: #000 !important;    color: #fff !important; }
.mzx-hfb-social-instagram:hover { background: #e1306c !important; color: #fff !important; }
.mzx-hfb-social-youtube:hover   { background: #ff0000 !important; color: #fff !important; }
.mzx-hfb-social-linkedin:hover  { background: #0a66c2 !important; color: #fff !important; }
.mzx-hfb-social-tiktok:hover    { background: #000 !important;    color: #fff !important; }
.mzx-hfb-social-whatsapp:hover  { background: #25d366 !important; color: #fff !important; }

/* ===== Breaking news ===== */
.mzx-hfb-breaking {
display: flex; align-items: stretch; gap: 12px;
background: #f6f7f7; border-radius: 4px;
overflow: hidden; max-width: 100%;
}
.mzx-hfb-breaking-label {
display: inline-flex; align-items: center; padding: 6px 14px;
background: #d63638; color: #fff; font-weight: 700; font-size: 13px;
letter-spacing: .5px; text-transform: uppercase;
clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
flex: 0 0 auto;
}
.mzx-hfb-breaking-track {
flex: 1; min-width: 0; overflow: hidden; position: relative;
display: flex; align-items: center;
}
.mzx-hfb-breaking-list {
list-style: none; margin: 0; padding: 0;
display: flex; gap: 32px; align-items: center;
white-space: nowrap;
}
.mzx-hfb-breaking-item a {
display: inline-flex; align-items: center; gap: 8px;
color: inherit; text-decoration: none; padding: 6px 0;
}
.mzx-hfb-breaking-item a:hover .mzx-hfb-breaking-title { color: var(--mzx-hfb-link, #2271b1); }
.mzx-hfb-breaking-item time { font-size: 11px; color: #8c8f94; flex: 0 0 auto; }
.mzx-hfb-breaking-title {
	display: inline-block; max-width: 60ch;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	vertical-align: middle; line-height: 1.35;
}

/* Marquee */
.mzx-hfb-breaking--marquee .mzx-hfb-breaking-track .mzx-hfb-breaking-list {
animation: mzxBreakingMarquee 28s linear infinite;
flex-wrap: nowrap;
}
.mzx-hfb-breaking--marquee:hover .mzx-hfb-breaking-list { animation-play-state: paused; }
@keyframes mzxBreakingMarquee {
0%   { transform: translateX(0); }
100% { transform: translateX(-50%); }
}

/* Slide (one at a time) */
.mzx-hfb-breaking--slide .mzx-hfb-breaking-list {
flex-direction: column; gap: 0;
height: 1.6em; align-items: flex-start;
}
.mzx-hfb-breaking--slide .mzx-hfb-breaking-item {
height: 1.6em; line-height: 1.6em;
animation: mzxBreakingSlide 12s ease-in-out infinite;
}

@keyframes mzxBreakingSlide {
0%, 18%   { transform: translateY(0);     opacity: 1; }
22%, 100% { transform: translateY(-100%); opacity: 0; }
}

.mzx-hfb-breaking--none .mzx-hfb-breaking-list { flex-wrap: wrap; }

/* RTL: reverse marquee direction */
[dir="rtl"] .mzx-hfb-breaking--marquee .mzx-hfb-breaking-list {
animation-direction: reverse;
}

/* Logo alignment — width:100% on .mzx-hfb-logo makes justify-content work */
.mzx-hfb-logo.mzx-hfb-align--start  { justify-content: flex-start; }
.mzx-hfb-logo.mzx-hfb-align--center { justify-content: center; }
.mzx-hfb-logo.mzx-hfb-align--end    { justify-content: flex-end; }


/* =====================================================================
   ADVANCED ELEMENT STYLES — CSS-variable driven by inline <style> blocks
   ===================================================================== */

/* ── Row: border, shadow, radius ──────────────────────────────────── */
.mzx-hfb-row {
box-shadow:      var(--row-shadow, none);
border-radius:   var(--row-radius, 0);
min-height:      var(--row-min-h, auto);
backdrop-filter: var(--row-blur, none);
-webkit-backdrop-filter: var(--row-blur, none);
position:        relative;
}
/* Overlay pseudo */
.mzx-hfb-row[data-overlay]::before {
content: '';
position: absolute; inset: 0;
background: var(--row-overlay-color, transparent);
opacity: var(--row-overlay-opacity, 0.5);
pointer-events: none;
z-index: 0;
}
.mzx-hfb-row[data-overlay] > * { position: relative; z-index: 1; }

/* ── Sticky row visibility ────────────────────────────────────────── */
.mzx-hfb--sticky .mzx-hfb-row--sticky-hide {
transition: var(--sticky-row-transition, opacity .3s ease, max-height .3s ease);
}
.mzx-hfb--sticky.is-sticky .mzx-hfb-row--sticky-hide-fade   { opacity: 0; max-height: 0; overflow: hidden; padding: 0; }
.mzx-hfb--sticky.is-sticky .mzx-hfb-row--sticky-hide-slide  { transform: translateY(-100%); transition: transform .3s ease; }
.mzx-hfb--sticky[data-sticky-bg] { background: var(--sticky-bg) !important; box-shadow: var(--sticky-shadow, none); }

/* ── Column style vars ────────────────────────────────────────────── */
.mzx-hfb-col {
box-shadow:    var(--col-shadow, none);
border-radius: var(--col-radius, 0);
}

/* ── Logo element styles ──────────────────────────────────────────── */
.mzx-hfb-el--logo { filter: var(--logo-filter, none); }
.mzx-hfb-el--logo img { filter: var(--logo-img-shadow, none); transition: filter .2s ease, transform .2s ease, opacity .2s ease; }
.mzx-hfb-el--logo[data-hover="opacity"]  img:hover { opacity: .7; }
.mzx-hfb-el--logo[data-hover="scale"]   img:hover { transform: scale(1.05); }
.mzx-hfb-el--logo[data-hover="glow"]    img:hover { filter: var(--logo-img-shadow,none) drop-shadow(0 0 8px rgba(34,113,177,.5)); }

/* ── Menu element styles (CSS-variable fed by inline style) ────────── */
.mzx-hfb-el--menu { --menu-link: inherit; --menu-link-hover: var(--mzx-hfb-link,#2271b1); --menu-link-hover-bg: transparent; --menu-active: var(--mzx-hfb-link,#2271b1); }
.mzx-hfb-el--menu .mzx-hfb-menu-list > li > a { color: var(--menu-link); font-size: var(--menu-fs,inherit); font-weight: var(--menu-fw,inherit); }
.mzx-hfb-el--menu .mzx-hfb-menu-list > li > a:hover { color: var(--menu-link-hover); background: var(--menu-link-hover-bg); }
.mzx-hfb-el--menu .mzx-hfb-menu-list > li.current-menu-item > a { color: var(--menu-active); }
.mzx-hfb-el--menu .mzx-hfb-menu-list .sub-menu { background: var(--menu-dd-bg,#fff); color: var(--menu-dd-color,inherit); box-shadow: var(--menu-dd-shadow,0 8px 24px rgba(0,0,0,.08)); }
.mzx-hfb-el--menu .mzx-hfb-menu-list .sub-menu a { color: var(--menu-dd-color,inherit); }

/* ── Button element styles ────────────────────────────────────────── */
.mzx-hfb-el--button .mzx-hfb-btn {
background:    var(--btn-bg,    #2271b1);
color:         var(--btn-color, #fff);
padding:       var(--btn-pad,   8px 16px);
border-radius: var(--btn-radius,4px);
font-size:     var(--btn-fs,    14px);
font-weight:   var(--btn-fw,    600);
border:        var(--btn-border,none);
box-shadow:    var(--btn-shadow,none);
transition:    var(--btn-transition,.2s ease);
position: relative; overflow: hidden;
}
.mzx-hfb-el--button .mzx-hfb-btn:hover { background: var(--btn-hover-bg,#135e96); color: var(--btn-hover-color,#fff); }

/* Button hover effects */
.mzx-hfb-el--button[data-hover="lift"]  .mzx-hfb-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.mzx-hfb-el--button[data-hover="scale"] .mzx-hfb-btn:hover { transform: scale(1.05); }
.mzx-hfb-el--button[data-hover="glow"]  .mzx-hfb-btn:hover { box-shadow: 0 0 0 4px rgba(var(--btn-glow-rgb,34,113,177),.3); }
.mzx-hfb-el--button[data-hover="fill"]  .mzx-hfb-btn::before {
content: ''; position: absolute; inset: 0 0 100% 0;
background: var(--btn-hover-bg,#135e96); transition: inset var(--btn-transition,.2s ease); z-index: 0;
}
.mzx-hfb-el--button[data-hover="fill"]  .mzx-hfb-btn:hover::before { inset: 0; }
.mzx-hfb-el--button[data-hover="fill"]  .mzx-hfb-btn > * { position: relative; z-index: 1; }

/* ── Social Icons advanced styles ──────────────────────────────────── */
.mzx-hfb-el--social .mzx-hfb-social {
gap: var(--soc-gap, 8px);
}
.mzx-hfb-el--social .mzx-hfb-social a {
color:         var(--soc-icon-color,  inherit);
background:    var(--soc-bg-color,    rgba(0,0,0,.06));
border:        var(--soc-border,      none);
border-radius: var(--soc-radius,      inherit);
transition:    background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.mzx-hfb-el--social .mzx-hfb-social a:hover {
color:      var(--soc-hover-icon,  #fff);
background: var(--soc-hover-bg,    var(--mzx-hfb-link,#2271b1));
}
/* Hover effects */
.mzx-hfb-el--social[data-hover="lift"]   .mzx-hfb-social a:hover { transform: translateY(-3px); }
.mzx-hfb-el--social[data-hover="scale"]  .mzx-hfb-social a:hover { transform: scale(1.15); }
.mzx-hfb-el--social[data-hover="rotate"] .mzx-hfb-social a:hover { transform: rotate(8deg) scale(1.1); }
.mzx-hfb-el--social[data-hover="brand-color"] .mzx-hfb-social-facebook:hover  { background: #1877f2 !important; color: #fff !important; }
.mzx-hfb-el--social[data-hover="brand-color"] .mzx-hfb-social-twitter:hover   { background: #000 !important;    color: #fff !important; }
.mzx-hfb-el--social[data-hover="brand-color"] .mzx-hfb-social-instagram:hover { background: #e1306c !important; color: #fff !important; }
.mzx-hfb-el--social[data-hover="brand-color"] .mzx-hfb-social-youtube:hover   { background: #ff0000 !important; color: #fff !important; }
.mzx-hfb-el--social[data-hover="brand-color"] .mzx-hfb-social-linkedin:hover  { background: #0a66c2 !important; color: #fff !important; }
.mzx-hfb-el--social[data-hover="brand-color"] .mzx-hfb-social-tiktok:hover    { background: #000 !important;    color: #fff !important; }
.mzx-hfb-el--social[data-hover="brand-color"] .mzx-hfb-social-whatsapp:hover  { background: #25d366 !important; color: #fff !important; }

/* ── Search element styles ────────────────────────────────────────── */
.mzx-hfb-el--search .mzx-hfb-search-toggle .dashicons { color: var(--search-icon-color, inherit); }
.mzx-hfb-el--search .mzx-hfb-search--inline input {
background: var(--search-input-bg,     #fff);
border-color: var(--search-input-border,#ddd);
border-radius: var(--search-input-radius,3px 0 0 3px);
width: var(--search-input-width, auto);
}

/* ── Breaking news styles ─────────────────────────────────────────── */
.mzx-hfb-el--breaking_news .mzx-hfb-breaking {
background:    var(--bn-ticker-bg,    #f6f7f7);
border-radius: var(--bn-radius,       4px);
}
.mzx-hfb-el--breaking_news .mzx-hfb-breaking-label {
background: var(--bn-label-bg,    #d63638);
color:      var(--bn-label-color, #fff);
}
.mzx-hfb-el--breaking_news .mzx-hfb-breaking-item a { color: var(--bn-ticker-color, inherit); }
.mzx-hfb-el--breaking_news .mzx-hfb-breaking--marquee .mzx-hfb-breaking-list {
animation-duration: var(--bn-speed, 30s);
}

/* ── Language Switcher styles ─────────────────────────────────────── */
.mzx-hfb-el--lang_switcher .mzx-hfb-lang a { color: var(--ls-color, inherit); }
.mzx-hfb-el--lang_switcher .mzx-hfb-lang a:hover { color: var(--ls-hover-color, var(--mzx-hfb-link,#2271b1)); }
.mzx-hfb-el--lang_switcher[data-ls-style="boxed"] .mzx-hfb-lang a {
border: 1px solid currentColor; border-radius: 3px; padding: 2px 8px;
}
.mzx-hfb-el--lang_switcher[data-ls-style="pill"] .mzx-hfb-lang a {
border: 1px solid currentColor; border-radius: 999px; padding: 3px 12px;
}
.mzx-hfb-el--lang_switcher .mzx-hfb-lang li.current-lang a {
background: var(--ls-active-bg,    transparent);
color:      var(--ls-active-color, var(--mzx-hfb-link,#2271b1));
font-weight: 700;
}

/* ── Text-type elements (html / copyright / date_time) ────────────── */
.mzx-hfb-el--html,
.mzx-hfb-el--copyright,
.mzx-hfb-el--date_time {
font-size:     var(--txt-fs,      inherit);
color:         var(--txt-color,   inherit);
text-align:    var(--txt-align,   inherit);
background:    var(--txt-bg,      transparent);
padding:       var(--txt-padding, 0);
border-radius: var(--txt-radius,  0);
}

/* ── Newsletter element styles ────────────────────────────────────── */
.mzx-hfb-el--newsletter .mzx-hfb-newsletter-form input {
background:   var(--nl-input-bg,     #fff);
border-color: var(--nl-input-border, #ddd);
border-radius: var(--nl-radius,      3px 0 0 3px);
}
.mzx-hfb-el--newsletter .mzx-hfb-newsletter-form button {
background:   var(--nl-btn-bg,    #2271b1);
color:        var(--nl-btn-color, #fff);
border-radius: 0 var(--nl-radius,3px) var(--nl-radius,3px) 0;
}

/* ── Widget area styles ───────────────────────────────────────────── */
.mzx-hfb-el--widget_area .mzx-hfb-widgetarea {
background:    var(--wa-bg,      transparent);
color:         var(--wa-color,   inherit);
padding:       var(--wa-padding, 0);
border:        var(--wa-border,  none);
border-radius: var(--wa-radius,  0);
}

/* ── Universal element wrapper spacing ────────────────────────────── */
.mzx-hfb-el {
padding: var(--el-padding, 0);
margin:  var(--el-margin,  0);
}

/* ==========================================================================
   RESPONSIVE LAYOUT  — added for full mobile support
   ========================================================================== */

/* ── Tablet (768–1023 px) ─────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
.mzx-hfb-row-inner { padding: 0 16px; }
.mzx-hfb-grid      { gap: 12px; }
}

/* ── Mobile (≤ 767 px) ────────────────────────────────────────────── */
@media (max-width: 767px) {
.mzx-hfb-row-inner { padding: 0 12px; }

/* Collapse 12-column grid to a flex row so items size by content. */
.mzx-hfb-grid {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
}
/* Small elements (logo, buttons, icons) keep their natural width. */
[class*="mzx-hfb-col--"] {
grid-column: unset !important;
flex: 0 0 auto;
}
/* Mid-large columns (menus, search, etc.) grow to fill remaining space. */
.mzx-hfb-col--5,  .mzx-hfb-col--6,  .mzx-hfb-col--7,
.mzx-hfb-col--8,  .mzx-hfb-col--9 {
flex: 1 1 0;
min-width: 0;
}
}

/* ── Mobile hamburger toggle ──────────────────────────────────────── */
.mzx-hfb-mob-toggle { display: none; }   /* hidden on desktop */

.mzx-hfb-menu-wrap {
display: inline-flex;
align-items: center;
}

@media (max-width: 767px) {
.mzx-hfb-mob-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
background: none; border: 0; cursor: pointer;
color: inherit; flex: 0 0 auto;
border-radius: 4px;
transition: background .15s ease;
}
.mzx-hfb-mob-toggle:hover  { background: rgba(0,0,0,.06); }
.mzx-hfb-mob-toggle .dashicons { font-size: 22px; width: 22px; height: 22px; }

/* Wrap takes full column width; hamburger aligns to inline-end */
.mzx-hfb-menu-wrap {
display: flex;
width: 100%;
justify-content: flex-end;
}
/* Hide desktop nav; only hamburger stays visible */
.mzx-hfb-menu-wrap .mzx-hfb-menu { display: none !important; }
}

/* RTL: hamburger at inline-start (right → left becomes left → right) */
[dir="rtl"] .mzx-hfb-menu-wrap { justify-content: flex-start; }

/* ── Global backdrop for offcanvas (injected by JS) ──────────────── */
.mzx-hfb-offcanvas-backdrop {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,.45);
z-index: 9998;
opacity: 0;
transition: opacity .3s ease;
}
.mzx-hfb-offcanvas-backdrop.is-visible {
display: block;
opacity: 1;
}
/* Prevent body scroll while offcanvas is open */
body.mzx-hfb-oc-open { overflow: hidden; }

/* ── RTL offcanvas: slides from right ────────────────────────────── */
[dir="rtl"] .mzx-hfb-offcanvas,
.mzx-hfb--lang-ar .mzx-hfb-offcanvas {
inset: 0 0 0 auto;
transform: translateX(100%);
}
[dir="rtl"] .mzx-hfb-offcanvas.is-open,
.mzx-hfb--lang-ar .mzx-hfb-offcanvas.is-open {
transform: translateX(0);
}

/* ── Offcanvas: vertical nav styles ──────────────────────────────── */
.mzx-hfb-offcanvas .mzx-hfb-menu-list {
flex-direction: column;
gap: 2px;
}
.mzx-hfb-offcanvas .mzx-hfb-menu-list a {
padding: 10px 16px;
display: block;
border-radius: 4px;
white-space: normal;
}
.mzx-hfb-offcanvas .mzx-hfb-menu-list a:hover { background: rgba(0,0,0,.05); }

/* ── Parent item row: link + toggle arrow side-by-side ───────────── */
.mzx-hfb-offcanvas .mzx-hfb-menu-list .menu-item-has-children {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.mzx-hfb-offcanvas .mzx-hfb-menu-list .menu-item-has-children > a {
flex: 1;
/* Remove the default CSS ::after arrow — JS renders its own button */
}
.mzx-hfb-offcanvas .mzx-hfb-menu-list .menu-item-has-children > a::after {
display: none !important;
}
/* Accordion toggle button added by JS */
.mzx-hfb-oc-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
border: 0;
background: transparent;
cursor: pointer;
color: inherit;
flex: 0 0 40px;
transition: transform .2s ease, background .15s ease;
border-radius: 4px;
}
.mzx-hfb-oc-toggle:hover { background: rgba(0,0,0,.06); }
.mzx-hfb-oc-toggle svg { transition: transform .25s ease; }
.menu-item-has-children.is-oc-open > .mzx-hfb-oc-toggle svg { transform: rotate(180deg); }

/* ── Sub-menus: collapsed by default, slide open via JS ──────────── */
.mzx-hfb-offcanvas .mzx-hfb-menu-list .sub-menu {
/* Reset desktop dropdown positioning */
position: static !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
box-shadow: none !important;
border: none !important;
background: transparent !important;
/* Collapsed state */
display: none;
width: 100%;
padding: 0 0 0 16px;
}
.mzx-hfb-offcanvas .mzx-hfb-menu-list .sub-menu.is-oc-open {
display: block;
}
[dir="rtl"] .mzx-hfb-offcanvas .mzx-hfb-menu-list .sub-menu { padding: 0 16px 0 0; }

/* ── Per-element device visibility (already in earlier section,
      kept here for completeness — no-op if already declared) ──────── */
@media (min-width: 1024px) { .mzx-hfb-hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1023px) { .mzx-hfb-hide-tablet { display: none !important; } }
@media (max-width: 767px) { .mzx-hfb-hide-mobile { display: none !important; } }