/* ==========================================================================
   BEHYP – hlavní styly
   Zachovává vzhled původního webu (zelený pruh, béžová tabulka s menu, boční
   sloupec), ale je pružný, čitelný na telefonu a splňuje kontrasty WCAG AA.
   ========================================================================== */

:root {
	--bg: #f6f1de;
	--card: #faf8ee;
	--card-line: #f2eace;
	--frame: #f3eacd;
	--frame-hover: #ecdbac;
	--blue: #175a87;
	--green-text: #547510;
	--brown: #6d5b2f;
	--gold-text: #6b5712;
	--red-dark: #740000;
	--focus: #0a4f86;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: #000;
	background: var(--bg);
}

h1, h2, h3, p, ul, ol, address, blockquote, figure { margin: 0; padding: 0; }
img { border: 0; max-width: 100%; height: auto; }
address { font-style: normal; }

/* ---- přístupnost ------------------------------------------------------- */
.skip {
	position: absolute;
	left: .5rem;
	top: -4rem;
	z-index: 100;
	padding: .6rem 1rem;
	background: #fff;
	color: #000;
	font-weight: bold;
	border: 2px solid var(--focus);
	border-radius: 4px;
}
.skip:focus { top: .5rem; }

.vh {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

a:focus-visible, button:focus-visible, summary:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	border-radius: 2px;
}
#nav a:focus-visible, #nav button:focus-visible, #foot a:focus-visible { outline-color: #fff; }
#menu a:focus-visible, #menu button:focus-visible { outline-color: var(--focus); }
main:focus { outline: none; }

a { text-decoration: underline; }
a:link, a:visited { color: var(--blue); }
a:hover { color: #d00000; }

/* ---- rozvržení --------------------------------------------------------- */
#back {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--bg);
}

.wrap {
	width: min(850px, calc(100% - 2rem));
	margin-inline: auto;
}

.testbar { margin: 0; padding: .5rem 1rem; text-align: center; font-weight: bold; color: #000; background: #ffd84a; border-bottom: 2px solid #8a6d00; }

/* ---- horní lišta s adresou ---------------------------------------------- */
#top {
	background: #ece9e0 url("/img/top.gif") repeat-x left bottom;
}
#top address {
	padding: 6px 0 12px;
	text-align: center;
}
#top .tel { color: var(--red-dark); }
#top .tel a:link, #top .tel a:visited { color: var(--red-dark); text-decoration: none; }
#top .tel a:hover { text-decoration: underline; }

/* ---- hlavička ---------------------------------------------------------- */
#head {
	background: #e8dfd6 url("/img/head.gif") repeat-x;
}
.head-in {
	display: flex;
	align-items: center;
	min-height: 199px;
	background: url("/img/headin-d.jpg") no-repeat right top;
}
/* Logo je stejně vysoké jako textový blok vpravo a se zbytkem je vystředěné
   (obojí je ve flex řádku uprostřed hlavičky). Výšku logu určuje --logo-h;
   obrázek by měl být oříznutý těsně na obsah, bez prázdných okrajů. */
.logo { flex: 0 0 auto; display: block; }
.logo img { display: block; height: var(--logo-h, 6.6rem); width: auto; }
.site-title {
	margin: 0 0 0 51px;
	max-width: 530px;
	font-size: 1.4rem;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--blue);
}
.site-title strong {
	display: block;
	font-size: 1rem;
	font-weight: normal;
	color: var(--gold-text);
}
.site-title span {
	display: block;
	margin-top: .3rem;
	font-size: .875rem;
	line-height: 1.8;
	text-transform: none;
	color: var(--gold-text);
}

