/*
 * HClinic design system - 2/7 header
 * Utility top bar, main row (logo / navigation / booking CTA), dropdowns, mobile bar and drawer.
 *
 * Never set `display` on elements The7 shows or hides per breakpoint (.show-on-desktop,
 * .show-on-first-switch, .show-on-second-switch, .near-logo-*-switch). The7's script clones the
 * booking button and search into .mobile-mini-widgets once per switch; forcing display made both
 * clones visible together (two "Записатися" buttons between 779px and 1050px).
 */

/* ==========================================================================================
   Utility top bar - phone, notices, address, social
   ========================================================================================== */

.masthead .top-bar {
	height: auto;
	min-height: 44px;
	padding: .375rem var(--hc-gutter);
	box-sizing: border-box;
	color: #cbd5e1;
	font-family: var(--hc-font);
	font-size: .8125rem;
	line-height: 1.4;
}

.masthead .top-bar .top-bar-bg {
	background: var(--hc-navy-deep);
	opacity: 1;
}

/* Phone number: the one thing a patient must find. Inline red/size in the widget content is
   overridden on purpose (inline style="" needs !important). */
.masthead .top-bar a[href^="tel:"] {
	display: inline-flex;
	align-items: center;
	min-height: var(--hc-tap);
	text-decoration: none;
}

.masthead .top-bar .text-area p a[href^="tel:"] span {
	color: #fff !important;
	font-size: 1.0625rem !important;
	font-weight: 700 !important;
	letter-spacing: .01em;
	font-variant-numeric: tabular-nums;
}

.masthead .top-bar .text-area p a[href^="tel:"]:hover span {
	color: #bae6fd !important;
}

.masthead .top-bar .mini-contacts.phone,
.masthead .top-bar .mini-contacts.phone i,
.masthead .top-bar .mini-contacts.address i {
	color: #7dd3fc;
}

/* Notices (discount, outages, relocation): same text, one calm voice. */
.masthead .top-bar .text-area p {
	margin: 0;
}

.masthead .top-bar .text-area p br {
	display: none;
}

.masthead .top-bar .text-area p [style] {
	color: #e2e8f0 !important;
	font-family: var(--hc-font) !important;
	font-size: .8125rem !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
}

.masthead .top-bar .text-area p strong,
.masthead .top-bar .text-area p strong [style] {
	font-weight: 600 !important;
	color: #fff !important;
}

.masthead .top-bar .mini-contacts.address {
	margin: 0;
	color: #cbd5e1;
	font-size: .8125rem;
	font-weight: 500;
}

.masthead .top-bar .mini-search {
	margin: 0;
}

.masthead .top-bar .mini-search .submit,
.masthead .top-bar .mini-search .submit i {
	color: #e2e8f0;
	font-size: .8125rem;
	font-weight: 500;
}

.masthead .top-bar .mini-search .submit:hover,
.masthead .top-bar .mini-search .submit:hover i {
	color: #fff;
}

/* Social: The7 draws each disc with a::before (fill) and a::after (hover). Restyle those two
   layers so the disc always fills the anchor, whatever size the tap target is. */
.masthead .top-bar .soc-ico a {
	width: 2rem;
	height: 2rem;
	margin: 0 .1875rem;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.masthead .top-bar .soc-ico a::before,
.masthead .top-bar .soc-ico a::after {
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: var(--hc-radius-pill);
}

.masthead .top-bar .soc-ico.custom-bg a::before {
	background: rgba(255, 255, 255, .08);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
}

.masthead .top-bar .soc-ico.custom-bg a::after {
	background: var(--hc-blue-primary);
}

.masthead .top-bar .soc-ico a .soc-font-icon {
	color: #fff;
}

/* Desktop: two fixed rows. Row 1 = phone, search, address, social; row 2 = the notices strip.
   The left/right widget groups dissolve into one flex container so each item can be ordered, and
   both rows have a fixed height so text reflow (font swap, narrower viewport) cannot move the
   page. Only the .show-on-desktop instances are visible here, so display is safe to set. */
@media (min-width: 1051px) {
	.masthead .top-bar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 1.25rem;
		padding-block: .25rem;
	}

	.masthead .top-bar .left-widgets,
	.masthead .top-bar .right-widgets {
		display: contents;
	}

	.masthead .top-bar .mini-contacts.phone { order: 1; margin: 0 -.875rem 0 0; }
	.masthead .top-bar .mini-contacts.phone + .text-area { order: 2; }
	.masthead .top-bar .mini-search { order: 3; margin-left: auto; }
	.masthead .top-bar .mini-contacts.address { order: 4; }
	.masthead .top-bar .soc-ico.show-on-desktop { order: 5; display: flex; align-items: center; margin: 0; }

	.masthead .top-bar .mini-contacts.phone + .text-area + .text-area {
		order: 6;
		flex: 1 1 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0 1.75rem;
		min-height: 1.75rem;
		padding-top: .125rem;
		border-top: 1px solid rgba(255, 255, 255, .1);
	}

	.masthead .top-bar a[href^="tel:"] {
		min-height: 2.25rem;
	}

	.masthead .top-bar .text-area p {
		text-align: left !important;
	}

	.masthead .top-bar .mini-contacts.phone + .text-area + .text-area p {
		text-align: center !important;
	}
}

