/* Article text – Figma 957:831 Novinky detail (2026-11-11; articles and text pages alike, decision 2026-11-11):
   body 16/500/24 #595C65, paragraphs 20 apart, heading H2 22/500/33 navy (24 above, 12 below), list items 6 apart,
   quote as a box (#F2F6FB, 1px #D4DEED, radius 8, padding 24, cite 14/500 navy), caption 12/500/18. Links as .entry
   (blue, hover blue-hover), table head as the filter box (#F1F4F8, lines #CDD9E9 / #DFE5ED, radius 8). Other core
   blocks not in the design (2026-11-10): images aligned left / right, gallery, media and text, columns, video, audio,
   embeds, buttons, file, code, pull quote, details, separator, footnotes, table stripes.
   Loaded on the article detail, on pages with text blocks and in the block editor of both:
   postoptimal_article_editor_styles() in inc/news.php rewrites the selectors for the editor. */
.article__content {
	color: var(--color-text);
	font-weight: 500;
	line-height: 1.5;
}

.article__content.entry > * {
	max-width: none;
}

/* Page title above the text (pages; on the article detail the title is in the header). */
.article__content > .page-title {
	margin: 0 0 32px;
}

.article__content > :where(p, ul, ol, blockquote, figure, hr, pre, details, div) {
	margin: 0 0 20px;
}

.article__content > :where(h2, h3, h4, h5, h6) {
	margin: 24px 0 12px;
	color: var(--color-navy);
	font-weight: 500;
	line-height: 1.5;
}

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

.article__content > h2 {
	font-size: 22px;
}

/* H3–H6 are not in the design: smaller steps of H2 (20 / 16). */
.article__content > h3 {
	font-size: var(--font-size-footer-heading);
}

.article__content > :where(h4, h5, h6) {
	font-size: var(--font-size-body);
}

.article__content strong {
	color: var(--color-navy);
	font-weight: 600;
}

.article__content a:not(:where(.wp-element-button)) {
	color: var(--color-blue);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--color-card-border);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--transition), text-decoration-color var(--transition);
}

.article__content a:not(:where(.wp-element-button)):hover,
.article__content a:not(:where(.wp-element-button)):focus-visible {
	color: var(--color-blue-hover);
	text-decoration-color: currentColor;
}

/* Link to a service at the end of an article (block class article-more): the "Více informací" link of the theme
   (.more-link: 13/700 upper case, arrow-up-right, arrow +3px on hover), arrow as a data URI – the same in the editor. */
.article__content > .article-more {
	margin-top: 24px;
}

.article__content > .article-more a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--font-size-more);
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.65px;
	text-decoration-color: transparent;
	text-transform: uppercase;
}

.article__content > .article-more a::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M11.33 11.33V4.67H4.67M11.33 4.67l-6.66 6.66' stroke='%232364AD' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--transition);
}

.article__content > .article-more a:hover,
.article__content > .article-more a:focus-visible {
	color: var(--color-blue);
	text-decoration-color: currentColor;
}

.article__content > .article-more a:hover::after,
.article__content > .article-more a:focus-visible::after {
	transform: translateX(var(--hover-arrow-shift));
}

.article__content :where(ul, ol) {
	padding-left: 24px;
}

.article__content li + li {
	margin-top: 6px;
}

.article__content li > :where(ul, ol) {
	margin: 6px 0 0;
}

.article__content > hr {
	height: 1px;
	margin-block: 32px;
	border: 0;
	background: var(--color-divider-light);
}

/* Separator styles of the block (wide = the same line, dots = three blue dots). */
.article__content > hr.is-style-dots {
	height: auto;
	background: none;
	color: var(--color-blue);
}

.article__content .wp-block-quote {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	border: 1px solid var(--color-quote-border);
	border-radius: var(--radius);
	background: var(--color-quote-bg);
}

.article__content .wp-block-quote p {
	margin: 0;
}

.article__content .wp-block-quote cite {
	color: var(--color-navy);
	font-size: var(--font-size-small);
	font-style: normal;
	line-height: 1.5;
}

.article__content figcaption {
	margin: 8px 0 0;
	color: var(--color-text);
	font-size: 12px;
	line-height: 1.5;
	text-align: left;
}

/* Other core blocks (2026-11-10, not used by the articles yet – styles derived from the theme): images aligned
   left / right flow with the text from 768px, gallery and media with radius 8, video / embeds over the text width,
   buttons as the theme buttons, code as the filter box, pull quote as the quote, details as the rows of Seznam bodů,
   columns with the card gap. Layout itself (gallery grid, columns, aspect ratio of embeds) comes from WordPress. */
.article__content .wp-block-image :where(img, a) {
	border-radius: var(--radius);
}

/* Image styles of the block (decision 2026-11-10): Výchozí = radius 8 (as every photo of the site), Zaoblený = radius
   24 instead of the WordPress circle (a landscape photo would become an oval). */
.article__content .wp-block-image.is-style-rounded :where(img, a) {
	border-radius: 24px;
}

.article__content .wp-block-image.aligncenter {
	text-align: center;
}