/* ---- zelený pruh: slogan + menu ----------------------------------------- */
#nav {
	background: #54720f url("/img/nav-d.png");
	border-bottom: 17px solid #d8cb96;
}
.nav-in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 256px;
	grid-template-areas: "slogan menu";
	background: url("/img/nav-d.jpg") repeat-y right top;
}
.slogan {
	grid-area: slogan;
	padding: 40px 2rem 1.5rem 0;
	color: #fff;
	max-width: 36rem;
}
.slogan-title {
	font-size: 1.4rem;
	line-height: 1.3;
	padding-bottom: 10px;
}
.slogan-title span {
	display: block;
	font-size: 1.3em;
	color: #e4f9a0;
}
.slogan p { line-height: 1.7; padding: 0; }
.slogan p + p { margin-top: 1rem; }
.slogan strong { color: #fff0b0; }
.slogan a:link, .slogan a:visited { color: #fff; }
.slogan a:hover { color: #fff0b0; }

#menu { grid-area: menu; position: relative; z-index: 5; }
#menu ul { list-style: none; margin: 20px 25px 0; padding: 0 0 .3rem; }
#menu li { border-bottom: 1px solid #f1e8d1; }
#menu a, #menu .current {
	display: block;
	padding: 6px 5px 6px 30px;
	border-bottom: 1px solid #a0874a;
	font-weight: bold;
	font-size: .95rem;
	line-height: 1.35;
}
#menu a { text-decoration: none; }
#menu a:link, #menu a:visited {
	color: #3f3412;
	background: url("/img/link.gif") no-repeat 0 .6em;
}
#menu a:hover, #menu a:focus-visible {
	color: #263506;
	border-bottom-color: #715f33;
	background: url("/img/link.gif") no-repeat -259px .6em;
}
#menu .current {
	color: #000;
	background: url("/img/link.gif") no-repeat -259px .6em;
}
.menu-toggle { display: none; }

/* ---- hlavní část --------------------------------------------------------- */
#main {
	flex: 1 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 256px;
	column-gap: 44px;
	align-items: start;
	padding-bottom: 2rem;
}
#obsah { min-width: 0; padding: 30px 0 15px; }

#news {
	position: relative;
	z-index: 3;
	margin-top: -17px;
	padding: 45px 0 20px;
	background: url("/img/news.jpg") no-repeat right top;
	font-size: .9375rem;
	line-height: 1.5;
}

/* nadpisy */
#obsah h1, #news h2 {
	font-weight: normal;
	line-height: 1.25;
	padding: 0 0 15px 28px;
}
#obsah h1 {
	font-size: 1.5rem;
	color: var(--blue);
	background: url("/img/contenth2.gif") no-repeat 0 .3em;
}
#obsah h2 {
	font-size: 1.25rem;
	font-weight: normal;
	line-height: 1.3;
	padding: 0 0 10px 28px;
	color: var(--brown);
	background: url("/img/h3.gif") no-repeat 0 .3em;
}
#obsah section > h2 { /* „Naše odborné publikace“ na úvodní stránce */
	font-size: 1.5rem;
	color: var(--blue);
	padding-bottom: 15px;
	background: url("/img/contenth2.gif") no-repeat 0 .3em;
}
#news h2 {
	font-size: 1.25rem;
	color: var(--green-text);
	background: url("/img/newsh2.gif") no-repeat 0 .3em;
}

/* odstavce a seznamy */
#obsah p { padding: 0 0 15px; }
#obsah ul, #obsah ol { padding: 0 0 15px 22px; }
#obsah ul.gallery { padding: 0 0 15px; }
#obsah ul li {
	list-style: none;
	padding: 0 0 0 15px;
	margin: 0 0 6px;
	background: url("/img/li.gif") no-repeat 0 .55em;
}
#obsah ol li { margin: 0 0 6px 22px; }
#obsah li strong, #obsah address strong { color: var(--green-text); }

#news section { margin-bottom: 1.5rem; }
#news ul { list-style: none; padding: 0 0 0 7px; }
#news li {
	padding: 0 0 8px 15px;
	color: var(--brown);
	background: url("/img/li1.gif") no-repeat 0 .6em;
}

/* odkaz-tlačítko „Chcete vědět více?“ */
#obsah p.contact { padding: 25px 0; }
#obsah p.contact a, #obsah p.more a {
	display: block;
	max-width: 320px;
	margin: 0 auto;
	padding: .7rem 1rem;
	min-height: 44px;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	color: #fff;
	background: linear-gradient(#2a7b96, #226780);
	border: 1px solid #1a566b;
	border-radius: 5px;
}
#obsah p.contact a:hover, #obsah p.contact a:focus-visible,
#obsah p.more a:hover, #obsah p.more a:focus-visible {
	color: #000;
	background: #bfe3ee;
	border-color: #6aa9bd;
}

