/*
 * Medline header v2.
 * Palette is derived from the existing brand turquoise; the signature is the
 * "line of beauty" (Hogarth's S-curve) along the bottom edge and under the
 * active menu item — Medline is "линия вашей красоты".
 */

@font-face { font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/onest/onest-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/onest/onest-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/onest/onest-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/onest/onest-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/onest/onest-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/onest/onest-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }

.mh {
	--mh-lagoon: #4bbcd7;       /* brand turquoise (unchanged) */
	--mh-lagoon-deep: #1c7f99;  /* utility bar: white text passes AA */
	--mh-ink: #0b3a47;          /* text on turquoise: 5.6:1 */
	--mh-foam: #eef8fb;         /* hover wash inside the white panel */
	--mh-coral: #d9343f;        /* promotions, softer than pure red */
	--mh-line: rgba(11, 58, 71, .12);
	--mh-bar-h: 84px;
	--mh-font: "Onest", "Segoe UI", Roboto, Arial, sans-serif;

	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 1000;
	font-family: var(--mh-font);
	-webkit-font-smoothing: antialiased;
}

/* Neutralize the old theme's global list/link styles inside the header. */
.mh ul, .mh li, .mh p { margin: 0; padding: 0; list-style: none; background: none; border: 0; }
.mh li::before { content: none; }
.mh a { text-decoration: none; transition: color .18s, background-color .18s, box-shadow .18s; }
.mh button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none; }
.mh img { max-width: none; border: 0; }
.mh .mh-ico { width: 1em; height: 1em; flex: none; fill: currentColor; }
.mh .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mh :focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 999px; }

.mh-wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }

/* The old header was position:fixed and the theme pushed #main down by
   160px to make room; the new header takes its own space in the flow. */
.mh ~ #main { margin-top: 0 !important; }

