/*
Theme Name: Bezva
Theme URI: http://dubbo.org/slidingdoor
Description: A unique template originally featuring sliding images in the header, modernized in 4.0 with a responsive, mobile-first layout, a hamburger navigation menu, and refreshed typography and colors while keeping the original green accent.
Author: Wayne Connor
Author URI: http://macintoshhowto.com/about
Version: 4.0.0
Tags: green, white, responsive, mobile-friendly, custom-menu, custom-header, theme-options, threaded-comments, sticky-post
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
This theme is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others.
*/

/* =============================================================
   1. Reset & base
   ============================================================= */

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

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
	margin: 0;
}

ul, ol {
	padding: 0;
	list-style: none;
}

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

a {
	color: inherit;
}

button {
	font: inherit;
}

/* =============================================================
   2. Design tokens
   ============================================================= */

:root {
	--accent: #6f9a1f;
	--accent-dark: #567b18;
	--text: #23271f;
	--text-muted: #666f5c;
	--bg: #ffffff;
	--bg-alt: #f3f6ee;
	--border: #dfe6d3;
	--card-shadow: 0 1px 3px rgba(35, 39, 31, 0.08), 0 1px 2px rgba(35, 39, 31, 0.05);
	--warm: #f39c12;
	--warm-dark: #d68124;
	--teal: #2192a0;
	--radius: 14px;
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-heading: "Baloo 2", var(--font-sans);
	--max-width: none;
	--canvas: #f1eee8;
	/* Side spacing shared by the header, content and footer so their
	   edges line up; wider on desktop. */
	--gutter: 1.25rem;

	/* Pastels from the logo's building blocks, each with a deep shade of
	   the same hue for text on top. Used by the front page tiles. */
	--pastel-green: #bfe08a;     --pastel-green-ink: #2d4a0a;
	--pastel-orange: #ffb877;    --pastel-orange-ink: #6b3200;
	--pastel-lavender: #b7b9f2;  --pastel-lavender-ink: #25287a;
	--pastel-teal: #93d3d8;      --pastel-teal-ink: #0b4a50;
	--pastel-pink: #f5b0d0;      --pastel-pink-ink: #6d1a44;
	--pastel-yellow: #ffdf6e;    --pastel-yellow-ink: #5a4300;
}

/* Grows with the window: about 70px at 1000px wide, 100px at 1400px,
   capped at 128px on large screens. */
@media (min-width: 900px) {
	:root {
		--gutter: clamp(2rem, 7vw, 8rem);
	}
}

/* =============================================================
   3. Base typography
   ============================================================= */

body {
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.65;
	color: var(--text);
	background: var(--bg-alt);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.25;
	color: var(--text);
}

/* Playful little block trio echoing the org's logo, before section headings */
.entry-title::before,
.page-title::before,
.widget-title::before {
	content: "";
	display: inline-block;
	width: 1.8em;
	height: 0.5em;
	margin-right: 0.4em;
	vertical-align: middle;
	background-image:
		linear-gradient(var(--accent), var(--accent)),
		linear-gradient(var(--warm), var(--warm)),
		linear-gradient(var(--teal), var(--teal));
	background-size: 0.5em 0.5em;
	background-repeat: no-repeat;
	background-position: 0 0, 0.65em 0, 1.3em 0;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

p {
	margin: 0 0 1.2em;
}

a {
	text-decoration: none;
}

.entry-content a,
.entry-summary a,
.comment-content a,
#site-description a {
	color: var(--accent-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.entry-content a:hover,
.entry-summary a:hover,
.comment-content a:hover {
	color: var(--accent);
}

blockquote {
	margin: 1.5em 0;
	padding: 0.2em 1.2em;
	border-left: 3px solid var(--accent);
	color: var(--text-muted);
	font-style: italic;
}

code, pre {
	font-family: Menlo, Consolas, "Andale Mono", monospace;
	font-size: 0.9em;
}

pre {
	overflow-x: auto;
	padding: 1em;
	background: var(--bg-alt);
	border-radius: var(--radius);
}

hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: 2em 0;
}

table {
	border-collapse: collapse;
	width: 100%;
	margin: 0 0 1.5em;
}

th, td {
	padding: 0.5em 0.75em;
	border: 1px solid var(--border);
	text-align: left;
}

/* Accessibility helpers */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
}

