/* NT 2026-09-29 FINAL-C (pklawfirm.sk stand 8084): design fixes after the visual check. PHP part: inc/mod/nt-zz-final-c.php.
   Name with "zz": the module loader enqueues css/mod/nt-*.css in alphabetical order, this file comes last.
   Nothing here changes stored data. Rollback: delete this file and inc/mod/nt-zz-final-c.php. */

/* ===== 1) Banner of service and branch pages (slider a9d08a7, slide ebd58b8) without the Elementor page CSS.
   All banner styles (photo, white upper-case H1, white text, slide height) live only in uploads/elementor/css/post-<ID>.css.
   When that file is being regenerated (wp elementor flush-css, page save) a page opened at that moment gets 404 for it
   (server log 13:55:17: post-10635.css 404) and the banner turns white. The same values are repeated here as a fallback,
   with a lower specificity than the Elementor file, so the Elementor settings still win whenever that file is loaded.
   The photo URL comes from the page meta (_nt_banner_id, _nt_banner_mobile_id), inline style in nt-zz-final-c.php. */
body.nt-service-page .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8 {
	background-color: #1f1f1f; /* 1) also while the photo is still loading on a slow network: white text stays readable */
	background-position: 100% 0%;
	background-size: cover;
	border-radius: 25px;
}
body.nt-service-page .elementor-element-1131c54 {
	--display: flex;
	--flex-direction: column;
	--container-widget-width: 100%;
	--container-widget-height: initial;
	--container-widget-flex-grow: 0;
	--container-widget-align-self: initial;
	--flex-wrap-mobile: wrap;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 10px;
	--padding-right: 10px;
}
body.nt-service-page .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8 .constructum-content-wrapper::before {
	max-width: 77%;
}
body.nt-service-page .elementor-element-a9d08a7 .owl-carousel .content-item {
	height: 774px;
}
body.nt-service-page .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8 .slide-content-column {
	width: 41.5%;
	text-align: left;
}
body.nt-service-page .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8 .elementor-text-column .elementor-container > .elementor-row {
	justify-content: end;
}
body.nt-service-page .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8 .elementor-text-column .elementor-section {
	padding: 0 2% 0 5.5%;
}
body.nt-service-page .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8 .constructum-heading {
	text-transform: uppercase;
	letter-spacing: -0.03em;
	color: #ffffff;
}
body.nt-service-page .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8 .content-slider-item-text {
	font-weight: 400;
	line-height: 1.666666em;
	color: #ffffff;
	padding: 40px 0 0;
}
@media (max-width: 1600px) {
	body.nt-service-page .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8 .slide-content-column { width: 42%; }
	body.nt-service-page .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8 { background-position: 70% 50%; }
	body.nt-service-page .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8 .constructum-heading { font-size: 4.6vw; }
}
@media (max-width: 1279px) {
	body.nt-service-page .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8 .slide-content-column { width: 100%; }
	body.nt-service-page .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8 .elementor-top-section > .elementor-container > .elementor-row { justify-content: flex-end; }
	body.nt-service-page .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8 .elementor-text-column .elementor-section { padding: 0 40px 30px 40px; }
	body.nt-service-page .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8 { background-position: 25% 50%; }
	body.nt-service-page .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8 .constructum-heading { font-size: 60px; }
	body.nt-service-page .elementor-element-a9d08a7 .owl-carousel .content-item { height: 750px; }
}
@media (max-width: 991px) {
	body.nt-service-page .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8 { background-position: top center; }
	body.nt-service-page .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8 .elementor-text-column .elementor-section { padding: 0 0 20px 0; }
	body.nt-service-page .elementor-element-a9d08a7 .owl-carousel .content-item { height: 850px; }
}
@media (max-width: 767px) {
	body.nt-service-page .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8 .elementor-text-column .elementor-section { padding: 0 0 10px 0; }
	body.nt-service-page .elementor-element-a9d08a7 .elementor-repeater-item-ebd58b8 .constructum-heading { font-size: 40px; }
	body.nt-service-page .elementor-element-a9d08a7 .owl-carousel .content-item { height: 800px; }
}
@media (max-width: 575px) {
	body.nt-service-page .elementor-element-a9d08a7 .owl-carousel .content-item { height: 920px; }
}

