/* HEADER_V2 (2026-10-27, Rihards' design "Med Art Header V2-1"): white row with logo, menu, AI assistant, WhatsApp,
   phone, language (cyan block) and login. Full-width menu panels on desktop; below 1100px a full-screen drawer.
   Markup: templates/header.html (class prefix mh-), behaviour: js/header_v2.js. #header stays position:fixed (style.css). */
.mh-header {
	--mh-cyan: #20c4f4;
	--mh-cyan-soft: #e6f8fe;
	--mh-purple: #6600cc;
	--mh-ink: #464646;
	--mh-ink-strong: #2b2b2b;
	--mh-muted: #6f7478;
	--mh-bar: #eeeeee;
	--mh-line: #e3e3e3;
	--mh-gx: clamp(16px, 3vw, 56px);
	background: #fff;
	color: var(--mh-ink);
	box-shadow: 0 1px 0 var(--mh-line);
	font-family: 'OpenSans_regular', Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
}
html body { padding-top: 80px; }
.mh-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mh-header *, .mh-header *::before, .mh-header *::after { box-sizing: border-box; }
.mh-header a { color: inherit; text-decoration: none; }
.mh-header a:hover { text-decoration: none; }
.mh-header :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; margin: 0; }
/* style.css sets "* { position: relative }" - the menu panels must be placed against the whole row, not the menu item */
.mh-header .mh-nav, .mh-header .mh-nav-list, .mh-header .mh-nav-li { position: static; }
.mh-header ul { list-style: none; margin: 0; padding: 0; }
.mh-header :focus-visible { outline: 3px solid var(--mh-purple); outline-offset: 2px; }
.mh-header svg.mh-i { display: block; fill: currentColor; }
.mh-chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.2,.8,.2,1); flex: none; }
.mh-header [aria-expanded="true"] > .mh-chev { transform: rotate(180deg); }

/* Row */
.mh-row { position: relative; z-index: 2; display: flex; align-items: stretch; justify-content: space-between; gap: 12px; min-height: 80px; padding: 0 var(--mh-gx); background: #fff; }
.mh-logo { display: flex; align-items: center; flex: none; padding: 8px 0; }
.mh-logo svg { display: block; width: auto; height: 56px; }
.mh-logo svg .st_blue { fill: #20C4F4; }
.mh-logo svg .st_black { fill: #464646; }
.mh-logo svg .st_purple { fill: #6600CC; }

/* Main menu */
.mh-nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.mh-nav-list { display: flex; justify-content: center; }
.mh-nav-li { display: flex; flex: none; }
.mh-nav-btn { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 clamp(12px, 1.7vw, 28px) !important; font-family: 'OpenSans_semibold', Arial, sans-serif; font-size: 16px; color: var(--mh-ink-strong) !important; white-space: nowrap; transition: color .25s ease; }
.mh-nav-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--mh-purple); transform: translateY(101%); transition: transform .32s cubic-bezier(.2,.8,.2,1); }
.mh-nav-btn.is-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--mh-cyan); }
.mh-nav-btn:hover, .mh-nav-btn[aria-expanded="true"] { color: #fff !important; }
.mh-nav-btn:hover::before, .mh-nav-btn[aria-expanded="true"]::before { transform: none; }
.mh-nav-btn:focus-visible { outline-offset: -4px; outline-color: var(--mh-cyan); }

/* Full-width panel */
.mh-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; max-height: calc(100vh - 80px); overflow-y: auto; background: #fff; box-shadow: 0 24px 40px rgba(30,40,50,.12); border-top: 1px solid var(--mh-line); border-bottom: 1px solid var(--mh-line); padding: 28px var(--mh-gx) 32px; animation: mhPanelIn .36s cubic-bezier(.2,.8,.2,1) both; }
.mh-panel[hidden] { display: none; }
.mh-panel.mh-closing { animation: mhPanelOut .18s ease-in both; pointer-events: none; }
@keyframes mhPanelIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes mhPanelOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }
@keyframes mhItemIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.mh-panel-in { max-width: 1080px; margin: 0 auto; }

