/* MadHeader — base front-end styles.
   All tunables are CSS custom properties emitted inline by Dynamic_CSS (.mh-root{...}).
   Defaults below are fallbacks only, so the header still looks sane if the var block is absent. */

.mh-root {
	--mh-breakpoint: 782px;
	--mh-btn-size: 30px;
	--mh-btn-thickness: 2px;
	--mh-btn-gap: 7px;
	--mh-btn-color: #111112;
	--mh-btn-color-active: #ffffff;
	--mh-btn-top: 14px;
	--mh-btn-side: 16px;
	--mh-drawer-width: 320px;
	--mh-drawer-bg: #111112;
	--mh-drawer-padding: 32px;
	--mh-overlay-color: #000000;
	--mh-overlay-opacity: 0.5;
	--mh-item-size: 18px;
	--mh-item-color: #d7d7d7;
	--mh-item-color-hover: #ffffff;
	--mh-item-gap: 14px;
	--mh-drawer-duration: 0.45s;
	--mh-drawer-ease: cubic-bezier(.22, 1, .36, 1);
	--mh-btn-duration: 0.25s;
	--mh-btn-ease: ease;
	--mh-overlay-duration: 0.4s;
	--mh-item-stagger: 60ms;
	--mh-item-duration: 0.5s;
	--mh-item-distance: 16px;
	--mh-bar-height: 60px;
	--mh-bar-bg: #ffffff;
	--mh-bar-opacity: 1;
	--mh-bar-blur: 0px;
	--mh-bar-logo-h: 32px;
	--mh-elem-color: #111112;
	--mh-elem-size: 22px;

	font-family: var(--mh-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}

/* ======================  HEADER BAR  ====================== */

/* Bar background strip — logo and elements sit inside as absolute children.
   Sits BELOW the drawer so the drawer slides over it. Button floats separately above all. */
.mh-bar {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 400; /* below drawer (500) and overlay (490) */
	height: var(--mh-bar-height);
	box-sizing: border-box;
	background: color-mix(in srgb, var(--mh-bar-bg) calc(var(--mh-bar-opacity) * 100%), transparent);
	-webkit-backdrop-filter: blur(var(--mh-bar-blur));
	backdrop-filter: blur(var(--mh-bar-blur));
	transition: transform .25s ease;
}
.mh-root--bar-shadow .mh-bar { box-shadow: 0 1px 10px rgba(0, 0, 0, .08); }

/* Logo wrapper — absolute inside bar, centred by default. */
.mh-bar-logo {
	position: absolute;
	top: 0; bottom: 0;
	display: flex; align-items: center;
	left: 50%; transform: translateX(-50%);
	pointer-events: auto;
}
.mh-bar-logo a { display: inline-flex; align-items: center; }
.mh-bar-logo img { height: var(--mh-bar-logo-h); width: auto; display: block; }

/* Logo alignment overrides */
.mh-root--logo-left   .mh-bar-logo { left: 16px; transform: none; right: auto; }
.mh-root--logo-right  .mh-bar-logo { left: auto; right: 16px; transform: none; }
.mh-root--logo-center .mh-bar-logo { left: 50%; transform: translateX(-50%); right: auto; }

/* Action elements wrapper — absolute inside bar. Side determined by elem.side setting. */
.mh-bar-elems {
	position: absolute;
	top: 0; bottom: 0;
	display: flex; align-items: center; gap: var(--mh-elem-gap, 4px);
}
/* Auto (default): opposite the button */
.mh-root--btn-right.mh-root--elems-auto .mh-bar-elems { left: 8px; right: auto; }
.mh-root--btn-left.mh-root--elems-auto  .mh-bar-elems { right: 8px; left: auto; }
/* Explicit overrides */
.mh-root--elems-left  .mh-bar-elems { left: 8px; right: auto; }
.mh-root--elems-right .mh-bar-elems { right: 8px; left: auto; }

/* Action elements (icons) */
.mh-elem {
	display: inline-flex; align-items: center; justify-content: center;
	position: relative;
	width: calc(var(--mh-elem-size) + 12px); height: calc(var(--mh-elem-size) + 12px);
	color: var(--mh-elem-color) !important;
	background: transparent !important; border: 0 !important; cursor: pointer; text-decoration: none !important;
}
.mh-elem svg { width: var(--mh-elem-size); height: var(--mh-elem-size); fill: currentColor; stroke: currentColor; }
.mh-elem svg[fill="none"] { fill: none; }
.mh-elem__img { width: var(--mh-elem-size); height: var(--mh-elem-size); object-fit: contain; }
.mh-elem__fa { font-size: var(--mh-elem-size); line-height: 1; display: inline-flex; align-items: center; color: inherit !important; }
.mh-elem__badge {
	position: absolute; top: 2px; right: 0;
	min-width: 16px; height: 16px; padding: 0 4px;
	font-size: 10px; line-height: 16px; font-weight: 700; text-align: center;
	color: #fff; background: #ef4444; border-radius: 999px;
}
/* Push the page down so the fixed bar doesn't overlap content (body class set by JS). */
body.mh-has-bar { padding-top: var(--mh-bar-height, 60px); }

/* ======================  IMAGE MENU (taptap-style grid)  ====================== */
.mh-imenu {
	display: grid;
	grid-template-columns: repeat(var(--mh-imenu-cols, 2), 1fr);
	gap: 10px;
	margin: 6px 0;
}
.mh-imenu__tile {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	padding: 14px 8px;
	color: var(--mh-item-color, #d7d7d7) !important;
	text-decoration: none !important;
	border-radius: 10px;
	background: rgba(255, 255, 255, .06);
	transition: background .2s ease, color .2s ease;
}
.mh-imenu__tile:hover { background: rgba(255, 255, 255, .12); color: var(--mh-item-color-hover, #fff) !important; }
.mh-imenu__img {
	width: 100%; aspect-ratio: 16 / 10; border-radius: 8px;
	background-size: cover; background-position: center; background-color: #2a2d34;
}
.mh-imenu__img--blank { background: linear-gradient(135deg, #3a3d44, #23262c); }
.mh-imenu__icon { width: 40px; height: 40px; display: inline-flex; }
.mh-imenu__icon svg { width: 100%; height: 100%; fill: currentColor; }
.mh-imenu__label { font-size: 14px; font-weight: 600; text-align: center; }

/* ---- Mobile-only: hidden by default, shown under the breakpoint ----
   .mh-root--always opts out (shows on all sizes). */
.mh-root { display: none; }
.mh-root--always { display: block; }
@media (max-width: 782px) { /* static fallback; the real value is the var below */
	.mh-root--mobile_only { display: block; }
}
@media (max-width: 1024px) { /* static fallback for mobile+tablet; JS refines to --mh-breakpoint-tablet */
	.mh-root--mobile_tablet { display: block; }
}
@media (max-width: 99999px) {
	/* The editable breakpoint: a container query isn't available cross-browser for media,
	   so we also gate via a max-width using the var through a wrapper trick below. */
}
/* Editable breakpoint via the custom property (modern browsers support media range + env is N/A,
   so we use a width comparison with a CSS variable through @media is not possible; instead we
   show on mobile_only up to the var by toggling a class from JS as a safety — see madheader.js).
   The static 782px query above covers the common case; JS refines it to the exact var. */

/* ======================  BUTTON  ====================== */
/* Floating button — independently fixed, above everything. Every geometric property is
   !important so theme :hover rules (hello-elementor adds padding/border/transition to all
   buttons) cannot shift its position or size in any state. */
.mh-button,
.mh-button:hover,
.mh-button:focus,
.mh-button:active {
	position: fixed !important;
	top: var(--mh-btn-top) !important;
	z-index: 510 !important; /* button > drawer (500) > overlay (490) > bar (400) */
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: calc(var(--mh-btn-size) + 12px) !important;
	height: calc(var(--mh-btn-size) + 12px) !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	transform: none !important;
	translate: none !important;
	transition: none !important;
	outline: none !important;
	cursor: pointer !important;
	-webkit-tap-highlight-color: transparent;
	text-decoration: none !important;
	color: inherit !important;
	font-size: inherit !important;
	line-height: 1 !important;
	border-radius: 0 !important;
}
.mh-button:focus-visible { outline: 2px solid var(--mh-btn-color) !important; outline-offset: 2px !important; }
.mh-root--btn-right .mh-button,
.mh-root--btn-right .mh-button:hover,
.mh-root--btn-right .mh-button:focus,
.mh-root--btn-right .mh-button:active { right: var(--mh-btn-side) !important; left: auto !important; }
.mh-root--btn-left .mh-button,
.mh-root--btn-left .mh-button:hover,
.mh-root--btn-left .mh-button:focus,
.mh-root--btn-left .mh-button:active  { left: var(--mh-btn-side) !important;  right: auto !important; }

.mh-button__bars {
	position: relative;
	display: block;
	width: var(--mh-btn-size);
	height: calc(var(--mh-btn-thickness) * 3 + var(--mh-btn-gap) * 2);
}
.mh-button__bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: var(--mh-btn-thickness);
	background: var(--mh-btn-color);
	border-radius: 2px;
	transition: transform var(--mh-btn-duration) var(--mh-btn-ease),
		opacity var(--mh-btn-duration) var(--mh-btn-ease),
		background-color var(--mh-btn-duration) var(--mh-btn-ease);
}
.mh-button__bars span:nth-child(1) { top: 0; }
.mh-button__bars span:nth-child(2) { top: calc(var(--mh-btn-thickness) + var(--mh-btn-gap)); }
.mh-button__bars span:nth-child(3) { top: calc((var(--mh-btn-thickness) + var(--mh-btn-gap)) * 2); }

/* Thin style: lighter bars */
.mh-root--btn-style-thin .mh-button__bars span { height: 1px; }

/* Open state → morph to an X */
.mh-root.mh-active .mh-button__bars span { background: var(--mh-btn-color-active); }
.mh-root.mh-active .mh-button__bars span:nth-child(1) {
	top: calc(var(--mh-btn-thickness) + var(--mh-btn-gap));
	transform: rotate(45deg);
}
.mh-root.mh-active .mh-button__bars span:nth-child(2) { opacity: 0; }
.mh-root.mh-active .mh-button__bars span:nth-child(3) {
	top: calc(var(--mh-btn-thickness) + var(--mh-btn-gap));
	transform: rotate(-45deg);
}
/* Plus/cross style starts as a + (middle bar vertical-ish handled by rotate on open) */
.mh-root--btn-style-plus .mh-button__bars span:nth-child(2) { transform: rotate(90deg); transform-origin: center; }
.mh-root--btn-style-plus.mh-active .mh-button__bars span:nth-child(2) { transform: rotate(0deg); opacity: 1; }

/* --- Arrow: bars collapse into a back-arrow ( < ) on open --- */
.mh-root--btn-style-arrow.mh-active .mh-button__bars span:nth-child(1) {
	top: calc(var(--mh-btn-thickness) + var(--mh-btn-gap)); width: 55%; transform: rotate(-40deg) translateX(-1px);
}
.mh-root--btn-style-arrow.mh-active .mh-button__bars span:nth-child(2) { opacity: 1; transform: none; }
.mh-root--btn-style-arrow.mh-active .mh-button__bars span:nth-child(3) {
	top: calc(var(--mh-btn-thickness) + var(--mh-btn-gap)); width: 55%; transform: rotate(40deg) translateX(-1px);
}

/* --- Squeeze: top & bottom slide to centre then cross (origin-left feel) --- */
.mh-root--btn-style-squeeze .mh-button__bars span { transform-origin: left center; }
.mh-root--btn-style-squeeze.mh-active .mh-button__bars span:nth-child(1) { transform: rotate(45deg); top: 0; left: 4px; }
.mh-root--btn-style-squeeze.mh-active .mh-button__bars span:nth-child(3) { transform: rotate(-45deg); top: auto; bottom: 0; left: 4px; }

/* --- Spin: the whole icon rotates 180° while morphing to an X --- */
.mh-root--btn-style-spin .mh-button__bars { transition: transform var(--mh-btn-duration) var(--mh-btn-ease); }
.mh-root--btn-style-spin.mh-active .mh-button__bars { transform: rotate(180deg); }

/* ======================  OVERLAY  ====================== */
.mh-overlay {
	position: fixed;
	inset: 0;
	z-index: 490;
	background: var(--mh-overlay-color);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--mh-overlay-duration) ease, visibility 0s linear var(--mh-overlay-duration);
	cursor: pointer;
}
.mh-root.mh-active .mh-overlay {
	opacity: var(--mh-overlay-opacity);
	visibility: visible;
	transition: opacity var(--mh-overlay-duration) ease, visibility 0s;
}

/* ======================  DRAWER  ====================== */
.mh-drawer {
	position: fixed;
	z-index: 500;
	top: 0;
	bottom: 0;
	width: var(--mh-drawer-width);
	max-width: 90vw;
	background: var(--mh-drawer-bg);
	padding: var(--mh-drawer-padding);
	box-sizing: border-box;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transition: transform var(--mh-drawer-duration) var(--mh-drawer-ease),
		opacity var(--mh-drawer-duration) var(--mh-drawer-ease);
}
/* Slide positions (closed state) */
.mh-root--drawer-right .mh-drawer { right: 0; transform: translateX(100%); }
.mh-root--drawer-left .mh-drawer { left: 0; transform: translateX(-100%); }
/* Top / bottom sheets: sized to content but never taller than the viewport (scroll inside). */
.mh-root--drawer-top .mh-drawer { left: 0; right: 0; bottom: auto; width: 100%; max-width: none; max-height: 85vh; transform: translateY(-100%); }
.mh-root--drawer-bottom .mh-drawer { left: 0; right: 0; top: auto; width: 100%; max-width: none; max-height: 85vh; transform: translateY(100%); }
.mh-root--drawer-full .mh-drawer { inset: 0; width: 100%; max-width: none; opacity: 0; transform: none; visibility: hidden; }

/* Open state */
.mh-root.mh-active .mh-drawer { transform: translateX(0) translateY(0); }
.mh-root--drawer-full.mh-active .mh-drawer { opacity: 1; visibility: visible; }

/* Leave room at the top of the drawer so content doesn't sit under the (X) button. */
.mh-drawer__inner { margin-top: 8px; padding-top: 28px; }

/* ======================  MENU  ====================== */
.mh-menu { list-style: none; margin: 0; padding: 0; }
.mh-menu li { margin: 0; }
.mh-menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: var(--mh-item-gap) 0;
	font-size: var(--mh-item-size);
	color: var(--mh-item-color) !important;
	text-decoration: none !important;
	transition: color .2s ease;
}
.mh-menu a:hover,
.mh-menu a:focus { color: var(--mh-item-color-hover) !important; }
.mh-root--divider .mh-menu > li + li { border-top: 1px solid rgba(255, 255, 255, .08); }
.mh-menu .sub-menu { list-style: none; margin: 0; padding: 0 0 0 16px; overflow: hidden; max-height: 0; transition: max-height var(--mh-drawer-duration) var(--mh-drawer-ease); }
.mh-menu li.mh-open > .sub-menu { max-height: 1000px; }
.mh-menu__icon { display: inline-flex; width: 1.1em; height: 1.1em; }
.mh-menu__icon svg { width: 100%; height: 100%; fill: currentColor; }
.mh-menu-empty { color: var(--mh-item-color); opacity: .8; font-size: 14px; }

/* Submenu toggle */
.mh-submenu-toggle {
	float: right;
	width: 30px; height: 30px;
	background: transparent; border: 0; cursor: pointer;
}
.mh-submenu-toggle span,
.mh-submenu-toggle span::after {
	content: ''; display: block; width: 9px; height: 2px; background: var(--mh-item-color);
}
.mh-submenu-toggle span { position: relative; transform: rotate(45deg); margin: 0 auto; }
.mh-submenu-toggle span::after { position: absolute; transform: rotate(90deg); }

/* ======================  ITEM REVEAL ANIMATION  ====================== */
.mh-root .mh-menu > li {
	opacity: 0;
	transform: translateX(var(--mh-item-distance));
	transition: opacity var(--mh-item-duration) var(--mh-drawer-ease),
		transform var(--mh-item-duration) var(--mh-drawer-ease);
}
.mh-root--drawer-left .mh-menu > li { transform: translateX(calc(var(--mh-item-distance) * -1)); }
.mh-root.mh-active .mh-menu > li { opacity: 1; transform: translateX(0); }
/* Stagger: each item delayed by index * stagger (custom props set per-item by JS). */
.mh-root.mh-active .mh-menu > li { transition-delay: calc(var(--mh-i, 0) * var(--mh-item-stagger)); }

/* ======================  BRANDING (logo + heading)  ====================== */
.mh-brand { margin-bottom: 18px; }
.mh-brand__logo { display: block; max-width: var(--mh-logo-max, 120px); height: auto; margin-bottom: 10px; }
.mh-brand__heading {
	font-size: var(--mh-heading-size, 22px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--mh-heading-color, #fff);
}
.mh-brand__sub { font-size: 14px; opacity: .75; color: var(--mh-heading-color, #fff); margin-top: 2px; }

/* ======================  SEARCH  ====================== */
.mh-search { position: relative; margin: 0 0 16px; }
.mh-search__icon {
	position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
	width: 18px; height: 18px; color: var(--mh-item-color, #d7d7d7); opacity: .6; pointer-events: none;
}
.mh-search__icon svg { width: 100%; height: 100%; }
.mh-search:has(.mh-search__icon) .mh-search__input { padding-left: 38px; }
.mh-search__input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 14px;
	font-size: 15px;
	color: var(--mh-item-color, #d7d7d7);
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 8px;
}
.mh-search__input::placeholder { color: var(--mh-item-color, #d7d7d7); opacity: .6; }

/* ======================  WIDGETS  ====================== */
.mh-widgets { margin: 16px 0; }
.mh-widget { margin-bottom: 16px; color: var(--mh-item-color, #d7d7d7); }
.mh-widget__title { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; opacity: .7; margin: 0 0 8px; color: var(--mh-item-color, #d7d7d7); }
.mh-widgets a { color: var(--mh-item-color-hover, #fff); }

/* ======================  SMART-SCROLL  ====================== */
.mh-root.mh-hide-button .mh-button,
.mh-root.mh-hide-button .mh-bar {
	opacity: 0;
	transform: translateY(-150%);
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
}

/* Lock body scroll while open (class added by JS). */
body.mh-scroll-lock { overflow: hidden; }

/* ======================  SMALL PHONES (≤360px)  ====================== */
@media (max-width: 360px) {
	/* Side drawers fill almost the whole screen so content isn't cramped. */
	.mh-root--drawer-left .mh-drawer,
	.mh-root--drawer-right .mh-drawer { width: 88vw; max-width: 88vw; }
	/* Trim the inner padding a touch on tiny screens. */
	.mh-drawer { padding: clamp(16px, calc(var(--mh-drawer-padding) - 8px), var(--mh-drawer-padding)); }
	/* Keep the heading from overflowing. */
	.mh-brand__heading { font-size: clamp(18px, var(--mh-heading-size), 26px); }
}

/* Long words / URLs in menu labels or widgets never force horizontal scroll. */
.mh-menu a,
.mh-widget,
.mh-brand__heading,
.mh-brand__sub { overflow-wrap: anywhere; word-break: break-word; }

/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {
	.mh-root *,
	.mh-root .mh-menu > li { transition-duration: 0.001s !important; }
}