/* Custom overrides to bring the header closer to the rnpcmt.by visual style */

#sp-top-bar .sp-org-name {
	color: inherit;
	font-size: 13px;
	margin-right: 16px;
}

#sp-top-bar .sp-special-version-btn {
	display: inline-block;
	color: #ffffff;
	background-color: #1f3a63;
	border-radius: 999px;
	padding: 4px 14px;
	font-size: 12px;
	text-decoration: none;
	white-space: nowrap;
}

#sp-top-bar .sp-special-version-btn:hover {
	background-color: #2c4f80;
	color: #ffffff;
}

/* Search box (mod_finder, header.php, with header.php forcing show_button=1
   on the module params), rendered as a rounded pill matching the navy header
   background, with a real submit button instead of the framework's default
   ::after pseudo-icon overlay (theme.scss .header-modules .search form::after) -
   that overlay is disabled below because its position is anchored to the
   <form>, not the input, so it drifted outside the input once the input grew
   on focus; a real in-flow button can't drift since it's laid out by flex
   instead of being absolutely positioned. */
.header-modules .search {
	width: 220px;
	transition: width 0.2s ease;
}

.header-modules .search:focus-within {
	width: 260px;
}

.header-modules .search form::after {
	content: none;
}

.header-modules .search form {
	position: relative;
}

/* mod_finder only wraps the input+button in this div when show_button is on
   (modules/mod_finder/tmpl/default.php) - it's the flex row the pill shape
   and the input/button split is built from. flex-wrap is set explicitly
   here because this template loads real Bootstrap (css/bootstrap.min.css),
   whose own .input-group rule sets flex-wrap: wrap - that property isn't
   touched by display/align-items above, so without overriding it too, the
   input (stretched to fill the row) pushes the button onto its own line. */
.header-modules .search .mod-finder__search {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}

/* The awesomplete JS preset (loaded for autosuggest) wraps the <input> in its
   own "display: inline-block" span (media/vendor/awesomplete/css), which
   isn't a flex-sizing-aware element - without overriding it to behave like a
   block flex child, it shrinks to the input's intrinsic width instead of
   stretching to fill the row, leaving a gap before the button. */
.header-modules .search .mod-finder__search .awesomplete {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.header-modules .search input[type="text"],
.header-modules .search input[type="search"] {
	box-sizing: border-box;
	width: 100%;
	height: 36px;
	background-color: rgba(255, 255, 255, 0.12);
	border: 1.5px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px 0 0 999px;
	color: #ffffff;
	font-size: 13.5px;
	padding: 5px 16px;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.header-modules .search input[type="text"]::placeholder,
.header-modules .search input[type="search"]::placeholder {
	color: #c7d2e6;
}

.header-modules .search input[type="text"]:focus,
.header-modules .search input[type="search"]:focus {
	background-color: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.55);
	outline: none;
	box-shadow: none;
}

/* The submit button's own content (an empty "icon-search" span meant for an
   admin-side icon font not loaded on the front end, plus a "Найти" text
   label) is collapsed to font-size 0 and replaced with a font-awesome glyph
   via ::before, reusing the same magnifier glyph/font the framework's own
   (now-disabled) ::after overlay used. */
.header-modules .search button[type="submit"] {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	font-size: 0;
	line-height: 36px;
	border: none;
	border-radius: 0 999px 999px 0;
	background-color: #6fbf8b;
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.header-modules .search button[type="submit"]:hover,
.header-modules .search button[type="submit"]:focus {
	background-color: #4f9e6c;
	outline: none;
}

.header-modules .search button[type="submit"]::before {
	content: "\f002";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 13px;
}

/* Navy header background, hardcoded because the SCSS color variables are
   driven by the DB-persisted template style, which isn't reachable here */
#sp-top-bar {
	background-color: #142847;
	color: #c7d2e6;
}

#sp-header.full-header {
	background-color: #1f3a63;
}

/* The header row's height is the deliberately chosen "menu panel" height -
   everything inside (logo, nav) is centered against this fixed value instead
   of the row growing to whatever size the logo happens to render at (which is
   what "height: auto" previously did, and which is also what made the logo
   look randomly off-center depending on its own intrinsic pixel size). */
