/*
Theme Name: Construction Light Child
Description: Child téma pre kmekom.sk — všetky lokálne úpravy témy Construction Light žijú tu, aby ich neprepísala aktualizácia rodičovskej témy.
Author: Kmekom s.r.o.
Template: construction-light
Version: 1.2.0
Text Domain: construction-light-child
*/

/*
 Vlastné CSS pridávaj sem (načítava sa po štýle rodičovskej témy).

 POZOR na kaskádu — poradie štýlov na stránke:
   1. bootstrap / fontawesome / owl / animate
   2. style.css RODIČA
   3. tento súbor
   4. dynamické CSS z Customizera (inline, prefarbuje #ffb923 -> primárnu)
   5. responsive.css rodiča (media queries)
 Body 4 a 5 sa načítavajú PO tomto súbore — pravidlá, ktoré s nimi kolidujú,
 potrebujú vyššiu špecificitu (nie !important), viď E4 v audit.md.
*/

/* ==========================================================================
   E1: Dizajnové tokeny (audit 2026-07)
   ========================================================================== */

:root {
	/* farby */
	--color-primary: #dd3333;      /* jediný akcent webu (A2 — oranžová #ff5418 zrušená) */
	--color-text: #212529;         /* text aj nadpisy (A1) */
	--color-dark: #222;            /* hover tlačidiel, footer (A1) */
	--color-border: #ddd;          /* dekoratívne rámiky, tabuľky (A4) */
	--color-border-input: #949494; /* formulárové prvky — 3:1 na bielej (A6) */
	--color-bg-section: #faf9f7;   /* podklad sekcií, teplý tón (A5) — v blokoch cez paletu v theme.json */

	/* tvary a tiene */
	--radius: 6px;                                       /* jednotný radius (D6) */
	--shadow-card: 0 6px 30px 7px rgba(33, 37, 71, 0.1); /* jednotný tieň kariet (D3) */

	/* typografická škála (B6): 18 základ / 16 sekundárny / 14 drobný */
	--font-size-base: 18px;
	--font-size-md: 16px;
	--font-size-sm: 14px;
}

/* ==========================================================================
   A1: Konsolidácia „takmer čiernych" — všetko tmavé je --color-text
   alebo --color-dark (#232529, #24272a, #101010, #191818 zrušené)
   ========================================================================== */

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
	color: var(--color-text);
}

mark,
ins {
	color: var(--color-text);
}

.btn-link {
	color: var(--color-text);
}

.btn-link:hover {
	color: var(--color-primary); /* pôvodne legacy amber #ffb923 (A3) */
}

.site-footer {
	background: var(--color-dark); /* pôvodne #191818 */
}

.sub_footer {
	background: var(--color-dark); /* pôvodne #101010 */
}

/* ==========================================================================
   A2: Koniec oranžovej — footer linky biele (hover rieši dynamické CSS,
   ale červená na tmavej nemá kontrast, preto biela + podčiarknutie).
   #colophon kvôli prednosti pred dynamickým CSS (.site-footer .widget a:hover)
   ========================================================================== */

#colophon .widget a {
	color: #fff;
}

#colophon .widget a:hover,
#colophon .widget a:focus {
	color: #fff;
	text-decoration: underline;
}

/* Výnimka: linky VNÚTRI bielych kariet (blok „Máte otázku?" vo footer-1) —
   biela z pravidla vyššie ich robila neviditeľnými na bielom podklade */
#colophon .widget .has-white-background-color a {
	color: var(--color-primary);
}

#colophon .widget .has-white-background-color a:hover,
#colophon .widget .has-white-background-color a:focus {
	color: var(--color-dark);
	text-decoration: underline;
}

/* ==========================================================================
   A4: Jednotné bordery tabuliek a rámikov
   ========================================================================== */

table {
	border-color: var(--color-border);
}

th,
td {
	border-color: var(--color-border);
}

.calendar_wrap table th,
.calendar_wrap table td {
	border-color: var(--color-border);
}

/* Cenníkové tabuľky: väčšie odsadenie buniek, aby ceny neboli natlačené na okraj */
.entry-content th,
.entry-content td {
	padding: 6px 12px;
}

/* Hlavičkové bunky (dopĺňa ich render filter P19 vo functions.php) — tučné,
   zarovnanie vľavo ako pôvodné <td> (default th je center, rodič má normal) */
.entry-content th {
	font-weight: 700;
	text-align: left;
}