.skip-link.screen-reader-text a:focus {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: auto;
	height: auto;
	clip: auto;
	padding: 0.75em 1.25em;
	background: var(--accent);
	color: #fff;
}

/* =============================================================
   4. Layout shell
   ============================================================= */

#wrapper {
	max-width: var(--max-width);
	margin: 0 auto;
	background: var(--bg);
	min-height: 100vh;
}

#main {
	padding: 1.5rem var(--gutter) 3rem;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

#container {
	min-width: 0;
	order: 1;
}

.site-sidebar {
	order: 2;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	min-width: 0;
}

@media (min-width: 900px) {
	#main {
		flex-direction: row;
		align-items: flex-start;
		padding: 2.5rem var(--gutter) 4rem;
		gap: 3rem;
	}

	#container {
		flex: 1 1 auto;
	}

	.site-sidebar {
		flex: 0 0 280px;
	}
}

/* =============================================================
   4b. Top banner
   ============================================================= */

.site-banner {
	width: 100%;
	height: 120px;
}

/* A real header photo (--banner-photo, set inline when one is chosen in the
   Customizer) paints as the top layer; if it's missing or fails to load,
   that layer is simply transparent and the pattern layers show through. */
.site-banner-pattern {
	background-color: var(--accent);
	background-image:
		var(--banner-photo, none),
		linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%),
		radial-gradient(var(--warm) 40%, transparent 42%),
		radial-gradient(var(--teal) 40%, transparent 42%),
		radial-gradient(var(--bg) 40%, transparent 42%),
		radial-gradient(var(--warm) 40%, transparent 42%),
		radial-gradient(var(--teal) 40%, transparent 42%),
		radial-gradient(var(--bg) 40%, transparent 42%),
		radial-gradient(var(--warm) 40%, transparent 42%);
	background-repeat: no-repeat;
	background-size:
		cover,
		100% 100%,
		28px 28px, 22px 22px, 18px 18px, 24px 24px, 20px 20px, 26px 26px, 20px 20px;
	background-position:
		center,
		center,
		6% 30%, 14% 70%, 26% 20%, 46% 65%, 62% 25%, 78% 60%, 92% 35%;
}

.site-banner-stripe {
	width: 100%;
	height: 6px;
	background: repeating-linear-gradient(
		90deg,
		var(--accent) 0 40px,
		var(--warm) 40px 80px,
		var(--teal) 80px 120px,
		var(--accent-dark) 120px 160px
	);
}

.site-banner {
	height: 170px;
}

@media (min-width: 640px) {
	.site-banner {
		height: 220px;
	}
}

@media (min-width: 1000px) {
	.site-banner {
		height: 260px;
	}
}

/* =============================================================
   5. Header & branding
   ============================================================= */

/* White bar with a soft shadow instead of a hard bottom line. On desktop
   its bottom corners are rounded so it reads as a card resting on the
   grey page; on smaller screens the edge stays straight. */
#header {
	position: relative;
	z-index: 5;
	background: var(--bg);
	box-shadow: 0 8px 20px -14px rgba(35, 39, 31, 0.1);
}

@media (min-width: 900px) {
	#header {
		border-radius: 0 0 28px 28px;
	}
}

.header-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 1rem var(--gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* No row gap: the collapsed mobile menu wraps onto its own row, and a
	   gap there would push the logo and title above the bar's centre. The
	   open menu brings its own top margin. */
	gap: 0 1.5rem;
}

.site-branding {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

/* Mobile: logo on the left, title centred between it and the menu
   button. Desktop moves the logo to its own right-hand column. */
.site-logo-link {
	flex-shrink: 0;
}

.site-heading {
	flex: 1 1 auto;
	text-align: center;
}

.site-logo-link .custom-logo {
	height: 68px;
	width: auto;
}

@media (min-width: 900px) {
	.site-logo-link .custom-logo {
		height: 92px;
	}
}

/* Explicit weight: the title is an <h1> on the front page and a <div>
   elsewhere, and must look the same on both. */
#site-title {
	font-family: var(--font-heading);
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.1;
}

#site-title a {
	color: var(--text);
}

#site-description {
	margin-top: 0.15em;
	font-size: 0.85rem;
	color: var(--text-muted);
}

@media (min-width: 640px) {
	#site-title {
		font-size: 1.7rem;
	}
}