#sp-header {
	height: 140px;
	min-height: 140px;
	display: flex;
	align-items: center;
}

/* #sp-header's own row only sizes to its content (the logo), it doesn't
   stretch to fill the fixed height above - without this, the extra height
   we add to #sp-header just appears as dead space below the row instead of
   centering it, since the row's "align-items-center" class only centers
   children within the row's own (content-sized) height, not #sp-header's. */
#sp-header .container-fluid {
	width: 100%;
}

#sp-header .logo {
	height: 100%;
	display: inline-flex;
	align-items: center;
}

/* Language switcher buttons in the top bar, similar to RNPC's "RUS" control */
.sp-lang-switcher {
	display: flex;
	align-items: center;
	gap: 4px;
}

.sp-lang-switcher a {
	color: #c7d2e6;
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 999px;
	letter-spacing: 0.02em;
}

.sp-lang-switcher a:hover,
.sp-lang-switcher a.active,
.sp-lang-switcher a.gt-current-lang {
	color: #ffffff;
	background-color: rgba(255, 255, 255, 0.15);
}

/* The language switcher is driven by the GTranslate widget (flags.js), which
   injects its own <a data-gt-lang="..."> flag links + a hidden Google
   Translate gadget into #gt-wrapper-121 at runtime - .sp-lang-switcher a
   above already styles those links since it's a descendant selector, this
   just (1) makes the injected wrapper a flex row like our old static markup
   was, (2) hides GTranslate's flag images and the hidden Google gadget, and
   (3) swaps in our РУС/БЕЛ/ENG text labels via the same data-gt-lang
   attribute the widget sets, so the visual style matches what was here
   before without touching how the widget actually switches the language. */
.sp-lang-switcher .gtranslate_wrapper {
	display: flex;
	align-items: center;
	gap: 4px;
}

.sp-lang-switcher .gtranslate_wrapper img,
.sp-lang-switcher .gtranslate_wrapper .skiptranslate {
	display: none;
}

.sp-lang-switcher .gtranslate_wrapper a[data-gt-lang="ru"]::before {
	content: "РУС";
}

.sp-lang-switcher .gtranslate_wrapper a[data-gt-lang="be"]::before {
	content: "БЕЛ";
}

.sp-lang-switcher .gtranslate_wrapper a[data-gt-lang="en"]::before {
	content: "ENG";
}

/* Center the main menu and restyle the items as navy nav buttons,
   similar to the RNPC MT header.

   The menu's true horizontal position can't be centered just by setting
   justify-content on its flex ancestors, because the logo column and the
   toggler/search column on either side are different widths, so any
   "centered in the leftover space" approach ends up off-center. Instead
   the nav is pulled out of the normal flow and centered on the header row
   itself, independent of the logo/icon widths on either side.

   !important is required here because the framework's own main.js forces
   this same element back to "position: static" via an inline style on
   every page load (mega-menu setup code), which would otherwise always
   win over a plain external stylesheet rule and break the dropdown/flyout
   positioning math that depends on this being the nav's containing block. */
#sp-header .container-inner > .row {
	position: relative !important;
}

#sp-header nav.sp-megamenu-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
}

#sp-header .sp-megamenu-parent {
	display: flex;
	float: none;
	align-items: center;
	justify-content: center;
	gap: 32px;
	margin: 0;
	white-space: nowrap;
}

#sp-header .sp-megamenu-parent > li {
	position: relative;
}

#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span {
	position: relative;
	display: flex;
	align-items: center;
	padding: 9px 16px;
	color: #ffffff;
	font-size: 15.5px;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.2;
	border-radius: 999px;
	overflow: hidden;
	z-index: 0;
	transition: color 0.25s ease, transform 0.2s ease;
}

/* Radial hover fill: an ellipse sized with "closest-side" so it reaches
   alpha 0 exactly at the link's own edges in every direction, regardless of
   how wide/narrow the pill is (a plain circle fades at the same rate on all
   sides, so on a wide pill it still looked "solid" near the top/bottom
   edges while fading on the sides - closest-side fixes that). The reveal
   itself is animated via clip-path (growing circle) rather than scaling the
   gradient, so the gradient's own fade-to-transparent stays fixed/correct
   throughout the animation. */
