/*
Theme Name: JTDG Blog
Theme URI: https://jaroslavtesarik.cz
Author: Jaroslav Tesařík
Author URI: https://jaroslavtesarik.cz
Description: Minimalistická černobílá bloková šablona pro osobní blog jaroslavtesarik.cz.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jtdg
Tags: blog, two-columns, left-sidebar, full-site-editing, style-variations, translation-ready
*/

/*
 * Většina stylů je v theme.json. Sem patří rozvržení a pár detailů,
 * které theme.json neumí.
 */

:root {
	/* Rytmus mezer: S / M / L (na mobilu se úměrně zmenší) */
	--jtdg-space-s: 1.5rem;
	--jtdg-space-m: clamp(2.5rem, 6vw, 4rem);
	--jtdg-space-l: clamp(3rem, 9vw, 6rem);
}

/*
 * Tmavý režim podle nastavení systému návštěvníka. Přepisuje barvy z palety
 * (stejné hodnoty jako varianta „Tmavá“ ve styles/dark.json).
 * html:root má vyšší prioritu než :root z globálních stylů WordPressu.
 */
html:root {
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	html:root {
		color-scheme: dark;
		--wp--preset--color--base: #111111;
		--wp--preset--color--surface: #1c1c1c;
		--wp--preset--color--border: #333333;
		--wp--preset--color--muted: #999999;
		--wp--preset--color--contrast: #f2f2f2;
	}

	/* fotka by na tmavém pozadí zářila – trochu ji ztlumit */
	.site-header__image img {
		filter: brightness(0.82);
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

p, li {
	text-wrap: pretty;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

::selection {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 3px;
}

/* -------------------------------------------------------------
 * Rozvržení: menu vlevo, obsah vpravo
 * Obsah začíná vždy 9rem od levého okraje (6rem menu + 3rem mezera),
 * na tuhle osu se zarovnávají i další prvky.
 * ---------------------------------------------------------- */

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

body.admin-bar .wp-site-blocks {
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px));
}

.site-header,
.site-shell,
.site-footer {
	width: min(100%, 53rem);
	margin-inline: auto;
}

.site-shell {
	display: grid;
	grid-template-columns: 6rem minmax(0, 44rem);
	column-gap: 3rem;
	align-items: start;
	padding-top: var(--jtdg-space-m);
}

.site-shell > * {
	margin-block: 0;
}

.site-nav {
	position: sticky;
	top: var(--jtdg-space-s);
	text-align: right;
}

body.admin-bar .site-nav {
	top: calc(var(--jtdg-space-s) + var(--wp-admin--admin-bar--height, 32px));
}

.site-nav .wp-block-navigation__container {
	gap: 0.15rem;
}

.site-nav .wp-block-navigation-item.is-current > a {
	font-weight: 600;
}

@media (max-width: 640px) {
	.site-shell {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--jtdg-space-m);
	}

	.site-nav {
		position: static;
		text-align: left;
	}

	.site-nav .wp-block-navigation,
	.site-nav .wp-block-navigation__container {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: flex-start;
		gap: 0.25rem 1.25rem;
	}

	/* Na úzkém displeji bez teček – název dostane celou šířku */
	.post-row .wp-block-post-title::after {
		display: none;
	}

	.post-row {
		gap: 1.25rem;
	}
}

/* -------------------------------------------------------------
 * Seznam článků: po rocích, název vlevo, datum vpravo
 * ---------------------------------------------------------- */

.post-list .wp-block-post-template {
	margin: 0;
}

.post-list .wp-block-post-template > li {
	margin-block: 0;
}

/* Řádek s rokem (vkládá ho functions.php) */
.post-year {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-top: var(--jtdg-space-m) !important;
	margin-bottom: 0.4rem !important;
}

.post-year:first-child {
	margin-top: 0 !important;
}

.post-year__title {
	margin: 0;
	font-size: inherit;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.6;
}

.post-year__count {
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}

.post-row {
	align-items: baseline;
	gap: 0.75rem;
	padding-block: 0.4rem;
}

/* Název se natáhne a za ním vede tečkovaná linka až k datu */
.post-row .wp-block-post-title {
	display: flex;
	flex: 1 1 auto;
	align-items: baseline;
	gap: 0.75rem;
	min-width: 0;
	font-size: inherit;
	font-weight: 400;
	letter-spacing: inherit;
	line-height: 1.6;
}

