/*
 * tvk-blocksy-child — vizuálna vrstva pre barbora2 (Blocksy 2.1.60 + core Gutenberg).
 * DVA PRÍSTUP: (1) injekcia palety do Blocksy tokenov, (2) vlastné prvky (vlna, karty, CTA).
 * Licencia: GPL-2.0-or-later (vlastný kód tímu).
 *
 * Názvy tokenov tried `ct-*` sú overené priamo v balíku témy blocksy 2.1.60
 * (dňa 2026-10-27: grep v static/bundle/*.css → --theme-palette-color-1..8,
 *  --theme-text-color, --theme-link-initial-color, --theme-border-color,
 *  --theme-button-background-initial-color, --theme-container-width, --theme-border-radius,
 *  trieda .ct-container, .entry-content, body class has-transparent-header).
 * Iné selektory (napr. .header-menu, .ct-header-logo) tu ZÁMERNE nie sú —
 * overujú sa až v živom inštancii (docs/VALIDATION.md), aby sme nepísali dohadné CSS.
 */

/* ---------------------------------------------------------------------------
 * 1) Naša paleta ako Blocksy design tokeny (source of truth = customizer;
 *    túto vrstvu téma prepíše vlastnými generated vars, ak sú nastavené).
 * ------------------------------------------------------------------------- */
:root {
	/* TVK tokens (namerané z loga) */
	--tvk-primary: #0B4A74;
	--tvk-primary-dark: #08395B;
	--tvk-primary-deep: #153247;
	--tvk-accent: #0EA6A6;
	--tvk-accent-text: #0A6B6C;
	--tvk-accent-soft: #D6EFEE;
	--tvk-wave-pale: #C9E6E4;
	--tvk-bg: #FBFAF6;
	--tvk-surface: #FFFFFF;
	--tvk-ink: #153247;
	--tvk-muted: #4A5A63;
	--tvk-border: #E2E5E4;

	/* Mapovanie do Blocksy palette slots 1-8 */
	--theme-palette-color-1: var(--tvk-primary);      /* primary */
	--theme-palette-color-2: var(--tvk-primary-dark); /* secondary / hover */
	--theme-palette-color-3: var(--tvk-accent);       /* accent (dekorácia, veľké plochy) */
	--theme-palette-color-4: var(--tvk-accent-text);  /* accent ako text/linka */
	--theme-palette-color-5: var(--tvk-ink);          /* text */
	--theme-palette-color-6: var(--tvk-muted);        /* muted text */
	--theme-palette-color-7: var(--tvk-bg);           /* pozadie stránky */
	--theme-palette-color-8: var(--tvk-surface);      /* povrch kariet */

	/* Blocksy globálne farebné/promerné tokeny */
	--theme-text-color: var(--tvk-ink);
	--theme-link-initial-color: var(--tvk-primary);
	--theme-link-hover-color: var(--tvk-primary-dark);
	--theme-border-color: var(--tvk-border);
	--theme-container-width: 1200px;
	--theme-border-radius: 4px;                 /* ostrší, editorial vzhľad (Kadence má 10 px) */
}

body {
	background-color: var(--tvk-bg);
	color: var(--tvk-ink);
}

/* ---------------------------------------------------------------------------
 * 2) MOTÍV VĹN — iná realizácia ako barbora1.
 *    Tu ide o PLNÚ VLNOVÚ PÁSOVÚ výplň (kúpeľná voda), nie o tenkú čiarku.
 *    SVG je dekoratívne (aria-hidden), nie obrázok v mediálnej knižnici.
 * ------------------------------------------------------------------------- */
.tvk-wave-band,
.tvk-wave-band--flip {
	display: block;
	width: 100%;
	height: 42px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	/* 2 periódy ako v logu, výplň tyrkysová → svetlá */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 42' preserveAspectRatio='none' aria-hidden='true' focusable='false'%3E%3Cpath d='M0 26c120 0 120-16 240-16s120 16 240 16 120-16 240-16 120 16 240 16 120-16 240-16' fill='none' stroke='%235FBDB1' stroke-width='3'/%3E%3Cpath d='M0 34c120 0 120-16 240-16s120 16 240 16 120-16 240-16 120 16 240 16 120-16 240-16' fill='none' stroke='%23ABCED1' stroke-width='3' opacity='.7'/%3E%3Cpath d='M0 42h1440V26c-120 0-120 16-240 16s-120-16-240-16-120 16-240 16-120-16-240-16-120 16-240 16Z' fill='%23F4F5F6' opacity='.55'/%3E%3C/svg%3E");
}
.tvk-wave-band--flip { transform: scaleY(-1); }