/* ===== 2) Low laptop screens (1366x768, 1280x720 and lower): the banner was 774px high under a 133px header, so the three
   buttons of service/branch pages and of the home pages (/, /en/, /ru/: body class page-id-3974) were below the fold.
   Only when the window is at most 860px high: the slide takes the rest of the window, smaller H1 and gaps.
   1440x900 and 1920x1080 are not affected (height above 860px). Selectors are longer than the Elementor page CSS and
   nt-qa-fixes.css (QA2 2) on purpose. */
@media only screen and (min-width: 1280px) and (max-height: 860px) {
	body.nt-service-page .elementor-element.elementor-element-a9d08a7 .owl-carousel .content-item.elementor-repeater-item-ebd58b8,
	body.page-id-3974 .elementor-element.elementor-element-a9d08a7 .owl-carousel .content-item.elementor-repeater-item-ebd58b8 {
		height: calc(100vh - 149px);
		min-height: 470px;
	}
	body.nt-service-page .elementor-element.elementor-element-a9d08a7 .owl-carousel .elementor-repeater-item-ebd58b8 h1.constructum-heading,
	body.page-id-3974 .elementor-element.elementor-element-a9d08a7 .owl-carousel .elementor-repeater-item-ebd58b8 h1.constructum-heading {
		font-size: min(46px, 3.5vw);
	}
	body.nt-service-page .elementor-element.elementor-element-a9d08a7 .owl-carousel .elementor-repeater-item-ebd58b8 .content-slider-item-text,
	body.page-id-3974 .elementor-element.elementor-element-a9d08a7 .owl-carousel .elementor-repeater-item-ebd58b8 .content-slider-item-text {
		padding-top: 22px;
		line-height: 1.55em;
	}
	body.nt-service-page .elementor-element.elementor-element-a9d08a7 .owl-carousel .nt-hero-btns,
	body.page-id-3974 .elementor-element.elementor-element-a9d08a7 .owl-carousel .nt-hero-btns {
		margin-top: 24px;
	}
	body.nt-service-page .elementor-element.elementor-element-a9d08a7 .owl-carousel .nt-hero-btns a.nt-hero-btn,
	body.page-id-3974 .elementor-element.elementor-element-a9d08a7 .owl-carousel .nt-hero-btns a.nt-hero-btn {
		min-height: 50px;
		padding-top: 9px;
		padding-bottom: 9px;
	}
}
@media only screen and (min-width: 1280px) and (max-height: 700px) {
	body.nt-service-page .elementor-element.elementor-element-a9d08a7 .owl-carousel .elementor-repeater-item-ebd58b8 h1.constructum-heading,
	body.page-id-3974 .elementor-element.elementor-element-a9d08a7 .owl-carousel .elementor-repeater-item-ebd58b8 h1.constructum-heading {
		font-size: min(40px, 3.1vw);
	}
	body.nt-service-page .elementor-element.elementor-element-a9d08a7 .owl-carousel .elementor-repeater-item-ebd58b8 .content-slider-item-text,
	body.page-id-3974 .elementor-element.elementor-element-a9d08a7 .owl-carousel .elementor-repeater-item-ebd58b8 .content-slider-item-text {
		padding-top: 16px;
		font-size: 15px;
	}
	body.nt-service-page .elementor-element.elementor-element-a9d08a7 .owl-carousel .nt-hero-btns,
	body.page-id-3974 .elementor-element.elementor-element-a9d08a7 .owl-carousel .nt-hero-btns {
		margin-top: 18px;
	}
}

/* ===== 3) Menu arrows. The theme draws a 3px triangle (looks like a dot) after menu items with a submenu, a 5px font
   glyph in the dropdown, a 3px triangle on the mobile submenu trigger, and a 3px dot before the hovered/current item of
   the dropdown. Here: a chevron made of two borders in the text colour (like the top bar), no dot. Covers the language
   switcher arrow too (its flags and labels are not touched). */
