/*
Theme Name: Porto Child
Theme URI: https://www.portotheme.com/wordpress/porto
Author: P-THEMES
Author URI: https://www.portotheme.com/
Description: Porto Responsive WordPress + eCommerce Theme.
Version: 1.1
Template: porto
License: Commercial
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, ecommerce, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/

/* Dvojfarebné nadpisy – časť v <span> je v oranžovej farbe (ako „Stavby, za ktorými si stojíme“ na Projektoch) */
.vc_custom_heading > span,
.porto-u-main-heading > :is(h1, h2, h3, h4, h5, h6) > span,
.service-row-title > span {
	color: #e04a22;
}

/* Kontakt: telefón, e-mail a adresa predajne na strede, keď sú stĺpce pod sebou (tablet, mobil) */
@media (max-width: 991px) {
	.kontakt-info .vc_column_container {
		text-align: center;
	}

	.kontakt-info .vc_custom_heading {
		text-align: center !important;
	}

	.kontakt-info .porto-sicon-box {
		justify-content: center;
	}
}

/* Kontakt: poznámka o spracúvaní údajov nad tlačidlom formulára */
.zs-form-note {
	color: #999;
	font-size: 0.85em;
	line-height: 1.5;
	margin: 4px 0 14px;
}

.zs-form-note a {
	color: #e04a22;
}

/* Pätička: údaje firmy pod copyright (zákon o elektronickom obchode) */
.zs-footer__company {
	color: #9a9da0;
	display: block;
	font-size: 11.5px;
	line-height: 1.5;
	margin-top: 3px;
}

/* Pätička: copyright + údaje firmy úplne dole pod riadkom s odkazmi a sociálnymi sieťami
   (presunuté skriptom stary-web-projekty/paticka-copyright-dole.php) */
.zs-footer .zs-footer__bottom-inner > .zs-footer__legal {
	grid-column: 2;
}

.zs-footer .zs-footer__bottom-inner > .zs-footer__socials {
	grid-column: 3;
}

.zs-footer .zs-footer__copyright--dole {
	width: min(1480px, calc(100% - 80px));
	margin: 0 auto;
	padding: 18px 0 26px;
	border-top: 1px solid rgba(35, 38, 42, 0.08);
	text-align: center;
}

@media (max-width: 991px) {
	.zs-footer .zs-footer__copyright--dole {
		width: calc(100% - 30px);
		padding: 16px 0 22px;
	}
}

