/*
Theme Name: 4 LIFE PHARMA
Theme URI: https://4lifepharma.eu
Author: PRO Holding
Description: Vlastní téma pro web 4 LIFE PHARMA. Vzniklo migrací z CMS PSYO. Bez build kroku — CSS i JavaScript se dají upravit textovým editorem.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 4lifepharma
Tags: custom-theme, translation-ready, accessibility-ready
*/

/* ═══════════════════════════════════════════════════════════════════
 *  OBSAH
 *  1. Tokeny        barvy, písma, rozestupy — zdroj v docs/design-tokeny.md
 *  2. Základ        reset, typografie, odkazy
 *  3. Rozvržení     kontejner, mřížka
 *  4. Komponenty    tlačítka, karty, tabulky, loga
 *  5. Hlavička      menu, přepínač jazyků
 *  6. Patička
 *  7. Obsahové typy produkty, akce, prezentace, VIS
 *  8. Brána a cookies
 *  9. Přístupnost   focus, skryté texty, respekt k nastavení systému
 * 10. Úvodní stránka
 * 11. Obsah podstránek
 * 12. Promované portfolio
 * 13. Podstránky    sekce s kotvou, kalendář, přípravek, VIS, prezentace
 * 14. Formuláře     Contact Form 7, návnada proti robotům
 * ═══════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENY ────────────────────────────────────────────────────── */

:root {
	/* Barvy — z demo.less starého webu, viz docs/design-tokeny.md */
	--flp-barva-primarni: #e74f11;          /* barva značky — nadpisy, rámečky */
	--flp-barva-primarni-tmava: #bb3e14;

	/*
	 * Výplň tlačítek. Barva značky #e74f11 dává s bílým textem kontrast
	 * 3,80 : 1, což na 16px text nestačí (WCAG AA chce 4,5 : 1).
	 * #cc430f je nejbližší tmavší odstín, který projde (4,80 : 1).
	 * Nadpisy H1 zůstávají v původní #e74f11 — velký text má práh 3 : 1
	 * a ten původní odstín splňuje.
	 */
	--flp-barva-primarni-tlacitko: #cc430f;
	--flp-barva-text: #000;
	--flp-barva-text-tlumeny: #6b6b6b;   /* opraveno z #818181 kvůli kontrastu */
	--flp-barva-seda-original: #818181;
	--flp-barva-odkaz-hover: #0082ab;
	/*
	 * Tmavší varianta modré pro barevné plochy s bílým textem.
	 * #0082ab dává s bílou 4,39 : 1 — o chlup pod hranicí WCAG AA.
	 */
	--flp-barva-modra-tmava: #007399;
	--flp-barva-pozadi: #fff;
	--flp-barva-pozadi-svetle: #f6f6f6;
	--flp-barva-zvyrazneni: #ffe3d7;
	--flp-barva-ram: #ccc;
	--flp-barva-ram-svetly: #dadada;
	/*
	 * Pozadí přepínače jazyků. Originál má #b5b4b4, ale s bílým textem
	 * je to kontrast 2,07 : 1 — text je špatně čitelný. #767676 je
	 * nejbližší odstín splňující 4,5 : 1.
	 */
	--flp-barva-seda-tmava: #767676;
	--flp-barva-seda-tmava-original: #b5b4b4;
	--flp-barva-chyba: #d20000;

	/*
	 * Pozadí pásu s logy. Loga jsou bílá s průhledností, takže potřebují
	 * tmavý podklad — odečteno z originálu.
	 */
	--flp-barva-loga-pozadi: #636465;
	--flp-barva-loga-karta: #6f7071;

	/* Písma */
	--flp-pismo-nadpisy: Oswald, "Arial Narrow", sans-serif;
	--flp-pismo-telo: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--flp-pismo-zaklad: 14px;
	--flp-pismo-text: 16px;
	--flp-pismo-h1: 36px;
	--flp-pismo-h1-mobil: 20px;
	--flp-pismo-h2: 20px;
	--flp-pismo-h3: 20px;
	--flp-pismo-h4: 16px;

	/* Rozestupy */
	--flp-mezera-xs: 5px;
	--flp-mezera-s: 10px;
	--flp-mezera-m: 15px;
	--flp-mezera-l: 30px;
	--flp-mezera-xl: 60px;
	/* Svislé odsazení obsahových sekcí — originál dýchá víc než
	   výchozích 60 px, které používáme uvnitř komponent. */
	--flp-mezera-sekce: 90px;

	/* Tvary */
	--flp-radius: 7px;
	--flp-radius-s: 3px;
	--flp-radius-m: 5px;
	--flp-radius-pilulka: 100px;
	--flp-stin-karta: 0 0 13px 0 rgba(0, 0, 0, .15);
	--flp-stin-vyrazny: 0 0 20px 0 rgba(0, 0, 0, .14);
	--flp-stin-hlavicka: 0 -1px 26px -1px rgba(0, 0, 0, .25);

	/* Kontejner — hodnoty z Bootstrapu 4.1.3, který používá starý web */
	--flp-sirka-kontejneru: 1140px;
	--flp-odsazeni-kontejneru: 15px;
}

/* ── Písma ze serveru, ne z Google (GDPR) ─────────────────────────── */

@font-face {
	font-family: Oswald;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/oswald-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2192, U+2212;
}
@font-face {
	font-family: Oswald;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/oswald-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+0304, U+0308, U+0329, U+1E00-1E9F, U+2020, U+20A0-20AB;
}
@font-face {
	font-family: Oswald;
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/oswald-500-latin.woff2") format("woff2");
}
@font-face {
	font-family: Oswald;
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/oswald-600-latin.woff2") format("woff2");
}
@font-face {
	font-family: Oswald;
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/oswald-700-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("assets/fonts/opensans-300-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/opensans-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2192, U+2212;
}
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/opensans-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+0304, U+0308, U+1E00-1E9F, U+2020, U+20A0-20AB;
}
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/opensans-600-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/opensans-700-latin.woff2") format("woff2");
}

/* ── 2. ZÁKLAD ────────────────────────────────────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--flp-pismo-telo);
	font-size: var(--flp-pismo-zaklad);
	line-height: 1.5;
	color: var(--flp-barva-text);
	background: var(--flp-barva-pozadi);
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

p,
li {
	font-size: var(--flp-pismo-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--flp-mezera-m);
	font-family: var(--flp-pismo-nadpisy);
	line-height: 1.4;
}

/* H1 je na tomhle webu charakteristický — oranžový, verzálkami, na střed */
h1 {
	font-size: var(--flp-pismo-h1-mobil);
	font-weight: 400;
	color: var(--flp-barva-primarni);
	text-align: center;
	text-transform: uppercase;
}

h2 {
	font-size: var(--flp-pismo-h2);
	font-weight: 600;
}

h3 {
	font-size: var(--flp-pismo-h3);
	font-weight: 700;
}

h4 {
	font-size: var(--flp-pismo-h4);
	font-weight: 600;
}

