/**
 * WordPress-specific additions to the original template CSS (layout.css).
 * Mobile-first: base rules for small screens, min-width queries for larger ones.
 */

/* Header search: WordPress uses name="s", the original CSS targets name="q" */
header .jvsearch form input[name="s"] {
	background-color: #eec124;
	border: none;
	padding: 3px 10px;
	width: 100%;
	box-sizing: border-box;
	height: 50px;
	outline: none;
}

header .jvsearch form input[name="s"]::placeholder {
	color: #000;
}

/* Block editor alignment / text classes used in migrated content */
.content .has-text-align-center { text-align: center; }
.content .has-text-align-right { text-align: right; }
.content .has-text-align-left { text-align: left; }
.content .has-text-align-justify { text-align: justify; }

.content figure {
	margin: 0 0 1rem;
}

.content .wp-block-image img,
.content img {
	max-width: 100%;
	height: auto;
}

.content .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.content .alignleft,
.content .alignright {
	display: block;
	margin: 0 auto 1rem;
}

.content .wp-block-image figcaption {
	font-size: 12px;
	text-align: center;
}

/* Migrated YouTube iframes keep their size but never overflow the screen */
.content iframe {
	max-width: 100%;
}

/* Tables from the original content */
.content .wp-block-table table {
	width: auto;
}

/* Images side by side (Row block, formerly inline images in one paragraph) */
.content .wp-block-group.is-layout-flex {
	margin-bottom: 1rem;
}

.content .wp-block-group.is-layout-flex > .wp-block-image {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
}

/* Centered image block: block-library uses display:table, which breaks max-width of large images */
.content .wp-block-image.aligncenter {
	display: block;
}

/* Buttons block, styled like the original a.blog-button */
.content .wp-block-buttons {
	margin-bottom: 1rem;
}

body main .wp-block-button .wp-block-button__link {
	display: inline-block;
	background: #b70000;
	border: 1px solid #b70000;
	border-radius: 0;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	line-height: 30px;
	padding: 5px 40px;
	text-decoration: none;
}

body main .wp-block-button .wp-block-button__link:hover,
body main .wp-block-button .wp-block-button__link:focus {
	background-color: #fff;
	color: #b70000;
}

/* Columns block (formerly Bootstrap .row / .col-*) */
.content .wp-block-columns {
	gap: 30px;
	margin-bottom: 1rem;
}

/* Service tiles: the "show more" link is positioned absolutely, its paragraph takes no space */
.content .list-item > p:last-child {
	margin-bottom: 0;
}

.content .list-item .wp-block-image {
	margin-bottom: 1rem;
}

/* YouTube embeds (formerly fixed-size iframes) */
.content .wp-block-embed {
	max-width: 560px;
	margin: 0 0 1rem;
}

.content .wp-block-column > .wp-block-embed {
	max-width: none;
}

/*
 * Gallery block (standard core output):
 * framed tiles like the original Sunlight gallery (square tiles = gallery setting "Aspect ratio" 1:1).
 */
.content .wp-block-gallery.has-nested-images {
	/* Gap between images; core uses the same variable to compute the column widths */
	--wp--style--unstable-gallery-gap: 32px;
	gap: 32px;
	margin-bottom: 1rem;
}

.content .wp-block-gallery.has-nested-images figure.wp-block-image {
	flex-grow: 0; /* Images in an incomplete last row keep the column width. */
	border: 1px solid #4c4c4c;
	background: #fff;
	padding: 6px;
	box-sizing: border-box;
}

/* Form errors */
.content .alert-danger {
	color: #b70000;
	font-weight: bold;
}

/* Selected picture choice keeps its check icon visible after a failed submit */
#request .choice.selected .check {
	display: inline;
}

/* Paging (articles, search) */
.content .paging .page-numbers {
	padding: 0 4px;
}

.content .paging .page-numbers.current {
	font-weight: bold;
}

@media (min-width: 576px) {
	.content .alignleft {
		float: left;
		margin: 0 1rem 1rem 0;
	}

	.content .alignright {
		float: right;
		margin: 0 0 1rem 1rem;
	}
}

/* Footer link lists (paragraph blocks in widgets): white links, other footer paragraph links stay yellow */
body footer p.footer-links a {
	color: #fff;
}

/* Front page boxes (group blocks in widgets): the paragraph block around the text adds no extra space */
body main .hp .box-item > p:last-child {
	margin-bottom: 0;
}