/* karty a obrázky */
.info {
	padding: 20px 25px;
	margin: 0 0 15px;
	background: var(--card);
	border: 1px solid var(--card-line);
	border-radius: 5px;
}
#obsah .info h3, #obsah .book h2 {
	font-size: 1.5rem;
	font-weight: normal;
	line-height: 1.25;
	color: var(--red-dark);
	margin: 0 0 .8rem;
}
.book::after { content: ""; display: block; clear: both; }
#obsah .book h2 { clear: none; padding: 0; background: none; } /* název knihy na stránce Odborné publikace */
.book img {
	float: right;
	margin: 0 0 12px 15px;
	border: 8px solid var(--frame);
	width: 240px;
	height: auto;
}
#obsah .book p.author-line { padding-bottom: 0; }
/* obálka knihy s tlačítkem pod obrázkem */
.book .cover { float: right; margin: 0 0 12px 15px; }   /* šířku určuje obrázek, tlačítko je stejně široké */
.book .cover img { float: none; display: block; margin: 0 0 .7rem; }
#obsah .book .cover p.more { margin: 0; padding: 0; }
#obsah p.more a { max-width: none; margin: 0; }

#obsah p.imgl { float: left; margin: 0 15px 5px 0; padding: 0; text-align: center; }
#obsah p.imgl img { display: block; border: 8px solid #fff; }
#obsah p.imgl a:hover img { border-color: var(--frame-hover); }
#obsah h2 { clear: both; }

address.kontakt { padding: 0 0 15px; }
.kontakt-box::after { content: ""; display: block; clear: both; }

/* postranní panel: reference, osvědčení */
.info.side-ref { padding: 20px; }
.info.side-ref h2 { padding-bottom: 10px; }
.side-ref blockquote p { padding: 0 0 .8rem; }
.side-ref .sign { color: var(--brown); font-size: .875rem; padding-bottom: .4rem; }
.side-ref ul { padding: .5rem 0 0 0; }

.diploma { text-align: center; margin-bottom: 1.5rem; }
.diploma h2 { text-align: left; }
.diploma img { display: block; margin: 0 auto 6px; border: 8px solid var(--frame); }
.diploma a:hover img { border-color: var(--frame-hover); }
.diploma figcaption { padding-top: 2px; }

/* reference (stránka Reference) */
.ref blockquote p { padding: 0 0 .9rem; }
.ref .sign { padding: 0; font-style: italic; color: #2b2410; }
.ref .period { padding: .2rem 0 0; font-size: .9rem; color: var(--brown); }
.ref .ref-img { float: right; margin: 0 0 10px 15px; border: 8px solid var(--frame); max-width: 40%; height: auto; }
.ref::after { content: ""; display: block; clear: both; }

/* fotogalerie */
.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
	gap: 0 16px;
	padding: 0 0 15px;
	margin: 0;
	list-style: none;
}
#obsah .gallery li { margin: 0 0 15px; padding: 0; background: none; list-style: none; }
.gallery a { display: block; text-decoration: none; }
.gallery img { display: block; border: 8px solid var(--frame); }
.gallery a:hover img, .gallery a:focus-visible img { border-color: var(--frame-hover); }
.gallery .cap { display: block; max-width: 236px; padding: 5px 0 0; font-size: .875rem; color: var(--green-text); }
.gallery a:hover .cap { text-decoration: underline; }

/* patička */
#fav { padding: 0 0 .5rem; text-align: right; }
#fav p { padding: 0; }
.print-btn {
	font: inherit;
	color: var(--blue);
	background: url("/img/print.gif") no-repeat left center;
	border: 0;
	padding: .35rem 0 .35rem 22px;
	margin-right: .5rem;
	cursor: pointer;
	text-decoration: underline;
}
.print-btn:hover { color: #d00000; }

#foot {
	background: #185f8b url("/img/foot.gif") repeat-x;
	min-height: 100px;
	display: flex;
	align-items: center;   /* text uprostřed výšky patičky */
	color: #cfe8f7;
}
#foot p { margin: 0; padding: 0; text-align: center; }
#foot a:link, #foot a:visited { color: #fff; }
#foot a:hover { color: #ffe9a8; }