a {
	color: var(--flp-barva-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

a:hover {
	color: var(--flp-barva-odkaz-hover);
}

ul,
ol {
	padding-left: var(--flp-mezera-l);
	margin: 0 0 var(--flp-mezera-m);
}

/* ── 3. ROZVRŽENÍ ─────────────────────────────────────────────────── */

.flp-kontejner {
	width: 100%;
	max-width: var(--flp-sirka-kontejneru);
	padding-right: var(--flp-odsazeni-kontejneru);
	padding-left: var(--flp-odsazeni-kontejneru);
	margin-right: auto;
	margin-left: auto;
}

.flp-kontejner--uzky {
	max-width: 720px;
}

.flp-obsah {
	padding: var(--flp-mezera-l) 0 var(--flp-mezera-xl);
}

/* ── 4. KOMPONENTY ────────────────────────────────────────────────── */

.flp-tlacitko {
	display: inline-block;
	padding: 13px 24px;
	font-family: var(--flp-pismo-nadpisy);
	font-size: var(--flp-pismo-text);
	font-weight: 400;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	background: var(--flp-barva-primarni-tlacitko);
	border: 1px solid var(--flp-barva-primarni-tlacitko);
	border-radius: var(--flp-radius);
}

.flp-tlacitko:hover,
.flp-tlacitko:focus-visible {
	color: var(--flp-barva-primarni-tmava);
	background: transparent;
}

.flp-tlacitko--druhotne {
	color: var(--flp-barva-text);
	background: transparent;
	border-color: var(--flp-barva-ram);
}

.flp-tlacitko--druhotne:hover,
.flp-tlacitko--druhotne:focus-visible {
	color: var(--flp-barva-text);
	border-color: var(--flp-barva-text);
}

/* Tabulka — na mobilu se překlopí do karet, ať nikde nepřetéká */
.flp-tabulka-obal {
	overflow-x: auto;
	margin-bottom: var(--flp-mezera-l);
}

.flp-varianty {
	width: 100%;
	border-collapse: collapse;
}

.flp-varianty th,
.flp-varianty td {
	padding: var(--flp-mezera-s) var(--flp-mezera-m);
	font-size: var(--flp-pismo-text);
	text-align: left;
	border-bottom: 1px solid var(--flp-barva-ram-svetly);
}

.flp-varianty th {
	font-family: var(--flp-pismo-nadpisy);
	font-weight: 600;
	background: var(--flp-barva-pozadi-svetle);
}

@media (max-width: 575px) {
	.flp-varianty thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.flp-varianty tr {
		display: block;
		margin-bottom: var(--flp-mezera-m);
		border: 1px solid var(--flp-barva-ram-svetly);
		border-radius: var(--flp-radius-m);
	}

	.flp-varianty td {
		display: flex;
		justify-content: space-between;
		gap: var(--flp-mezera-s);
		border-bottom: 1px solid var(--flp-barva-ram-svetly);
	}

	.flp-varianty td::before {
		font-family: var(--flp-pismo-nadpisy);
		font-weight: 600;
		content: attr(data-popisek);
	}

	.flp-varianty tr td:last-child {
		border-bottom: 0;
	}
}

/*
 * Pás log — reference a partneři.
 *
 * ⚠️ Pozadí MUSÍ zůstat tmavé. Loga jsou bílé PNG s průhledností,
 * navržené pro tmavý podklad — na světlém pozadí jsou prakticky
 * neviditelná. Originál má tuhle sekci tmavě šedou, přebíráme to.
 */
.flp-loga {
	padding: var(--flp-mezera-xl) 0;
	background: var(--flp-barva-loga-pozadi);
}

@media (min-width: 992px) {
	.flp-loga {
		padding: var(--flp-mezera-sekce) 0;
	}
}

.flp-loga__nadpis {
	margin-bottom: var(--flp-mezera-xl);
	font-size: 34px;
	font-weight: 400;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.flp-loga__nadpis {
		font-size: 24px;
	}
}

.flp-loga__seznam {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--flp-mezera-l);
	align-items: stretch;
	padding: 0;
	margin: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.flp-loga__seznam {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--flp-mezera-m);
	}
}

@media (min-width: 992px) {
	.flp-loga__seznam {
		gap: var(--flp-mezera-l);
	}
}

/* Karta kolem loga — světlejší plocha na tmavém pozadí, jako v originálu */
.flp-loga__polozka {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 118px;
	padding: var(--flp-mezera-m);
	background: var(--flp-barva-loga-karta);
	border-radius: var(--flp-radius-s);
}

.flp-loga__polozka a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.flp-loga__polozka img {
	/* `100%` musí být první — pevných 160 px by ve čtyřsloupcové mřížce
	   na tabletu přeteklo šířku sloupce. */
	max-width: 100%;
	max-height: 90px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Karty a mřížky výpisů */
.flp-mrizka {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--flp-mezera-l);
	padding: 0;
	margin: 0;
	list-style: none;
}

@media (min-width: 576px) {
	.flp-mrizka {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.flp-mrizka {
		grid-template-columns: repeat(3, 1fr);
	}
}

.flp-karta-vypis {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--flp-barva-ram-svetly);
	border-radius: var(--flp-radius);
}

.flp-karta-vypis__obrazek {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--flp-barva-pozadi-svetle);
}

.flp-karta-vypis__obrazek img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Produkt bez obrázku nesmí rozbít mřížku — místo fotky je jen plocha */
.flp-karta-vypis--bez-obrazku .flp-karta-vypis__obrazek {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--flp-barva-text-tlumeny);
	font-family: var(--flp-pismo-nadpisy);
	font-size: var(--flp-pismo-zaklad);
	text-transform: uppercase;
}

.flp-karta-vypis__telo {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--flp-mezera-m);
}

.flp-karta-vypis__nadpis {
	margin-bottom: var(--flp-mezera-s);
	font-size: var(--flp-pismo-h4);
}

.flp-karta-vypis__nadpis a {
	text-decoration: none;
}

/* ── 5. HLAVIČKA ──────────────────────────────────────────────────── */

.flp-hlavicka {
	position: relative;
	z-index: 10;
	background: #fff;
	box-shadow: var(--flp-stin-hlavicka);
}

.flp-hlavicka__obsah {
	display: flex;
	flex-wrap: wrap;
	gap: var(--flp-mezera-m);
	align-items: center;
	justify-content: space-between;
	padding-top: var(--flp-mezera-s);
	padding-bottom: var(--flp-mezera-s);
}

/*
 * Na desktopu je hlavička jedna řada: logo vlevo, menu hned za ním.
 * `flex-wrap: nowrap` je tu důležité — bez něj se dlouhé menu zalomí
 * pod logo a hlavička zdvojnásobí výšku.
 */
@media (min-width: 992px) {
	.flp-hlavicka__obsah {
		flex-wrap: nowrap;
		gap: var(--flp-mezera-l);
		justify-content: flex-start;
	}

	.flp-menu {
		flex: 1;
	}

	.flp-menu__seznam {
		flex-wrap: wrap;
		justify-content: flex-end;
	}
}

/* Rozměry z originálu: `.navbar-brand img { max-height: 70px }` */
.flp-logo img {
	max-height: 52px;
	width: auto;
}

@media (min-width: 992px) {
	.flp-logo img {
		max-height: 70px;
	}
}