/* Jemná „vodná“ vrstva pod hero sekciou (nesmie zhoršiť čitateľnosť) */
.tvk-hero {
	background-color: var(--tvk-surface);
	background-image:
		linear-gradient(180deg, rgba(214, 239, 238, .22) 0%, rgba(251, 250, 246, 0) 62%),
		radial-gradient(circle at 8% 92%, rgba(14, 166, 166, .18) 0 60px, transparent 61px);
	border-bottom: 1px solid var(--tvk-border);
	padding: 2.5rem 0 0;
}
.tvk-hero h1 { color: var(--tvk-primary-deep); }

/* ---------------------------------------------------------------------------
 * 3) Typografia — editorial vrstva (Blocksy customizer to vie čiastočne,
 *    tu držíme hodnoty, aby boli identické po migrácii).
 * ------------------------------------------------------------------------- */
.entry-title, h1, h2, h3 { color: var(--tvk-primary-deep); letter-spacing: -.015em; }
.entry-content > p:first-of-type {
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--tvk-muted);
	/* perex = post_excerpt; tu je opticky oddelený tenkou tyrkysovou linkou */
	border-left: 3px solid var(--tvk-accent);
	padding-left: .9rem;
}

/* Odkazy: podčiarknutie len pri hover/focus (čistejšie ako Kadence verzia) */
.entry-content a { text-decoration: none; border-bottom: 1px solid transparent; }
.entry-content a:hover, .entry-content a:focus { border-bottom-color: var(--tvk-primary-dark); }

:focus-visible { outline: 3px solid var(--tvk-accent); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
 * 4) Karty a rubríky — flat, ostré hrany, 1 px rám (opačná extroverzia ako b1)
 * ------------------------------------------------------------------------- */
.blog-layout-1 .ct-post-list > article,
.wp-block-post-template > li,
.ct-post-card {
	background: var(--tvk-surface);
	border: 1px solid var(--tvk-border);
	border-radius: var(--theme-border-radius, 4px);
	padding: 1.1rem 1.2rem;
}
.blog-layout-1 .ct-post-list > article:hover,
.ct-post-card:hover { border-left: 4px solid var(--tvk-accent); }

.cat-links a,
.tvk-kicker {
	background: transparent;
	color: var(--tvk-accent-text);
	border: 1px solid var(--tvk-accent);
	border-radius: 2px;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .2em .6em;
}

/* ---------------------------------------------------------------------------
 * 5) Tlačidlá (Blocksy + core buttons) — obdĺžnikové, nie pills
 * ------------------------------------------------------------------------- */
.wp-block-button__link,
.ct-button {
	background-color: var(--tvk-primary);
	border-color: var(--tvk-primary);
	color: #fff;
	border-radius: 3px;
	font-weight: 600;
}
.wp-block-button__link:hover { background-color: var(--tvk-primary-dark); }
.wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--tvk-accent-text);
	border-color: var(--tvk-accent);
	background: transparent;
}

/* ---------------------------------------------------------------------------
 * 6) CTA „Podporte nás“ + embed + komentáre
 * ------------------------------------------------------------------------- */
.tvk-cta-section {
	background: var(--tvk-accent-soft);
	color: var(--tvk-ink);                 /* 9.55:1 — AA/AAA (biely text na tyrkysovej NIE) */
	border-radius: 6px;
	padding: 1.6rem;
}

.tvk-video-embed__frame { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 860px; }
.tvk-video-embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tvk-video-embed figcaption { font-size: .85rem; color: var(--tvk-muted); margin-top: .5em; }
/* core embed blok: Blocksy/EU cookie banner vie mať vlastný wrapper → držíme 16:9 */
.entry-content .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe { width: 100%; }