#sp-header .sp-megamenu-parent > li > a::before,
#sp-header .sp-megamenu-parent > li > span::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse closest-side, rgba(111, 191, 139, 0.45) 0%, rgba(79, 158, 108, 0.22) 55%, rgba(79, 158, 108, 0) 100%);
	clip-path: circle(0% at 50% 50%);
	transition: clip-path 0.25s linear;
	z-index: -1;
}

#sp-header .sp-megamenu-parent > li:hover > a::before,
#sp-header .sp-megamenu-parent > li:hover > span::before,
#sp-header .sp-megamenu-parent > li.active > a::before,
#sp-header .sp-megamenu-parent > li.active > span::before {
	clip-path: circle(150% at 50% 50%);
}

#sp-header .sp-megamenu-parent > li:hover > a,
#sp-header .sp-megamenu-parent > li:hover > span,
#sp-header .sp-megamenu-parent > li.active > a,
#sp-header .sp-megamenu-parent > li.active > span {
	color: #ffffff;
	transform: translateY(-1px);
}

#sp-header .sp-megamenu-parent > li.sp-has-child > a:after,
#sp-header .sp-megamenu-parent > li.sp-has-child > span:after {
	float: none;
	margin-left: 6px;
	font-size: 0.7em;
	opacity: 0.75;
}

/* Dropdown sub-menu levels: lighter weight + a touch more breathing room,
   to match the slimmer top-level items instead of the framework default's
   heavy bold text. */
#sp-header .sp-dropdown li.sp-menu-item > a,
#sp-header .sp-dropdown li.sp-menu-item > span:not(.sp-menu-badge) {
	font-size: 14.5px;
	font-weight: 500;
	padding: 10px 14px;
	border-radius: 8px;
	transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

#sp-header .sp-dropdown li.sp-menu-item > a:hover,
#sp-header .sp-dropdown li.sp-menu-item > span:not(.sp-menu-badge):hover {
	background-color: #f4f6fa;
	color: #1f3a63;
	padding-left: 18px;
}

/* Dropdown panels have a fixed width (set inline per-panel by the menu
   renderer, via the "Dropdown Width" template style param), which is too
   narrow for some item labels ("Отделение анестезиологии и реанимации",
   etc). Size each panel to fit its longest item instead of guessing a
   fixed px value. !important is needed to beat the inline width. */
#sp-header .sp-dropdown.sp-dropdown-main,
#sp-header .sp-dropdown.sp-dropdown-sub {
	width: auto !important;
	min-width: 260px;
}

/* The white panel background lives on .sp-dropdown-inner, not on the
   .sp-dropdown wrapper itself, so the rounding/shadow has to go here too -
   putting it on the wrapper instead would leave this inner box's square
   corners poking out past the rounded edge. */
#sp-header .sp-dropdown-inner {
	padding: 10px;
	border-radius: 12px;
	box-shadow: 0 16px 36px rgba(10, 25, 50, 0.18) !important;
}

#sp-header .sp-dropdown-items {
	white-space: nowrap;
}

/* Nested flyout submenus (e.g. "О больнице" -> "Отделения больницы" -> ...)
   render shifted left and overlapping their parent panel, because the
   framework positions them with "left: 100%" relative to the triggering <li>,
   which ignores the 10px padding of the parent panel's .sp-dropdown-inner
   (set above). Fix this AND the resulting mouse-hover dead zone in one move:
   extend the triggering <li>'s right edge outward by that same 10px via
   padding (the negative margin keeps the visible text position unchanged
   and also grows the <li>'s hoverable hit box so it touches the flyout with
   no gap). Because "left: 100%" on the flyout is measured from this <li>'s
   border edge, padding-right alone pushes the flyout exactly flush with the
   parent panel - no separate margin-left is needed on the flyout itself, and
   adding one would double-count the offset and reopen a visible gap. */
#sp-header .sp-dropdown li.sp-menu-item.sp-has-child {
	margin-right: -10px;
	padding-right: 10px;
}

/* Right-pointing arrow on dropdown items that open a further nested flyout,
   so it's visually obvious which entries expand instead of just linking out.
   The framework already has an ":after" rule for this (menu.scss, body.ltr
   block), but it relies on a Font Awesome content code from a $variable
   font-family that may not match what's actually loaded; a literal Unicode
   arrow sidesteps that and is guaranteed to render. Stretching the link to
   the panel's full width (flex + justify-content) keeps the arrow flush
   against the right edge regardless of how short the item's text is. */