/* ---------- utility bar ---------- */
.mh-util {
	background: var(--mh-lagoon-deep);
	color: #fff;
	font-size: 13.5px;
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows .25s ease;
}
.mh-util > .mh-wrap { overflow: hidden; }
.mh-util__row { display: flex; align-items: center; gap: 28px; min-height: 0; }
.mh-util__row > * { flex: none; }
.mh-tagline {
	font-family: "CACChampagne", cursive;
	font-size: 25px;
	line-height: 40px;
	margin-right: auto !important;
	white-space: nowrap;
	opacity: .95;
}
.mh-util__contacts { display: flex; gap: 22px; }
.mh .mh-util a { color: #fff; display: inline-flex; align-items: center; gap: 7px; }
.mh .mh-util__contacts a:hover { color: #d7f3fa; }
.mh-util__contacts .mh-ico { font-size: 15px; opacity: .8; }
.mh-awards { display: block; line-height: 0; padding: 4px 0; }
.mh-awards img { height: 34px; width: auto; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }

.mh-lang { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.14); }
.mh .mh-lang a { padding: 3px 10px; border-radius: 999px; font-weight: 600; font-size: 12px; letter-spacing: .06em; color: #fff; }
.mh .mh-lang a[aria-current] { background: #fff; color: var(--mh-lagoon-deep); }
.mh .mh-lang a:not([aria-current]):hover { background: rgba(255,255,255,.2); }

/* ---------- main bar ---------- */
.mh-bar { position: relative; background: var(--mh-lagoon); color: var(--mh-ink); }
.mh-bar__row { display: flex; align-items: center; gap: 24px; height: var(--mh-bar-h); transition: height .25s ease; }
.mh-logo { display: block; line-height: 0; flex: none; }
.mh-logo img { width: 172px; height: auto; transition: width .25s ease; }

/* The S-curve edge: the header ends in the "line of beauty". */
.mh-edge {
	position: absolute; left: 0; top: 100%;
	width: 100%; height: 24px;
	fill: var(--mh-lagoon);
	pointer-events: none;
	filter: drop-shadow(0 6px 6px rgba(11, 58, 71, .08));
}

.mh-nav { flex: 1; min-width: 0; }
.mh-menu { display: flex; justify-content: center; align-items: center; gap: 2px; }
.mh-item { position: relative; display: flex; align-items: center; }
.mh-item.has-panel { position: static; }

.mh .mh-link {
	position: relative;
	display: inline-flex; align-items: center; gap: 5px;
	padding: 10px 13px;
	border-radius: 999px;
	color: var(--mh-ink);
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}
.mh-link .mh-ico { font-size: 14px; opacity: .7; transition: transform .2s; }
.mh .mh-toggle { display: none; color: var(--mh-ink); }

/* squiggle under the item: drawn in on hover, resting under the current page */
.mh-squiggle {
	position: absolute; left: 50%; bottom: 1px;
	width: 34px; height: 7px;
	margin-left: -17px;
	fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round;
	stroke-dasharray: 48; stroke-dashoffset: 48;
	transition: stroke-dashoffset .35s ease;
	pointer-events: none;
}
.mh-link:hover .mh-squiggle,
.mh-item:focus-within > .mh-link .mh-squiggle,
.mh-item[data-open] > .mh-link .mh-squiggle,
.mh-item.is-current > .mh-link .mh-squiggle { stroke-dashoffset: 0; }
.mh-item.is-current > .mh-link { font-weight: 600; }
.mh .mh-link:hover { color: #062a33; }
.mh-item[data-open] > .mh-link .mh-ico,
.mh-item.has-panel:hover > .mh-link .mh-ico { transform: rotate(180deg); }

/* promotions keep their red pill, as on the current site */
.mh .mh-item.is-promo > .mh-link { background: var(--mh-coral); color: #fff; padding: 9px 16px; margin: 0 4px; }
.mh .mh-item.is-promo > .mh-link:hover { background: #c02a35; }
.mh-item.is-promo .mh-squiggle { display: none; }

/* call to action: the pill shape carried over from the old menu */
.mh .mh-cta {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 22px;
	border-radius: 999px;
	background: #fff;
	color: var(--mh-ink);
	font-weight: 600; font-size: 15px; line-height: 1.2;
	box-shadow: 0 6px 16px -8px rgba(11, 58, 71, .45);
	white-space: nowrap;
}
.mh .mh-cta:hover { background: var(--mh-ink); color: #fff; }
.mh-cta--bar { flex: none; }
.mh .mh-cta--block { display: flex; width: 100%; background: var(--mh-lagoon-deep); color: #fff; box-shadow: none; }
.mh .mh-cta--block:hover { background: var(--mh-ink); }

.mh-call, .mh-burger, .mh-nav__extras { display: none; }

/* ---------- services panel ---------- */
.mh-panel, .mh-drop {
	position: absolute;
	visibility: hidden; opacity: 0;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.mh-panel {
	left: 50%; top: calc(100% - 6px);
	width: min(1160px, calc(100vw - 48px));
	margin-left: calc(min(1160px, calc(100vw - 48px)) / -2);
	padding-top: 16px; /* hover bridge between bar and card */
}
.mh-panel__inner {
	display: grid;
	grid-template-columns: 1fr 250px;
	gap: 40px;
	padding: 30px 34px;
	background: #fff;
	border-radius: 22px;
	box-shadow: 0 24px 60px -24px rgba(11, 58, 71, .35), 0 2px 6px rgba(11, 58, 71, .06);
}
.mh-panel__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 32px; }
.mh-group__label {
	margin: 0 0 10px !important;
	padding-bottom: 10px !important;
	border-bottom: 1px solid var(--mh-line) !important;
	color: var(--mh-lagoon-deep);
	font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.mh .mh-group__list a {
	display: block;
	margin: 0 -10px;
	padding: 7px 10px;
	border-radius: 10px;
	color: var(--mh-ink);
	font-size: 15px; line-height: 1.3;
}
.mh .mh-group__list a:hover { background: var(--mh-foam); color: var(--mh-lagoon-deep); }
.mh .mh-group__list a[aria-current] { color: var(--mh-lagoon-deep); font-weight: 600; }

.mh-panel__aside { display: flex; flex-direction: column; gap: 14px; padding-left: 32px; border-left: 1px solid var(--mh-line); }
.mh .mh-aside-link { display: block; padding: 16px 18px; border-radius: 16px; background: var(--mh-foam); color: var(--mh-ink); }
.mh .mh-aside-link:hover { background: #dff2f7; }
.mh-aside-link__title { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 16px; }
.mh-aside-link__text { display: block; margin-top: 4px; font-size: 13.5px; color: #4b6b74; }
.mh-aside-phone { font-size: 13.5px; color: #4b6b74; text-align: center; }
.mh .mh-aside-phone a { color: var(--mh-ink); font-weight: 600; white-space: nowrap; }

/* small dropdowns (promotions, news); .mh prefix beats the ul reset above */
.mh .mh-drop {
	left: 50%; top: calc(100% + 14px);
	z-index: 2;
	min-width: 230px;
	margin-left: -115px;
	padding: 8px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 18px 40px -18px rgba(11, 58, 71, .35), 0 2px 6px rgba(11, 58, 71, .06);
}
/* invisible bridge so the pointer can travel from the item into the list */
.mh-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.mh .mh-drop a { display: block; padding: 9px 12px; border-radius: 10px; color: var(--mh-ink); font-size: 15px; white-space: nowrap; }
.mh .mh-drop a:hover { background: var(--mh-foam); color: var(--mh-lagoon-deep); }

@media (hover: hover) and (min-width: 1180px) {
	.mh-item:hover > .mh-panel, .mh-item:hover > .mh-drop { visibility: visible; opacity: 1; transform: none; transition-delay: .06s, .06s, 0s; }
}
@media (min-width: 1180px) {
	.mh-item:focus-within > .mh-panel, .mh-item:focus-within > .mh-drop,
	.mh-item[data-open] > .mh-panel, .mh-item[data-open] > .mh-drop { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
}

/* The theme sets overflow-x:hidden on html/body, which turns body into the
   scroll container and silently disables position:sticky. clip hides the
   same horizontal overflow without creating a scroll container. */
html:not(.mh-lock), html:not(.mh-lock) body { overflow-x: clip !important; overflow-y: visible !important; }

/* The red side "Записаться" tab is replaced by the header and page buttons. */
.call_back { display: none !important; }

/* ---------- condensed on scroll ---------- */
/* The frosted look lives on a pseudo-element: backdrop-filter on .mh-bar
   itself would make it the containing block for the position:fixed mobile
   drawer inside it, and the drawer would vanish once the header condenses. */
.mh-bar { z-index: 0; transition: box-shadow .3s ease; }
.mh-bar::before {
	content: "";
	position: absolute; inset: 0;
	z-index: -1;
	background: var(--mh-lagoon);
	transition: background-color .3s ease;
	pointer-events: none;
}
.mh[data-condensed] .mh-bar { background: transparent; box-shadow: 0 10px 30px -18px rgba(11, 58, 71, .55); }
.mh[data-condensed] .mh-bar::before {
	background: rgba(75, 188, 215, .9);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	backdrop-filter: saturate(1.4) blur(12px);
}
.mh[data-condensed] .mh-edge { fill: rgba(75, 188, 215, .9); filter: none; }
.mh[data-condensed] { --mh-bar-h: 64px; }
.mh[data-condensed] .mh-util { grid-template-rows: 0fr; }
.mh[data-condensed] .mh-logo img { width: 124px; }

/* ---------- tablet & phone: drawer ---------- */
@media (max-width: 1179px) {
	.mh { --mh-bar-h: 64px; }
	.mh-util { display: none; }
	.mh-wrap { padding: 0 18px; }
	.mh-bar__row { gap: 10px; }
	.mh-logo { margin-right: auto; }
	.mh-logo img, .mh[data-condensed] .mh-logo img { width: 122px; }

	.mh .mh-call, .mh .mh-burger {
		display: inline-flex; align-items: center; justify-content: center;
		width: 44px; height: 44px; border-radius: 50%;
		background: rgba(255, 255, 255, .9); color: var(--mh-ink);
		flex: none;
	}
	.mh-call .mh-ico { font-size: 19px; }
	.mh-burger span, .mh-burger span::before, .mh-burger span::after {
		display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
		transition: transform .25s ease, background-color .25s ease;
	}
	.mh-burger span { position: relative; }
	.mh-burger span::before, .mh-burger span::after { content: ""; position: absolute; left: 0; }
	.mh-burger span::before { top: -6px; }
	.mh-burger span::after { top: 6px; }
	.mh[data-menu-open] .mh-burger span { background: transparent; }
	.mh[data-menu-open] .mh-burger span::before { transform: translateY(6px) rotate(45deg); }
	.mh[data-menu-open] .mh-burger span::after { transform: translateY(-6px) rotate(-45deg); }

	.mh-nav {
		position: fixed;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--mh-bar-h));
		right: 0; bottom: 0;
		width: min(430px, 100%);
		overflow-y: auto; overscroll-behavior: contain;
		padding: 18px 22px 28px;
		background: #fff;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform .3s ease, visibility 0s linear .3s;
	}
	.mh[data-menu-open] .mh-nav { transform: none; visibility: visible; transition-delay: 0s; }
	.mh::after {
		content: ""; position: fixed; inset: 0; z-index: -1;
		background: rgba(11, 58, 71, .45);
		opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s;
	}
	.mh[data-menu-open]::after { opacity: 1; visibility: visible; transition-delay: 0s; }

	.mh-menu { display: block; }
	.mh-item, .mh-item.has-panel { position: relative; display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--mh-line); }
	.mh .mh-link { flex: 1; padding: 15px 0; font-size: 18px; border-radius: 0; justify-content: space-between; }
	.mh-link .mh-ico { font-size: 18px; }
	.mh-squiggle { display: none; }
	.mh .mh-item.is-promo > .mh-link { background: none; color: var(--mh-coral); padding: 15px 0; margin: 0; font-weight: 600; }
	.mh .mh-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; font-size: 18px; }
	.mh-item[data-open] > .mh-toggle .mh-ico { transform: rotate(180deg); }
	.mh-toggle .mh-ico { transition: transform .2s; }

	.mh-panel, .mh-drop {
		position: static; flex-basis: 100%;
		width: auto; margin: 0; padding: 0;
		visibility: visible; opacity: 1; transform: none;
		display: none;
	}
	.mh-item[data-open] > .mh-panel, .mh-item[data-open] > .mh-drop { display: block; }
	.mh .mh-drop { background: none; box-shadow: none; border-radius: 0; padding: 0 0 10px; }
	.mh-drop::before { content: none; }
	.mh .mh-drop a { margin-left: -12px; }
	.mh-panel__inner { display: block; padding: 0 0 14px; box-shadow: none; border-radius: 0; }
	.mh-panel__groups { display: block; }
	.mh-group { margin-top: 12px; }
	.mh-group__label { border: 0 !important; padding: 0 !important; margin-bottom: 4px !important; }
	.mh .mh-group__list a { font-size: 16px; padding: 8px 10px; }
	.mh-panel__aside { display: none; }

	.mh .mh-nav__extras { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
	.mh-nav__phones { display: grid; gap: 4px; }
	.mh .mh-nav__phones a { display: inline-flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--mh-ink); font-size: 16px; font-weight: 500; }
	.mh-nav__phones .mh-ico { color: var(--mh-lagoon-deep); }
	.mh .mh-lang--drawer { align-self: flex-start; background: var(--mh-foam); }
	.mh .mh-lang--drawer a { color: var(--mh-ink); font-size: 13px; letter-spacing: 0; padding: 6px 14px; }
	.mh .mh-lang--drawer a[aria-current] { background: var(--mh-lagoon-deep); color: #fff; }
	.mh .mh-cta { padding: 14px 20px; }
}
@media (max-width: 599px) {
	.mh-cta--bar { display: none !important; }
}
@media (min-width: 600px) and (max-width: 1179px) {
	.mh .mh-cta--bar { padding: 10px 18px; font-size: 14px; }
}

html.mh-lock, html.mh-lock body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.mh *, .mh::after { transition: none !important; }
}