.flp-menu-prepinac {
	display: inline-flex;
	gap: var(--flp-mezera-s);
	align-items: center;
	padding: var(--flp-mezera-s);
	font-family: var(--flp-pismo-nadpisy);
	text-transform: uppercase;
	cursor: pointer;
	background: none;
	border: 1px solid var(--flp-barva-ram);
	border-radius: var(--flp-radius-s);
}

@media (min-width: 992px) {
	.flp-menu-prepinac {
		display: none;
	}
}

.flp-menu {
	width: 100%;
}

.flp-menu[hidden] {
	display: none;
}

@media (min-width: 992px) {
	.flp-menu,
	.flp-menu[hidden] {
		display: block;
		width: auto;
	}
}

.flp-menu__seznam {
	display: flex;
	flex-direction: column;
	gap: var(--flp-mezera-s);
	padding: 0;
	margin: 0;
	list-style: none;
}

@media (min-width: 992px) {
	.flp-menu__seznam {
		flex-direction: row;
		gap: var(--flp-mezera-l);
		align-items: center;
	}
}

.flp-menu__seznam a {
	display: inline-block;
	padding: 6px 12px;
	font-family: var(--flp-pismo-nadpisy);
	font-size: 15px;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

@media (min-width: 992px) {
	.flp-menu__seznam {
		gap: 2px;
	}
}

@media (min-width: 1200px) {
	.flp-menu__seznam a {
		font-size: var(--flp-pismo-text);
	}

	.flp-menu__seznam {
		gap: var(--flp-mezera-xs);
	}
}

/*
 * Aktivní položka menu — oranžová bublina se šipkou dolů, jako v originálu
 * (`.navbar-nav .nav-item a.nav-link.active` + `:after`).
 *
 * Originál má výplň v barvě značky #e74f11, ta ale dává s bílým textem
 * kontrast 3,80 : 1 — pod hranicí WCAG AA. Používáme tmavší odstín
 * (4,80 : 1); rozdíl je okem sotva znatelný.
 */
.flp-menu__seznam .current-menu-item > a,
.flp-menu__seznam .current-menu-ancestor > a,
.flp-menu__seznam a[aria-current="page"] {
	position: relative;
	color: #fff;
	background: var(--flp-barva-primarni-tlacitko);
	border-radius: var(--flp-radius);
}

/* Špička směřující dolů pod bublinou */
.flp-menu__seznam .current-menu-item > a::after,
.flp-menu__seznam .current-menu-ancestor > a::after,
.flp-menu__seznam a[aria-current="page"]::after {
	position: absolute;
	bottom: -16px;
	left: 50%;
	display: block;
	width: 0;
	height: 0;
	margin-left: -8px;
	content: "";
	border: solid 8px transparent;
	border-top-color: var(--flp-barva-primarni-tlacitko);
}

/*
 * Odkaz na druhý jazyk je poslední položkou menu (jako v originálu).
 * Záměrně **bez zvýraznění** — bublinu má dostat aktivní stránka,
 * ne přepínač jazyka.
 */

/* Přepínač jazyků — jako na starém webu jen odkaz na druhý jazyk */
.flp-jazyky__seznam {
	display: flex;
	gap: var(--flp-mezera-xs);
	padding: 0;
	margin: 0;
	list-style: none;
}

.flp-jazyky a {
	display: inline-block;
	padding: 4px 14px;
	font-family: var(--flp-pismo-nadpisy);
	font-size: 12px;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	background: var(--flp-barva-seda-tmava);
}

.flp-jazyky a:hover,
.flp-jazyky a:focus-visible {
	color: #fff;
	background: var(--flp-barva-primarni);
}

/* ── 6. PATIČKA ───────────────────────────────────────────────────── */

.flp-paticka {
	padding: var(--flp-mezera-xl) 0 var(--flp-mezera-l);
	margin-top: var(--flp-mezera-xl);
	background: var(--flp-barva-pozadi-svetle);
}

.flp-paticka__mrizka {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--flp-mezera-l);
}

@media (min-width: 768px) {
	.flp-paticka__mrizka {
		grid-template-columns: repeat(3, 1fr);
	}
}

.flp-paticka__copyright {
	padding-top: var(--flp-mezera-m);
	margin-top: var(--flp-mezera-l);
	font-size: var(--flp-pismo-zaklad);
	color: var(--flp-barva-text-tlumeny);
	text-align: center;
	border-top: 1px solid var(--flp-barva-ram-svetly);
}

/* ── 7. OBSAHOVÉ TYPY ─────────────────────────────────────────────── */

/* Hero */
.flp-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 220px;
	overflow: hidden;
	background: var(--flp-barva-pozadi-svetle);
}

@media (min-width: 992px) {
	.flp-hero {
		min-height: 380px;
	}
}

.flp-hero__obrazek {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.flp-hero__obsah {
	position: relative;
	z-index: 1;
	padding-top: var(--flp-mezera-l);
	padding-bottom: var(--flp-mezera-l);
}

.flp-hero__nadpis {
	margin-bottom: var(--flp-mezera-s);
	color: #fff;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}

.flp-hero--bez-obrazku .flp-hero__nadpis {
	color: var(--flp-barva-primarni);
	text-shadow: none;
}

.flp-hero__podnadpis {
	color: #fff;
	text-align: center;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}

.flp-hero--bez-obrazku .flp-hero__podnadpis {
	color: var(--flp-barva-text);
	text-shadow: none;
}

/* Dlaždice */
.flp-dlazdice {
	padding: var(--flp-mezera-xl) 0;
}

.flp-dlazdice__seznam {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--flp-mezera-l);
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: center;
}

@media (min-width: 768px) {
	.flp-dlazdice__seznam {
		grid-template-columns: repeat(3, 1fr);
	}
}

.flp-dlazdice__odkaz {
	font-family: var(--flp-pismo-nadpisy);
	color: var(--flp-barva-primarni);
	text-transform: uppercase;
}

/* Karta s obrázkem */
.flp-karta {
	padding: var(--flp-mezera-xl) 0;
}

.flp-karta__mrizka {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--flp-mezera-l);
	align-items: center;
}

@media (min-width: 768px) {
	.flp-karta__mrizka {
		grid-template-columns: 1fr 1fr;
	}

	.flp-karta--vpravo .flp-karta__obrazek {
		order: 2;
	}
}

/* Sekce s kotvou */
.flp-sekce {
	padding: var(--flp-mezera-xl) 0;
	scroll-margin-top: 90px;
}

.flp-sekce--sede {
	background: var(--flp-barva-pozadi-svetle);
}

.flp-sekce--ruzove {
	background: var(--flp-barva-zvyrazneni);
}

/* Akce */
.flp-akce__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--flp-mezera-m);
	padding: 0;
	margin: 0 0 var(--flp-mezera-m);
	font-size: var(--flp-pismo-zaklad);
	color: var(--flp-barva-text-tlumeny);
	list-style: none;
}

.flp-akce__stitek {
	display: inline-block;
	padding: 2px 12px;
	font-family: var(--flp-pismo-nadpisy);
	font-size: 12px;
	color: #fff;
	text-transform: uppercase;
	background: var(--flp-barva-modra-tmava);
	border-radius: var(--flp-radius-pilulka);
}

