/* Malodoly theme: the site's own CSS, loaded after Baskerville's style.css.
 * Started as a copy of the Additional CSS that was live on 2026-11-13 (design H · Kahan:
 * base.css + proposals/h-kahan.css from the design-proposals branch). Under the Malodoly theme
 * the Customizer's Additional CSS box starts empty; this file takes its place. */

@import url('https://fonts.bunny.net/css?family=fraunces:500,700|inter:400,400i,600,700&display=swap');

/* ==========================================================================
   malodoly.cz: shared fixes for the Baskerville theme
   Every proposal in design/proposals/ builds on this file; it only sets
   fonts, colours and reading comfort through the --md-* variables below.
   `python design/preview.py --export X` (X = a proposal letter) joins it with a proposal
   into one block for Customizer > Additional CSS.
   ========================================================================== */

:root {
	--md-bg: #f1f1f1;            /* page background */
	--md-surface: #fff;          /* article card and sidebar */
	--md-text: #333;             /* body text */
	--md-muted: #666;            /* tagline, captions, secondary text */
	--md-heading: #222;
	--md-rule: #eee;             /* hairlines: under the post title, sidebar widgets */
	--md-link: #0b7a68;          /* the theme's #13c4a5, darkened to pass 4.5:1 on white */
	--md-link-hover: #075c4e;
	--md-accent: #13c4a5;        /* bullets, rules, focus ring */
	--md-dark: #1d1d1d;          /* navigation and footer bars */
	--md-dark-2: #262626;        /* mobile menu and search panel */
	--md-on-dark: #e8e8e8;       /* text on the dark bars */
	--md-on-dark-muted: #b3b3b3;
	--md-font-body: 'Roboto Flex', Roboto, Arial, sans-serif;
	--md-font-head: 'Bitter', 'Roboto Slab', Georgia, serif;
	--md-font-title: var(--md-font-head);
	--md-font-ui: var(--md-font-head);
	--md-size: 18px;
	--md-leading: 1.7;
}

/* Fonts. The theme ships Roboto, Roboto Slab and Pacifico without Czech
   letters (latin subset only), so č ě ř š ů ž fell back to another font.
   These are all the places where the theme names those fonts. */
body,
input,
textarea,
button,
.post-quote blockquote,
.post-link p,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea,
.wrapper .searchform .search-field,
.footer .searchform .search-field,
.posts .format-status .post-excerpt p,
.format-status .post-content {
	font-family: var(--md-font-body);
}

body {
	background-color: var(--md-bg);
	color: var(--md-text);
	font-size: var(--md-size);
}

.post-header .post-title,
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6,
.comment-content h1,
.comment-content h2,
.comment-content h3,
.comment-content h4,
.comment-content h5,
.comment-content h6,
.post-quote cite,
.post-content cite,
.post-content fieldset legend,
.post-author h4,
.author-info h4,
.author-info h5,
.comments-title-container,
.comment-header cite,
.pingbacks-title,
.comment-reply-title,
.page-title h1 .top,
.page-title h1 .bottom,
.page-title h3,
.page-title h5,
#wp-calendar caption,
.widget-title {
	font-family: var(--md-font-head);
}

.post-header .post-title,
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6,
.widget-title {
	color: var(--md-heading);
}

.blog-title {
	font-family: var(--md-font-title);
}

.main-menu,
.mobile-menu,
.form-submit #submit,
.wp-block-search__label,
.wp-block-search__button,
.credits,
.credits p {
	font-family: var(--md-font-ui);
}

/* Surfaces and bars */
.post,
.sidebar {
	background-color: var(--md-surface);
}

.bg-dark {
	background-color: var(--md-dark);
}

.bg-graphite {
	background-color: var(--md-dark-2);
}

.post-header,
.sidebar .widget {
	border-color: var(--md-rule);
}

.post .post-header:before,
.page .post-header:before {
	border-top-color: var(--md-rule);
}

.post .post-header:after,
.page .post-header:after {
	border-top-color: var(--md-surface);
}

/* Reading comfort */
.post-content {
	color: var(--md-text);
}

.post-content p,
.post-content li {
	line-height: var(--md-leading);
}

.post-content figcaption,
.post-content .wp-element-caption {
	color: var(--md-muted);
	font-size: 0.85em;
}

.post-content img {
	height: auto;
}

/* Space between a picture and the text under it */
.post-content .wp-block-image {
	margin-bottom: 1.4em;
}

