/**
 * Medeo theme glue CSS.
 *
 * The vendor CSS (assets/css/vendor/*.css, lifted from the Bitrix
 * bitcorp_s1 template) covers almost all layout/typography/color. This
 * file only adds:
 *   1) MAX messenger icon styling (the original site used WhatsApp icons
 *      in the same spots — replaced everywhere with MAX per spec).
 *   2) A couple of small responsive/visibility fixes for the two-phone
 *      header that the vendor CSS didn't need to handle before (the
 *      original only ever fully showed one number on some breakpoints).
 */

:root {
	--medeo-blue: #0682f6;
	--medeo-red: #ed1c24;
	--medeo-red-hover: #d51920;
	--medeo-green: #48b85e;
}

/* --- MAX icon (replaces WhatsApp icon everywhere) --------------------- */

.max-block {
	display: flex;
	align-items: center;
	margin: 8px 0 5px !important;
}

.max-block > a {
	margin-left: 5px;
	color: #000;
	font-size: 15px;
}

.max-block span {
	display: block;
	width: 24px;
	height: 24px;
	background-color: var(--medeo-blue);
	background-image: url('../img/max-logo.svg');
	background-size: 14px 14px;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 50%;
}

.max-block span > a {
	display: block;
	width: 24px;
	height: 24px;
}

.max-block--new a {
	margin-left: 0;
	margin-right: 10px;
}

.max-icon-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--medeo-blue);
	vertical-align: middle;
	line-height: 0;
}

.max-icon-link .max-icon {
	width: 14px;
	height: 14px;
	display: block;
}

/* Header MAX icon: sized to match the neighbouring "Запись" button height. */
.max-icon-link--header {
	width: 38px;
	height: 38px;
	margin-left: 8px;
}

.max-icon-link--header .max-icon {
	width: 20px;
	height: 20px;
}

/* --- Header: tighten address + phones + Запись into one packed group ---- */

.header-contacts-group {
	align-items: flex-start;
	justify-content: flex-end;
	gap: 30px;
	padding-top: 4px;
}

.header-contacts-group .h-phone--worktime {
	margin: 0;
}

.header-contacts-group .max-block {
	margin: 0 !important;
	align-items: flex-start;
}

.header-contacts-group .metro-text {
	text-align: left;
}

.metro-icon-inline {
	display: inline-flex;
	vertical-align: middle;
	margin-right: 4px;
	position: relative;
	top: -2px;
}

.metro-icon-inline svg {
	display: block;
}

.f-phone-number .max-icon-link {
	margin-left: 8px;
}

.contact-widget-max {
	background: var(--medeo-blue);
}

/* Floating widget MAX icon: same treatment as the call icon (currentColor
   SVGs from the vendor CSS), but ours is an <img>, so size it to match. */
.contact-widget-item-icon .max-icon {
	width: 20px;
	height: 20px;
}

/* --- Header: keep BOTH phone numbers visible everywhere ---------------- */
/* (The live site's mobile footer only shows one number — this theme always
   renders both MEDEO_PHONE_MAIN and MEDEO_PHONE_SECOND in the header,
   mobile menu, and footer, so no hiding rules are needed/added here.) */

@media (max-width: 480px) {
	.head-phones-wrap {
		flex-wrap: wrap;
	}
}

/* --- Header: dropdown submenus + search toggle -------------------------- */

/* The vendor CSS never resets list defaults for the desktop <ul class="main-menu">
   (only .mobile-menu gets that treatment) — without this the browser's default
   ul padding-left pushes the whole menu ~40px right of the logo/breadcrumbs. */
.main-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-menu--item.has-dropdown {
	position: relative;
}

.dropdown-caret {
	margin-left: 4px;
	font-size: 11px;
}

.main-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 260px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	border-radius: 0 0 4px 4px;
	padding: 8px 0;
	z-index: 50;
	list-style: none;
	margin: 0;
}

.main-menu .sub-menu li {
	list-style: none;
	display: block;
	width: 100%;
}

.main-menu .sub-menu a {
	display: block;
	padding: 5px 20px;
	color: #111 !important;
	text-transform: none;
	white-space: nowrap;
	line-height: 1.3;
}

.main-menu .sub-menu a:hover {
	background: #f2f7ff;
	color: var(--medeo-blue) !important;
}

.main-menu--item.has-dropdown:hover > .sub-menu {
	display: block;
}

/* Long dropdowns (9+ items, e.g. "Направления") become a clean 2-column
   grid instead of one tall single-column list. */
.main-menu .sub-menu:has(li:nth-child(9)) {
	column-count: 2;
	column-gap: 0;
	min-width: 480px;
}

.main-menu .sub-menu:has(li:nth-child(9)) li {
	break-inside: avoid;
}

/* --- Header search: expandable input ------------------------------------ */

.header-search-form {
	display: none;
	position: absolute;
	inset: 0;
	background: var(--medeo-blue);
	align-items: center;
	padding: 0 20px;
	z-index: 60;
}

.header-search-form.is-open {
	display: flex;
}

.header-search-form form {
	flex: 0 1 40%;
	margin-left: auto;
	position: relative;
}

.header-search-form input[type="text"] {
	width: 100%;
	padding: 12px 45px 12px 20px;
	border: none;
	border-radius: 999px;
	box-sizing: border-box;
	font-size: 14px;
	background: #fff;
	color: #111;
}