/* Veřejná informační služba — dvousloupcová tabulka, na mobilu jeden */
.flp-vis__seznam {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 var(--flp-mezera-l);
	padding: 0;
	margin: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.flp-vis__seznam {
		grid-template-columns: 1fr 1fr;
	}
}

.flp-vis__polozka {
	padding: var(--flp-mezera-s) 0;
	font-size: var(--flp-pismo-text);
	border-bottom: 1px solid var(--flp-barva-ram-svetly);
}

/* Přípravek bez odkazu zůstává jako neaktivní text (rozhodnutí #12) */
.flp-vis__polozka--neaktivni {
	color: var(--flp-barva-text-tlumeny);
}

/* Video */
.flp-video {
	margin-bottom: var(--flp-mezera-l);
}

.flp-video iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
}

/* ── 8. BRÁNA A COOKIES ───────────────────────────────────────────── */

.flp-brana {
	padding: var(--flp-mezera-xl) 0;
}

.flp-brana__box {
	padding: var(--flp-mezera-l);
	text-align: center;
	background: #fff;
	border: 1px solid var(--flp-barva-ram);
	border-radius: var(--flp-radius);
	box-shadow: var(--flp-stin-karta);
}

/*
 * Nadpis brány je právní upozornění, ne brandový nadpis stránky —
 * používá proto tmavší odstín, který na 20px textu splní kontrast
 * 4,5 : 1. Barva značky #e74f11 by tu dala jen 3,80 : 1.
 */
.flp-brana__nadpis {
	font-size: var(--flp-pismo-h2);
	color: var(--flp-barva-primarni-tlacitko);
}

.flp-brana__formular {
	display: flex;
	flex-wrap: wrap;
	gap: var(--flp-mezera-m);
	justify-content: center;
	margin-top: var(--flp-mezera-l);
}

.flp-cookies {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	background: #fff;
	border-top: 2px solid var(--flp-barva-primarni);
	box-shadow: var(--flp-stin-vyrazny);
}

.flp-cookies__obsah {
	display: flex;
	flex-wrap: wrap;
	gap: var(--flp-mezera-m);
	align-items: center;
	justify-content: space-between;
	padding-top: var(--flp-mezera-m);
	padding-bottom: var(--flp-mezera-m);
}

.flp-cookies__text {
	flex: 1 1 260px;
	margin: 0;
	font-size: var(--flp-pismo-zaklad);
}

/* ── 9. PŘÍSTUPNOST ───────────────────────────────────────────────── */

/* Text jen pro čtečky — vizuálně skrytý, ale čitelný pro asistivní technologie */
.flp-jen-pro-ctecky {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Viditelný focus — originál ho nemá, bez něj web nesplní WCAG 2.1 AA */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--flp-barva-odkaz-hover);
	outline-offset: 2px;
	border-radius: var(--flp-radius-s);
}

/* Přeskočení na obsah — první prvek pro ovládání klávesnicí */
.flp-preskocit {
	position: absolute;
	top: -100px;
	left: var(--flp-mezera-m);
	z-index: 200;
	padding: var(--flp-mezera-s) var(--flp-mezera-m);
	color: #fff;
	background: var(--flp-barva-text);
	transition: top .15s ease-in-out;
}

.flp-preskocit:focus {
	top: var(--flp-mezera-s);
	color: #fff;
}

/* Respekt k nastavení „omezit pohyb“ v systému */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ── Desktopová typografie ────────────────────────────────────────── */

@media (min-width: 992px) {
	h1 {
		font-size: var(--flp-pismo-h1);
	}
}

/* ── 10. ÚVODNÍ STRÁNKA ───────────────────────────────────────────────
 *  Tři sekce podle originálu. Obsah i obrázky jdou z Nastavení webu,
 *  v šabloně není nic natvrdo.
 * ─────────────────────────────────────────────────────────────────── */

/*
 * Hlavička s fotkou (`.head-box.home` v originálu).
 *
 * Fotka je světlá vpravo a text se přes ni vypisuje bíle, proto je pod ní
 * cihlové pozadí a zleva jemný přechod — jinak by nadpis na světlých
 * místech ztratil kontrast.
 */
.flp-uvod-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 260px;
	overflow: hidden;
	background: var(--flp-barva-primarni-tmava);
}

@media (min-width: 992px) {
	.flp-uvod-hero {
		/* Originál má při 1440 px zhruba 400 px, tedy ~28 vw. */
		min-height: 400px;
		height: 28vw;
		max-height: 520px;
	}
}

.flp-uvod-hero__obrazek {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center right;
}

/* Přechod zleva kvůli čitelnosti textu — na originálu chybí a nadpis
   se na světlé fotce místy ztrácí. */
.flp-uvod-hero::after {
	position: absolute;
	inset: 0;
	content: "";
	background: linear-gradient(
		90deg,
		rgba(187, 62, 20, .92) 0%,
		rgba(187, 62, 20, .78) 22%,
		rgba(187, 62, 20, 0) 46%
	);
}

.flp-uvod-hero__obsah {
	position: relative;
	z-index: 1;
	padding-top: var(--flp-mezera-l);
	padding-bottom: var(--flp-mezera-l);
}

.flp-uvod-hero__nadpis {
	margin-bottom: var(--flp-mezera-s);
	font-size: 32px;
	font-weight: 400;
	color: #fff;
	text-align: left;
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.flp-uvod-hero__nadpis {
		font-size: 4vw;
	}
}

/* Velikost z originálu: `.head-box .container .info p { font-size: 1.4vw }`,
   s dolní hranicí, ať je text čitelný i na úzkých displejích. */
.flp-uvod-hero__text {
	max-width: 32ch;
	font-family: var(--flp-pismo-nadpisy);
	font-size: 18px;
	line-height: 1.45;
	color: #fff;
}

@media (min-width: 768px) {
	.flp-uvod-hero__text {
		font-size: max(20px, 1.6vw);
	}
}

/* Sekce „Filosofie naší práce“ a „Kdo jsme?“ */
.flp-uvod-sekce {
	padding: var(--flp-mezera-xl) 0;
	background: #fff;
}

@media (min-width: 992px) {
	.flp-uvod-sekce {
		padding: var(--flp-mezera-sekce) 0;
	}
}

.flp-uvod-sekce--seda {
	background: var(--flp-barva-pozadi-svetle);
}

.flp-uvod-sekce__mrizka {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--flp-mezera-l);
	align-items: center;
}

@media (min-width: 992px) {
	.flp-uvod-sekce__mrizka {
		grid-template-columns: 1fr 1fr;
		gap: var(--flp-mezera-xl);
	}
}

/* U „Kdo jsme?“ je obrázek vlevo. Na mobilu jde vždycky pod text, ať
   čtenář nezačíná obrázkem bez kontextu. */
@media (max-width: 991px) {
	.flp-uvod-sekce--obracene .flp-uvod-sekce__obrazek {
		order: 2;
	}
}

/* Originál láme nadpis na dva řádky („FILOSOFIE / NAŠÍ PRÁCE“).
   Řešíme to šířkou v em, ne pevným zlomem v textu — klient si nadpis
   může přepsat a zalomení se přizpůsobí samo. */
.flp-uvod-sekce__nadpis {
	max-width: 6em;
	margin-bottom: var(--flp-mezera-m);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--flp-barva-primarni);
	text-transform: uppercase;
}

