/* =============================================================
   TVK BRAND LAYER — brand/BRAND-SPEC.md (2026-10-29)
   ------------------------------------------------------------
   Kanonická vrstva identity: ROVNAKÁ pre všetkých 11 variantov
   (barbora1..10 + barborax). Súbor sa kopíruje ako
   <theme>/assets/css/tvk-brand.css a enqueue-uje sa ako posledná
   vrstva štýlov (priority 999), takže tokeny platia aj pre builderi
   (Kadence, Blocksy, GeneratePress, Astra, Elementor, Breakdance,
   FSE) bez zásahu do ich vnútorného kódu.

   Pravidlá, ktoré tento súbor nesmie porušiť:
   - logo sa NIEJE orezávané, deformované ani prefarbované (§4),
   - tyrkysová/terakota sa NIEJE používa ako farba textu (§2.1),
   - rubrika má akcent AJ textový label (§5),
   - tokeny sú presne ako v token kontrakte (§7).
   ============================================================= */

/* --- Inter, self-hosted (§3) ------------------------------------------------
   Fontové súbory sú v <theme>/assets/fonts/ (Inter-latin.woff2,
   Inter-latin-ext.woff2). Sú to VARIABILNÉ písmo (os wght 100–900),
   takže jedna @font-face pravda pokryje aj Regular (400), Medium (500)
   aj ExtraBold (800) bez trojnásobku veľkosti.

   Relatívne URL sa rieši oproti tejto štýlovej tabule (assets/css/) →
   ../fonts/ = assets/fonts/ v rámci tej istej témy.

   unicode-range pokrýva latin (U+0000-00FF) a latin-ext (U+0100-024F) —
   slovenské znaky s diakritikou (ť, ľ, ĺ, ď, ŕ, ô, ž, š, č) sú v latin-ext.
   Keďže písmo je self-hosted, žiadny externý request na Google Fonts —
   demo prevádzka neodovzdáva návštevnosť tretiu strane.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/Inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/Inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* --- Token kontrakt (BRAND-SPEC §7) — identický vo všetkých variantoch --- */
	--tvk-blue: #0B4A74;
	--tvk-teal: #0EA6A6;
	--tvk-green: #609480;
	--tvk-terracotta: #C88957;
	--tvk-bg-white: #FFFFFF;
	--tvk-bg-cream: #FBFAF6;
	--tvk-ink: #153247;
	--tvk-logo-min-width: 180px;

	/* --- textový odtieň tyrkysovej (§2.1) ---
	   Samotná tyrkysová #0EA6A6 má na bielom 2.99:1 → nepoužíva sa ako text.
	   #0A6B6C má 6.03:1 na krémovom, teda vyhovuje WCAG AA. */
	--tvk-teal-ink: #0A6B6C;

	/* --- typografia (§3): Inter + zdokumentovaný systémový fallback --- */
	--tvk-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- Podklad a text tela (§2) -------------------------------------------
   Niektoré hostiteľské témy (GeneratePress, Astra) nastavujú vlastné
   farby tela a zanechávajú ich aj po načítaní identity vrstvy. Telo stránky
   musí mať krémový podklad a text --tvk-ink — to je definícia identity,
   nie vkus hostiteľskej témy.

   !important je tu zámerne: Astra píše podklad triedou (.ast-separate-container,
   špecificita 0,1,0), ktorá vyhráva nad selektorom `body` (0,0,1) bez ohľadu
   na poradie štýlov. Identita musí mať posledné slovo — na poradí enqueue
   (priorita 999) sa tu nedá spoľahnúť. */
body {
	background-color: var(--tvk-bg-cream) !important;
	color: var(--tvk-ink);
}

/* --- Typografia (§3) ---------------------------------------------------- */
body,
.site-content,
.entry-content,
.widget,
button,
input,
select,
textarea,
.wp-block-button__link,
.kadence-button {
	font-family: var(--tvk-font-sans);
}

/* Inter ExtraBold (800) pre hlavné nadpisy (§3) */
h1,
h2,
.entry-title,
.wp-block-heading {
	font-family: var(--tvk-font-sans);
	font-weight: 800;
}

h3,
h4,
h5,
h6 {
	font-family: var(--tvk-font-sans);
	font-weight: 700;
}

/* Dlhý text: 70–75 znakov na riadok, riadkovanie ≥ 1.5 (§3) */
.entry-content > p,
.entry-content p,
.wp-block-post-content p {
	line-height: 1.6;
	max-width: 72ch;
}

/* --- Logo (§4) -----------------------------------------------------------
   Celé logo, originálny pomer 1200:655, žiadne kríženie (overflow:hidden),
   žiadne deformovanie, žiadne prefarbovanie (filter/mix-blend-mode),
   minimálna šírka 180 px online (§1).
   max-height sa musí explicitne zrušiť — inak by max-height:56px z hostiteľskej
   témy vytlačilo pomer a logo by sa roztiahlo (zákaz deformovania).

   Selektory pokrývajú značku loga vo všetkých témach:
   Kadence (.custom-logo), Blocksy (.site-branding img / img.default-logo),
   GeneratePress (.site-logo img), Astra/Hello (.custom-logo),
   WordPress bloky (.wp-block-site-logo img). Bez šírky 180 px by napr.
   Blocksy logo v hlavičke vykreslil na 92 px — to je pod limit manuálu. */