/*
 * Front page (content of the "Úvod" page in blocks, original template classes on the blocks).
 */

/* Gallery with the "Slider" style becomes a bxSlider */
.wp-block-gallery.is-style-slider {
	display: block;
	margin: 0;
}

.wp-block-gallery.is-style-slider figure.wp-block-image {
	display: block;
	margin: 0;
}

.wp-block-gallery.is-style-slider img {
	display: block;
	width: 100%;
	height: auto;
}

/* Until bxSlider wraps the gallery in .bx-viewport, show only the first image (no flash of all images on load) */
:not(.bx-viewport) > .wp-block-gallery.is-style-slider > figure ~ figure {
	display: none;
}

/* Front page subheading (e.g. "Oficiální prodejce značky OSA"): light text on the dark background */
body main .hp h2 {
	color: #fff;
}

/* Inquiry bar */
body main .request .wp-block-columns,
body main .request p {
	margin-bottom: 0;
}

/* Columns of the front page: Bootstrap-like gutter, no extra space when they stack on small screens */
body main .request .wp-block-columns,
body main .hp .hp-main,
body main .blog .article .wp-block-columns,
body main .hp .action .wp-block-columns {
	gap: 0 30px;
}

body main .request .wp-block-buttons {
	justify-content: center;
}

body main .request .wp-block-button .wp-block-button__link {
	border: 0;
	line-height: 15px;
	padding: 10px 30px;
}

@media (min-width: 768px) {
	body main .request .wp-block-buttons {
		justify-content: flex-end;
	}
}

/* Product boxes: image and text side by side without a gap, like the original .row.no-gutters */
body main .hp .hp-box {
	gap: 0;
	margin-top: 0;
}

body main .hp .hp-box .wp-block-image {
	margin: 0;
}

/* The image file is smaller than the column, the original stretched it to the column width as well */
body main .hp .hp-box .wp-block-image img {
	width: 100%;
	height: auto;
}

body main .hp .hp-box .desc > p {
	margin-bottom: 0;
}

/* Latest articles (Query Loop) */
body main .blog .article .wp-block-columns {
	margin-bottom: 0;
}

/* Article image fitted into 200×200 like the original perex image (at most the column width) */
body main .blog .article .wp-block-post-featured-image img {
	width: auto;
	height: auto;
	max-width: min(100%, 200px);
	max-height: 200px;
}

body main .blog .article .title a {
	color: inherit;
}

body main .blog .article .wp-block-post-featured-image {
	margin: 0;
}

body main .blog .article .wp-block-post-excerpt,
body main .blog .article .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* "Akce" box (Query Loop): clock icon before the infobox text */
body main .hp .action .wp-block-columns {
	margin-bottom: 0;
}

body main .hp .action .infobox::before {
	content: "";
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: 10px;
	background: url("../images/clock.jpg") no-repeat;
	vertical-align: middle;
}

/* Breadcrumbs (Rank Math) inside the original .breadcrumbs wrapper */
body main .breadcrumbs .rank-math-breadcrumb,
body main .breadcrumbs .rank-math-breadcrumb p {
	display: inline;
	margin: 0;
}

body main .breadcrumbs span.last {
	margin: 0;
	color: inherit;
	font-size: inherit;
}

/*
 * Article list on category pages (Query Loop with the original list-title / list-perex / list-info classes).
 */
body main .content .wp-block-post-template > li::before {
	content: none;
}

body main .content .wp-block-separator.hr {
	border: 0;
	margin: 0;
	opacity: 1;
}

/* Fixed limits (no %): the floated figure takes its width from the image */
body main .list-perex-image img {
	width: auto;
	height: auto;
	max-width: 200px;
	max-height: 200px;
}

body main .content .list-perex .wp-block-post-excerpt,
body main .content .list-perex .wp-block-post-excerpt__excerpt {
	margin: 0;
}

body main .content .list-info {
	gap: 0 0.35em;
}

body main .content .list-info p {
	margin: 0;
}

/* Search block (page "Hledání"): button in the site colours */
body main .wp-block-search__button {
	background: #b70000;
	border: 1px solid #b70000;
	border-radius: 0;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
}

body main .wp-block-search__button:hover,
body main .wp-block-search__button:focus {
	background: #fff;
	color: #b70000;
}

body main .wp-block-search__input {
	border-radius: 0;
}

/* Post title links behave like the original inline links (core sets inline-block, which changes multi-line heights) */
body main .wp-block-post-title a {
	display: inline;
}