@media (min-width: 992px) {
	.flp-uvod-sekce__nadpis {
		font-size: 34px;
	}
}

.flp-uvod-sekce__obrazek img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Odkazy v textu sekcí jsou v originálu oranžové a podtržené.
 *
 * Na světle šedém pozadí (#f6f6f6) dává `--flp-barva-primarni-tlacitko`
 * jen 4,43 : 1 — těsně pod hranicí WCAG AA. Používáme proto o stupeň
 * tmavší odstín, který projde na šedé i na bílé.
 */
.flp-uvod-sekce__text a {
	color: var(--flp-barva-primarni-tmava);
}

.flp-uvod-sekce__odkaz {
	font-weight: 600;
	color: var(--flp-barva-primarni-tmava);
}

/* ── Šestiúhelníky v sekci „Filosofie naší práce“ ─────────────────────
 *  Nejsou to dekorace — jsou to odkazy na kotvené sekce stránky Služby.
 *  Tvar se kreslí `clip-path`, žádný obrázek ani knihovna.
 *
 *  Skládají se do včelí plástve: REGISTRACE nahoře uprostřed,
 *  MARKETING A SALES vlevo dole, FARMAKOVIGILANCE vpravo dole.
 *  Spodní řada se zvedá záporným odsazením, aby na sebe navazovaly.
 * ─────────────────────────────────────────────────────────────────── */

.flp-hexagony {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 340px;
}

/* Podkladová kresba je jen dekorace za šestiúhelníky. */
.flp-hexagony__pozadi {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: .5;
}

.flp-hexagony__seznam {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: center;
	width: 100%;
	max-width: 380px;
	padding: 0;
	margin: 0;
	list-style: none;
}

/* První šestiúhelník sám nahoře, zbylé dva vedle sebe pod ním. */
.flp-hexagony__polozka {
	flex: 0 0 auto;
}

.flp-hexagony__polozka:first-child {
	flex-basis: 100%;
	display: flex;
	justify-content: center;
}

/* Zvednutí spodní dvojice, ať plástev drží pohromadě */
.flp-hexagony__polozka:not(:first-child) {
	margin-top: -13%;
}

.flp-hexagony__odkaz {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	justify-content: center;
	width: 170px;
	aspect-ratio: 1 / 1.12;
	padding: var(--flp-mezera-s);
	color: var(--flp-barva-primarni-tlacitko);
	text-align: center;
	text-decoration: none;
	background: #fff;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .16));
	transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

@media (max-width: 575px) {
	.flp-hexagony__odkaz {
		width: 140px;
	}
}

.flp-hexagony__odkaz:hover,
.flp-hexagony__odkaz:focus-visible {
	color: #fff;
	background: var(--flp-barva-primarni-tlacitko);
}

.flp-hexagony__odkaz img {
	width: 40px;
	height: auto;
}

.flp-hexagony__popisek {
	max-width: 8em;
	font-family: var(--flp-pismo-nadpisy);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
}

/* `clip-path` ořízne i obrys focusu, tak ho nahradíme prstencem. */
.flp-hexagony__odkaz:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--flp-barva-odkaz-hover);
}

/* ── 11. OBSAH PODSTRÁNEK ─────────────────────────────────────────────
 *  Originál skládá textové stránky ze sekcí, které se střídají
 *  v podbarvení a mají nadpis na střed. Seznamy jsou dvousloupcové
 *  s oranžovou šipkovou odrážkou.
 * ─────────────────────────────────────────────────────────────────── */

/* Hlavička podstránky je nižší než na úvodní — text je kratší. */
@media (min-width: 992px) {
	.flp-uvod-hero--podstranka {
		min-height: 320px;
		height: 22vw;
		max-height: 420px;
	}
}

/*
 * Podbarvení sekcí si od fáze 2C řídí každá sekce sama — blok „Sekce
 * s kotvou“ na to má pole „Pozadí“ a redaktor tak vidí v editoru totéž
 * co na webu. Dřív tu bylo pravidlo `:nth-of-type(odd)`, které střídalo
 * pozadí podle pořadí; přebíjelo volbu z bloku, takže je pryč.
 */

/* Nadpisy sekcí jsou na střed a oranžové, jako v originálu */
.flp-stranka__obsah > .wp-block-heading {
	font-size: 26px;
	font-weight: 400;
	color: var(--flp-barva-primarni);
	text-align: center;
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.flp-stranka__obsah > .wp-block-heading {
		font-size: 32px;
	}
}

/* Obsah stránky bez vlastního kontejneru (bloky z importu) */
.flp-stranka__obsah > :where(p, ul, ol, h2, h3, h4, figure, .wp-block-table) {
	width: 100%;
	max-width: var(--flp-sirka-kontejneru);
	padding-right: var(--flp-odsazeni-kontejneru);
	padding-left: var(--flp-odsazeni-kontejneru);
	margin-right: auto;
	margin-left: auto;
}

.flp-stranka__obsah > p,
.flp-stranka__obsah > ul,
.flp-stranka__obsah > ol {
	margin-bottom: var(--flp-mezera-m);
}

.flp-stranka__obsah {
	padding-top: var(--flp-mezera-xl);
	padding-bottom: var(--flp-mezera-xl);
}

/*
 * Seznamy: dva sloupce s oranžovou šipkovou odrážkou.
 *
 * Originál kreslí odrážku obrázkem, my znakem „›“ v CSS — ušetří to
 * požadavek navíc a jde to obarvit podle stavu.
 */
.flp-stranka__obsah ul:not(.flp-menu__seznam):not(.flp-loga__seznam):not(.flp-vis__seznam) {
	padding-left: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.flp-stranka__obsah > ul:not(.flp-vis__seznam) {
		columns: 2;
		column-gap: var(--flp-mezera-xl);
	}
}

.flp-stranka__obsah ul:not(.flp-menu__seznam):not(.flp-loga__seznam):not(.flp-vis__seznam) > li {
	position: relative;
	padding-left: 40px;
	margin-bottom: var(--flp-mezera-m);
	break-inside: avoid;
}

.flp-stranka__obsah ul:not(.flp-menu__seznam):not(.flp-loga__seznam):not(.flp-vis__seznam) > li::before {
	position: absolute;
	top: 2px;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-family: var(--flp-pismo-nadpisy);
	font-size: 15px;
	line-height: 1;
	color: #fff;
	content: "\203A";
	background: var(--flp-barva-primarni-tlacitko);
	border-radius: 2px;
}

/* ── 12. VÝPIS PORTFOLIA ──────────────────────────────────────────────
 *  Originál: světle šedý podklad, kategorie s oranžovým nadpisem na
 *  střed a pod ním mřížka bílých karet po pěti.
 * ─────────────────────────────────────────────────────────────────── */

.flp-portfolio {
	padding: var(--flp-mezera-xl) 0;
	background: var(--flp-barva-pozadi-svetle);
}

.flp-portfolio__kategorie {
	margin-bottom: var(--flp-mezera-xl);
}