.article__content :where(.wp-block-gallery, .wp-block-columns, .wp-block-media-text, .wp-block-embed, .wp-block-video, .wp-block-audio, .wp-block-buttons, .wp-block-pullquote, .wp-block-file) {
	margin-block: 24px;
}

.article__content .wp-block-gallery {
	--wp--style--gallery-gap-default: 16px;

	gap: 16px;
}

.article__content .wp-block-gallery .wp-element-caption {
	border-radius: 0 0 var(--radius) var(--radius);
	font-size: var(--font-size-more);
}

.article__content :where(.wp-block-embed__wrapper iframe, .wp-block-video video) {
	display: block;
	width: 100%;
	border-radius: var(--radius);
}

.article__content .wp-block-audio audio {
	width: 100%;
}

.article__content .wp-block-media-text {
	gap: 32px;
}

.article__content .wp-block-media-text__media img {
	border-radius: var(--radius);
}

.article__content .wp-block-media-text__content {
	padding: 0;
}

.article__content .wp-block-columns {
	gap: 32px;
}

/* Text inside columns, media and text and groups: the same headings and spacing as the article text. */
.article__content :where(.wp-block-column, .wp-block-media-text__content, .wp-block-group) > :where(h2, h3, h4, h5, h6) {
	margin: 0 0 13px;
	color: var(--color-navy);
	font-weight: 700;
	line-height: 1.2;
}

.article__content :where(.wp-block-column, .wp-block-media-text__content, .wp-block-group) > h2 {
	font-size: var(--font-size-card-title);
}

.article__content :where(.wp-block-column, .wp-block-media-text__content, .wp-block-group) > h3 {
	font-size: var(--font-size-footer-heading);
}

.article__content :where(.wp-block-column, .wp-block-media-text__content, .wp-block-group) > :where(h4, h5, h6) {
	font-size: var(--font-size-body);
}

.article__content :where(.wp-block-column, .wp-block-media-text__content, .wp-block-group) > :where(p, ul, ol, figure) {
	margin: 0 0 16px;
}

.article__content :where(.wp-block-column, .wp-block-media-text__content, .wp-block-group) > :last-child {
	margin-bottom: 0;
}

/* Buttons: primary (orange) and the outline style for a light background – blue line, blue fill on hover. */
.article__content .wp-block-buttons {
	gap: 16px 19px;
}

.article__content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	padding: 14px 24px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	color: var(--color-white);
	background: var(--color-orange);
	font-size: var(--font-size-body);
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	box-shadow: var(--shadow-button);
	transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.article__content .wp-block-button__link:hover,
.article__content .wp-block-button__link:focus-visible {
	color: var(--color-white);
	background: var(--color-orange-hover);
	box-shadow: var(--shadow-button-hover);
}

.article__content .wp-block-button__link:focus-visible {
	outline: 2px solid var(--color-navy);
	outline-offset: 2px;
}

.article__content .is-style-outline .wp-block-button__link {
	border-color: var(--color-blue);
	color: var(--color-blue);
	background: transparent;
	box-shadow: none;
}

.article__content .is-style-outline .wp-block-button__link:hover,
.article__content .is-style-outline .wp-block-button__link:focus-visible {
	border-color: var(--color-blue);
	color: var(--color-white);
	background: var(--color-blue);
}

/* File: name as a link, download button as the outline button (small). */
.article__content .wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

/* PDF preview of the file block (Zobrazit vložený náhled PDF): radius 8 as the images. */
.article__content .wp-block-file__embed {
	border-radius: var(--radius);
}

.article__content .wp-block-file .wp-block-file__button {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 15px;
	border: 1px solid var(--color-card-border);
	border-radius: 6px;
	color: var(--color-navy);
	background: var(--color-white);
	font-size: var(--font-size-small);
	font-weight: 600;
	text-decoration: none;
	transition: box-shadow var(--transition);
}

.article__content .wp-block-file .wp-block-file__button:hover,
.article__content .wp-block-file .wp-block-file__button:focus-visible {
	color: var(--color-navy);
	box-shadow: var(--shadow-button-hover);
}

/* Code: inline on the filter colour, a block as the filter box with its own scroll. */
.article__content :where(code, kbd) {
	padding: 2px 6px;
	border-radius: 4px;
	color: var(--color-navy);
	background: var(--color-surface-light);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875em;
}

.article__content :where(pre) {
	padding: 16px 20px;
	overflow-x: auto;
	border-bottom: 2px solid var(--color-card-border);
	border-radius: var(--radius);
	color: var(--color-navy);
	background: var(--color-surface-light);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--font-size-small);
	line-height: 1.6;
	white-space: pre;
}

.article__content pre code {
	padding: 0;
	background: none;
	font-size: inherit;
}

/* Pull quote: the quote box centred, larger text. */
.article__content .wp-block-pullquote {
	padding: 32px 24px;
	border: 0;
	border-top: 4px solid var(--color-blue);
	border-radius: var(--radius);
	background: var(--color-surface-light);
	text-align: center;
}

.article__content .wp-block-pullquote blockquote {
	margin: 0;
}