/* Tablet and phone. No display overrides on .show-on-* elements: The7 swaps in the right
   .show-on-first-switch / .show-on-second-switch clone per breakpoint. */
@media (max-width: 1050px) {
	.masthead .top-bar {
		flex-direction: column;
		align-items: stretch;
		padding-block: .375rem .5rem;
		text-align: center;
	}

	/* The widget groups are plain wrappers (not toggled by the theme), so they may be flex. */
	.masthead .top-bar .left-widgets,
	.masthead .top-bar .right-widgets {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin: 0;
		gap: 0 1.5rem;
	}

	.masthead .top-bar .text-area {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0 1.5rem;
		margin: 0;
	}

	.masthead .top-bar .text-area p {
		padding: .25rem 0;
		text-align: center !important;
	}

	.masthead .top-bar .mini-contacts.address {
		margin: 0;
		padding: .25rem 0;
	}

	.masthead .top-bar .soc-ico {
		justify-content: center;
		margin: 0;
		padding: .125rem 0;
	}
}

/* Tablet: phone + notices share the first row, address + social the second. */
@media (min-width: 779px) and (max-width: 1050px) {
	.masthead .top-bar {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 0 1.5rem;
	}

	.masthead .top-bar .left-widgets,
	.masthead .top-bar .right-widgets {
		display: contents;
	}

	.masthead .top-bar .text-area:has(a[href^="tel:"]) {
		flex: 0 0 auto;
	}

	.masthead .top-bar .text-area:not(:has(a[href^="tel:"])) {
		flex: 1 1 24rem;
		min-width: 0;
	}
}

/* Phones: header row first (logo, search, CTA, menu), then the notices strip. */
@media (max-width: 778px) {
	.masthead {
		display: flex;
		flex-direction: column;
	}

	.masthead .mobile-header-bar {
		order: -1;
	}

	.masthead .top-bar .text-area {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		gap: 0;
	}

	.masthead .top-bar .text-area p {
		width: 100%;
		border-top: 1px solid rgba(255, 255, 255, .1);
	}

	.masthead .top-bar .text-area p:has(a[href^="tel:"]) {
		padding: 0;
		border-top: 0;
	}

	.masthead .top-bar .left-widgets {
		flex-direction: column;
	}

	.masthead .top-bar .mini-contacts.address {
		width: 100%;
		border-top: 1px solid rgba(255, 255, 255, .1);
		text-align: center;
	}

	.masthead .top-bar .soc-ico a {
		width: var(--hc-tap);
		height: var(--hc-tap);
		margin: 0 .125rem;
	}
}

/* ==========================================================================================
   Main row - logo, navigation, booking CTA (desktop)
   ========================================================================================== */

.masthead:not(.side-header) {
	background-color: #fff;
	background-image: none;
	border-bottom: 1px solid var(--hc-border-subtle);
	box-shadow: var(--hc-shadow-sm);
}

/* The7 zeroes this padding with a :not() chain; repeating its selector wins on source order. */
.masthead:not(.side-header):not(.side-header-v-stroke):not(.side-header-menu-icon) .header-bar {
	box-sizing: border-box;
	padding-inline: var(--hc-gutter);
}

.masthead .branding img {
	border-radius: var(--hc-radius-pill);
}

@media (min-width: 1051px) {
	.masthead .header-bar {
		min-height: 5rem;
	}

	.masthead .main-nav {
		gap: .125rem;
	}

	.masthead .main-nav > li {
		margin: 0;
	}

	.masthead .main-nav > li > a {
		min-height: 2.75rem;
		margin: 0;
		padding: 0 .875rem;
		border-radius: var(--hc-radius-sm);
		transition: background-color var(--hc-duration-fast) var(--hc-ease-standard),
			color var(--hc-duration-fast) var(--hc-ease-standard);
	}

	.masthead .main-nav > li > a .menu-text {
		color: var(--hc-slate-text);
		font-family: var(--hc-font);
		font-size: .9375rem;
		font-weight: 500;
		letter-spacing: -.005em;
	}

	/* The7's animated underline is redundant next to the pill states. */
	.masthead .main-nav.underline-decoration > li > a .menu-item-text::before,
	.masthead .main-nav.underline-decoration > li > a .menu-item-text::after {
		display: none;
	}

	.masthead .main-nav > li:not(.act) > a:hover,
	.masthead .main-nav > li:not(.act):focus-within > a {
		background: var(--hc-blue-surface);
	}

	.masthead .main-nav > li:not(.act) > a:hover .menu-text {
		color: var(--hc-blue-primary-dark);
	}

	.masthead .main-nav > li.act > a {
		background: var(--hc-blue-surface);
		box-shadow: inset 0 -2px 0 var(--hc-blue-primary);
	}

	.masthead .main-nav > li.act > a .menu-text {
		color: var(--hc-blue-primary-dark);
		font-weight: 600;
	}
}

