/* =========================================================
   KONTEJNER — Fajn soused
   Styly pro _header.php, _footer.php, _template.php.
   Needituje se z podstránek — obsah podstránky nesmí tyto
   třídy přepisovat.
========================================================== */

:root {
	--fs-primary: #1f7a3d;
	--fs-primary-dark: #145c2c;
	--fs-primary-light: #e8f5ec;
	--fs-accent: #ff8c00;
	--fs-accent-dark: #e07b00;
	--fs-text: #1e2b23;
	--fs-text-muted: #5a6b60;
	--fs-border: #e1e8e3;
	--fs-bg: #f7faf7;
	--fs-white: #ffffff;
	--fs-radius: 14px;
	--fs-shadow: 0 4px 16px rgba(31, 122, 61, 0.08);
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: "Rubik", sans-serif;
	color: var(--fs-text);
	background: var(--fs-bg);
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }

.fs-container {
	min-height: 60vh;
}

/* ---------------------------------------------------------
   TOPBAR — pásek propojení s Fajn Skupinou
--------------------------------------------------------- */
.fs-topbar {
	background: var(--fs-accent);
	color: #fff7ec;
}

.fs-topbar__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 8px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	font-size: 13px;
	flex-wrap: wrap;
}

.fs-topbar__text {
	display: flex;
	align-items: center;
	gap: 8px;
}

.fs-topbar__logo {
	height: 18px;
	width: auto;
	object-fit: contain;
	opacity: 0.95;
}

.fs-topbar__link {
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
	opacity: 0.9;
}

.fs-topbar__link:hover { opacity: 1; }

@media (max-width: 640px) {
	/* Stejné rozložení jako na desktopu — logo, text i odkaz zůstávají,
	   jen zmenšené a bez zalomení na jeden řádek. */
	.fs-topbar__inner {
		padding: 6px 16px;
		font-size: 10.5px;
		gap: 8px;
		justify-content: flex-start;
		flex-wrap: nowrap;
	}

	.fs-topbar__logo {
		height: 14px;
		flex-shrink: 0;
	}

	.fs-topbar__text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		gap: 6px;
	}

	.fs-topbar__link {
		flex-shrink: 0;
	}
}

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */
/* Rozložení a velikosti podle hlavičky Fajn Brigády (hvb-header) */
.fs-header {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--fs-border);
	position: sticky;
	top: 0;
	z-index: 100;
	padding: 10px 0;
}

.fs-header__inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* Levá zóna — logo + claim pohromadě */
.fs-header__brand {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

.fs-header__logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 20px;
	font-weight: 500;
	color: var(--fs-text);
	white-space: nowrap;
	flex-shrink: 0;
}

.fs-header__logo-icon {
	display: block;
	width: auto;
	height: 40px;
	object-fit: contain;
}

.fs-header__logo-accent {
	font-size: 20px;
	font-weight: 500;
	color: var(--fs-primary);
}

/* Navigace vycentrovaná v hlavičce, nezávisle na šířce levé/pravé zóny */
.fs-header__nav {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.fs-header__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 2px;
}

.fs-header__menu-link {
	position: relative;
	display: inline-block;
	padding: 8px 12px;
	color: var(--fs-text);
	font-size: 14px;
	font-weight: 500;
	border-radius: 6px;
	transition: color .15s ease, background .15s ease;
	white-space: nowrap;
}

.fs-header__menu-link:hover,
.fs-header__menu-link--active {
	color: var(--fs-primary);
	background: var(--fs-bg);
}

/* Claim vedle loga — text se v JS střídá (2 řádky: text + span), tady jen vzhled a prolnutí.
   Zalomení na dva řádky podle vzoru Fajn Brigády (.header-new__logo p / span). */
.fs-header__claim {
	display: block;
	font-size: 13px;
	line-height: 1.3;
	font-weight: 500;
	font-style: italic;
	color: var(--fs-text-muted);
	padding-left: 16px;
	border-left: 1px solid var(--fs-border);
	white-space: normal;
	opacity: 0;
	flex-shrink: 0;
}

.fs-header__claim span {
	display: block;
}

.fs-header__claim--in {
	animation: fsClaimFade .5s ease forwards;
}