.header-search-form button {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 1;
	border: none;
	background: none;
	color: var(--medeo-blue);
	border-radius: 50%;
	cursor: pointer;
}

.search-toggle-col,
.nav-main--wrapper {
	position: relative;
}

.nav-main--wrapper {
	align-items: center;
	justify-content: space-between;
}

.search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}

/* --- Breadcrumbs --------------------------------------------------------- */

.medeo-breadcrumbs {
	background: #f5f6f8;
	padding: 10px 0;
	font-size: 13px;
	color: #777;
}

.medeo-breadcrumbs a {
	color: #777;
}

.medeo-breadcrumbs .sep {
	margin: 0 6px;
}

.medeo-breadcrumbs .current {
	color: #333;
}

/* --- Two-column layout: left sidebar + content --------------------------- */

/* .medeo-page-layout is always combined with the vendor "container" class
   (same fixed-width breakpoints as the header/breadcrumbs use) so its left
   edge lines up with the logo, menu and breadcrumbs — it must NOT add its
   own width/margin/padding on top of that. */
.medeo-page-layout {
	display: flex;
	gap: 40px;
	padding-top: 30px;
	padding-bottom: 60px;
	align-items: flex-start;
}

.medeo-sidebar {
	flex: 0 0 220px;
}

.medeo-sidebar-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.medeo-sidebar-list li {
	margin-bottom: 14px;
}

.medeo-sidebar-list a {
	color: #111;
}

.medeo-sidebar-list li.is-current a {
	color: var(--medeo-blue);
	font-weight: 700;
}

.medeo-sidebar-title {
	display: block;
	font-weight: 700;
	color: #111 !important;
	text-decoration: none;
}

.medeo-sidebar-title:hover {
	color: var(--medeo-blue) !important;
}

.medeo-page-content {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 767px) {
	.medeo-page-layout {
		flex-direction: column;
	}
	.medeo-sidebar {
		flex: none;
		width: 100%;
	}
}

/* --- Lead / request form block -------------------------------------------- */

.medeo-lead-form {
	background: #eef4fb;
	border-radius: 6px;
	padding: 30px;
	margin: 40px 0;
}

.medeo-lead-form h3 {
	margin-top: 0;
}

.medeo-lead-form-row {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 15px;
}

.medeo-lead-form label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	flex: 1 1 220px;
}

.medeo-lead-form input,
.medeo-lead-form textarea {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 10px 12px;
	border: 1px solid #d5dbe3;
	border-radius: 4px;
	font-weight: 400;
	box-sizing: border-box;
}

.medeo-lead-form-message {
	display: block;
	margin-bottom: 15px;
}

.medeo-lead-form-message textarea {
	min-height: 100px;
}

.medeo-lead-form-consent {
	display: inline-block;
	margin-left: 15px;
	font-size: 12px;
	color: #777;
	max-width: 320px;
	vertical-align: middle;
}

.medeo-lead-form-success {
	color: var(--medeo-green);
	font-weight: 600;
}

/* --- Floating contact widget: pin closer to the bottom edge -------------- */
/* (vendor CSS sets bottom:140px, which sits uncomfortably high up the page) */
#contact_widget_button {
	bottom: 24px !important;
}

/* --- Mobile hamburger button: make it actually appear on mobile --------- */
/* header.php gives it classes "mobile-menu--btn show-sm dn" — vendor CSS's
   .dn / .show-sm utilities should already combine into "hidden by default,
   shown under 767px", but in practice the button never appeared at mobile
   widths (no conflicting rule found — likely a load-order/specificity quirk
   in the vendor bundle). This rule is self-contained and guaranteed to win
   (it's last in the cascade and more specific than the single-class vendor
   utilities), so it doesn't depend on diagnosing the vendor issue further. */
.mobile-menu--btn.show-sm.dn {
	display: none;
}

@media (max-width: 767px) {
	.mobile-menu--btn.show-sm.dn {
		display: block !important;
	}
}

/* --- Mobile: always-visible click-to-call button ------------------------- */

.mobile-call-btn {
	display: none;
	position: fixed;
	top: 15px;
	right: 65px;
	width: 40px;
	height: 40px;
	border-radius: 3px;
	background: var(--medeo-green, #48b85e);
	color: #fff !important;
	align-items: center;
	justify-content: center;
	font-size: 1.3em;
	z-index: 1001;
	text-decoration: none;
}

@media (max-width: 767px) {
	.mobile-call-btn {
		display: flex !important;
	}
}

/* --- Homepage "seo-grid" advantage cards: guaranteed mobile collapse ----- */
/* Vendor styles.css already has a max-width:767px override collapsing this
   to 1 column, but it wasn't reliably winning in testing — this is a
   self-contained, last-in-cascade version that doesn't depend on figuring
   out why (same defensive approach as the price-card grid overflow fix). */
@media (max-width: 767px) {
	.seo-grid {
		grid-template-columns: 1fr !important;
	}
}

.seo-card {
	min-width: 0;
}

.seo-intro {
	box-sizing: border-box;
	max-width: 100%;
}

.seo-intro h2,
.seo-intro .lead-text,
.seo-intro > p {
	overflow-wrap: break-word;
}

@media (max-width: 480px) {
	.seo-intro h2 {
		font-size: 22px !important;
	}
}