/* Links: readable colour, underlined in running text so they don't rely on colour alone */
.post-content a {
	color: var(--md-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.post-content a:hover,
.post-content a:focus {
	color: var(--md-link-hover);
	text-decoration-thickness: 2px;
}

/* The rest of the theme's teal: links outside an article (search results,
   "Pokračovat ve čtení"), hovers and buttons */
body a,
.post-link a {
	color: var(--md-link);
}

body a:hover,
.post-link a:hover,
.post-header .post-title a:hover,
.posts .post-meta a:hover,
.single .post-meta a:hover {
	color: var(--md-link-hover);
}

.button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.form-submit #submit:hover,
.archive-nav a:hover,
.post-content fieldset legend {
	background: var(--md-link);
}

/* The editor's "Accent" colour (some highlighted lines in the pages) follows the design */
body {
	--wp--preset--color--accent: var(--md-link);
}

.widget-content a {
	color: var(--md-link);
}

.widget-content a:hover {
	color: var(--md-link-hover);
}

.widget-content ul li:before {
	color: var(--md-accent);
}

.blog-description {
	color: var(--md-on-dark);
}

.mobile-menu a {
	color: var(--md-on-dark-muted);
}

.mobile-menu a:hover {
	color: var(--md-on-dark);
}

.credits,
.credits p,
.credits a {
	color: var(--md-on-dark-muted);
}

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 3px solid var(--md-accent);
	outline-offset: 2px;
}

/* The sidebar menu lists about 60 pages: tighter rows make it shorter */
.sidebar .widget_nav_menu .menu > li {
	margin-top: 0.45em;
	font-size: 0.9em;
}

/* Mid-size screens (the theme switches to the menu button only below 1001 px):
   a tighter top bar so the topics stay on one line. `.navigation` in front
   makes these win over each proposal's own padding. */
@media (min-width: 1001px) and (max-width: 1420px) {
	.navigation .main-menu > li > a {
		padding-left: 10px;
		padding-right: 10px;
		font-size: calc(var(--md-nav-size, 0.95em) * 0.92);
		letter-spacing: 0.02em;
	}
}

@media (min-width: 1001px) and (max-width: 1240px) {
	.navigation .main-menu > li > a {
		padding-left: 6px;
		padding-right: 6px;
		font-size: calc(var(--md-nav-size, 0.95em) * 0.82);
		letter-spacing: 0;
	}

	.navigation .main-menu > li:before {
		content: none;
	}
}
/* ==========================================================================
   H · Kahan (miner's lamp)
   Warm white with the amber of a carbide lamp: a soft glow behind the
   print, amber lines, charcoal text. The print has rounded corners and a
   soft shadow, the most "app-like" of the ideas. The top bar keeps only
   Kontakt and the search, as on the site today.
   Fraunces for the title and headings, Inter for text.
   ========================================================================== */

/* ==========================================================================
   Shared layout for the light ideas (D–M): A's header with C's light page.
   Emblem + title on the left, the engraving as a print on the right, shown
   at most 520 px wide (the file is 630 px, so it is never blown up). Light
   top bar with the main topics, flat cards. An idea pulls this file in with
   an `include:` line and sets the --md-* variables below.
   ========================================================================== */

:root {
	--md-header-bg: #fff;
	--md-header-pad: 34px;
	--md-header-border: 1px solid var(--md-rule);
	--md-emblem-size: 104px;
	--md-emblem-filter: contrast(1.3) brightness(1.06);
	--md-emblem-blend: multiply;
	--md-title-size: 2.7em;
	--md-title-weight: 700;
	--md-title-case: none;
	--md-title-spacing: -0.01em;
	--md-title-color: var(--md-heading);
	--md-tagline-font: var(--md-font-ui);
	--md-tagline-size: 0.8em;
	--md-tagline-weight: 600;
	--md-tagline-spacing: 0.12em;
	--md-tagline-case: none;
	--md-tagline-color: var(--md-accent);
	--md-print-width: 520px;
	--md-print-filter: none;
	--md-print-tint: transparent;   /* #fff + luminosity = grey print; a dark ink + screen = print in that ink */
	--md-print-blend: normal;
	--md-print-border: 1px solid var(--md-rule);
	--md-print-radius: 0;
	--md-print-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
	--md-nav-bg: #fff;
	--md-nav-bg-2: var(--md-bg);
	--md-nav-text: var(--md-text);
	--md-nav-hover: var(--md-accent);
	--md-nav-sep: #c9c3ba;
	--md-nav-border-top: 1px solid var(--md-rule);
	--md-nav-border-bottom: 3px solid var(--md-heading);
	--md-nav-size: 0.95em;
	--md-nav-weight: 700;
	--md-nav-spacing: 0.06em;
	--md-nav-case: uppercase;
	--md-nav-icon: invert(1);
	--md-card-border: 1px solid var(--md-rule);
	--md-card-radius: 0;
	--md-card-shadow: none;
	--md-footer-bg: #1f1e1c;
	--md-footer-text: #c9c3ba;
}

/* Header */
.header.bg-image {
	background-image: none !important;
	background-color: var(--md-header-bg);
	padding: var(--md-header-pad) 0;
	border-bottom: var(--md-header-border);
}

.header .cover {
	display: none;
}

.header-inner {
	display: grid;
	grid-template-columns: var(--md-emblem-size) minmax(0, 1fr) minmax(0, var(--md-print-width));
	grid-template-areas:
		"emblem title   picture"
		"emblem tagline picture";
	column-gap: 28px;
	align-items: center;
}

.header-inner::before {
	content: "";
	grid-area: emblem;
	width: var(--md-emblem-size);
	height: var(--md-emblem-size);
	background: url(https://malodoly.cz/wp-content/uploads/2023/12/016c9914-80637.jpg) center / contain no-repeat;
	filter: var(--md-emblem-filter);
	mix-blend-mode: var(--md-emblem-blend);
}

.header-inner::after {
	content: "";
	grid-area: picture;
	width: 100%;
	aspect-ratio: 630 / 166;
	background: url(https://malodoly.cz/wp-content/uploads/2023/12/016c9914-94850.jpg) center / cover no-repeat;
	background-color: var(--md-print-tint);
	background-blend-mode: var(--md-print-blend);
	filter: var(--md-print-filter);
	border: var(--md-print-border);
	border-radius: var(--md-print-radius);
	box-shadow: var(--md-print-shadow);
}

.blog-title {
	grid-area: title;
	align-self: end;
	text-align: left;
	font-size: var(--md-title-size);
	font-weight: var(--md-title-weight);
	line-height: 1.05;
	letter-spacing: var(--md-title-spacing);
	text-transform: var(--md-title-case);
	text-shadow: none;
}

.blog-title a,
.blog-title a:hover {
	color: var(--md-title-color);
}

.header-inner .blog-description {
	grid-area: tagline;
	align-self: start;
	margin: 10px 0 0;
	font-family: var(--md-tagline-font);
	font-size: var(--md-tagline-size);
	font-weight: var(--md-tagline-weight);
	line-height: 1.35;
	letter-spacing: var(--md-tagline-spacing);
	text-transform: var(--md-tagline-case);
	text-align: left;
	text-shadow: none;
	color: var(--md-tagline-color);
}

/* The search panel that opens over the header: light like the header */
.header-search-block {
	background-color: var(--md-header-bg);
}

.header-search-block .search-field {
	color: var(--md-heading);
	font-family: var(--md-font-head);
	border-bottom: 2px solid var(--md-accent);
}

.header-search-block .search-field::placeholder {
	color: var(--md-muted);
}

/* Top bar: the main topics (the villages stay in the sidebar) */
.navigation {
	background-color: var(--md-nav-bg);
	border-top: var(--md-nav-border-top);
	border-bottom: var(--md-nav-border-bottom);
}

.main-menu > li:not(.menu-item-386):not(.menu-item-387):not(.menu-item-388):not(.menu-item-389):not(.menu-item-429):not(.menu-item-979) {
	display: none;
}

.main-menu > li > a {
	padding: 20px 16px;
	font-size: var(--md-nav-size);
	font-weight: var(--md-nav-weight);
	letter-spacing: var(--md-nav-spacing);
	text-transform: var(--md-nav-case);
	color: var(--md-nav-text);
}

.main-menu > li > a:hover,
.main-menu > li.current-menu-item > a {
	color: var(--md-nav-hover);
}

.main-menu > li:before {
	color: var(--md-nav-sep);
}

.search-toggle {
	filter: var(--md-nav-icon);
}

.nav-toggle .bar {
	background: var(--md-nav-text);
}

.nav-toggle.active .bar {
	background: var(--md-nav-hover);
}

.mobile-navigation {
	background-color: var(--md-nav-bg-2);
}

.mobile-menu a {
	color: var(--md-nav-text);
}

.mobile-menu a:hover {
	color: var(--md-nav-hover);
}

.mobile-menu li {
	border-top-color: var(--md-rule);
}

/* Cards */
.post,
.sidebar {
	border: var(--md-card-border);
	border-radius: var(--md-card-radius);
	box-shadow: var(--md-card-shadow);
}

.widget-title {
	font-family: var(--md-font-ui);
	letter-spacing: 0.1em;
	color: var(--md-accent);
}

.sidebar .wp-block-search__button {
	background: var(--md-heading);
	color: #fff;
}

/* Footer */
.credits {
	background-color: var(--md-footer-bg);
}

.credits,
.credits p,
.credits a {
	color: var(--md-footer-text);
}

/* Laptops: a smaller print leaves the title room */
@media (max-width: 1280px) {
	:root {
		--md-print-width: 420px;
	}
}

/* Smaller screens: the print moves under the title */
@media (max-width: 1100px) {
	.header-inner {
		grid-template-columns: 96px minmax(0, 1fr);
		grid-template-areas:
			"emblem  title"
			"emblem  tagline"
			"picture picture";
		row-gap: 0;
	}

	.header-inner::before {
		width: 96px;
		height: 96px;
	}

	.header-inner::after {
		max-width: 630px;
		margin: 24px auto 0;
	}
}

@media (max-width: 600px) {
	.header.bg-image {
		padding: 20px 0 24px;
	}

	.header-inner {
		grid-template-columns: 64px minmax(0, 1fr);
		column-gap: 14px;
	}

	.header-inner::before {
		width: 64px;
		height: 64px;
	}

	.blog-title {
		font-size: 1.9em;
	}

	.header-inner .blog-description {
		font-size: 0.7em;
		letter-spacing: 0.06em;
		margin-top: 6px;
	}

	.header-inner::after {
		margin-top: 18px;
	}
}

:root {
	--md-bg: #faf7f1;
	--md-surface: #fff;
	--md-text: #26221c;
	--md-muted: #5e564b;
	--md-heading: #1d1913;
	--md-rule: #ece5d8;
	--md-link: #8a4b00;
	--md-link-hover: #5f3300;
	--md-accent: #c98a1b;
	--md-font-body: 'Inter', Arial, sans-serif;
	--md-font-head: 'Fraunces', Georgia, serif;
	--md-font-title: 'Fraunces', Georgia, serif;
	--md-font-ui: 'Inter', Arial, sans-serif;
	--md-size: 17px;
	--md-leading: 1.75;
	--md-title-size: 2.9em;
	--md-tagline-color: #8a4b00;
	--md-tagline-size: 0.72em;
	--md-print-border: none;
	--md-print-radius: 12px;
	--md-print-shadow: 0 18px 40px rgba(120, 72, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
	--md-nav-border-bottom: 2px solid #c98a1b;
	--md-nav-weight: 600;
	--md-nav-spacing: 0.02em;
	--md-nav-hover: #8a4b00;
	--md-card-radius: 12px;
	--md-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(120, 72, 0, 0.05);
	--md-footer-bg: #1d1913;
	--md-footer-text: #d8cbb4;
}

/* Top bar: only Kontakt and the search (the pages stay in the sidebar and the phone menu) */
.main-menu > li:not(.menu-item-979) {
	display: none;
}

/* The lamp glow behind the print */
.header.bg-image {
	background-image: radial-gradient(ellipse 40% 90% at 78% 50%, #fff1d2 0%, rgba(255, 241, 210, 0) 70%) !important;
}

.post-header .post-title {
	font-weight: 700;
	letter-spacing: -0.015em;
}

.widget-title {
	color: #8a4b00;
}

/* Malodoly theme additions
   ========================================================================== */

/* Facebook icon in front of the footer link (footer.php): an outlined "f" (Feather icons, MIT)
   drawn in the link's colour. The negative top and bottom margins keep the bar as tall as before and
   the link on the same line as the copyright. The "f" leaves empty room on its right inside the
   icon, so a small right margin gives the same gap to the text as the round logo had. */
.credits .malodoly-fb-icon {
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	margin: -0.3em 0.15em -0.3em 0;
	vertical-align: middle;
}