/* ---- Dropdowns -------------------------------------------------------------------------- */

.masthead .main-nav .sub-nav,
.masthead .main-nav .dt-mega-menu-wrap {
	padding: .5rem;
	border: 1px solid var(--hc-border-subtle);
	border-radius: var(--hc-radius-md);
	background: var(--hc-card-bg);
	box-shadow: 0 14px 34px -6px rgba(15, 23, 42, .16), var(--hc-shadow-sm);
}

.masthead .main-nav .sub-nav > li > a {
	min-height: 2.5rem;
	padding: .5rem .875rem;
	border-radius: var(--hc-radius-sm);
	transition: background-color var(--hc-duration-fast) var(--hc-ease-standard);
}

.masthead .main-nav .sub-nav > li > a .menu-text {
	color: var(--hc-slate-text);
	font-family: var(--hc-font);
	font-size: .9375rem;
	font-weight: 500;
}

.masthead .main-nav .sub-nav > li > a:hover,
.masthead .main-nav .sub-nav > li.act > a {
	background: var(--hc-blue-surface);
}

.masthead .main-nav .sub-nav > li > a:hover .menu-text,
.masthead .main-nav .sub-nav > li.act > a .menu-text {
	color: var(--hc-blue-primary-dark);
}

/* ==========================================================================================
   Booking CTA - one solid, consistent primary button in every header variant
   The7 paints the fill with ::before and the hover with ::after, so those layers are restyled.
   ========================================================================================== */

.masthead .microwidget-btn.header-elements-button-1 {
	align-items: center;
	justify-content: center;
	min-height: var(--hc-tap);
	padding: 0 1.25rem;
	border: 0;
	border-radius: var(--hc-radius-sm);
	box-shadow: var(--hc-shadow-sm);
	color: #fff;
	font-family: var(--hc-font);
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: 0;
	text-decoration: none;
	transition: transform var(--hc-duration-fast) var(--hc-ease-standard),
		box-shadow var(--hc-duration-normal) var(--hc-ease-standard);
}

.masthead .microwidget-btn.header-elements-button-1::before,
.masthead .microwidget-btn.header-elements-button-1::after {
	border: 0;
	border-radius: inherit;
}

.masthead .microwidget-btn.header-elements-button-1.microwidget-btn-bg-on::before {
	background: var(--hc-blue-primary);
}

.masthead .microwidget-btn.header-elements-button-1.microwidget-btn-hover-bg-on::after {
	background: var(--hc-blue-primary-dark);
}

.masthead .microwidget-btn.header-elements-button-1 span,
.masthead .microwidget-btn.header-elements-button-1 i {
	color: #fff;
}

.masthead .microwidget-btn.header-elements-button-1:hover {
	box-shadow: var(--hc-shadow-hover);
	transform: translateY(-1px);
}

.masthead .microwidget-btn.header-elements-button-1:active {
	box-shadow: var(--hc-shadow-sm);
	transform: translateY(0) scale(.98);
}

/* ==========================================================================================
   Mobile header bar - logo, search, CTA, menu
   ========================================================================================== */

.mobile-header-bar {
	box-sizing: border-box;
	min-height: 3.75rem;
	padding-inline: var(--hc-gutter);
}

.mobile-header-bar .mobile-branding img {
	width: 3.5rem;
	height: auto;
}

.mobile-header-bar .mobile-mini-widgets {
	flex-wrap: nowrap;
	gap: .5rem;
	min-width: 0;
}

/* Phones: the search keeps its 44px icon target; its text label moves off-screen (still read
   by assistive tech) so logo, CTA and menu fit on one row at 360-430px. */
@media (max-width: 778px) {
	.mobile-header-bar .mini-search .submit {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: var(--hc-tap);
		min-height: var(--hc-tap);
	}

	.mobile-header-bar .mini-search .submit span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.mobile-header-bar .microwidget-btn.header-elements-button-1 {
		padding-inline: 1rem;
	}
}