/*
 * Nadpis kategorie. Originál má 22 px v barvě značky, což na šedém
 * podkladu dává 3,51 : 1 — pod hranicí AA pro běžný text. Při 24 px
 * už platí práh pro velký text (3 : 1), takže barva zůstává přesná
 * a mění se jen velikost o dva pixely.
 */
.flp-portfolio__kategorie h2 {
	margin-bottom: var(--flp-mezera-l);
	font-size: 24px;
	font-weight: 400;
	color: var(--flp-barva-primarni);
	text-align: center;
	text-transform: uppercase;
}

.flp-portfolio__mrizka {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--flp-mezera-m);
	padding: 0;
	margin: 0;
	list-style: none;
}

@media (min-width: 576px) {
	.flp-portfolio__mrizka {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 992px) {
	.flp-portfolio__mrizka {
		grid-template-columns: repeat(5, 1fr);
	}
}

.flp-karta-produkt {
	height: 100%;
	background: #fff;
}

.flp-karta-produkt__odkaz {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--flp-mezera-m);
	text-decoration: none;
}

/* Obrázky přípravků mají různé proporce, pevná plocha drží mřížku
   zarovnanou. Přípravky bez obrázku nechávají plochu prázdnou —
   stejně jako originál, který u nich taky nic nekreslí. */
.flp-karta-produkt__obrazek {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 120px;
	margin-bottom: var(--flp-mezera-s);
}

.flp-karta-produkt__obrazek img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.flp-karta-produkt__nazev {
	margin-top: auto;
	font-family: var(--flp-pismo-nadpisy);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--flp-barva-primarni-tlacitko);
	text-align: center;
	text-decoration: underline;
	text-transform: uppercase;
}

.flp-karta-produkt__odkaz:hover .flp-karta-produkt__nazev,
.flp-karta-produkt__odkaz:focus-visible .flp-karta-produkt__nazev {
	color: var(--flp-barva-text);
}

/* ── 13. PODSTRÁNKY ───────────────────────────────────────────────────
 *  Sekce s kotvou, kalendář, detail přípravku, VIS a prezentace.
 *  Originál sází podstránky do vodorovných pruhů, které se střídají
 *  bílá → světle šedá → zvýrazněná, s nadpisem na střed.
 * ─────────────────────────────────────────────────────────────────── */

/* ── Sekce s kotvou ───────────────────────────────────────────────── */

.flp-sekce {
	padding: var(--flp-mezera-sekce) 0;
	/* Aby se po skoku na kotvu nadpis neschoval pod pevnou hlavičku. */
	scroll-margin-top: 90px;
}

.flp-sekce__nadpis {
	margin: 0 0 var(--flp-mezera-l);
	font-family: var(--flp-pismo-nadpisy);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--flp-barva-primarni);
	text-align: center;
	text-transform: uppercase;
}

/* Barva značky #e74f11 dává na bílé 3,51 : 1. Nad 24 px platí podle
   WCAG mírnější práh 3 : 1, takže odstín z originálu může zůstat. */
@media (min-width: 768px) {
	.flp-sekce__nadpis {
		font-size: 32px;
	}
}

.flp-sekce__uvod,
.flp-sekce__pod {
	max-width: 860px;
	margin-inline: auto;
	text-align: center;
}

.flp-sekce__uvod {
	margin-bottom: var(--flp-mezera-xl);
}

.flp-sekce__pod {
	margin-top: var(--flp-mezera-xl);
}

.flp-sekce__uvod p:last-child,
.flp-sekce__pod p:last-child {
	margin-bottom: 0;
}

.flp-sekce__sloupce {
	display: grid;
	gap: var(--flp-mezera-l) var(--flp-mezera-xl);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.flp-sekce__sloupce {
		grid-template-columns: 1fr 1fr;
	}

	/* Jediný vyplněný sloupec se roztáhne, ať text nekončí v půlce. */
	.flp-sekce__sloupce--jeden {
		grid-template-columns: 1fr;
	}
}

.flp-sekce__sloupec > :first-child {
	margin-top: 0;
}

.flp-sekce__sloupec > :last-child {
	margin-bottom: 0;
}

/*
 * Odrážky v sekcích — oranžový čtvereček se šipkou doprava, jako
 * v originálu. Šipka je vložená jako `data:` SVG, aby si kvůli třem
 * pixelům kresby nevyžádala další požadavek na server.
 */
.flp-sekce__sloupec ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.flp-sekce__sloupec li {
	position: relative;
	padding-left: 40px;
	margin-bottom: var(--flp-mezera-m);
	line-height: 1.55;
}

.flp-sekce__sloupec li::before {
	position: absolute;
	top: 2px;
	left: 0;
	width: 22px;
	height: 22px;
	content: "";
	background:
		url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")
		center / 11px 11px no-repeat,
		var(--flp-barva-primarni-tlacitko);
	border-radius: 2px;
}

/* ── Karta s obrázkem — varianta pro Kontakty ─────────────────────── */

.flp-karta--sede {
	background: var(--flp-barva-pozadi-svetle);
}

.flp-karta--bile {
	background: var(--flp-barva-pozadi);
}

/*
 * „Až k okraji stránky“ — mapa na Kontaktech v originálu není zarovnaná
 * do textového sloupce, ale sahá až k okraji okna. Zvětšujeme proto
 * obrázek o odsazení kontejneru směrem ven.
 */