/* 3a) header menu, first level: chevron down, turns up while the submenu is open */
body .elementor-widget-constructum_navigation_menu .main-menu:not(.menu-checks) > li.menu-item-has-children > a::after,
body .elementor-widget-constructum_navigation_menu .main-menu:not(.menu-checks) > li.menu-item-has-children > a:hover::after,
body .elementor-widget-constructum_navigation_menu .main-menu:not(.menu-checks) > li.menu-item-has-children.current-menu-ancestor > a::after,
body .elementor-widget-constructum_navigation_menu .main-menu:not(.menu-checks) > li.menu-item-has-children.current-menu-parent > a::after,
body .elementor-widget-constructum_navigation_menu .main-menu:not(.menu-checks) > li.menu-item-has-children.current-menu-item > a::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 6px;
	height: 6px;
	margin: -4px 2px 0 9px;
	border-style: solid;
	border-width: 0 1.5px 1.5px 0;
	border-color: currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s;
}
body .elementor-widget-constructum_navigation_menu .main-menu:not(.menu-checks) > li.menu-item-has-children:hover > a::after,
body .elementor-widget-constructum_navigation_menu .main-menu:not(.menu-checks) > li.menu-item-has-children:focus-within > a::after,
body .elementor-widget-constructum_navigation_menu .main-menu:not(.menu-checks) > li.menu-item-has-children.nt-open > a::after {
	transform: translateY(3px) rotate(-135deg);
}
/* 3b) header dropdown, items with their own submenu: chevron right */
body .elementor-widget-constructum_navigation_menu .main-menu > li ul.sub-menu > li.menu-item-has-children > a::after,
body .elementor-widget-constructum_navigation_menu .main-menu > li ul.sub-menu > li.menu-item-has-children:hover > a::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: 4px;
	left: auto;
	width: 6px;
	height: 6px;
	margin: -4px 0 0;
	font: inherit;
	border-style: solid;
	border-width: 0 1.5px 1.5px 0;
	border-color: currentColor;
	transform: rotate(-45deg);
}
/* 3c) header dropdown: no dot before the hovered/current item (the colour marks it) */
body .elementor-widget-constructum_navigation_menu .main-menu > li ul.sub-menu > li > a::before {
	display: none;
}
/* the 14px indent was the room for that dot: without it the current/hovered item stays in line with the others */
body .elementor-widget-constructum_navigation_menu .main-menu > li ul.sub-menu > li:hover > a,
body .elementor-widget-constructum_navigation_menu .main-menu > li ul.sub-menu > li.current-menu-item > a {
	padding-left: 0;
}
/* 3d) mobile menu: bigger chevron on the submenu trigger (the trigger itself is the whole row, 60px / 40px high) */
body .mobile-header-menu-container .main-menu li .sub-menu-trigger::after {
	width: 9px;
	height: 9px;
	right: 24px;
	margin: -7px 0 0;
	border-style: solid;
	border-width: 0 2px 2px 0;
	border-color: currentColor;
	transform: rotate(45deg);
}
body .mobile-header-menu-container .main-menu li.active > .sub-menu-trigger::after {
	margin-top: -2px;
	transform: rotate(-135deg);
}
/* 3e) mobile menu: no dot before the current submenu item */
body .mobile-header-menu-container .main-menu > li ul.sub-menu > li > a::before {
	display: none;
}
body .mobile-header-menu-container .main-menu > li ul.sub-menu > li.active > a,
body .mobile-header-menu-container .main-menu > li ul.sub-menu > li.current-menu-ancestor > a,
body .mobile-header-menu-container .main-menu > li ul.sub-menu > li.current-menu-parent > a,
body .mobile-header-menu-container .main-menu > li ul.sub-menu > li.current-menu-item > a {
	padding-left: 0;
}

/* ===== 4) Russian pages 1280-1440: the third banner button "Написать нам" went to a second row (text column 490px at 1280).
   Smaller side padding and gap for the Russian banner buttons only; one row on 1280 and 1366. */
@media only screen and (min-width: 1280px) and (max-width: 1440px) {
	html[lang|="ru"] body .elementor-element-a9d08a7 .nt-hero-btns {
		gap: 10px;
	}
	html[lang|="ru"] body .elementor-element-a9d08a7 .nt-hero-btns a.nt-hero-btn {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ===== 6) Blog articles: the two buttons at the end of the article (Buttons block right in .post-content) were dark
   theme buttons. Now like the banner buttons: pill, 14px/500, no upper case; the first gold filled, the second outlined.
   Only direct children of .post-content (the sidebar and the mobile call to action keep their style). The height alignment
   of FINAL 5 (nt-qa-fixes.css, margin-bottom of .wp-block-button) is not touched. */
body.single-post .post-content > .wp-block-buttons > .wp-block-button > a.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 58px;
	padding: 13px 42px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	color: #1f1f1f;
	background: transparent;
	background-image: none;
	border: 1px solid #166574;
	border-radius: 9999px;
	box-shadow: none;
	transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}