#sp-header .sp-dropdown li.sp-menu-item.sp-has-child > a,
#sp-header .sp-dropdown li.sp-menu-item.sp-has-child > span:not(.sp-menu-badge) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

#sp-header .sp-dropdown li.sp-menu-item.sp-has-child > a:after,
#sp-header .sp-dropdown li.sp-menu-item.sp-has-child > span:not(.sp-menu-badge):after {
	content: "\203A";
	margin-left: 12px;
	font-weight: 700;
}

/* Dropdown open animations run at half their framework default duration
   (e.g. fade-up: 400ms -> 200ms), so menus unfold twice as fast. Only the
   duration is overridden; the animation-name/timing-function set by the
   shorthand "animation" rule in menu.scss are left untouched. */
.sp-megamenu-parent.menu-animation-fade .sp-has-child:hover > .sp-dropdown {
	animation-duration: 300ms;
}

.sp-megamenu-parent.menu-animation-fade-up .sp-has-child:hover > .sp-dropdown,
.sp-megamenu-parent.menu-animation-fade-down .sp-has-child:hover > .sp-dropdown {
	animation-duration: 200ms;
}

.sp-megamenu-parent.menu-animation-zoom .sp-has-child:hover > .sp-dropdown,
.sp-megamenu-parent.menu-animation-rotate .sp-has-child:hover > .sp-dropdown,
.sp-megamenu-parent.menu-animation-pulse .sp-has-child:hover > .sp-dropdown {
	animation-duration: 150ms;
}

/* Personal data processing notice bar (markup in index.php). The framework's
   own #sp-cookie-consent rule (theme.scss) only sets position/size, with no
   colors/layout, so the visual design is filled in here. */
#sp-cookie-consent {
	background-color: #142847;
	color: #e7ecf5;
	/* The second shadow is a solid, blur-free extension below the bar's own
	   bottom edge (which otherwise sits flush against the viewport's bottom
	   edge). Without it, the dismiss animation's upward bounce briefly
	   reveals empty page background in that gap, making the bar look like
	   it's "lifting off" the bottom edge instead of continuing past it. */
	box-shadow: 0 -6px 24px rgba(10, 25, 50, 0.25), 0 60px 0 0 #142847;
}

/* Dismiss animation for the "Согласен" button (wired up in main.js): slides
   down, overshoots back up slightly (the "bounce"), then continues down off
   screen while fading out. main.js adds this class instead of calling
   jQuery's fadeOut() directly, then hides the element once the animation
   ends (with a setTimeout fallback in case animationend never fires). */
@keyframes sp-cookie-consent-dismiss {
	0% {
		transform: translateY(0);
		opacity: 1;
	}

	40% {
		transform: translateY(12%);
		opacity: 1;
	}

	60% {
		transform: translateY(-4%);
		opacity: 1;
	}

	100% {
		transform: translateY(110%);
		opacity: 0;
	}
}

#sp-cookie-consent.sp-cookie-consent-hide {
	animation: sp-cookie-consent-dismiss 0.6s cubic-bezier(0.36, 0, 0.66, -0.56) forwards;
}

#sp-cookie-consent > div {
	max-width: 1140px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

#sp-cookie-consent p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	flex: 1 1 480px;
}

#sp-cookie-consent a:not(.sp-cookie-allow) {
	color: #6fbf8b;
	text-decoration: underline;
}

#sp-cookie-consent .sp-cookie-allow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #6fbf8b;
	color: #ffffff;
	font-weight: 700;
	font-size: 14px;
	padding: 10px 28px;
	border-radius: 999px;
	flex: 0 0 auto;
	transition: background-color 0.15s ease;
}

#sp-cookie-consent .sp-cookie-allow:hover {
	background-color: #4f9e6c;
	color: #ffffff;
}

/* The accessibility library (header.php) injects its own floating trigger
   icon into the page by default - hidden here since "Версия для слабовидящих"
   is the only trigger we want, to avoid showing two buttons that do the
   same thing. */
i._access-icon {
	display: none !important;
}