.comment-list > li {
	background: var(--tvk-surface);
	border: 1px solid var(--tvk-border);
	border-radius: var(--theme-border-radius, 4px);
	padding: .9rem 1rem;
	margin-bottom: .9rem;
}
.comment-awaiting-moderation {
	color: var(--tvk-accent-text);
	background: var(--tvk-accent-soft);
	padding: .15em .5em;
	border-radius: 2px;
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * 7) Footer — tmavomodrá plocha (najvyšší kontrast 11.84:1 s bielym textom)
 * ------------------------------------------------------------------------- */
.site-footer,
.footer-gradient {
	background: var(--tvk-primary-deep);
	color: #E8EEF2;
}
.site-footer a { color: #fff; }

/* ---------------------------------------------------------------------------
 * 8) Responzivita — breakpointy PREBRATÉ od témy (theme.json Blocksy:
 *    mobile ≤ 689.98 px, tablet ≤ 999.98 px). Nepoužívame vlastné 768/1024,
 *    inak by sa CSS rozišlo s Blocksy medzami.
 * ------------------------------------------------------------------------- */
@media (max-width: 999.98px) {
	.tvk-wave-band { height: 32px; }
	.tvk-hero { padding-top: 1.75rem; }
}
@media (max-width: 689.98px) {
	:root { --theme-container-width: 100%; }
	.tvk-wave-band { height: 24px; }
	.entry-content > p:first-of-type { font-size: 1.0625rem; border-left-width: 2px; }
	.ct-post-card, .blog-layout-1 .ct-post-list > article { padding: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/* =====
 * QA KOLO 1 (worker-06) — opravy pre barbora2, 2026-10-28
 *
 * Kľúčová vec: Blocksy SI POČÍTA S TMÁVOU HLAVIČKOU. Jeho generované CSS dáva
 *   .ct-menu-link            { --theme-link-initial-color: var(--theme-palette-color-8) }
 *   .ct-header [data-id="menu"] > ul > li > a { --theme-link-initial-color: var(--theme-text-color) }
 *   .ct-header [data-id="menu"] .sub-menu .ct-menu-link { … palette-color-8 }
 * (dôkaz: vyexportované inline CSS bežiacej inštalácie, 2026-10-28). Slot 8 je
 * v defaultoch Blocksy biela (#ffffff), teda na SVETLEJ hlavičke by boli odkazy
 * neviditeľné — presná podstata nálezu QA1-03 na barbora1. Neriešime to preto
 * zmenou palety (slot 8 biela je Blocksy konvencia, používa sa aj ako podklad),
 * ale explicitnými pravidlami pre menu, hamburger a search trigger.
 * ========================================================================= */

/* 1) Hlavička: biely podklad + tmavé odkazy (kontrast #153247 na #FFFFFF = 11,81:1) */
header.ct-header,
.site-header {
	background-color: var(--tvk-surface);
	color: var(--tvk-ink);
}

header.ct-header .ct-menu-link,
header.ct-header [data-id="menu"] > ul > li > a,
header.ct-header [data-id="menu"] .sub-menu .ct-menu-link {
	--theme-link-initial-color: #153247;
	color: #153247;
}

header.ct-header .current-menu-item > .ct-menu-link,
header.ct-header [data-id="menu"] > ul > li.current-menu-item > a {
	color: var(--tvk-primary);
	box-shadow: inset 0 -2px 0 var(--tvk-accent);
}

header.ct-header .ct-menu-link:hover,
header.ct-header .ct-menu-link:focus,
header.ct-header [data-id="menu"] > ul > li > a:hover {
	color: var(--tvk-primary-dark);
}

/* 2) Hamburger a search trigger — musia byť VIDITEĽNÉ (QA1-03 mobil) */
header.ct-header button.ct-header-trigger,
header.ct-header button.ct-header-search,
.ct-header-trigger,
.ct-header-search {
	color: #153247;
	background: transparent;
}
.ct-header-trigger svg,
.ct-header-search svg,
.ct-header-trigger .ct-menu-icon,
.ct-header-trigger span[class*="icon"] {
	fill: currentColor;
	color: inherit;
}
.ct-header-trigger:focus-visible,
.ct-header-search:focus-visible,
header.ct-header .ct-menu-link:focus-visible {
	outline: 2px solid var(--tvk-primary);
	outline-offset: 3px;
}

/* 3) Off-canvas drawer: tmavý podklad → svetlé texty musia ostať čitateľné.
   #FBFAF6 na #0B1F2C = 17,95:1 (AA/AAA). */
#offcanvas,
.ct-panel.ct-header,
.ct-drawer,
.ct-close-drawer {
	background-color: #0B1F2C;
	color: #FBFAF6;
}
#offcanvas a,
.ct-panel.ct-header .ct-menu-link,
#offcanvas .ct-menu-link {
	color: #FBFAF6;
}
#offcanvas a:hover,
#offcanvas a:focus { color: var(--tvk-accent); }
#offcanvas button.ct-toggle-close,
.ct-close-drawer { color: #FBFAF6; }

/* 4) Patičkové odkazy (QA1-05) — Blocksy default patička vykreslí len copyright,
   linky tam vkladáme cez filter blocksy:footer:copyright:default-value. */
.tvk-footer-nav {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.15rem;
	margin: 0 0 .75rem;
	padding: 0;
	list-style: none;
}
.tvk-footer-nav a {
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	font-size: .9375rem;
}
.tvk-footer-nav a:hover,
.tvk-footer-nav a:focus {
	color: var(--tvk-accent);
	border-bottom-color: var(--tvk-accent);
}
.tvk-footer-copy { font-size: .875rem; color: #E8EEF2; }

/* 5) Vyhľadávací vstup v patičke/stránke (QA1-09) — musí byť použiteľný aj na
   tmavom podklade a lomené slová nesmú prelomiť layout. */
.widget_search form,
form.search-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.widget_search input[type="search"],
form.search-form input[type="search"] {
	flex: 1 1 10rem;
	min-width: 0;
	padding: .55rem .8rem;
	border: 1px solid var(--tvk-border);
	border-radius: 3px;
	background: var(--tvk-surface);
	color: var(--tvk-ink);
}
footer.ct-footer input[type="search"],
footer.ct-footer .search-field {
	background: var(--tvk-surface);
	color: var(--tvk-ink);
	border-color: #153247;
}
footer.ct-footer input[type="submit"],
footer.ct-footer .search-submit {
	background: var(--tvk-accent-soft);
	color: var(--tvk-ink);
	border: 1px solid var(--tvk-accent);
	border-radius: 3px;
	padding: .5rem 1rem;
}
footer.ct-footer,
.ct-footer-copyright {
	background-color: var(--tvk-primary-deep);
	color: #E8EEF2;
}
.ct-footer-copyright a { color: #FFFFFF; }

/* 6) Náhľady (QA1-06/07) — identický problém ako barbora1: fixed výška +
   object-fit:cover orezá 16:9 ilustrácie. držíme pomer 16:9 (= 56,25 %). */
.ct-post-card .post-thumbnail,
.blog-layout-1 .post-thumbnail,
.ct-post-list .post-thumbnail {
	aspect-ratio: 16 / 9;
	height: auto;
	overflow: hidden;
}
.ct-post-card .post-thumbnail img,
.ct-post-list .post-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
/* single: náhľad nesmie prekryť titulok článku */
.single .entry-header .post-thumbnail,
.page .entry-header .post-thumbnail,
.single .post-thumbnail,
.page .post-thumbnail {
	position: static;
	height: auto;
	overflow: visible;
	margin-bottom: 1rem;
}
.single .post-thumbnail-inner,
.page .post-thumbnail-inner { position: static; inset: auto; }
.single .post-thumbnail img,
.page .post-thumbnail img { width: 100%; height: auto; }

/* 7) Vodoznak ilustrácií musí ostať čitateľný aj v náhľade (QA1-07) —
   pri 16:9 sa neorezáva; prídavná poistka: ukážeme celý obrázok, ak je iný pomer. */
.tvk-thumb-contain img { object-fit: contain; background: #EEF4F7; }

/* 8) Duplicitný h1 poistka: stránka má iba jeden nadpis (titulok kreslí téma). */
.entry-title { overflow-wrap: break-word; }

/* QA1-17 — core oEmbed vkladá priamy <iframe width="720"> bez responzívneho obalu
   (dôkaz: vyrenderovaný výstup článku video-z-mesta-kanaly-a-archiv, 2026-10-28).
   Bez tohto pravidla by embed pretečiel na mobile (390 px). Responzivita: 16:9. */
.entry-content iframe,
.wp-embed iframe,
blockquote iframe {
	max-width: 100%;
	height: auto;
}
.entry-content iframe[src*="youtube"],
.wp-embed iframe {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
}