.mh-mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 40px; }
.mh-mitem { animation: mhItemIn .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 30ms + 90ms); }
.mh-mlink { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; align-items: start; color: var(--mh-ink-strong); }
.mh-plus { width: 18px; height: 18px; color: var(--mh-cyan); margin-top: 2px; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
a.mh-mlink:hover .mh-plus, a.mh-mlink:focus-visible .mh-plus { transform: rotate(90deg) scale(1.12); }
.mh-t { font-family: 'OpenSans_semibold', Arial, sans-serif; font-size: 16px; line-height: 1.3; transition: color .15s; }
.mh-s { grid-column: 2; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--mh-muted); }
a.mh-mlink:hover .mh-t, a.mh-mlink:focus-visible .mh-t, a.mh-mlink[aria-current] .mh-t { color: var(--mh-cyan); }
.mh-msub { margin: 6px 0 0 30px !important; }

.mh-plist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 40px; }
.mh-plist li, .mh-group li { animation: mhItemIn .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 22ms + 80ms); }
.mh-pa { position: relative; display: inline-block; padding: 7px 0; font-size: 15px; color: var(--mh-ink-strong); }
a.mh-pa::after { content: ""; position: absolute; left: 0; bottom: 3px; width: 100%; height: 2px; background: var(--mh-cyan); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
a.mh-pa:hover::after, a.mh-pa:focus-visible::after, a.mh-pa[aria-current]::after { transform: scaleX(1); }
.mh-more .mh-pa { color: var(--mh-purple); font-family: 'OpenSans_semibold', Arial, sans-serif; }

.mh-plist + .mh-cgrid { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--mh-line); }
.mh-cgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 40px; }
.mh-group h3 { margin: 0 0 8px; padding: 0; font-family: 'OpenSans_Bold', Arial, sans-serif; font-weight: normal; font-size: 16px; line-height: 1.4; text-align: left; color: var(--mh-ink-strong); }
.mh-group h3 .mh-pa { padding-top: 0; font-family: 'OpenSans_Bold', Arial, sans-serif; font-size: 16px; }
.mh-group h3::after { content: ""; display: block; width: 28px; height: 2px; background: var(--mh-cyan); margin-top: 4px; }
.mh-group .mh-pa, .mh-msub .mh-pa { font-size: 14px; color: #4b5055; padding: 5px 0; }
.mh-group-long { grid-column: 1 / -1; }
.mh-group-long ul { columns: 4; column-gap: 40px; }
.mh-group-long li { break-inside: avoid; }

/* Tools */
.mh-tools { display: flex; align-items: stretch; gap: 4px; flex: none; }
.mh-tool { display: flex; align-items: center; gap: 10px; padding: 0 12px; font-family: 'OpenSans_Bold', Arial, sans-serif; font-size: 15px; color: var(--mh-ink); white-space: nowrap; cursor: pointer; transition: color .15s; }
.mh-tool:hover { color: var(--mh-purple); }
.mh-tool svg.mh-i { width: 26px; height: 22px; }
.mh-phone svg.mh-i { width: 14px; height: 24px; }
.mh-login svg.mh-i, .mh-avatar svg.mh-i { width: 16px; height: 21px; }
.mh-num { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
/* style.css .go_login (old header): negative margins, 18px bold, svg margins */
.mh-header .go_login { margin: 0; line-height: inherit; font-weight: normal; text-align: left; vertical-align: baseline; }
.mh-header .go_login svg { margin: 0; vertical-align: baseline; }
.mh-header .mh-login { font-size: 15px; padding: 0 12px; }

.mh-tool-btn { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; width: 64px; color: var(--mh-ink); cursor: pointer; transition: color .25s ease; }
.mh-tool-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--mh-purple); transform: translateY(101%); transition: transform .32s cubic-bezier(.2,.8,.2,1); }
.mh-tool-btn:hover { color: #fff; }
.mh-tool-btn:hover::before { transform: none; }
.mh-tool-btn:focus-visible { outline-offset: -4px; outline-color: var(--mh-cyan); }
.mh-rb { width: 30px !important; height: 22px !important; animation: mhBob 3.2s ease-in-out infinite; }
.mh-ai:hover .mh-rb { animation-play-state: paused; }
@keyframes mhBob { 0%, 100% { transform: translateY(-1.5px); } 50% { transform: translateY(1.5px); } }
.mh-bubble { position: absolute; top: 12px; right: 4px; width: 26px; height: 20px; background: var(--mh-purple); color: #fff; display: grid; place-items: center; transform-origin: 20% 100%; animation: mhPop 2s ease-in-out infinite; pointer-events: none; }
.mh-bubble::after { content: ""; position: absolute; left: 4px; bottom: -6px; width: 0; height: 0; border-top: 6px solid var(--mh-purple); border-right: 7px solid transparent; }
.mh-bubble svg { grid-area: 1 / 1; width: 14px; height: 14px; }
.mh-b-chat { animation: mhSwapA 4s steps(1) infinite; }
.mh-b-search { opacity: 0; animation: mhSwapB 4s steps(1) infinite; }
@keyframes mhSwapA { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes mhSwapB { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes mhPop { 0% { opacity: 0; transform: scale(.4); } 14% { opacity: 1; transform: scale(1.12); } 24%, 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.7); } }
.mh-ai:hover .mh-bubble { opacity: 0 !important; animation: none; }

.mh-lang, .mh-user { position: relative; display: flex; }
.mh-lang-btn { display: flex; align-items: center; gap: 8px; padding: 0 22px !important; background: var(--mh-cyan) !important; color: #04323f !important; font-family: 'OpenSans_Bold', Arial, sans-serif; font-size: 17px; transition: background .15s; }
.mh-lang-btn:hover { background: #12b3e3 !important; }
.mh-user-btn { gap: 8px; }
.mh-user-btn .mh-txt { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.mh-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mh-bar) center / cover no-repeat; flex: none; }
.mh-pop { position: absolute; top: 100%; right: 0; z-index: 6; min-width: 170px; background: #fff; border: 1px solid var(--mh-line); border-top: 3px solid var(--mh-cyan); box-shadow: 0 16px 32px rgba(30,40,50,.10); padding: 6px 0 !important; }
.mh-pop[hidden] { display: none; }
.mh-pop a { display: block; padding: 9px 18px; font-size: 14px; color: var(--mh-ink-strong); white-space: nowrap; }
.mh-pop a:hover, .mh-pop a[aria-current="true"] { background: var(--mh-cyan-soft); color: var(--mh-purple); }
.mh-pop-name { padding: 6px 18px 8px; font-family: 'OpenSans_semibold', Arial, sans-serif; font-size: 13px; color: var(--mh-muted); border-bottom: 1px solid var(--mh-line); margin-bottom: 4px; }

/* Burger + drawer (below 1100px) */
.mh-burger { display: none; align-items: center; justify-content: center; width: 52px; color: var(--mh-ink); }
.mh-burger span { position: relative; width: 24px; height: 2px; background: currentColor; transition: background .15s; }
.mh-burger span::before, .mh-burger span::after { content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: currentColor; transition: transform .2s; }
.mh-burger span::before { top: -7px; }
.mh-burger span::after { top: 7px; }
.mh-burger[aria-expanded="true"] span { background: transparent; }
.mh-burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.mh-burger[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }
.mh-drawer, .mh-scrim { display: none; }

@media (prefers-reduced-motion: reduce) {
	.mh-header *, .mh-header *::before, .mh-header *::after { transition: none !important; animation: none !important; }
	.mh-bubble { opacity: 1; }
	.mh-b-search { display: none; }
}

@media (max-width: 1280px) {
	.mh-logo svg { height: 50px; }
	.mh-nav-btn { font-size: 15px; gap: 8px; }
	.mh-tool { padding: 0 10px; }
	.mh-tool-btn { width: 56px; }
	.mh-lang-btn { padding: 0 18px !important; }
}
@media (max-width: 1180px) {
	.mh-tools .mh-num { display: none; }
	.mh-login .mh-txt, .mh-user-btn .mh-txt { display: none; }
	.mh-mgrid { gap: 14px 28px; }
	.mh-plist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mh-cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mh-group-long ul { columns: 3; }
}
@media (max-width: 1099px) {
	html body { padding-top: 64px; }
	.mh-row { min-height: 64px; gap: 8px; padding: 0 16px; }
	.mh-logo svg { height: 42px; }
	.mh-nav, .mh-wa { display: none !important; }
	.mh-tool-btn { width: 52px; }
	.mh-bubble { top: 6px; right: 2px; width: 22px; height: 17px; }
	.mh-bubble svg { width: 12px; height: 12px; }
	.mh-bubble::after { bottom: -5px; border-top-width: 5px; border-right-width: 6px; }
	.mh-tools .mh-num { display: inline; }
	.mh-phone { padding: 0 14px; }
	.mh-lang-btn { padding: 0 16px !important; font-size: 16px; }
	.mh-burger { display: flex; }
	.mh-drawer { display: block; position: fixed; left: 0; right: 0; bottom: 0; top: 64px; z-index: 40; overflow-y: auto; overscroll-behavior: contain; background: #fff; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s; }
	.mh-drawer.mh-open { opacity: 1; visibility: visible; transform: none; }
	.mh-drawer-in { max-width: 680px; margin: 0 auto; padding: 16px 16px 32px; display: grid; gap: 20px; }
	.mh-search { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border: 1px solid var(--mh-line); cursor: pointer; color: var(--mh-ink); }
	.mh-search svg.mh-i { width: 22px; height: 22px; flex: none; }
	.mh-search-ph { font-family: 'OpenSans_semibold', Arial, sans-serif; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.mh-acc { border-top: 1px solid var(--mh-line); }
	.mh-acc > li { border-bottom: 1px solid var(--mh-line); }
	.mh-acc-btn { width: 100%; display: flex !important; align-items: center; justify-content: space-between; min-height: 56px; font-family: 'OpenSans_semibold', Arial, sans-serif; font-size: 17px; color: var(--mh-ink-strong) !important; text-align: left; }
	.mh-acc-btn .mh-chev { width: 16px; height: 16px; }
	.mh-acc-body { display: grid; grid-template-columns: 1fr; padding: 0 0 14px; }
	.mh-acc-body[hidden] { display: none; }
	.mh-acc-body:not([hidden]) { animation: mhAccIn .28s ease both; }
	@keyframes mhAccIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
	.mh-acc-body h4 { grid-column: 1 / -1; margin: 12px 0 4px; padding: 0; font-family: 'OpenSans_Bold', Arial, sans-serif; font-weight: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mh-muted); text-align: left; }
	.mh-acc-a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-size: 15px; color: var(--mh-ink-strong); border-left: 3px solid var(--mh-cyan-soft); }
	.mh-acc-a .mh-plus { width: 14px; height: 14px; margin: 0; flex: none; }
	a.mh-acc-a:hover, a.mh-acc-a:active, a.mh-acc-a[aria-current] { background: var(--mh-cyan-soft); border-left-color: var(--mh-cyan); color: var(--mh-purple); }
	.mh-acc-a.mh-more { color: var(--mh-purple); font-family: 'OpenSans_semibold', Arial, sans-serif; }
	.mh-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.mh-header .mh-quick a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; background: var(--mh-bar); font-family: 'OpenSans_Bold', Arial, sans-serif; font-size: 16px; color: var(--mh-ink-strong); cursor: pointer; }
	.mh-quick a svg.mh-i { width: 24px; height: 20px; flex: none; }
	.mh-quick a.mh-cta { grid-column: 1 / -1; justify-content: center; background: var(--mh-cyan); color: #04323f; }
	.mh-quick a.mh-cta svg.mh-i { width: 14px; height: 22px; }
	.mh-quick a.mh-wide, .mh-quick a:last-child:nth-child(even) { grid-column: 1 / -1; }
	.mh-scrim { display: block; position: fixed; inset: 0; z-index: 4; background: rgba(20,25,30,.35); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
	.mh-scrim.mh-open { opacity: 1; visibility: visible; }
}
@media (min-width: 640px) and (max-width: 1099px) {
	.mh-acc-body { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
}
@media (max-width: 480px) {
	.mh-logo svg { height: 36px; }
	.mh-tools .mh-num { display: none; }
	.mh-phone { padding: 0 12px; }
	.mh-lang-btn { padding: 0 14px !important; }
	.mh-burger { width: 46px; }
	.mh-tool-btn { width: 46px; }
	.mh-bubble { right: 0; top: 5px; }
	.mh-login, .mh-user { display: none !important; }
}
@media (min-width: 1100px) { .mh-drawer, .mh-scrim { display: none !important; } }