/* Desktop: site title and menu stacked on the left, logo on the right
   spanning the bar's full height. The two flexible rows above and below
   keep the stack centred on the bar. */
@media (min-width: 900px) {
	.header-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: 1fr auto auto 1fr;
		align-items: center;
		gap: 0 1.5rem;
	}

	.site-branding {
		display: contents;
	}

	.site-logo-link {
		grid-column: 2;
		grid-row: 1 / -1;
		margin-left: 0;
	}

	.site-heading {
		grid-column: 1;
		grid-row: 2;
		text-align: left;
	}

	/* A little more air between the stripe and the title. */
	.header-inner {
		padding-top: 1.6rem;
	}

	#site-title {
		font-size: 2rem;
	}

	.header-inner #access {
		grid-column: 1;
		grid-row: 3;
		margin-top: 0.35rem;
		/* Pull the first pill's padding back so its text lines up with the
		   title, and drop the pills' bottom padding so the stack is centred
		   on the visible text rather than on invisible padding. */
		margin-left: -0.9rem;
		margin-bottom: -0.5rem;
	}

	.header-inner #access ul.menu,
	.header-inner #access div.menu ul {
		justify-content: flex-start;
	}
}

/* Mobile nav toggle */

.nav-toggle {
	order: 2;
	margin-left: auto;
	width: 44px;
	height: 44px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--bg);
	position: relative;
	cursor: pointer;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
	position: absolute;
	left: 50%;
	width: 20px;
	height: 2px;
	background: var(--text);
	transform: translateX(-50%);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle-bars {
	top: 50%;
	margin-top: -1px;
}

.nav-toggle-bars::before {
	content: "";
	top: -6px;
}

.nav-toggle-bars::after {
	content: "";
	top: 6px;
}

.nav-toggle.is-active .nav-toggle-bars {
	background: transparent;
}

.nav-toggle.is-active .nav-toggle-bars::before {
	top: 0;
	transform: translateX(-50%) rotate(45deg);
}

.nav-toggle.is-active .nav-toggle-bars::after {
	top: 0;
	transform: translateX(-50%) rotate(-45deg);
}

/* Primary navigation */

#access {
	order: 3;
	flex-basis: 100%;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
}

#access.nav-open {
	/* No fixed cap: deep menus (e.g. 26+ gallery years, expanded
	   accordions) must never be clipped off with no way to reach them. */
	max-height: none;
	overflow: visible;
}

#access .menu-header,
#access div.menu {
	margin: 0.5rem 0 1rem;
}

#access ul.menu,
#access div.menu ul {
	display: flex;
	flex-direction: column;
}

#access ul.menu li,
#access div.menu li {
	border-top: 1px solid var(--border);
}

#access ul.menu a,
#access div.menu a {
	display: block;
	padding: 0.75rem 0.25rem;
	color: var(--text);
	font-weight: 600;
}

#access ul.menu a:hover,
#access div.menu a:hover,
#access .current-menu-item > a {
	color: var(--accent-dark);
}

#access .menu-item-has-children > a {
	position: relative;
}

/* Chevron marking items that open a submenu */
#access .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	margin-left: 0.45em;
	width: 0.4em;
	height: 0.4em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-25%);
	opacity: 0.55;
	transition: transform 0.2s ease;
}

#access .menu-item-has-children.submenu-open > a::after {
	transform: rotate(-135deg) translateY(-25%);
}

#access .sub-menu {
	display: none;
	padding-left: 1rem;
}

#access ul.menu .sub-menu a,
#access div.menu .sub-menu a {
	padding-top: 0.55rem;
	padding-bottom: 0.55rem;
	font-weight: 500;
}

#access .menu-item-has-children.submenu-open > .sub-menu {
	display: block;
}