.custom-logo,
.tvk-logo,
.brand-logo,
.site-logo img,
.site-branding img,
.site-header__logo img,
.wp-block-site-logo img,
.wp-block-site-logo.is-default-size img,
header img.default-logo,
header img[class*="logo"] {
	width: 180px;
	min-width: 180px;
	height: auto;
	max-width: 100%;
	max-height: none;
	object-fit: contain;
	filter: none;
	mix-blend-mode: normal;
	background-blend-mode: normal;
}

/* Logo sa nesmie stlačiť pod limit 180 px — flex kontajnery hlavičky ho
   inak zmenšia (blokové témy: .wp-block-site-logo). */
.custom-logo-link,
.wp-block-site-logo {
	flex-shrink: 0;
}

/* Logo nikdy nesmie byť pozadie s orezaním (§7) */
.custom-logo,
.tvk-logo,
.brand-logo {
	background-image: none;
}

/* --- Rubriky (§5) --------------------------------------------------------
   Akcent je DOPLNOK — text vždy --tvk-ink (nikdy tyrkysová/terakota).
   Každá rubrika má vlastný textový label, nielen farbu (§2.1 bod 3). */
.rubric-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--tvk-font-sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	padding: 6px 10px;
	border: 1px solid var(--rubric, var(--tvk-blue));
	border-radius: 2px;
	background: var(--tvk-bg-white);
	color: var(--tvk-ink);
	margin: 0 .5rem;
	vertical-align: middle;
}

.rubric-chip::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--rubric, var(--tvk-blue));
	flex: none;
}

.rubric-01 { --rubric: var(--tvk-blue); }
.rubric-02 { --rubric: var(--tvk-teal); }
.rubric-03 { --rubric: var(--tvk-green); }
.rubric-04 { --rubric: var(--tvk-terracotta); }

/* --- Focus a výber ------------------------------------------------------
   Viditeľný focus — tyrkysová je tu akcent (nie text), preto je v súlade
   s §2.1 (povolené: border/ikona). */
:focus-visible {
	outline: 3px solid var(--tvk-teal);
	outline-offset: 2px;
}

/* --- Mobilná bezpečnosť (§1) ---------------------------------------------
   Žiadny variant nesmie na úzkom displeji vytláčať obsah za viewport.
   Pravidlá sú zámerne všeobecné — platia pre všetkých 11 tém a nahrádzajú
   rozdielne box modely hostiteľských tém. */

/* Médiá a vložené rámce nikdy neprekročia šírku obsahu. */
img,
svg,
video,
canvas,
iframe,
embed,
object {
	max-width: 100%;
}

/* Vyhľadávanie v bočnom panely: vstup sa musí stiahnuť, inak tlačidlo
   vytlačí celý panel za viewport (barbora10). */
.wp-block-search__inside-wrapper {
	flex-wrap: wrap;
}

.wp-block-search__input {
	min-width: 0;
}

@media (max-width: 782px) {
	/* Hello Elementor a podobné témy používajú trik „content-box +
	   záporný margin". Bez border-box obsah pretáča viewport. */
	.site-main,
	.site-footer,
	.site-header,
	.footer-inner,
	.page-header,
	.entry-title,
	.site-content,
	.entry-content {
		box-sizing: border-box;
	}

	/* Logo a názov stránky v hlavičke sa na mobile musia skladať
	   pod seba — inak titulok vytlačí obrazovku (GeneratePress). */
	.site-branding-container {
		flex-wrap: wrap;
	}

	.site-branding,
	.site-branding-container {
		max-width: 100%;
	}

	/* Dlhé nadpisy sa musia zlomiť, nie pretlačiť. */
	.entry-title,
	.page-title,
	.site-title,
	.main-title {
		overflow-wrap: break-word;
	}

	/* Blokové témy: hlavička je flex RIADOK (logo + názov + tagline +
	   navigácia). Na úzkom displeji sa musí zlomiť do viacerých riadkov,
	   inak logo so šírkou 180 px vytlač navigáciu za viewport. */
	header .wp-block-group.is-layout-flex {
		flex-wrap: wrap;
	}

	.wp-block-site-tagline {
		max-width: 100%;
	}

	/* Astra: sekcie hlavičky sú grid/flex položky s min-width:auto — logo
	   (180 px) spolu s názvom portálu tak vytlačia navigáciu za viewport. */
	.site-header-primary-section,
	.site-header-primary-section-left,
	.site-header-primary-section-right {
		min-width: 0;
	}

	.site-header-primary-section-left {
		flex-wrap: wrap;
	}
}