.post-row .wp-block-post-title::after {
	content: "";
	flex: 1 0 1.5rem;
	height: 2px;
	background-image: radial-gradient(circle, color-mix(in srgb, currentColor 30%, transparent) 0.7px, transparent 1px);
	background-size: 6px 2px;
	background-repeat: repeat-x;
	transform: translateY(-0.3em);
}

.post-row .wp-block-post-date {
	flex-shrink: 0;
	min-width: 3.5em;
	line-height: 1.6;
	text-align: right;
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}

/* Stránka vyhledávání: mezera mezi polem a výsledky */
.site-main > .search-page-form {
	margin-bottom: var(--jtdg-space-m);
}

.site-main > .wp-block-heading:first-child,
.site-main > .wp-block-query-title:first-child {
	margin-top: 0;
}

.post-list .wp-block-query-pagination {
	margin-top: var(--jtdg-space-m);
	font-size: var(--wp--preset--font-size--small);
}

/* -------------------------------------------------------------
 * Článek
 * ---------------------------------------------------------- */

.back-link {
	margin: 0 0 var(--jtdg-space-s);
	font-size: var(--wp--preset--font-size--small);
}

.back-link a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.back-link a:hover {
	color: var(--wp--preset--color--contrast);
}

.site-main > .wp-block-post-title {
	margin-top: 0;
	margin-bottom: 0.25rem;
}

.site-main > .wp-block-post-date {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--muted);
}

.wp-block-post-content {
	margin-top: var(--jtdg-space-s);
}

:where(p, li, td) code {
	font-family: var(--wp--preset--font-family--mono);
	background: var(--wp--preset--color--surface);
	padding: 0.1em 0.3em;
	font-size: 0.85em;
}

.wp-block-quote cite {
	display: block;
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	color: var(--wp--preset--color--muted);
}

.wp-block-separator {
	border-color: var(--wp--preset--color--border);
}

.post-nav {
	margin-top: var(--jtdg-space-m);
	font-size: var(--wp--preset--font-size--small);
}

.post-nav a {
	text-decoration: none;
}

.post-nav a:hover {
	text-decoration: underline;
}

.wp-block-comments {
	margin-top: var(--jtdg-space-m) !important;
}

/* -------------------------------------------------------------
 * Obrázky, galerie a tabulky v článcích
 *
 * Normální šířka = sloupec textu. „Široká“ se natáhne doleva pod menu
 * na šířku hlavičky (53rem), „Plná“ jde přes celé okno.
 * ---------------------------------------------------------- */

.wp-site-blocks {
	overflow-x: clip; /* plná šířka nesmí vyrobit vodorovný posuvník */
}

/* Na stránkách s obsahem menu nejezdí, aby nepřekrývalo široké obrázky */
:is(.single, .page) .site-nav {
	position: static;
}

.wp-block-post-content :is(figure, .wp-block-gallery, .wp-block-table) {
	margin-block: 2rem;
}

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

.wp-block-post-content.is-layout-constrained > .alignwide {
	/* WordPress u omezeného rozvržení vynucuje okraje přes !important */
	width: calc(100% + 9rem);
	max-width: none;
	margin-left: -9rem !important;
	margin-right: 0 !important;
}

.wp-block-post-content.is-layout-constrained > .alignfull {
	--jtdg-gutter: max(var(--wp--style--root--padding-left, 1.5rem), (100vw - 53rem) / 2);
	width: 100vw;
	max-width: none;
	margin-left: calc(-1 * var(--jtdg-gutter) - 9rem) !important;
	margin-right: 0 !important;
}

.wp-block-post-content .alignfull img {
	width: 100%;
}

/* Obrázky vlevo/vpravo obtékané textem */
.wp-block-post-content .alignleft {
	float: left;
	max-width: 50%;
	margin: 0.4rem 1.5rem 1rem 0;
}

.wp-block-post-content .alignright {
	float: right;
	max-width: 50%;
	margin: 0.4rem 0 1rem 1.5rem;
}

/* Popisky */
.wp-block-post-content :is(figcaption, .wp-element-caption) {
	margin-top: 0.6rem;
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	text-align: left;
	color: var(--wp--preset--color--muted);
}

/* U širokých a plných obrázků popisek zarovnaný se sloupcem textu */
.wp-block-post-content > .alignwide > :is(figcaption, .wp-element-caption) {
	padding-left: 9rem;
}

.wp-block-post-content .alignfull > :is(figcaption, .wp-element-caption) {
	padding-left: calc(var(--jtdg-gutter) + 9rem);
	padding-right: var(--jtdg-gutter);
}