/* Pätička: logo na strede v responzívnom zobrazení (CSS pätičky je v Porto builderi „footer“, toto ho prepisuje) */
@media (max-width: 991px) {
	/* celý blok (logo, text, tlačidlo) má max. 560 px – na tablete bol prilepený vľavo */
	.zs-footer .zs-footer__brand {
		margin-left: auto !important;
		margin-right: auto !important;
		align-self: center;
	}

	.zs-footer .zs-footer__brand .zs-footer__logo {
		display: block !important;
		width: fit-content !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* text pod logom na stred */
	.zs-footer .zs-footer__brand .zs-footer__description {
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center !important;
	}

	/* riadok pätičky (WPBakery vc_custom_1711431935221) bez horného paddingu 48px – pätička má vlastný odstup */
	#footer-section .vc_custom_1711431935221 {
		padding-top: 0 !important;
	}

	/* tlačidlo „Viac o nás“ tiež na stred */
	.zs-footer .zs-footer__brand .zs-footer__button {
		display: flex !important;
		width: fit-content !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* na najmenších displejoch má tlačidlo celú šírku (ako v pôvodnom CSS pätičky) */
@media (max-width: 420px) {
	.zs-footer .zs-footer__brand .zs-footer__button {
		width: 100% !important;
	}
}

/* Logo namiesto oranžového trojuholníka pri spodnej čiare sekcie
   (trojuholník je v Porto → Theme Options → Custom CSS: .section-custom-construction-2:after)
   + to isté logo aj na stránke O nás (page-id-24), ktorá túto sekciu nemá */
@media (min-width: 1600px) {
	.section-custom-construction-2::after,
	.page-id-24 #main::after {
		content: "" !important;
		display: block !important;
		position: absolute !important;
		width: 74px !important;
		height: 87px !important;
		left: 116px !important;
		bottom: 0 !important;
		transform: none !important;
		background: url(images/logo-znak.png) center bottom / contain no-repeat !important;
	}
}

/* Projekty: text pod nadpisom „Stavby, za ktorými si stojíme“ zarovnaný do bloku */
.projects-lead {
	text-align: justify;
	hyphens: auto;
}

/* Projekty: kategórie na tablete a mobile v jednom riadku s posuvníkom
   (aby bolo jasné, že sa dajú posúvať – viditeľný pásik + stmievanie okraja, triedy pf-* pridáva js/projekty-filter.js) */
@media (max-width: 991px) {
	.porto-posts-grid[data-post_type="portfolio"] .portfolio-filter {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		margin: 0 -15px 22px !important;
		padding: 2px 15px 12px !important;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		scroll-padding-left: 15px;
		scrollbar-width: thin !important;
		scrollbar-color: #e04a22 #ece7e1;
	}

	.porto-posts-grid[data-post_type="portfolio"] .portfolio-filter::-webkit-scrollbar {
		display: block !important;
		height: 4px;
	}

	.porto-posts-grid[data-post_type="portfolio"] .portfolio-filter::-webkit-scrollbar-track {
		margin: 0 15px;
		border-radius: 4px;
		background: #ece7e1;
	}

	.porto-posts-grid[data-post_type="portfolio"] .portfolio-filter::-webkit-scrollbar-thumb {
		border-radius: 4px;
		background: #e04a22;
	}

	.porto-posts-grid[data-post_type="portfolio"] .portfolio-filter li {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.porto-posts-grid[data-post_type="portfolio"] .portfolio-filter li a {
		white-space: nowrap;
	}

	/* stmievanie na strane, kde ešte niečo pokračuje */
	.porto-posts-grid[data-post_type="portfolio"] .portfolio-filter.pf-scrollable {
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 56px), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 56px), transparent 100%);
	}

	.porto-posts-grid[data-post_type="portfolio"] .portfolio-filter.pf-scrollable.pf-at-start {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent 100%);
		mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent 100%);
	}

	.porto-posts-grid[data-post_type="portfolio"] .portfolio-filter.pf-scrollable.pf-at-end {
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px);
		mask-image: linear-gradient(to right, transparent 0, #000 28px);
	}

	/* podkategórie hneď za svojou kategóriou – rovnaké poradie ako v bočnom paneli na počítači */
	.porto-posts-grid[data-post_type="portfolio"] .portfolio-filter li[data-filter="*"] { order: 1; }
	.porto-posts-grid[data-post_type="portfolio"] .portfolio-filter li[data-filter="drevostavby"] { order: 10; }
	.porto-posts-grid[data-post_type="portfolio"] .portfolio-filter li[data-filter="zrubove-domy"] { order: 11; }
	.porto-posts-grid[data-post_type="portfolio"] .portfolio-filter li[data-filter="drevenice"] { order: 12; }
	.porto-posts-grid[data-post_type="portfolio"] .portfolio-filter li[data-filter="kysucke-drevenice"] { order: 13; }
	.porto-posts-grid[data-post_type="portfolio"] .portfolio-filter li[data-filter="altanky-a-pergoly"] { order: 14; }
	.porto-posts-grid[data-post_type="portfolio"] .portfolio-filter li[data-filter="verejne-stavby"] { order: 15; }
	.porto-posts-grid[data-post_type="portfolio"] .portfolio-filter li[data-filter="realizacia-a-pokryvanie-striech"] { order: 20; }
	.porto-posts-grid[data-post_type="portfolio"] .portfolio-filter li[data-filter="stavebne-prace"] { order: 30; }
	.porto-posts-grid[data-post_type="portfolio"] .portfolio-filter li[data-filter="obklady"] { order: 31; }
	.porto-posts-grid[data-post_type="portfolio"] .portfolio-filter li[data-filter="rekonstrukcie"] { order: 32; }
	.porto-posts-grid[data-post_type="portfolio"] .portfolio-filter li[data-filter="predaj-tehlovych-obkladov"] { order: 40; }
	.porto-posts-grid[data-post_type="portfolio"] .portfolio-filter li[data-filter="vykopove-prace"] { order: 50; }
	.porto-posts-grid[data-post_type="portfolio"] .portfolio-filter li[data-filter="autodoprava"] { order: 60; }
}

/* Služby: popisy jednotlivých služieb zarovnané do bloku */
.service-row-text {
	text-align: justify;
	hyphens: auto;
}

/* Stránky jednotlivých služieb (podstránky Služieb): všetky texty zarovnané do bloku –
   karty, info box, záložky akordeónu a zoznamy (úvodné odseky to majú nastavené vo WPBakery) */