/* ==========================================================================
   A6: Prístupnosť — viditeľný focus, kontrastné bordery inputov
   (rodič má :focus { outline: 1px dotted #ccc !important } — preto !important)
   ========================================================================== */

:focus {
	outline: 2px solid var(--color-primary) !important;
	outline-offset: 2px;
}

/* pri kliknutí myšou krúžok nezobrazuj — len pre klávesnicu */
:focus:not(:focus-visible) {
	outline: none !important;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
	border-color: var(--color-border-input); /* pôvodne #eee = 1,16:1 na bielej */
}

.fluentform .ff-el-group .ff-el-form-control {
	border-color: var(--color-border-input);
}

/* ==========================================================================
   B2: Hero slider H1 — rovnaká škála ako globálny H1 (theme.json).
   .sp-banner-wrapper navyše v selektore = prednosť pred responsive.css
   ========================================================================== */

.sp-banner-wrapper .banner-slider .slider-item .slider-content .slider-title {
	font-size: clamp(36px, 6vw, 65px);
	line-height: 1.2;
}

/* ==========================================================================
   B5: Blockquote — namiesto Pacifico (nenačítava sa, padal na cursive
   fallback) zdedené písmo v kurzíve + červený ľavý pásik
   ========================================================================== */

blockquote {
	font-family: inherit;
	font-style: italic;
	color: var(--color-text);
	background: none;
	border: none;
	border-left: 3px solid var(--color-primary);
	padding: 5px 5px 5px 20px;
	margin: 0 0 1.5em;
}

/* ==========================================================================
   C1: FluentForm submit = hlavné CTA webu, štýl .btn-primary
   ========================================================================== */