/* Galerie: úzké mezery, popisky pod fotkami místo přes ně */
.wp-block-post-content .wp-block-gallery.has-nested-images {
	gap: 0.5rem;
}

.wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	padding: 0;
	margin-top: 0.4rem;
	background: none;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-shadow: none;
	text-align: left;
	overflow: visible;
	max-height: none;
}

.wp-block-post-content .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
	display: none; /* vypnout tmavý přechod pod popiskem */
}

.wp-block-post-content .wp-block-gallery > .wp-element-caption {
	flex-basis: 100%;
	margin-top: 0.6rem;
	text-align: left;
}

/* Oříznutá galerie: všechny fotky ve stejném poměru 3 : 2 */
.wp-block-post-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) {
	align-self: flex-start;
}

.wp-block-post-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Tabulky: jen vodorovné linky, čísla zarovnaná pod sebou */
.wp-block-post-content .wp-block-table {
	overflow-x: auto;
}

.wp-block-post-content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
}

.wp-block-post-content .wp-block-table :is(th, td) {
	padding: 0.55rem 0.75rem 0.55rem 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
	vertical-align: top;
}

.wp-block-post-content .wp-block-table thead th {
	border-bottom-color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.wp-block-post-content .wp-block-table :is(thead, tfoot) {
	border: 0; /* WordPress tu dává tlustou čáru 3 px */
}

.wp-block-post-content .wp-block-table tfoot td {
	border-top: 1px solid var(--wp--preset--color--contrast);
	border-bottom: 0;
	font-weight: 600;
}

.wp-block-post-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--wp--preset--color--surface);
}

.wp-block-post-content .wp-block-table.is-style-stripes {
	border-bottom: 0;
}

@media (max-width: 640px) {
	.wp-block-post-content.is-layout-constrained > .alignwide {
		width: 100%;
		margin-left: 0 !important;
	}

	.wp-block-post-content.is-layout-constrained > .alignfull {
		--jtdg-gutter: var(--wp--style--root--padding-left, 1.5rem);
		margin-left: calc(-1 * var(--jtdg-gutter)) !important;
	}

	.wp-block-post-content > .alignwide > :is(figcaption, .wp-element-caption) {
		padding-left: 0;
	}

	.wp-block-post-content .alignfull > :is(figcaption, .wp-element-caption) {
		padding-inline: var(--jtdg-gutter);
	}

	.wp-block-post-content :is(.alignleft, .alignright) {
		float: none;
		max-width: 100%;
		margin: 2rem 0;
	}
}

/* -------------------------------------------------------------
 * Komentáře: vlákna odpovědí odsazená, bez dalších linek
 * ---------------------------------------------------------- */

.wp-block-comments-title {
	margin-bottom: var(--jtdg-space-s);
}

.wp-block-comment-template,
.wp-block-comment-template .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-comment-template .children {
	padding-left: 1.5rem;
}

.wp-block-comment-template li {
	margin: 0;
}

.wp-block-comment-template li > .wp-block-group {
	margin-bottom: var(--jtdg-space-s) !important;
}

.wp-block-comment-template .wp-block-comment-content p {
	margin-block: 0.35rem;
}