/* ---- lightbox (dialog) ------------------------------------------------- */
.lb {
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: #fff;
	max-width: min(94vw, 960px);
	max-height: 94vh;
	overflow: hidden;
}
.lb::backdrop { background: rgba(20, 38, 44, .82); }
.lb-box { display: flex; flex-direction: column; align-items: center; padding: 12px 12px 10px; }
.lb-img { display: block; max-width: 100%; max-height: calc(94vh - 8.5rem); width: auto; height: auto; object-fit: contain; background: #f6f1ea; }
.lb-cap { padding: .6rem 0 .2rem; font-size: .95rem; font-weight: bold; color: var(--green-text); text-align: center; }
.lb-bar { display: flex; align-items: center; gap: .6rem; padding-top: .3rem; }
.lb-bar button {
	min-width: 44px; min-height: 44px;
	font: inherit; font-size: 1.4rem; line-height: 1;
	color: #1b1b1b; background: #f3eacd;
	border: 1px solid #a0874a; border-radius: 6px; cursor: pointer;
}
.lb-bar button:hover { background: #ecdbac; }
.lb-bar button[hidden] { display: none; }
.lb-count { min-width: 4.5rem; text-align: center; font-size: .9rem; color: #333; }

/* ---- tablet a mobil ---------------------------------------------------- */
@media (max-width: 759px) {
	body { font-size: 1.0625rem; }

	#top address { font-size: .9375rem; padding: 8px 0 12px; line-height: 1.5; }

	.head-in {
		min-height: 0;
		align-items: center;
		gap: 1rem;
		padding: 14px 0;
		background-image: none;
	}
	.logo img { height: auto; width: 120px; }
	.site-title { margin: 0; font-size: 1.15rem; }
	.site-title strong { font-size: .9rem; }
	.site-title span { display: none; }

	.nav-in { display: block; background: none; }
	#menu { padding: 12px 0 4px; }
	#menu ul { margin: 0; padding: 0 .75rem .5rem; background: #cdb98a; border-radius: 0 0 8px 8px; }
	.js .menu-toggle {
		display: flex;
		align-items: center;
		gap: .7rem;
		width: 100%;
		min-height: 48px;
		padding: .6rem 1rem;
		font: inherit;
		font-weight: bold;
		font-size: 1.05rem;
		color: #3f3412;
		background: #cdb98a;
		border: 0;
		border-radius: 8px;
		cursor: pointer;
	}
	.js .menu-toggle[aria-expanded="true"] { border-radius: 8px 8px 0 0; }
	.js .menu-toggle::before {
		content: "";
		width: 1.3rem; height: 2px;
		background: currentColor;
		box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
	}
	.js .menu-toggle[aria-expanded="false"] + ul { display: none; }
	#menu li:last-child { border-bottom: 0; }
	#menu a, #menu .current { padding-top: 10px; padding-bottom: 10px; font-size: 1rem; }
	#menu a:link, #menu a:visited, #menu .current { background-position: 0 .85em; }
	#menu a:hover, #menu .current { background-position: -259px .85em; }

	.slogan { padding: 18px 0 1.5rem; max-width: none; }
	.slogan-title { font-size: 1.25rem; }

	#main { display: block; padding-bottom: 1.5rem; }
	#obsah { padding-top: 22px; }
	#news {
		margin-top: 0;
		padding: 1.2rem 0 .5rem;
		background: none;
		border-top: 1px solid var(--card-line);
		font-size: 1rem;
	}

	.info { padding: 16px 16px; }
	.book img, .ref .ref-img {
		float: none;
		display: block;
		margin: 0 auto 1rem;
		max-width: 100%;
	}
	.book .cover { float: none; width: fit-content; max-width: 100%; margin: 0 auto 1rem; }
	.book .cover img { margin: 0 0 .7rem; }
	#obsah p.imgl { float: none; margin: 0 0 12px; }
	#obsah p.imgl img { display: inline-block; }
	.diploma { margin-bottom: 1.5rem; }
	#fav { text-align: center; }
}

@media (max-width: 420px) {
	#obsah h1 { font-size: 1.35rem; }
	#obsah section > h2 { font-size: 1.35rem; }
	#obsah .info h3, #obsah .book h2 { font-size: 1.3rem; }
	.gallery { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
	.gallery img { width: 100%; height: auto; }
	.gallery .cap { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; }
}

/* odkazy vedoucí mimo web: šipka (text "otevře se v novém okně" je pro čtečky ve skrytém .vh) */
@media screen {
	a.ext::after {
		content: "\2197";
		content: "\2197" / "";
		display: inline-block;   /* šipka se nepodtrhává */
		margin-left: .2em;
		font-size: .85em;
		line-height: 1;
		text-decoration: none;
	}
}