.fluentform .ff-btn-submit.ff_btn_style {
	font-size: var(--font-size-sm);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.5;
	padding: 12px 20px;
	border-radius: var(--radius);
	background-color: var(--color-primary);
	border: 1px solid var(--color-primary);
	color: #fff;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.fluentform .ff-btn-submit.ff_btn_style:hover,
.fluentform .ff-btn-submit.ff_btn_style:focus {
	background-color: var(--color-dark);
	border-color: var(--color-dark);
	color: #fff;
	opacity: 1; /* rodič dáva button:hover opacity .7 */
}

/* ==========================================================================
   C2: Jednotné hover správanie — výplňové tlačidlá tmavnú (nie priehľadnosť),
   obrysové sa vyplnia primárnou
   ========================================================================== */

a.button:hover,
a.button:focus,
button:hover,
input[type="submit"]:hover {
	background-color: var(--color-dark);
	opacity: 1;
}

/* C3: .btn-border-dark — ad-hoc #24272a nahradené textovou farbou;
   hover vypĺňa primárnou (pôvodne legacy amber, dynamické CSS ho nechytá) */

.btn.btn-border-dark {
	border-color: var(--color-text);
	color: var(--color-text) !important; /* rodič má color !important */
}

.btn.btn-border-dark:hover,
.btn.btn-border-dark:focus {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff !important;
}

/* ==========================================================================
   C4: Rozostupy tlačidiel v hero cez flex + gap (pôvodne margin-left: 30px,
   na mobile nulovaný -> tlačidlá nalepené na sebe)
   ========================================================================== */

.banner-slider .slider-item .slider-content .btn-area {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.banner-slider .slider-item.text-center .btn-area,
.banner-slider .cl-center-content .btn-area {
	justify-content: center;
}

.sp-banner-wrapper .banner-slider .slider-item .slider-content .btn-area .btn-border {
	margin-left: 0; /* rozostup rieši gap */
}

/* ==========================================================================
   D1: Breadcrumb banner — biely nadpis (dynamické CSS ho farbí na červeno,
   slabý kontrast na fotke), weight 700, logika linkov: klikateľné biele,
   aktuálna stránka stlmená. section. v selektore = prednosť pred dynamic CSS
   ========================================================================== */

section.breadcrumb h2 {
	color: #fff;
	font-weight: 700;
}

section.breadcrumb ul li {
	color: rgba(255, 255, 255, 0.78); /* aktuálna stránka — stlmená */
}

section.breadcrumb ul li a {
	color: #fff;
	transition: color 0.2s ease; /* pôvodne .8s */
}

section.breadcrumb ul li a:hover,
section.breadcrumb ul li a:focus {
	color: #fff;
	text-decoration: underline;
}

section.breadcrumb ul li a:after {
	color: rgba(255, 255, 255, 0.78);
}

/* ==========================================================================
   D2: Stránkovanie blogu — default obrys, hover svetlá výplň, current plná
   primárna (pôvodne hover „zmizol" do transparentu a current splýval s hover).
   body v selektore = prednosť pred dynamickým CSS. Zatiaľ bez obsahu (blog
   je prázdny), pravidlá sú pripravené na budúce články.
   ========================================================================== */

body .page-numbers {
	background: #fff;
	border: 1px solid var(--color-primary);
	color: var(--color-primary);
	border-radius: var(--radius);
	transition: background-color 0.2s ease, color 0.2s ease;
}

body .page-numbers:hover,
body .page-numbers:focus {
	background: #fbeaea;
	border-color: var(--color-primary);
	color: var(--color-primary);
}

body .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

/* ==========================================================================
   A3: 404 stránka — legacy amber #ffb923, ktorý dynamické CSS nechytá
   ========================================================================== */

.not-found .page-header h1 {
	color: var(--color-primary);
}

.not-found .backhome a {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	border-radius: var(--radius);
}

.not-found .backhome a:hover,
.not-found .backhome a:focus {
	background-color: var(--color-dark);
	border-color: var(--color-dark);
	color: #fff;
}

/* ==========================================================================
   D3 + D6: Jednotný tieň a radius kariet
   ========================================================================== */

.cons_light_feature .feature-list .box {
	box-shadow: var(--shadow-card); /* pôvodne 0 0 10px rgba(0,0,0,.1) */
	border-radius: var(--radius);
}

.cons_light_feature .feature-list .box figure {
	border-radius: var(--radius) var(--radius) 0 0; /* pôvodne 4px */
}

.btn {
	border-radius: var(--radius); /* pôvodne 5px */
}

/* ==========================================================================
   D4: Hover zoom obrázkov — len transform, svižnejších .35s
   (pôvodne transition: all ease .6s)
   ========================================================================== */

.cons_light_testimonial .client-img img,
.cons_light_team_layout_two .box figure img,
.cons_light_feature .feature-list .box figure img {
	-webkit-transition: transform 0.35s ease;
	transition: transform 0.35s ease;
}

.articlesListing .article .blog-post-thumbnail .post-thumbnail img {
	-webkit-transition: transform 0.35s ease;
	transition: transform 0.35s ease;
}

/* ==========================================================================
   P9/D4: náhrada H4 nadpisov v hlavičke (Tel. kontakt / Email) — vizuálne
   zhodné s pôvodným .get-tuch ul li h4 pravidlom témy
   ========================================================================== */

.nav-classic .header-middle-inner .contact-info .quickcontact .get-tuch ul li .contact-label {
	display: block;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 0;
}

/* ==========================================================================
   E3: Additional CSS presunuté z Customizera (bývalý post 216) — verzované.
   Farby prevedené na tokeny: #ff5418 -> --color-primary (A2),
   #232529 -> --color-text (A1), tieň -> --shadow-card (D3).
   ========================================================================== */

/* B4: site title — jediná záväzná definícia (36px / 600, farba textu) */
.site-title {
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 20px;
	color: var(--color-text);
	font-size: 36px;
}

.site-content {
	padding-left: 1rem;
	padding-right: 1rem;
}

.more_buttons {
	margin-top: 0px;
}

.read_more_button {
	position: absolute;
	bottom: 35px;
}

.feature_block {
	margin-bottom: 2.5rem !important;
}

.cons_light_feature {
	margin-bottom: 0px;
	padding-bottom: 0px;
}

.image_center_in_text {
	display: grid;
	place-items: center;
}

.image_shadow {
	box-shadow: var(--shadow-card);
	transition: 0.5s;
}

.cust-columns {
	max-width: 1109px !important;
}

.about_us_front {
	padding-bottom: 0px;
	padding-top: 0px;
}

.site-footer .widget {
	margin-bottom: 0em;
}

#construction_light_aboutus-5 {
	margin-top: 0em;
	margin-bottom: 0em;
}

.cons_light_copyright {
	text-align: center;
}

.no_top {
	padding-top: 0em;
}

.uagb-icon-wrapper svg {
	fill: var(--color-primary) !important; /* A2: pôvodne oranžová #ff5418 */
	width: 40px;
	height: 40px;
	text-align: center;
}

.uagb-icon-wrapper {
	text-align: center;
}