/* Hamburger: a real 44px button */
.mobile-header-bar .dt-mobile-menu-icon,
.mobile-header-bar .mobile-menu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--hc-tap);
	min-height: var(--hc-tap);
	border-radius: var(--hc-radius-sm);
}

.mobile-header-bar .dt-mobile-menu-icon:hover,
.mobile-header-bar .mobile-menu-icon:hover {
	background: var(--hc-blue-surface);
}

/* ==========================================================================================
   Mobile drawer
   ========================================================================================== */

.dt-mobile-header {
	background: #fff;
}

/* The closed drawer sits just off-canvas; a shadow on it bleeds onto the page edge, so the
   shadow only exists while The7 has the drawer open. */
.show-mobile-header .dt-mobile-header {
	box-shadow: 18px 0 46px rgba(15, 23, 42, .18);
}

@media (max-width: 778px) {
	.dt-mobile-header {
		width: min(88vw, 22.5rem);
	}
}

.dt-mobile-header .mobile-header-scrollbar-wrap {
	box-sizing: border-box;
	padding: 4.25rem .875rem 1.5rem;
}

.dt-mobile-header .mobile-main-nav {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	font-family: var(--hc-font);
}

.dt-mobile-header .mobile-main-nav > li {
	min-height: 3rem;
	border: 0;
	border-radius: var(--hc-radius-sm);
	background: transparent;
}

.dt-mobile-header .mobile-main-nav > li::before {
	display: none;
}

.dt-mobile-header .mobile-main-nav > li > a {
	min-height: 3rem;
	height: auto;
	padding: 0 .875rem;
	align-items: center;
	box-sizing: border-box;
}

.dt-mobile-header .mobile-main-nav a .menu-text {
	color: var(--hc-slate-text);
	font-family: var(--hc-font);
	font-size: 1rem;
	font-weight: 500;
}

.dt-mobile-header .mobile-main-nav > li.has-children > a {
	padding-right: 3.75rem;
	position: relative;
}

.dt-mobile-header .mobile-main-nav > li:not(.act) > a:hover,
.dt-mobile-header .mobile-main-nav > li:not(.act) > a:active {
	background: var(--hc-blue-surface);
}

.dt-mobile-header .mobile-main-nav > li.act {
	background: var(--hc-blue-surface);
	box-shadow: inset 3px 0 0 var(--hc-blue-primary);
}

.dt-mobile-header .mobile-main-nav > li.act > a .menu-text {
	color: var(--hc-blue-primary-dark);
	font-weight: 600;
}

/* Expand/collapse chevron: 44px target */
.dt-mobile-header .mobile-main-nav .next-level-button {
	position: absolute;
	top: .125rem;
	right: .25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hc-tap);
	height: var(--hc-tap);
	margin: 0;
	padding: 0;
	border-radius: var(--hc-radius-sm);
	background: transparent;
	color: var(--hc-blue-primary);
}

.dt-mobile-header .mobile-main-nav .next-level-button svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
	transition: transform var(--hc-duration-fast) var(--hc-ease-standard);
}

.dt-mobile-header .mobile-main-nav .next-level-button svg path {
	fill: currentColor;
}

.dt-mobile-header .mobile-main-nav li.open-sub > .next-level-button svg {
	transform: rotate(45deg);
}

.dt-mobile-header .mobile-main-nav .sub-nav {
	margin: .125rem .5rem .5rem .875rem;
	padding: .25rem 0;
	border-left: 2px solid var(--hc-border-subtle);
	border-radius: 0;
	background: transparent;
}

.dt-mobile-header .mobile-main-nav .sub-nav > li > a {
	min-height: var(--hc-tap);
	padding: .5rem .75rem;
	box-sizing: border-box;
}

.dt-mobile-header .mobile-main-nav .sub-nav a .menu-text {
	font-size: .9375rem;
	font-weight: 400;
	color: var(--hc-slate-muted);
}

.dt-mobile-header .dt-close-mobile-menu-icon {
	top: .75rem;
	right: .75rem;
	left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--hc-tap);
	height: var(--hc-tap);
	padding: 0;
	border-radius: var(--hc-radius-sm);
	background: var(--hc-navy-deep);
	box-sizing: border-box;
}

.dt-mobile-header .dt-close-mobile-menu-icon::before,
.dt-mobile-header .dt-close-mobile-menu-icon::after {
	display: none;
}

.dt-mobile-header .dt-close-mobile-menu-icon .close-line-wrap {
	width: 1.25rem;
	height: 1.25rem;
}

.dt-mobile-header .dt-close-mobile-menu-icon .close-line {
	background: #fff;
}