@keyframes fsClaimFade {
	from { opacity: 0; transform: translateY(3px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.fs-header__claim--in { animation: none; opacity: 1; }
}

@media (max-width: 1080px) {
	/* Na užších obrazovkách ustupuje menu — claim zůstává, jen se zmenší (viz mobilní úprava níž) */
	.fs-header__claim { font-size: 12px; }
}

.fs-header__akce {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.fs-header__prihlasit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	margin-left: 6px;
	color: var(--fs-primary);
	background: transparent;
	border: 1px solid var(--fs-primary);
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.fs-header__prihlasit:hover {
	background: var(--fs-primary);
	color: #fff;
}

.fs-header__prihlasit i { width: 16px; height: 16px; }

/* Přidat — vyplněné tlačítko, ať vystoupí jako hlavní akce vedle Přihlásit */
.fs-header__prihlasit--vyplnene {
	color: #fff;
	background: var(--fs-accent);
	border-color: var(--fs-accent);
}

.fs-header__prihlasit--vyplnene:hover {
	background: var(--fs-accent-dark);
	border-color: var(--fs-accent-dark);
	color: #fff;
}

.fs-header__hamburger {
	display: none;
	width: 40px;
	height: 40px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
	background: transparent;
	border: 1px solid var(--fs-border);
	border-radius: 8px;
	cursor: pointer;
	flex-shrink: 0;
	color: var(--fs-text);
	font-size: 20px;
}

/* Mobilní rozbalovací menu — skryté na desktopu */
.fs-header__mob { display: none; }

@media (max-width: 1000px) {
	.fs-header__nav,
	.fs-header__akce { display: none; }

	/* Menší mezera + menší logo, ať se claim vejde vedle na užší obrazovce */
	.fs-header__brand {
		gap: 10px;
	}

	.fs-header__logo-icon {
		height: 30px;
	}

	/* Claim zůstává vedle loga i v mobilním layoutu — jen menší, podle vzoru Fajn Brigády */
	.fs-header__claim {
		font-size: 11px;
		line-height: 1.25;
		padding-left: 10px;
	}

	.fs-header__hamburger { display: flex; }

	.fs-header__mob {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--fs-white);
		border-bottom: 1px solid var(--fs-border);
		padding: 16px 24px 24px;
	}

	.fs-header__mob.is-open { display: block; }

	.fs-header__mob-menu {
		list-style: none;
		margin: 0 0 16px;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.fs-header__mob-link {
		display: block;
		width: 100%;
		padding: 10px 0;
		color: var(--fs-text);
		font-size: 15px;
		font-weight: 500;
		border-bottom: 1px solid var(--fs-border);
	}

	.fs-header__mob-link:hover { color: var(--fs-primary); }

	.fs-header__mob-akce {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.fs-header__mob-akce .fs-header__prihlasit {
		margin-left: 0;
		justify-content: center;
	}
}

/* ============================================================
   PATIČKA — přenesena z projektu fajnskupina_cz
   (paticka-varianty.php, varianta G: portály NAD modrou patičkou)
   Kontejnerový styl — patří k _footer.php, needituje se z podstránek.
============================================================ */

.fs-footer-g {
	--d-modra: #0074ff;
	--d-oranz: #ff8b00;
	--d-bila: #ffffff;
	--d-trans: 200ms ease-in-out;

	background: var(--d-modra);
	color: var(--d-bila);
	font-family: 'Rubik', system-ui, -apple-system, Segoe UI, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	margin-top: 0;
	padding: 32px 0 0;
	-webkit-font-smoothing: antialiased;
}

.fs-footer-g__holder {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 clamp(16px, 3vw, 32px);
	display: flex;
	flex-direction: column;
}

.fs-footer-g a {
	color: var(--d-bila);
	text-decoration: none;
	transition: color var(--d-trans);
}

/* ===== Řádek se sloupci odkazů ===== */
.fs-footer-g__row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	padding: 0 0 24px;
	font-size: 15px;
}

/* 5 sloupců (Brigádníci · Firmy · O portálu · Právní dokumenty · Sleduj nás) —
   roztáhnout je rovnoměrně přes celou šířku patičky. */
.fs-footer-g__row > div {
	flex: 1 0 calc(20% - 13px);
	max-width: calc(20% - 13px);
}

@media (max-width: 900px) {
	.fs-footer-g__row > div {
		flex: 1 0 calc(50% - 8px);
		max-width: calc(50% - 8px);
		margin-bottom: 16px;
	}
}

.fs-footer-g__title {
	color: var(--d-oranz);
	font-weight: 600;
	font-size: 20px;
	line-height: 24px;
	margin: 0 0 16px;
}

.fs-footer-g__title--center {
	text-align: center;
}

.fs-footer-g__row ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fs-footer-g__row ul li {
	line-height: 1.4;
	margin-bottom: 6px;
}

.fs-footer-g__row ul li a {
	font-size: 15px;
	line-height: 26px;
	color: var(--d-bila);
}

.fs-footer-g__row ul li a:hover {
	color: var(--d-oranz);
}

/* Sloupec „Sleduj nás" — jen ikony soc. sítí, zvětšené a centrované */
.fs-footer-g__social--g {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin-top: 6px;
	list-style: none;
	padding: 0;
}

.fs-footer-g__social--g a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	border: 2px solid transparent;
	color: var(--d-bila);
	transition: background var(--d-trans), color var(--d-trans), border-color var(--d-trans);
}

.fs-footer-g__social--g a svg {
	width: 26px;
	height: 26px;
}

.fs-footer-g__social--g a:hover,
.fs-footer-g__social--g a:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--d-oranz);
	color: var(--d-oranz);
}