body.single-post .post-content > .wp-block-buttons > .wp-block-button > a.wp-block-button__link:hover {
	color: #166574;
	background: transparent;
	border-color: #166574;
}
body.single-post .post-content > .wp-block-buttons > .wp-block-button:first-child > a.wp-block-button__link {
	color: #1f1f1f;
	background: #166574;
	border-color: #166574;
}
body.single-post .post-content > .wp-block-buttons > .wp-block-button:first-child > a.wp-block-button__link:hover {
	color: #1f1f1f;
	background: #0f4c57;
	border-color: #0f4c57;
}
body.single-post .post-content > .wp-block-buttons > .wp-block-button > a.wp-block-button__link svg,
body.single-post .post-content > .wp-block-buttons > .wp-block-button > a.wp-block-button__link::before,
body.single-post .post-content > .wp-block-buttons > .wp-block-button > a.wp-block-button__link::after {
	display: none;
}
@media only screen and (max-width: 767px) {
	body.single-post .post-content > .wp-block-buttons > .wp-block-button > a.wp-block-button__link {
		min-height: 52px;
		padding: 10px 24px;
	}
}

/* ===== 7) "на связи 24/7" (heading 16c28da on the home page and service pages). The widget font is DM Mono, which has no
   Cyrillic: the Russian words were drawn by a fallback font with a monospace space and on service pages the line broke in two.
   Russian pages: the words in Manrope, one line (as "sme tu 24/7" in Slovak). "24/7" keeps DM Mono like SK and EN. */
html[lang|="ru"] body .elementor-element-16c28da .constructum-heading-content {
	white-space: nowrap;
}
html[lang|="ru"] body .elementor-element-16c28da .constructum-heading-content > span {
	font-family: "Manrope", sans-serif;
	letter-spacing: -0.04em;
}

/* ===== 8) Phones: on service pages the dark block "Почему именно мы" (d9c1b78) followed the text block 6998958 with no gap.
   Same gap as between the other blocks on phones (60px). Only where these two blocks follow each other. */
@media only screen and (max-width: 767px) {
	body.nt-service-page .elementor-element-6998958 + .elementor-element-d9c1b78 {
		margin-top: 60px;
	}
}

/* ===== 9) Home pages (/, /en/, /ru/, body class page-id-3974), three cards under the banner (grid 1a03f19): the card
   titles sat on the card bottom, so a one-line title ("Family law") started lower than the two-line ones. The title box
   is two lines high everywhere, the titles start on one line. Russian: "Уголовное" ran across the striped photo inset of
   the first card; smaller titles on all three Russian cards: at 1440 the word now ends about as far into the inset as the
   Slovak "Trestné" (30px). Clear of the inset completely only from about 1850px wide (full 70px there). */
@media only screen and (min-width: 1025px) {
	body.page-id-3974 .elementor-element-1a03f19 .elementor-widget-constructum_heading h2.constructum-heading {
		min-height: 2em;
	}
	html[lang|="ru"] body.page-id-3974 .elementor-element-1a03f19 .elementor-widget-constructum_heading h2.constructum-heading {
		font-size: clamp(46px, calc((100vw - 40px) / 3 * 0.2154 - 62px), 70px);
		letter-spacing: -0.03em;
	}
}

/* ===== 10) Blog and posts: the white tab with an icon on the right edge is the theme button that slides out the sidebar
   below 992px (.simple-sidebar-trigger, no label). Its content (categories, contacts, call to action) is repeated after the
   article by nt-tails.php (8), so the tab is hidden on all widths. */
.simple-sidebar-trigger {
	display: none !important;
}

/* ===== 11) Case pages on phones: the label "Predchádzajúca" did not fit next to its arrow and broke into two lines.
   One line: smaller size and tighter tracking on phones only. */
@media only screen and (max-width: 767px) {
	body.single-project .post-navigation .post-navigation-link a {
		white-space: nowrap;
		font-size: 12px;
		letter-spacing: 0;
	}
}