@media (min-width: 900px) {
	.nav-toggle {
		display: none;
	}

	#access {
		order: 2;
		flex-basis: auto;
		max-height: none;
		overflow: visible;
		margin-left: auto;
	}

	#access .menu-header,
	#access div.menu {
		margin: 0;
	}

	#access ul.menu,
	#access div.menu ul {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 0.25rem;
	}

	#access ul.menu li,
	#access div.menu li {
		border-top: none;
		position: relative;
	}

	#access ul.menu a,
	#access div.menu a {
		padding: 0.5rem 0.9rem;
		border-radius: 12px;
	}

	#access ul.menu a:hover,
	#access div.menu a:hover {
		background: var(--bg-alt);
	}

	#access .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 220px;
		background: var(--bg);
		border: 1px solid var(--border);
		border-radius: 16px;
		box-shadow: var(--card-shadow);
		padding: 0.4rem;
		z-index: 20;
	}

	#access .sub-menu li {
		width: 100%;
	}

	#access ul.menu .sub-menu a,
	#access div.menu .sub-menu a {
		padding: 0.4rem 0.75rem;
		border-radius: 10px;
		font-size: 0.95rem;
		line-height: 1.3;
	}

	/* Top-level chevrons point down, nested ones point right. */
	#access .sub-menu .menu-item-has-children > a::after {
		transform: rotate(-45deg);
	}

	/* Safety net for tall single-level lists. A submenu that itself
	   contains a nested .sub-menu must stay overflow:visible, or its
	   child flyout gets clipped instead of appearing beside it. */
	#access .sub-menu:not(:has(.sub-menu)) {
		max-height: 80vh;
		overflow-y: auto;
	}

	/* Long top-level dropdowns (10+ items, e.g. Fotogalerie) become a
	   multi-column panel, so the whole list fits on screen without
	   scrolling. navigation.js sets --rows so items flow down each column
	   in menu order, and centres the panel under its item (the right-edge
	   pin below is only the no-JS fallback). */
	#access {
		position: relative;
	}

	#access ul.menu > li:has(> .sub-menu > li:nth-child(10)) {
		position: static;
	}

	#access ul.menu > li > .sub-menu:has(> li:nth-child(10)) {
		left: auto;
		right: 0;
		width: min(760px, calc(100vw - 2.5rem));
		max-height: none;
		overflow: visible;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-flow: column;
		grid-template-rows: repeat(var(--rows, 10), auto);
		column-gap: 0.4rem;
	}

	/* Third level and deeper flies out to the side instead of stacking
	   below, since this menu can nest several levels deep (years > days). */
	#access .sub-menu .sub-menu {
		top: -0.4rem;
		left: 100%;
	}

	/* navigation.js flips a flyout to the left when it would leave the viewport. */
	#access .sub-menu .flyout-left > .sub-menu {
		left: auto;
		right: 100%;
	}

	#access ul.menu > .flyout-left > .sub-menu {
		left: auto;
		right: 0;
	}

	#access .menu-item-has-children:hover > .sub-menu,
	#access .menu-item-has-children:focus-within > .sub-menu {
		display: block;
	}

	#access ul.menu > li:hover > .sub-menu:has(> li:nth-child(10)),
	#access ul.menu > li:focus-within > .sub-menu:has(> li:nth-child(10)) {
		display: grid;
	}
}

/* =============================================================
   5b. Homepage highlight cards
   ============================================================= */

/* Bento grid: flat pastel tiles in the logo's colours, 4 columns when the
   content column is wide enough, 2 otherwise. Placement comes from
   slidingdoor_tile_layout() so the Customizer order is kept and rows
   always fill. */
#content {
	container-type: inline-size;
}

.highlight-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 150px;
	grid-auto-flow: dense;
	gap: 0.75rem;
	margin-bottom: 2rem;
}

@container (min-width: 620px) {
	.highlight-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: 190px;
	}
}

.highlight-card {
	--tile-bg: #bfe08a;
	--tile-fg: #2d4a0a;
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 22px;
	background: var(--tile-bg);
	color: var(--tile-fg);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Mobile (2 columns): big tiles span both columns and two rows. */
.highlight-card.is-large {
	grid-column: span 2;
	grid-row: span 2;
}

.highlight-card.is-wide-mobile {
	grid-column: span 2;
}

/* Desktop (4 columns): each tile gets explicit coordinates from
   slidingdoor_tile_layout(), which keeps the Customizer order and leaves
   no holes. */
@container (min-width: 620px) {
	.highlight-card[style*="--gc"] {
		grid-column: var(--gc) / span var(--gw);
		grid-row: var(--gr) / span var(--gh);
	}
}

.highlight-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(35, 39, 31, 0.12);
}

/* Palette taken from the logo's building blocks, softened to pastels;
   the text colour is a deep shade of the same hue. */