@media (max-width: 768px) {
	.fs-footer-g__title--center {
		text-align: left;
	}
	.fs-footer-g__social--g {
		justify-content: flex-start;
		flex-wrap: nowrap;
	}
	.fs-footer-g__row > div:has(.fs-footer-g__social--g) {
		flex: 1 0 100%;
		max-width: 100%;
	}
}

/* ============================================================
   Blok „Portály naší skupiny" — nad modrou patičkou
============================================================ */
.fs-footer-g__portaly {
	background: #f1f5f9;
	padding: 28px 0 28px;
	font-family: 'Rubik', system-ui, -apple-system, Segoe UI, sans-serif;
	font-size: 15px;
	color: #1e293b;
}

.fs-footer-g__portaly-holder {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 clamp(16px, 3vw, 32px);
}

.fs-footer-g__portaly-title {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 600;
	color: #0074ff;
	text-align: center;
}

/* Flexbox se zarovnáním na střed — neúplný poslední řádek se sám
   vycentruje (lichý počet portálů). */
.fs-footer-g__portaly-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.fs-footer-g__portaly-list li {
	/* 7 v řadě na desktopu */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-width: 0;
	flex: 0 0 calc((100% - 6 * 8px) / 7);
	max-width: calc((100% - 6 * 8px) / 7);
}

@media (max-width: 1100px) {
	.fs-footer-g__portaly-list li {
		flex: 0 0 calc((100% - 3 * 8px) / 4);
		max-width: calc((100% - 3 * 8px) / 4);
	}
}

@media (max-width: 768px) {
	.fs-footer-g__portaly-list li {
		flex: 0 0 calc((100% - 2 * 8px) / 3);
		max-width: calc((100% - 2 * 8px) / 3);
	}
}

@media (max-width: 480px) {
	.fs-footer-g__portaly-list li {
		flex: 0 0 calc((100% - 1 * 8px) / 2);
		max-width: calc((100% - 1 * 8px) / 2);
	}
}

.fs-footer-g__portaly-list li > span {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	min-height: 0;
	font-size: 15px;
	color: #475569;
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
	margin-bottom: 8px;
	hyphens: auto;
	-webkit-hyphens: auto;
}

.fs-footer-g__portaly-list li > a {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	padding: 12px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
	text-decoration: none;
}

.fs-footer-g__portaly-list li > a:hover,
.fs-footer-g__portaly-list li > a:focus-visible {
	transform: translateY(-2px);
	border-color: #0074ff;
	box-shadow: 0 6px 16px -8px rgba(0, 116, 255, 0.35);
	outline: none;
}

.fs-footer-g__portal-link--active {
	border-color: #0074ff !important;
	box-shadow: 0 0 0 1px #0074ff inset;
}

.fs-footer-g__portal-logo {
	display: block;
	width: auto !important;
	height: 28px;
	max-width: 100%;
	object-fit: contain;
}

/* Flek logo je velmi široké (poměr ~4,7:1), proto nižší výška,
   aby plošně/opticky odpovídalo ostatním logům. */
.fs-footer-g__portal-logo--flek {
	height: 16px;
}

.fs-footer-g__portal-logo--ucet {
	height: 28px;
}

/* ============================================================
   Copyright sekce — na modrém pozadí, těsně navazuje na patičku
============================================================ */
.fs-footer-g__copy-section {
	background: #0074ff;
	padding: 0 0 16px;
}

.fs-footer-g__copy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 0;
	padding: 14px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.24);
	font-size: 15px;
	color: rgba(255, 255, 255, 0.88);
	text-align: center;
}

.fs-footer-g__copy-sep { color: rgba(255, 255, 255, 0.5); }

.fs-footer-g__copy-heart {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #ffffff;
	font-weight: 600;
}

.fs-footer-g__copy-heart svg { color: #ff8b00; }