.parent-pageid-36 .element-card-text,
.parent-pageid-36 .info-box-text p,
.parent-pageid-36 .accordion .card-body,
.parent-pageid-36 .service-card li {
	text-align: justify;
	hyphens: auto;
}

/* O nás: texty zarovnané do bloku – úvod, odseky a popisy v Histórii
   (v Histórii posledný riadok na stred, aby sedel s vycentrovaným rokom a nadpisom) */
.page-id-24 .company-main p.vc_custom_heading,
.page-id-24 .company-main .porto-u-main-heading > div,
.page-id-24 .company-main .porto-sicon-description {
	text-align: justify !important;
	hyphens: auto;
}

.page-id-24 .company-main .porto-sicon-description {
	text-align-last: center;
}

/* O nás – História: šípky karuselu na tablete a mobile dole pod kartou (na stred), nie po stranách */
@media (max-width: 991px) {
	.page-id-24 .porto-ultimate-content-box .porto-carousel .owl-nav {
		position: static !important;
		display: flex !important;
		justify-content: center;
		gap: 26px;
		width: auto !important;
		height: auto !important;
		margin-top: 22px !important;
	}

	.page-id-24 .porto-ultimate-content-box .porto-carousel .owl-nav button.owl-prev,
	.page-id-24 .porto-ultimate-content-box .porto-carousel .owl-nav button.owl-next {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		margin: 0 !important;
	}
}

/* O nás: pod počítadlami (20+ / 50+) rovnaká medzera ako nad nimi – nad nimi je 18,6 px (odsek) + 13 px (riadok)
   ≈ 32 px; riadok vc_custom_1708350088475 mal dole 41 px a na mobile ešte druhé počítadlo triedu mb-5 (48 px) */
.page-id-24 .vc_custom_1708350088475 {
	margin-bottom: 32px !important;
}

.page-id-24 .vc_custom_1708350088475 > .vc_column_container:last-child {
	margin-bottom: 0 !important;
}

/* Domov – tablet a mobil: nadpisy sekcií a texty vľavo (pôvodne boli na stred v CSS domovskej stránky)
   a tlačidlo sekcie vpravo vedľa nadpisu v jednom riadku */
@media (max-width: 991px) {
	.home :is(#home-section-title-1, #home-section-title-2, #home-section-title-3, #home-section-title-4, #home-section-title-5,
		#home-section-subtitle-1, #home-section-subtitle-2, #home-section-subtitle-3, #home-section-subtitle-4, #home-section-subtitle-5) {
		text-align: left !important;
	}

	/* riadok „nadpis | tlačidlo“: nadpis zaberie zvyšok šírky, tlačidlo len toľko, koľko potrebuje */
	.home .row:has(> .vc_column_container [id^="home-section-button-"]) {
		flex-wrap: nowrap;
		align-items: center;
		gap: 14px;
	}

	.home .row:has(> .vc_column_container [id^="home-section-button-"]) > .vc_column_container {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	.home .row:has(> .vc_column_container [id^="home-section-button-"]) > .vc_column_container:has([id^="home-section-button-"]) {
		flex: 0 0 auto;
	}

	/* ak je v riadku aj text pod nadpisom (sekcia Kde nás nájdete), ten ide na nový riadok cez celú šírku */
	.home .row:has(> .vc_column_container [id^="home-section-button-"]):has(> .vc_column_container [id^="home-section-subtitle-"]) {
		flex-wrap: wrap;
	}

	.home .row:has(> .vc_column_container [id^="home-section-button-"]) > .vc_column_container:has([id^="home-section-subtitle-"]) {
		flex: 0 0 100%;
	}

	.home .row:has(> .vc_column_container [id^="home-section-button-"]):has(> .vc_column_container [id^="home-section-subtitle-"]) > .vc_column_container:has([id^="home-section-title-"]) {
		flex: 1 1 0;
	}

	/* ID selektory – CSS domovskej stránky má tlačidlá na stred cez #home-section-button-X !important */
	.home :is(#home-section-button-1, #home-section-button-2, #home-section-button-3, #home-section-button-4, #home-section-button-5) {
		text-align: right !important;
		margin-top: 0 !important;
	}

	/* sekcia O nás má nadpis, text aj tlačidlo v jednom stĺpci – poskladané ako ostatné:
	   nadpis vľavo, tlačidlo vpravo vedľa neho, text pod nimi cez celú šírku */
	.home .vc_column_container:has(> .wpb_wrapper > #home-section-title-1) > .wpb_wrapper {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 14px;
	}

	.home #home-section-title-1 {
		order: 1;
		flex: 1 1 0;
		min-width: 0;
	}

	.home .vc_column_container:has(> .wpb_wrapper > #home-section-title-1) > .wpb_wrapper > .vc_btn3-container {
		order: 2;
		flex: 0 0 auto;
		text-align: right !important;
		margin-top: 0 !important;
	}

	.home #home-section-subtitle-1 {
		order: 3;
		flex: 0 0 100%;
	}
}