.tile-green    { --tile-bg: var(--pastel-green);    --tile-fg: var(--pastel-green-ink); }
.tile-orange   { --tile-bg: var(--pastel-orange);   --tile-fg: var(--pastel-orange-ink); }
.tile-lavender { --tile-bg: var(--pastel-lavender); --tile-fg: var(--pastel-lavender-ink); }
.tile-teal     { --tile-bg: var(--pastel-teal);     --tile-fg: var(--pastel-teal-ink); }
.tile-pink     { --tile-bg: var(--pastel-pink);     --tile-fg: var(--pastel-pink-ink); }
.tile-yellow   { --tile-bg: var(--pastel-yellow);   --tile-fg: var(--pastel-yellow-ink); }

/* Photo tiles */
.highlight-card.has-image {
	color: #fff;
}

.highlight-card-media {
	position: absolute;
	inset: 0;
	background-image: var(--card-image, none);
	background-size: cover;
	background-position: center;
	transition: transform 0.4s ease;
}

.highlight-card:hover .highlight-card-media {
	transform: scale(1.05);
}

.highlight-card-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 12, 8, 0.6) 0%, rgba(10, 12, 8, 0.1) 45%, transparent 65%);
}

/* Small shape in the top-right corner */
.highlight-card-shape {
	position: absolute;
	top: 1.1rem;
	right: 1.1rem;
	width: 20px;
	height: 20px;
	background: currentColor;
	opacity: 0.85;
}

.shape-square  .highlight-card-shape { border-radius: 4px; }
.shape-circle  .highlight-card-shape { border-radius: 50%; }
.shape-half    .highlight-card-shape { height: 11px; margin-top: 5px; border-radius: 20px 20px 0 0; }
.shape-diamond .highlight-card-shape { width: 15px; height: 15px; margin: 2px 2px 0 0; border-radius: 3px; transform: rotate(45deg); }

.highlight-card-content {
	position: absolute;
	left: 0;
	right: 3.25rem;
	bottom: 0;
	padding: 1.1rem 1.25rem;
}

.highlight-card h2 {
	margin: 0;
	color: inherit;
	font-size: 1.45rem;
	line-height: 1.02;
	letter-spacing: -0.01em;
}

.highlight-card.is-large h2 {
	font-size: 2.3rem;
}

/* Long descriptions are cut to two lines so they never push the title
   into the corner shape. */
.highlight-card p {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.highlight-card h2::before {
	display: none;
}

.highlight-card p {
	margin: 0.35rem 0 0;
	color: inherit;
	opacity: 0.85;
	font-size: 0.9rem;
	line-height: 1.4;
}

.highlight-card-arrow {
	position: absolute;
	right: 1rem;
	bottom: 1.1rem;
	display: flex;
	transition: transform 0.25s ease;
}

.highlight-card:hover .highlight-card-arrow {
	transform: translateX(4px);
}

@container (min-width: 620px) {
	.highlight-card h2 {
		font-size: 1.7rem;
	}

	.highlight-card.is-large h2,
	.highlight-card.is-big-desktop h2 {
		font-size: 2.8rem;
	}
}

/* =============================================================
   5c. Front page news ("Aktuálně")
   ============================================================= */

.front-news {
	margin-bottom: 2rem;
}

.front-news-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin-bottom: 0.75rem;
}

.front-news-title {
	font-size: 1.5rem;
}

.front-news-title::before {
	content: "";
	display: inline-block;
	width: 1.8em;
	height: 0.5em;
	margin-right: 0.4em;
	vertical-align: middle;
	background-image:
		linear-gradient(var(--accent), var(--accent)),
		linear-gradient(var(--warm), var(--warm)),
		linear-gradient(var(--teal), var(--teal));
	background-size: 0.5em 0.5em;
	background-repeat: no-repeat;
	background-position: 0 0, 0.65em 0, 1.3em 0;
}

.front-news-archive {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--accent-dark);
}

.front-news-archive:hover {
	color: var(--accent);
}

.front-news-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.news-card {
	display: grid;
	overflow: hidden;
	background: var(--bg);
	border-radius: 22px;
}

.news-card-media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.news-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-card-body {
	padding: 1.25rem 1.5rem 1.4rem;
}

.news-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.35rem;
	font-size: 0.85rem;
	color: var(--text-muted);
}