.wp-block-comment-template .wp-block-comment-reply-link a,
.comment-reply-title small a {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.wp-block-comment-template .wp-block-comment-reply-link a:hover,
.comment-reply-title small a:hover {
	color: var(--wp--preset--color--contrast);
}

.wp-block-post-comments-form .comment-reply-title {
	margin-top: var(--jtdg-space-s);
	font-size: var(--wp--preset--font-size--large);
}

.wp-block-post-comments-form .comment-reply-title small {
	margin-left: 0.75rem;
	font-weight: 400;
}

.wp-block-post-comments-form :is(.comment-notes, .logged-in-as) {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* -------------------------------------------------------------
 * Přístupnost: odkaz „Přeskočit na obsah“ (vkládá ho WordPress)
 * ---------------------------------------------------------- */

body .skip-link.screen-reader-text:focus {
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.6rem 1rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	box-shadow: none;
	outline: none;
}

/* -------------------------------------------------------------
 * Formuláře
 * ---------------------------------------------------------- */

:where(.wp-block-post-comments-form, .wp-block-search) :is(input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea) {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	padding: 0.5em 0.7em;
}

:where(.wp-block-post-comments-form, .wp-block-search) :is(input, textarea):focus {
	border-color: var(--wp--preset--color--contrast);
	outline: none;
}

.wp-block-post-comments-form label {
	font-size: var(--wp--preset--font-size--small);
}

/* -------------------------------------------------------------
 * Hlavička
 * ---------------------------------------------------------- */

.site-header {
	padding-top: var(--jtdg-space-m);
	font-size: var(--wp--preset--font-size--small);
}

.site-header > * {
	margin-block: 0;
}

.site-header__bar {
	align-items: flex-end;
	gap: 0.5rem 2rem;
}

.site-header .wp-block-site-title {
	/* 36 px, na úzkém displeji se úměrně zmenší */
	font-size: clamp(1.75rem, 6vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.1;
}

.site-header .wp-block-site-title a {
	text-decoration: none;
}

/*
 * Labarum (☧) z etikety vína – SVG jako maska, takže barvu určuje téma.
 * Text v HTML zůstává pro čtečky a vyhledávače.
 */
.site-motto {
	width: auto;
	/* stejný poměr ke jménu jako předtím (≈ 1,22× výška písma) */
	height: clamp(2.15rem, 7.3vw, 2.75rem);
	aspect-ratio: 6.72 / 8.84;
	margin: 0;
	overflow: hidden;
	font-size: 0;
	color: transparent;
	background-color: var(--wp--preset--color--contrast);
	-webkit-mask: url("assets/images/labarum.svg") center / contain no-repeat;
	mask: url("assets/images/labarum.svg") center / contain no-repeat;
}

/* Fotka v záhlaví: úzký pruh přes celou šířku */
.site-header__image {
	margin-top: var(--jtdg-space-s) !important;
}

.site-header__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 13 / 3;
	min-height: 7.5rem;
	object-fit: cover;
	object-position: center 40%;
}

/* -------------------------------------------------------------
 * Patička: jedna linka, © vlevo, kontakty vpravo
 * ---------------------------------------------------------- */

/* Patička vždy dole, s velkou mezerou od obsahu */
.wp-site-blocks > footer.wp-block-template-part {
	margin-top: auto;
	padding-top: var(--jtdg-space-l);
}

.site-footer {
	align-items: center;
	gap: 0.75rem 2rem;
	padding-block: var(--jtdg-space-s) var(--jtdg-space-m);
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: 0.9375rem; /* 15 px */
	color: var(--wp--preset--color--muted);
}

.site-footer > *,
.site-footer__meta > * {
	margin-block: 0;
}

.site-footer a {
	color: inherit;
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--wp--preset--color--contrast);
}

.site-footer__meta {
	align-items: center;
	gap: 0.5rem 1.75rem;
}

.site-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
}

/* Ikonky sociálních sítí (maska → barva podle textu odkazu) */
.site-footer__links a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.site-footer__links a[href*="github.com"] {
	--jtdg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z'/%3E%3C/svg%3E");
}

.site-footer__links a[href*="facebook.com"] {
	--jtdg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8.5V6.8c0-.8.5-1 .9-1H17V2.1L14.2 2C11 2 10.3 4.4 10.3 6v2.5H8V12h2.3v10H14V12h2.7l.4-3.5H14Z'/%3E%3C/svg%3E");
}

.site-footer__links a[href*="instagram.com"] {
	--jtdg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.3' cy='6.7' r='.6' fill='black'/%3E%3C/svg%3E");
}

.site-footer__links a.site-footer__rss {
	--jtdg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6.2' cy='17.8' r='2.2'/%3E%3Cpath d='M4 4.4v2.9c7 0 12.7 5.7 12.7 12.7h2.9C19.6 11.4 12.6 4.4 4 4.4Zm0 5.7v2.8c3.9 0 7.1 3.2 7.1 7.1h2.8c0-5.5-4.4-9.9-9.9-9.9Z'/%3E%3C/svg%3E");
}

.site-footer__links a.site-footer__rss::before,
.site-footer__links a[href*="github.com"]::before,
.site-footer__links a[href*="facebook.com"]::before,
.site-footer__links a[href*="instagram.com"]::before {
	content: "";
	flex-shrink: 0;
	width: 1.15rem;
	height: 1.15rem;
	background-color: currentColor;
	-webkit-mask: var(--jtdg-icon) center / contain no-repeat;
	mask: var(--jtdg-icon) center / contain no-repeat;
}

/*
 * Sociální sítě jen jako ikonky. Text odkazu zůstává v HTML
 * (čtečky obrazovky ho přečtou), vizuálně je skrytý; title = tooltip.
 */
.site-footer__social {
	gap: 0.25rem 1.1rem;
}

.site-footer__social a {
	font-size: 0;
	line-height: 0;
	padding: 0.15rem;
	margin: -0.15rem;
}