.article__content .wp-block-pullquote p {
	margin: 0 0 12px;
	color: var(--color-navy);
	font-size: var(--font-size-footer-heading);
	font-weight: 600;
	line-height: 1.4;
}

.article__content .wp-block-pullquote cite {
	color: var(--color-text);
	font-size: var(--font-size-small);
	font-style: normal;
	font-weight: 600;
	text-transform: none;
}

/* Details (accordion): rows with lines as Seznam bodů, summary 16/600 navy, chevron of the menu. */
.article__content .wp-block-details {
	border-top: 1px solid var(--color-divider-light);
	border-bottom: 1px solid var(--color-divider-light);
}

.article__content .wp-block-details + .wp-block-details {
	margin-top: -17px;
	border-top: 0;
}

.article__content .wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 16px;
	color: var(--color-navy);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.article__content .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.article__content .wp-block-details summary::after {
	content: "";
	flex: none;
	width: 10px;
	height: 6px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2322335C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--transition);
}

.article__content .wp-block-details[open] summary::after {
	transform: rotate(180deg);
}

.article__content .wp-block-details > :not(summary) {
	margin: 0 0 16px;
}

.article__content mark {
	padding: 0 2px;
	border-radius: 2px;
	color: inherit;
	background: var(--color-chip);
}

/* Footnotes block: small text under the article. */
.article__content .wp-block-footnotes {
	padding-top: 16px;
	border-top: 1px solid var(--color-divider-light);
	font-size: var(--font-size-small);
}

/* Lightbox (block option Rozbalit po kliknutí): navy overlay instead of white, white close and arrow buttons
   (orange on hover), photo with radius 8. WordPress sets the scrim colour and the icon fill inline from the colour
   presets, hence !important. The overlay is outside the article (end of body), so these rules are not scoped. */
.wp-lightbox-overlay .scrim {
	background-color: var(--color-navy) !important;
}

.wp-lightbox-overlay.active .scrim {
	opacity: 0.95;
}

.wp-lightbox-overlay :is(.wp-lightbox-close-button, .wp-lightbox-navigation-button) {
	color: var(--color-white);
	fill: var(--color-white) !important;
	transition: fill var(--transition);
}

.wp-lightbox-overlay :is(.wp-lightbox-close-button, .wp-lightbox-navigation-button):hover,
.wp-lightbox-overlay :is(.wp-lightbox-close-button, .wp-lightbox-navigation-button):focus-visible {
	fill: var(--color-orange) !important;
}

.wp-lightbox-overlay :is(.wp-lightbox-close-button, .wp-lightbox-navigation-button):focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: 2px;
}

.wp-lightbox-overlay .lightbox-image-container img {
	border-radius: var(--radius);
}

/* Zoom button over the image (shown on hover / focus): the theme colours. */
.article__content .lightbox-trigger {
	border-radius: 6px;
	background: color-mix(in srgb, var(--color-navy) 60%, transparent);
}

.article__content .lightbox-trigger svg {
	fill: var(--color-white);
}

/* Table: wider than a phone → scrolls inside its figure (WordPress: overflow-x auto), not the page. */
.article__content .wp-block-table {
	margin-block: 24px;
	border-radius: var(--radius);
}

.article__content .wp-block-table table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: var(--font-size-body);
	line-height: 1.5;
}

.article__content .wp-block-table :where(th, td) {
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--color-divider-light);
	text-align: left;
	vertical-align: top;
	overflow-wrap: break-word;
}

.article__content .wp-block-table thead {
	border: 0;
}

.article__content .wp-block-table th {
	border-bottom: 2px solid var(--color-card-border);
	color: var(--color-navy);
	background: var(--color-surface-light);
	font-weight: 600;
}

/* Table style Pruhy (stripes): every second row on the filter colour, footer and caption as the text. */
.article__content .wp-block-table.is-style-stripes {
	border-bottom: 0;
}

.article__content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: none;
}

.article__content .wp-block-table.is-style-stripes tbody tr:nth-child(even) {
	background: var(--color-surface-light);
}

.article__content .wp-block-table tfoot {
	border-top: 2px solid var(--color-card-border);
	color: var(--color-navy);
	font-weight: 600;
}

/* Aligned images flow with the text from 768px (left / right, max. half of the column); below on their own line. */
@media (min-width: 768px) {
	.article__content .wp-block-image.alignleft {
		float: left;
		max-width: 50%;
		margin: 4px 32px 16px 0;
	}

	.article__content .wp-block-image.alignright {
		float: right;
		max-width: 50%;
		margin: 4px 0 16px 32px;
	}

	.article__content > :where(h2, h3, h4, h5, h6, hr, .wp-block-table, .wp-block-columns, .wp-block-gallery) {
		clear: both;
	}
}

@media (max-width: 767px) {
	.article__content .wp-block-image:is(.alignleft, .alignright) {
		float: none;
		max-width: none;
		margin: 0 0 16px;
	}

	.article__content .wp-block-buttons .wp-block-button,
	.article__content .wp-block-button__link {
		width: 100%;
	}

	.article__content .wp-block-table table {
		font-size: var(--font-size-small);
	}

	.article__content .wp-block-table :where(th, td) {
		padding: 10px 12px;
	}
}