@media (min-width: 992px) {
	.flp-karta--na-kraj .flp-karta__mrizka {
		align-items: stretch;
		gap: var(--flp-mezera-xl);
	}

	.flp-karta--na-kraj .flp-karta__obrazek {
		margin-right: calc((100vw - var(--flp-sirka-kontejneru)) / -2);
	}

	.flp-karta--na-kraj.flp-karta--vlevo .flp-karta__obrazek {
		margin-right: 0;
		margin-left: calc((100vw - var(--flp-sirka-kontejneru)) / -2);
	}

	.flp-karta--na-kraj .flp-karta__obrazek img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.flp-karta__obrazek a {
	display: block;
}

/* ── Kalendář akcí ────────────────────────────────────────────────── */

.flp-akce {
	padding: var(--flp-mezera-sekce) 0;
	background: var(--flp-barva-pozadi-svetle);
}

.flp-akce__sekce + .flp-akce__sekce {
	margin-top: var(--flp-mezera-sekce);
}

.flp-akce__mrizka {
	display: grid;
	gap: var(--flp-mezera-l);
	grid-template-columns: 1fr;
	padding: 0;
	margin: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.flp-akce__mrizka {
		grid-template-columns: 1fr 1fr;
	}
}

.flp-karta-akce {
	height: 100%;
	padding: var(--flp-mezera-l);
	background: #fff;
	border-radius: var(--flp-radius-s);
}

.flp-karta-akce__nadpis {
	margin: 0 0 var(--flp-mezera-m);
	font-family: var(--flp-pismo-nadpisy);
	font-size: 20px;
	font-weight: 400;
	text-transform: uppercase;
}

.flp-karta-akce__nadpis a {
	color: var(--flp-barva-primarni-tlacitko);
	text-decoration: none;
}

.flp-karta-akce__nadpis a:hover,
.flp-karta-akce__nadpis a:focus-visible {
	text-decoration: underline;
}

/*
 * Metadata akce. Pravidlo z původní sekce 7 sázelo řádky vedle sebe;
 * originál je má pod sebou, každý s ikonou.
 */
.flp-akce__meta {
	display: block;
	padding: 0;
	margin: 0 0 var(--flp-mezera-m);
	font-size: var(--flp-pismo-text);
	color: var(--flp-barva-text);
	list-style: none;
}

.flp-akce__radek {
	display: flex;
	gap: var(--flp-mezera-m);
	align-items: center;
	margin-bottom: var(--flp-mezera-s);
}

.flp-akce__ikona {
	flex: 0 0 auto;
	color: var(--flp-barva-primarni-tlacitko);
}

.flp-karta-akce__odkaz {
	color: var(--flp-barva-primarni-tmava);
}

/* ── Detail akce ──────────────────────────────────────────────────── */

.flp-akce__detail {
	display: grid;
	gap: var(--flp-mezera-xl);
	grid-template-columns: 1fr;
	padding-top: var(--flp-mezera-sekce);
	padding-bottom: var(--flp-mezera-sekce);
}

@media (min-width: 992px) {
	/*
	 * Dva sloupce jen když je vpravo přihláška. U proběhlé akce žádná
	 * není a prázdná polovina stránky by vypadala jako chyba.
	 */
	.flp-akce__detail:has(.flp-akce__prihlaska) {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}

	.flp-akce__zpet {
		grid-column: 1 / -1;
	}
}

.flp-akce__nazev {
	margin: 0 0 var(--flp-mezera-l);
	font-family: var(--flp-pismo-nadpisy);
	font-size: 24px;
	font-weight: 400;
	color: var(--flp-barva-primarni-tlacitko);
	text-transform: uppercase;
}

.flp-akce__prihlaska {
	padding: var(--flp-mezera-l);
	background: var(--flp-barva-pozadi-svetle);
	border-radius: var(--flp-radius-s);
}

.flp-akce__prihlaska > :first-child {
	margin-top: 0;
}

/* ── Detail přípravku ─────────────────────────────────────────────── */

.flp-produkt__obsah {
	padding-top: var(--flp-mezera-xl);
	padding-bottom: var(--flp-mezera-sekce);
}

.flp-produkt__nadpis {
	margin-bottom: var(--flp-mezera-s);
	font-size: 30px;
	color: var(--flp-barva-primarni);
	text-align: left;
	text-transform: uppercase;
}

.flp-produkt__perex {
	margin-bottom: var(--flp-mezera-l);
}

.flp-produkt__perex p:last-child {
	margin-bottom: 0;
}

.flp-produkt__mrizka {
	display: grid;
	gap: var(--flp-mezera-xl);
	grid-template-columns: 1fr;
	align-items: start;
	margin-bottom: var(--flp-mezera-l);
}

@media (min-width: 768px) {
	/* Tabulka vlevo, logo vpravo — poměr odečtený z originálu. */
	.flp-produkt__mrizka {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	}
}

.flp-produkt__obrazek {
	padding: var(--flp-mezera-l);
	background: #fff;
	border: 1px solid var(--flp-barva-ram-svetly);
}

.flp-produkt__obrazek img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Řádek tlačítek PŘEDCHOZÍ / DALŠÍ / ZPĚT NA VÝPIS. Na kraji výpisu
 * jeden z odkazů chybí; `gap` drží rozestup i tak.
 */
.flp-produkt__navigace {
	display: flex;
	flex-wrap: wrap;
	gap: var(--flp-mezera-s);
	margin-top: var(--flp-mezera-l);
}

.flp-produkt__navigace a {
	padding: 10px 22px;
	font-family: var(--flp-pismo-nadpisy);
	font-size: var(--flp-pismo-zaklad);
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	background: var(--flp-barva-primarni-tlacitko);
	border-radius: var(--flp-radius-s);
}

.flp-produkt__navigace a:hover,
.flp-produkt__navigace a:focus-visible {
	background: var(--flp-barva-primarni-tmava);
}

/* ── Veřejná informační služba ────────────────────────────────────── */

.flp-vis {
	padding: var(--flp-mezera-xl) 0 var(--flp-mezera-sekce);
	background: var(--flp-barva-pozadi-svetle);
}

.flp-vis__uvod {
	max-width: 980px;
	margin: 0 auto var(--flp-mezera-xl);
	font-weight: 600;
}

/*
 * Seznam přípravků. Originál ho sází **po sloupcích** — vlevo A až D,
 * vpravo D až Z — ne po řádcích. Mřížka to neumí, tak se tu místo ní
 * použije vícesloupcová sazba, která obsah nejdřív protáhne prvním
 * sloupcem a teprve pak přeteče do druhého.
 */
.flp-vis__seznam {
	display: block;
	background: #fff;
	border: 1px solid var(--flp-barva-ram-svetly);
}

@media (min-width: 768px) {
	.flp-vis__seznam {
		column-count: 2;
		column-gap: 0;
		column-rule: 1px solid var(--flp-barva-ram-svetly);
	}
}

/* Bez tohohle by se řádek mohl rozlomit mezi sloupce v půlce názvu. */
.flp-vis__polozka {
	break-inside: avoid;
}

.flp-vis__polozka {
	padding: var(--flp-mezera-s) var(--flp-mezera-l);
	font-size: var(--flp-pismo-zaklad);
}

.flp-vis__polozka a {
	color: var(--flp-barva-primarni-tmava);
	text-decoration: none;
}

.flp-vis__polozka a:hover,
.flp-vis__polozka a:focus-visible {
	text-decoration: underline;
}

/* ── Prezentace ───────────────────────────────────────────────────── */

.flp-prezentace {
	padding: var(--flp-mezera-sekce) 0;
	background: var(--flp-barva-loga-pozadi);
}

.flp-prezentace__mrizka {
	display: grid;
	gap: var(--flp-mezera-l);
	grid-template-columns: 1fr;
	padding: 0;
	margin: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.flp-prezentace__mrizka {
		grid-template-columns: 1fr 1fr;
	}
}

.flp-karta-prezentace {
	height: 100%;
	padding: var(--flp-mezera-l);
	background: var(--flp-barva-pozadi-svetle);
	border-radius: var(--flp-radius-s);
}

.flp-karta-prezentace__nadpis {
	margin: 0 0 var(--flp-mezera-m);
	font-family: var(--flp-pismo-nadpisy);
	font-size: 20px;
	font-weight: 400;
	color: var(--flp-barva-primarni-tmava);
	text-transform: uppercase;
}

.flp-karta-prezentace__obrazek img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: var(--flp-mezera-m);
}

.flp-karta-prezentace__odkaz {
	color: var(--flp-barva-primarni-tmava);
}

/* ── Pás střídajících se fotek v hlavičce ─────────────────────────────
 *  Náhrada za bxSlider z originálu. Text je natištěný ve fotkách, takže
 *  se tu nic nepřekrývá — jen se střídají obrázky.
 *
 *  Střídání dělá CSS animace, ne JavaScript. Originál kvůli tomuhle
 *  jedinému efektu tahá jQuery i celý bxSlider; po předání by to byly
 *  dvě knihovny navíc, které nikdo neaktualizuje.
 * ─────────────────────────────────────────────────────────────────── */