.news-card-until {
	padding: 0.1rem 0.6rem;
	border-radius: 20px;
	background: var(--pastel-orange);
	color: var(--pastel-orange-ink);
	font-weight: 600;
}

.news-card-title {
	margin-bottom: 0.4rem;
	font-size: 1.45rem;
}

.news-card-title a:hover {
	color: var(--accent-dark);
}

.news-card-text {
	margin-bottom: 0.75rem;
}

.news-card-more {
	font-weight: 600;
	color: var(--accent-dark);
}

.news-card-more:hover {
	color: var(--accent);
}

@container (min-width: 620px) {
	.news-card.has-image {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}

	.news-card.has-image .news-card-media {
		aspect-ratio: auto;
		min-height: 220px;
	}

	.news-card-body {
		padding: 1.5rem 1.75rem;
	}
}

/* Page canvas (all pages): warm grey background with borderless white
   rounded cards (.hentry and widgets below), so each page reads as one
   bento board. */
#wrapper {
	background: var(--canvas);
}

/* =============================================================
   6. Posts / entries
   ============================================================= */

.hentry {
	background: var(--bg);
	border-radius: 22px;
	padding: 1.5rem;
	margin-bottom: 1.75rem;
}

.hentry:last-child {
	margin-bottom: 0;
}

.entry-title {
	font-size: 1.4rem;
	margin-bottom: 0.4rem;
}

.entry-title a {
	color: var(--text);
}

.entry-title a:hover {
	color: var(--accent-dark);
}

.entry-meta,
.entry-utility {
	font-size: 0.85rem;
	color: var(--text-muted);
}

.entry-meta {
	margin-bottom: 1rem;
}

.entry-utility {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
}

.entry-utility a {
	color: var(--accent-dark);
}

.meta-sep {
	color: var(--border);
}

.page-link {
	margin-top: 1.5em;
	font-weight: 600;
}

.gallery-thumb {
	margin-bottom: 0.75em;
}

/* Native WordPress [gallery] shortcode output */

.gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
	margin: 1.5rem 0;
}

@media (min-width: 640px) {
	.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
	.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
	.gallery-columns-5,
	.gallery-columns-6 { grid-template-columns: repeat(5, 1fr); }
}

.gallery-item {
	margin: 0;
}

.gallery-icon {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--bg-alt);
}

.gallery-icon a {
	display: block;
	width: 100%;
	height: 100%;
}

.gallery-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius);
	transition: transform 0.2s ease;
}

.gallery-icon:hover img {
	transform: scale(1.04);
}

.gallery-caption {
	margin-top: 0.4rem;
	font-size: 0.8rem;
	color: var(--text-muted);
	text-align: center;
}

.page-title {
	font-size: 1.6rem;
	margin-bottom: 1.5rem;
}

.archive-meta {
	color: var(--text-muted);
	margin-bottom: 1.5rem;
}

#entry-author-info {
	display: flex;
	gap: 1rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
}

#author-avatar img {
	border-radius: 50%;
}

#author-description h2 {
	font-size: 1rem;
	margin-bottom: 0.3em;
}

.navigation {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 1.5rem 0;
	font-weight: 600;
}

.navigation a {
	color: var(--accent-dark);
}

#post-0.error404,
#post-0.not-found {
	text-align: center;
	padding: 3rem 1.5rem;
}

/* =============================================================
   7. Sidebar & widgets
   ============================================================= */

.widget-area ul.xoxo {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.9rem;
}

.widget-container {
	flex: 1 1 100%;
	background: var(--bg);
	border-radius: 22px;
	padding: 1.25rem;
}

/* Image widgets (e.g. sponsor/partner logos) become small white
   tiles, two per row, instead of each getting a full-width card. */
.widget-container.widget_media_image {
	flex: 0 0 calc(50% - 0.45rem);
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 16px;
	padding: 0.6rem 0.5rem;
}

.widget-container.widget_media_image img {
	/* !important overrides the inline max-width/height:auto style
	   WordPress core prints on the Image widget's <img> tag. */
	width: 100% !important;
	max-width: 110px !important;
	height: 52px !important;
	object-fit: contain;
}

.widget-title {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	margin-bottom: 0.75rem;
}