/* Domov – O nás na tablete a mobile: clearfix ::before/::after vo flex obale sa správal ako prázdna položka
   a odsúval nadpis doprava; pod nadpisom rovnaká medzera ako pri ostatných sekciách */
@media (max-width: 991px) {
	.home .vc_column_container:has(> .wpb_wrapper > #home-section-title-1) > .wpb_wrapper::before,
	.home .vc_column_container:has(> .wpb_wrapper > #home-section-title-1) > .wpb_wrapper::after {
		display: none !important;
	}

	.home #home-section-title-1 {
		margin-left: 0 !important;
		padding-left: 0 !important;
	}

	.home #home-section-subtitle-1 {
		margin-top: 20px !important; /* spolu s 6px pod nadpisom ≈ 26px ako pri ostatných sekciách (6 + 10 + 10) */
	}
}

/* Domov: texty zarovnané do bloku (v info boxe s logom posledný riadok na stred) */
.home #main p.vc_custom_heading,
.home #main .porto-sicon-description {
	text-align: justify !important;
	hyphens: auto;
}

.home #main .porto-sicon-box.top-icon .porto-sicon-description {
	text-align-last: center;
}

/* Domov – hlavný slider: čitateľnosť bieleho textu na každej fotke
   (viditeľná fotka je pozadie .banner-effect – Ken Burns; <img> je len neviditeľný zástupca) */
.home .home-banner-slider .banner-effect-wrapper::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to right, rgba(12, 14, 16, 0.55) 0%, rgba(12, 14, 16, 0.25) 55%, rgba(12, 14, 16, 0.4) 100%),
		linear-gradient(to top, rgba(12, 14, 16, 0.55) 0%, rgba(12, 14, 16, 0) 45%);
}

.home .home-banner-slider .banner-effect {
	filter: brightness(0.85) saturate(1.05);
}

/* plný nápis s tieňom, obrysový nápis hrubší (pôvodne 0,3 px – na fotke takmer neviditeľný) */
.home .home-banner-slider h2.hero-responsive-title {
	text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
}

.home .home-banner-slider .custom-outline-text-style {
	-webkit-text-stroke-width: 1.2px !important;
	-webkit-text-stroke-color: rgba(255, 255, 255, 0.85) !important;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

/* Domov – hlavný slider na tablete a mobile: veľký nadpis vyplní šírku obrazovky podľa dĺžky slova
   (hero-fit-* pridáva domov-slider.php; čísla = šírka slova v em pri písme Poppins Bold) */
@media (max-width: 991px) {
	.home .home-banner-slider .hero-responsive-title.hero-responsive-title {
		white-space: nowrap !important;
		line-height: 0.9 !important;
		font-size: min(calc((100vw - 48px) / var(--hero-w, 5)), 7rem) !important;
	}

	.home .home-banner-slider .hero-fit-xs { --hero-w: 3.6; }
	.home .home-banner-slider .hero-fit-s  { --hero-w: 4.5; }
	.home .home-banner-slider .hero-fit-m  { --hero-w: 5.1; }
	.home .home-banner-slider .hero-fit-l  { --hero-w: 6; }
	.home .home-banner-slider .hero-fit-xl { --hero-w: 8.4; }
}

/* Domov – hlavný slider na mobile: oranžový pásik s podnadpisom bol cez font-size 1.6vw maličký (≈ 9 px text);
   teraz pevná veľkosť, pásik aj trojuholník sa prispôsobia (sú v em) */
@media (max-width: 767px) {
	.home .home-banner-slider .porto-ibanner-layer.custom-layer-2 {
		font-size: 10.5px !important;
	}
}

/* Domov – kontaktný pás predajne na tablete a mobile: všetky 3 položky rovnako široké (blok na strede,
   ikony a texty pod sebou zarovnané) – pôvodne mala každá šírku podľa svojho textu */
@media (max-width: 991px) {
	.home .store-contact-bar .store-contact-bar__item {
		justify-self: center !important;
		width: 100%;
		max-width: 290px;
	}
}