.flp-hero-pas {
	position: relative;
	overflow: hidden;
	background: var(--flp-barva-primarni-tmava);
	/* Poměr z originálu: 1440 × 407 px. */
	aspect-ratio: 1440 / 407;
	max-height: 520px;
}

.flp-hero-pas__fotka {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/* Bez animace (jedna fotka, nebo omezený pohyb) je vidět ta první. */
	opacity: 0;
}

.flp-hero-pas__fotka:first-child {
	opacity: 1;
}

/*
 * Střídání. Každá fotka je vidět stejně dlouho a prolíná se do další;
 * `--flp-poradi` nastavuje šablona podle pořadí fotky, takže animace
 * funguje pro libovolný počet obrázků bez zásahu do CSS.
 *
 * Krokem 3 fotky = 18 s smyčka, tedy 6 s na jednu jako v originálu.
 */
@media (prefers-reduced-motion: no-preference) {
	.flp-hero-pas--2 .flp-hero-pas__fotka,
	.flp-hero-pas--3 .flp-hero-pas__fotka,
	.flp-hero-pas--4 .flp-hero-pas__fotka,
	.flp-hero-pas--5 .flp-hero-pas__fotka {
		animation: flp-prolnuti var(--flp-doba-pasu, 18s) infinite;
		animation-delay: calc( var(--flp-poradi, 0) * var(--flp-doba-pasu, 18s) / var(--flp-fotek, 3) );
	}

	.flp-hero-pas--2 { --flp-fotek: 2; --flp-doba-pasu: 12s; }
	.flp-hero-pas--3 { --flp-fotek: 3; --flp-doba-pasu: 18s; }
	.flp-hero-pas--4 { --flp-fotek: 4; --flp-doba-pasu: 24s; }
	.flp-hero-pas--5 { --flp-fotek: 5; --flp-doba-pasu: 30s; }
}

@keyframes flp-prolnuti {
	0%     { opacity: 0; }
	3%     { opacity: 1; }
	30%    { opacity: 1; }
	33%    { opacity: 0; }
	100%   { opacity: 0; }
}

/* ── 14. FORMULÁŘE ────────────────────────────────────────────────────
 *  Contact Form 7 vlastní styly nemá, takže vzhled dělá téma.
 *  Podoba podle originálu: bílá plocha, pole přes celou šířku, oranžové
 *  tlačítko vlevo dole.
 * ─────────────────────────────────────────────────────────────────── */

.flp-formular {
	padding: var(--flp-mezera-sekce) 0;
	background: var(--flp-barva-pozadi-svetle);
}

/* Uvnitř detailu přípravku už kontejner je, tak ať se nevnořují. */
.flp-produkt__obsah .flp-formular,
.flp-akce__detail .flp-formular {
	padding: var(--flp-mezera-xl) 0 0;
	background: none;
}

.flp-formular form {
	max-width: 860px;
	margin-inline: auto;
	padding: var(--flp-mezera-l);
	background: #fff;
	border-radius: var(--flp-radius-s);
}

.flp-formular__radek {
	margin: 0 0 var(--flp-mezera-m);
}

.flp-formular__radek label {
	display: block;
	margin-bottom: var(--flp-mezera-xs);
	font-size: var(--flp-pismo-zaklad);
	font-weight: 600;
}

.flp-formular input[type="text"],
.flp-formular input[type="email"],
.flp-formular input[type="tel"],
.flp-formular textarea {
	width: 100%;
	padding: 10px 12px;
	font-family: inherit;
	font-size: var(--flp-pismo-text);
	color: var(--flp-barva-text);
	background: #fff;
	border: 1px solid var(--flp-barva-ram);
	border-radius: var(--flp-radius-s);
}

.flp-formular textarea {
	min-height: 140px;
	resize: vertical;
}

.flp-formular input:focus-visible,
.flp-formular textarea:focus-visible {
	border-color: var(--flp-barva-primarni-tlacitko);
}

/* Hvězdička u povinného pole. Význam nese `required` na vstupu, tohle
   je jen vizuální vodítko — proto má v HTML `aria-hidden`. */
.flp-formular__povinne {
	color: var(--flp-barva-primarni-tlacitko);
}

.flp-formular__souhlas {
	margin: var(--flp-mezera-m) 0;
	font-size: var(--flp-pismo-zaklad);
	line-height: 1.5;
}

.flp-formular__souhlas .wpcf7-list-item {
	margin: 0;
}

.flp-formular__odeslat {
	margin: var(--flp-mezera-l) 0 0;
}

.flp-formular input[type="submit"] {
	padding: 12px 32px;
	font-family: var(--flp-pismo-nadpisy);
	font-size: var(--flp-pismo-zaklad);
	color: #fff;
	text-transform: uppercase;
	cursor: pointer;
	background: var(--flp-barva-primarni-tlacitko);
	border: 0;
	border-radius: var(--flp-radius-s);
}

.flp-formular input[type="submit"]:hover,
.flp-formular input[type="submit"]:focus-visible {
	background: var(--flp-barva-primarni-tmava);
}

/*
 * Návnada na roboty.
 *
 * ⚠️ Nepoužívá `display: none` ani `visibility: hidden` — obojí roboti
 * poznají a pole přeskočí. Tohle ho odsune mimo obrazovku, takže pro
 * robota vypadá jako běžné pole. Pro čtečky je vyřazené atributem
 * `aria-hidden` a `tabindex="-1"` přímo v HTML.
 */
.flp-navnada {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Hlášky Contact Form 7 */
.wpcf7-not-valid-tip {
	display: block;
	margin-top: var(--flp-mezera-xs);
	font-size: var(--flp-pismo-zaklad);
	color: var(--flp-barva-chyba);
}

.wpcf7-response-output {
	padding: var(--flp-mezera-m);
	margin: var(--flp-mezera-l) 0 0;
	font-size: var(--flp-pismo-text);
	border: 2px solid var(--flp-barva-ram);
	border-radius: var(--flp-radius-s);
}

.wpcf7 form.sent .wpcf7-response-output {
	color: #0a5c2a;
	background: #e8f5ec;
	border-color: #0a5c2a;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	color: var(--flp-barva-chyba);
	background: #fdecec;
	border-color: var(--flp-barva-chyba);
}

/* Odkazy na právní stránky v patičce */
.flp-paticka__odkazy ul {
	padding: 0;
	margin: var(--flp-mezera-m) 0 0;
	list-style: none;
}

.flp-paticka__odkazy a {
	font-size: var(--flp-pismo-zaklad);
}

/*
 * Místo pro cookie lištu.
 *
 * ⚠️ Lišta je `position: fixed` u spodního okraje, takže bez vyhrazeného
 * místa zakrývá konec stránky — na formulářích doslova tlačítko Odeslat.
 * Odhalil to až test odeslání s vypnutým JavaScriptem.
 *
 * Třídu na `body` přidává `flp_trida_pri_cookie_liste()`, takže se místo
 * vyhrazuje jen tehdy, když je lišta opravdu vidět.
 */
body.flp-ma-cookie-listu {
	padding-bottom: 200px;
}

@media (min-width: 768px) {
	body.flp-ma-cookie-listu {
		padding-bottom: 120px;
	}
}

.flp-cookies__formular {
	margin: 0;
}