.widget-container ul {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.widget-container li a {
	color: var(--text);
}

.widget-container li a:hover {
	color: var(--accent-dark);
}

/* Phones and tablets (single column): smaller logo tiles, three or four
   per row, and headings of the logo groups without their own card. */
@media (max-width: 899px) {
	.widget-area ul.xoxo {
		gap: 0.6rem;
	}

	.widget-container.widget_media_image {
		flex: 0 0 calc((100% - 1.2rem) / 3);
		padding: 0.45rem 0.35rem;
		border-radius: 12px;
	}

	.widget-container.widget_media_image img {
		max-width: 100% !important;
		height: 40px !important;
	}

	/* A text widget with only a title (e.g. "Podpořili nás", "Odkazy")
	   labels the logos below it. */
	.widget-container.widget_text:has(.textwidget:empty) {
		padding: 0.75rem 0.25rem 0;
		background: transparent;
	}

	.widget-container.widget_text:has(.textwidget:empty) .widget-title {
		margin-bottom: 0;
	}
}

@media (min-width: 600px) and (max-width: 899px) {
	.widget-container.widget_media_image {
		flex-basis: calc((100% - 1.8rem) / 4);
	}
}

.search-form {
	display: flex;
	gap: 0.5rem;
}

/* WordPress wraps the field in a <label>; let it take the free width. */
.search-form label {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
}

.search-field {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--bg);
	color: var(--text);
	font-family: inherit;
	font-size: 0.95rem;
	-webkit-appearance: none;
	appearance: none;
}

.search-field:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(111, 154, 31, 0.2);
}

.search-submit {
	flex-shrink: 0;
	background: var(--accent);
	color: #fff;
	border: 0;
	border-radius: 12px;
	padding: 0.55rem 1.1rem;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.15s ease;
}

.search-submit:hover,
.search-submit:focus-visible {
	background: var(--accent-dark);
}

/* =============================================================
   8. Comments
   ============================================================= */

#comments {
	margin-top: 2rem;
}

.nocomments,
.nopassword {
	color: var(--text-muted);
	font-style: italic;
}

#comments-title,
.comment-reply-title {
	font-size: 1.2rem;
	margin-bottom: 1rem;
}

.commentlist {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.commentlist .comment-body,
.commentlist > li {
	background: var(--bg-alt);
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
}

.comment-author img {
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 0.5em;
}

.comment-meta,
.commentmetadata {
	font-size: 0.85rem;
	color: var(--text-muted);
}

.comment-reply-link {
	font-weight: 600;
	color: var(--accent-dark);
}

.commentlist .children {
	list-style: none;
	padding-left: 1.5rem;
	margin-top: 1rem;
}

.comment-respond {
	margin-top: 2rem;
	padding: 1.5rem;
	background: var(--bg-alt);
	border-radius: var(--radius);
}

.comment-form p {
	margin-bottom: 1rem;
}

.comment-form label {
	display: block;
	margin-bottom: 0.3em;
	font-weight: 600;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--border);
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.95rem;
}

.comment-form textarea {
	resize: vertical;
}

.form-submit input[type="submit"] {
	background: var(--accent);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 0.65rem 1.5rem;
	font-weight: 600;
	cursor: pointer;
}

.form-submit input[type="submit"]:hover {
	background: var(--accent-dark);
}

/* =============================================================
   9. Footer
   ============================================================= */

#footer {
	background: var(--text);
	color: #dfe6d3;
	margin-top: 2rem;
}

#colophon {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 2.5rem var(--gutter) 1.25rem;
	font-size: 0.9rem;
	line-height: 1.6;
}

#colophon a {
	color: #fff;
	text-decoration: none;
}

#colophon a:hover {
	text-decoration: underline;
}

.footer-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
}

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

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

.footer-col p {
	margin: 0 0 0.75rem;
}

.footer-title {
	margin: 0 0 0.6rem;
	font-family: var(--font-heading);
	font-size: 1.05rem;
	color: #fff;
}

.footer-meta {
	opacity: 0.8;
}

.footer-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-links li {
	margin-bottom: 0.3rem;
}

.footer-bottom {
	margin-top: 2rem;
	padding-top: 1.1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.8rem;
	opacity: 0.75;
	text-align: center;
}

#footer-widget-area {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	padding: 2rem var(--gutter);
	max-width: var(--max-width);
	margin: 0 auto;
}

@media (min-width: 700px) {
	#footer-widget-area {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	#footer-widget-area {
		grid-template-columns: repeat(4, 1fr);
	}
}