:root {
	--me-primary: #2f6b4f;
	--me-primary-dark: #24523c;
	--me-ink: #2b3a36;
	--me-muted: #5f6f6a;
	--me-paper: #faf7f2;
	--me-surface: #fff;
	--me-border: #e6e0d6;
	--me-shop: #b3542e;
	--me-shop-dark: #93441f;
	--el-drevo: #3e8e4f;
	--el-drevo-dark: #2c6b39;
	--el-drevo-tint: #e8f3ea;
	--el-ohen: #bc4749;
	--el-ohen-dark: #96353c;
	--el-ohen-tint: #f9e9e7;
	--el-zeme: #d9a62e;
	--el-zeme-dark: #7e5d12;
	--el-zeme-tint: #f8f0dc;
	--el-kov: #9aa5b1;
	--el-kov-dark: #5c6b7a;
	--el-kov-tint: #f1f3f5;
	--el-voda: #33658a;
	--el-voda-dark: #274f6d;
	--el-voda-tint: #e6eef4;
}

.site-body {
	background: var(--me-paper);
	color: var(--me-ink);
	font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
}

.site-body h1,
.site-body h2,
.site-body h3,
.site-body h4,
.site-body .display-4 {
	color: var(--me-ink);
	font-family: Lora, Georgia, serif;
	font-weight: 600;
}

.site-body a {
	color: var(--me-primary);
	text-decoration-thickness: .08em;
	text-underline-offset: .16em;
}

.site-body a:hover {
	color: var(--me-primary-dark);
}

/* Bootstrap 4 uses pink for inline code by default (3.57:1 on the paper
   background). Content code inherits the existing text-safe brand shade. */
.site-body main code {
	color: var(--me-primary-dark);
}

.site-body .text-muted {
	color: var(--me-muted) !important;
}

.site-body a:focus-visible,
.site-body button:focus-visible,
.site-body .btn:focus-visible {
	box-shadow: none;
	outline: 3px solid var(--me-primary);
	outline-offset: 2px;
}

.skip-link {
	background: var(--me-primary);
	color: #fff;
	left: -999px;
	padding: .5rem 1rem;
	position: absolute;
	top: 0;
	z-index: 2000;
}

.skip-link:focus {
	color: #fff;
	left: 0;
}

.site-body .btn-primary {
	background: var(--me-primary);
	border-color: var(--me-primary);
	color: #fff;
}

.site-body .btn-primary:hover,
.site-body .btn-primary:focus {
	background: var(--me-primary-dark);
	border-color: var(--me-primary-dark);
	color: #fff;
}

.site-body .btn-outline-primary {
	border-color: var(--me-primary);
	color: var(--me-primary);
}

.site-body .btn-outline-primary:hover,
.site-body .btn-outline-primary:focus,
.site-body .btn-outline-primary:not(:disabled):not(.disabled).active,
.site-body .btn-outline-primary:not(:disabled):not(.disabled):active {
	background: var(--me-primary);
	border-color: var(--me-primary);
	color: #fff;
}

.site-body .btn-shop {
	background: var(--me-shop);
	border-color: var(--me-shop);
	color: #fff;
}

.site-body .btn-shop:hover,
.site-body .btn-shop:focus {
	background: var(--me-shop-dark);
	border-color: var(--me-shop-dark);
	color: #fff;
}

.site-body .btn-shop:focus-visible {
	outline-color: rgba(179, 84, 46, .55);
}

.site-body .btn-outline-light {
	border-color: #fff;
	color: #fff;
}

.site-body .btn-outline-light:hover,
.site-body .btn-outline-light:focus {
	background: #fff;
	border-color: #fff;
	color: var(--me-primary-dark);
}

.site-navbar {
	background: rgba(250, 247, 242, .97);
	border-bottom: 1px solid var(--me-border);
	backdrop-filter: blur(8px);
}

.site-navbar .navbar-brand {
	align-items: center;
	color: var(--me-ink) !important;
	display: inline-flex;
	font-family: Lora, Georgia, serif;
	font-weight: 600;
}

.site-brand-mark {
	flex: 0 0 auto;
	height: 1.75rem;
	width: 1.75rem;
}

.site-brand-mark-footer {
	filter: drop-shadow(0 0 1px rgba(255, 255, 255, .65));
	vertical-align: -.4rem;
}

.site-navbar.navbar-light .navbar-nav .nav-link {
	color: var(--me-ink);
}

.site-navbar.navbar-light .navbar-nav .nav-link:hover,
.site-navbar.navbar-light .navbar-nav .nav-link:focus {
	color: var(--me-primary);
}

.site-navbar.navbar-light .navbar-nav .nav-link.active {
	color: var(--me-primary-dark);
	font-weight: 700;
}

.site-section {
	padding-bottom: 3rem;
	padding-top: 3rem;
}

.site-section-surface {
	background: var(--me-surface);
	border-bottom: 1px solid var(--me-border);
	border-top: 1px solid var(--me-border);
}

.site-hero-title {
	font-size: calc(1.5rem + 1.8vw);
	line-height: 1.18;
}

.site-hero-copy {
	color: var(--me-muted);
	max-width: 42rem;
}

.pentagram-diagram {
	height: auto;
	max-width: 100%;
}

.pentagram-labels {
	font-family: "Source Sans 3", sans-serif;
}

.trust-strip {
	border-top: 1px solid var(--me-border);
	color: var(--me-muted);
	font-size: .9375rem;
	gap: .75rem 1.5rem;
}

.trust-strip .bi {
	color: var(--me-primary);
}

.site-body .card {
	background: var(--me-surface);
	border-color: var(--me-border);
	border-radius: .5rem;
	transition: box-shadow .15s ease, transform .15s ease;
}

.site-body .card-hover:hover,
.site-body .card-hover:focus-within {
	box-shadow: 0 .5rem 1rem rgba(43, 58, 54, .08);
	transform: translateY(-2px);
}

.card-el {
	border-top: 3px solid var(--el-base, var(--me-primary)) !important;
}

.el-drevo {
	--el-base: var(--el-drevo);
	--el-dark: var(--el-drevo-dark);
	--el-tint: var(--el-drevo-tint);
}

.el-ohen {
	--el-base: var(--el-ohen);
	--el-dark: var(--el-ohen-dark);
	--el-tint: var(--el-ohen-tint);
}

.el-zeme {
	--el-base: var(--el-zeme);
	--el-dark: var(--el-zeme-dark);
	--el-tint: var(--el-zeme-tint);
}

.el-kov {
	--el-base: var(--el-kov);
	--el-dark: var(--el-kov-dark);
	--el-tint: var(--el-kov-tint);
}

.el-voda {
	--el-base: var(--el-voda);
	--el-dark: var(--el-voda-dark);
	--el-tint: var(--el-voda-tint);
}

.el-icon {
	align-items: center;
	background: var(--el-tint);
	border-radius: 50%;
	color: var(--el-dark);
	display: inline-flex;
	font-size: 1.4rem;
	height: 3rem;
	justify-content: center;
	width: 3rem;
}

.badge-el {
	background: var(--el-tint);
	color: var(--el-dark);
	font-weight: 600;
}

.site-card-icon {
	color: var(--me-primary);
	font-size: 2rem;
	line-height: 1;
}

.article-shell {
	/* Obsahové sekce sdílejí plnou šířku nadřazeného Bootstrap containeru. */
	width: 100%;
}

.content-hero {
	background: var(--me-surface);
	border-bottom: 1px solid var(--me-border);
	padding: 4rem 0 3rem;
}

.content-hero h1 {
	font-size: calc(1.45rem + 1.55vw);
	line-height: 1.2;
}

.content-hero .lead {
	color: var(--me-muted);
}

.content-kicker {
	color: var(--me-primary);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	margin-bottom: .75rem;
	text-transform: uppercase;
}

.content-page {
	padding-bottom: 4rem;
	padding-top: 3.5rem;
}

.content-page h2:not(:first-child) {
	margin-top: 2.5rem;
}

.content-steps {
	counter-reset: content-step;
	list-style: none;
	margin: 0;
	padding: 0;
}

.content-steps > li {
	border-bottom: 1px solid var(--me-border);
	counter-increment: content-step;
	padding: 0 0 2rem 3.5rem;
	position: relative;
}

.content-steps > li + li {
	padding-top: 2rem;
}

.content-steps > li::before {
	align-items: center;
	background: var(--me-primary);
	border-radius: 50%;
	color: #fff;
	content: counter(content-step);
	display: flex;
	font-weight: 700;
	height: 2.25rem;
	justify-content: center;
	left: 0;
	position: absolute;
	top: 0;
	width: 2.25rem;
}

.content-steps > li + li::before {
	top: 2rem;
}

.element-summary {
	background: var(--el-tint);
	border-left: 3px solid var(--el-base);
	border-radius: .375rem;
	height: 100%;
	padding: 1rem;
}

.term-list > div,
.faq-answer {
	border-bottom: 1px solid var(--me-border);
	padding-bottom: 1.5rem;
}

.term-list > div + div,
.faq-answer + .faq-answer {
	padding-top: 1.5rem;
}

.term-list dt {
	color: var(--me-ink);
	font-family: Lora, Georgia, serif;
	font-size: 1.25rem;
}

.term-list dd {
	margin: .35rem 0 0;
}

.content-principles {
	padding-left: 1.25rem;
}

.content-principles li + li {
	margin-top: .75rem;
}

/* The registered mark is full cap height in Lora and overpowers display headings. */
.tm {
	font-size: .55em;
	vertical-align: .5em;
}

.article-meta {
	color: var(--me-muted);
	font-size: .875rem;
}

.meta-separator {
	margin-left: .35rem;
	margin-right: .35rem;
}

.box-tcm,
.box-note {
	border-radius: .375rem;
	padding: 1rem 1.25rem;
}

.box-tcm {
	background: var(--el-voda-tint);
	border-left: 4px solid var(--el-voda);
}

.box-tcm .box-title {
	color: var(--el-voda-dark);
	font-weight: 700;
}

.box-note {
	background: var(--el-kov-tint);
	border-left: 4px solid var(--el-kov);
	color: var(--me-muted);
	font-size: .9375rem;
}

/* Kdy nečekat a jít k lékaři. Musí být nápadnější než ostatní bloky, proto plná
   sytost prvku Ohně a tmavý nadpis; kontrast textu je proti tintu, ne proti okraji. */

.box-alert {
	background: var(--el-ohen-tint);
	border: 1px solid var(--me-border);
	border-left: 6px solid var(--el-ohen);
	border-radius: .5rem;
	padding: 1rem 1.25rem;
}

.box-alert .box-title {
	color: var(--el-ohen-dark);
	font-weight: 700;
}

.box-alert ul {
	margin-bottom: 0;
	padding-left: 1.25rem;
}

.box-alert li + li {
	margin-top: .35rem;
}

.faq-card .card-header {
	background: var(--me-surface);
	border-bottom: 0;
	padding: 0;
}

.faq-card .btn-faq {
	color: var(--me-ink);
	font-weight: 600;
	padding: 1rem 1.25rem;
	text-align: left;
	text-decoration: none;
	white-space: normal;
	width: 100%;
}

.faq-card .btn-faq .bi-chevron-down {
	flex: 0 0 auto;
	transition: transform .15s ease;
}

.faq-card .btn-faq[aria-expanded="true"] .bi-chevron-down {
	transform: rotate(180deg);
}

.cta-band {
	background: var(--me-primary-dark);
	color: #fff;
}

.cta-band h2 {
	color: #fff;
}

.cta-copy {
	opacity: .88;
}

.site-footer {
	background: var(--me-ink);
	color: #c8d2ce;
	font-size: .9375rem;
}

.site-footer a {
	color: #fff;
}

.site-footer-brand {
	color: #fff;
	font-family: Lora, Georgia, serif;
	font-size: 1.25rem;
	font-weight: 600;
}

.site-footer-heading {
	color: #fff !important;
	font-size: 1.05rem;
}

/* Brand overrides of the shared Windea issue report; layout comes from issue-report.css. */
.wd-issue-report-trigger {
	box-shadow: 0 .5rem 1rem rgba(43, 58, 54, .16);
}

.wd-issue-report-trigger .bi {
	font-size: 1.1em;
}

.wd-issue-report-dialog {
	border-color: var(--me-border);
	border-radius: .5rem;
}

.wd-issue-report-title {
	font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.wd-issue-report-title .bi {
	color: var(--me-primary);
}

.anchor-target,
.site-section {
	scroll-margin-top: 4.5rem;
}

/* Bootstrap 3 compatibility retained for legacy public examples. */
.btn-default {
	background-color: #fff;
	border-color: #ccc;
	color: #333;
}

.btn-default:focus,
.btn-default:hover,
.btn-default:active {
	background-color: #e6e6e6 !important;
	border-color: #8c8c8c !important;
	color: #333;
}

@media (max-width: 575.98px) {
	.site-section {
		padding-bottom: 2.5rem;
		padding-top: 2.5rem;
	}

	.site-hero-title {
		font-size: 2rem;
	}

	.content-hero {
		padding-bottom: 2.5rem;
		padding-top: 3rem;
	}

	.content-hero h1 {
		font-size: 2rem;
	}

	.content-page {
		padding-bottom: 3rem;
		padding-top: 2.5rem;
	}

	.site-hero-actions .btn,
	.cta-band .btn {
		display: block;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}

	.site-body .card-body {
		padding: 1rem;
	}

	.article-meta .meta-separator {
		display: block;
		height: .2rem;
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-body *,
	.site-body *::before,
	.site-body *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}

	.site-body .card-hover:hover,
	.site-body .card-hover:focus-within {
		transform: none;
	}
}

/* Pentagram diagram, element grid and organ clock — see docs/design/prezentace-pentagramu.md */

.pg-ring {
	fill: var(--el-tint);
	stroke: var(--el-base);
	stroke-width: 2.5;
}

.pg-label {
	fill: var(--el-dark);
	font-size: 1.0625rem;
	font-weight: 600;
}

.pentagram-figure .pentagram-diagram {
	max-width: 100%;
	width: 27.5rem;
}

.pg-edges line {
	stroke: #8c9a93;
	stroke-width: 2;
}

.pg-edges-ctl line {
	stroke: var(--me-shop);
	stroke-dasharray: 6 5;
	stroke-width: 1.75;
}

.pg-arrow-gen {
	fill: #8c9a93;
}

.pg-arrow-ctl {
	fill: var(--me-shop);
}

.pg-node {
	cursor: pointer;
}

.pg-node .pg-halo {
	fill: none;
	opacity: 0;
	stroke: var(--el-base);
	stroke-width: 1;
	transition: opacity .15s ease;
}

.pg-node.is-active .pg-halo {
	opacity: 1;
}

.pg-node:hover .pg-ring,
.pg-node:focus .pg-ring,
.pg-node.is-active .pg-ring {
	stroke-width: 5;
}

.pentagram-panel {
	background: var(--me-surface);
	border: 1px solid var(--me-border);
	border-left: 4px solid var(--el-base, var(--me-primary));
	border-radius: .5rem;
}

.el-icon-lg {
	font-size: 1.7rem;
	height: 3.5rem;
	width: 3.5rem;
}

.cycle-mini .cm-step {
	background: var(--el-tint, var(--me-border));
	border-radius: 1rem;
	color: var(--el-dark, var(--me-ink));
	display: inline-block;
	font-weight: 600;
	padding: .15rem .55rem;
}

.attr-grid {
	display: grid;
	gap: .5rem;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}

.attr-tile {
	background: var(--me-surface);
	border: 1px solid var(--me-border);
	border-radius: .375rem;
	padding: .75rem .9rem;
}

.attr-tile .attr-label {
	color: var(--me-muted);
	display: block;
	font-size: .75rem;
	letter-spacing: .04em;
	margin-bottom: .15rem;
	text-transform: uppercase;
}

.attr-tile .attr-label .bi {
	color: var(--el-dark, var(--me-primary));
}

.attr-tile .attr-value {
	display: block;
	font-weight: 600;
	line-height: 1.35;
}

.swatch-list {
	display: flex;
	flex-wrap: wrap;
	gap: .15rem .6rem;
}

.swatch-item {
	align-items: center;
	display: inline-flex;
	white-space: nowrap;
}

.swatch {
	background: var(--el-base, var(--me-border));
	border: 1px solid rgba(43, 58, 54, .25);
	border-radius: 2px;
	display: inline-block;
	flex: none;
	height: .85rem;
	margin-right: .3rem;
	width: .85rem;
}

/* Named colours of the five elements. Only place these values are defined. */
.swatch-zelena { background: #3e8e4f; }
.swatch-tyrkysova { background: #2fb2a8; }
.swatch-modrozelena { background: #2e7d74; }
.swatch-cervena { background: #bc4749; }
.swatch-oranzova { background: #e07a3f; }
.swatch-ruzova { background: #e39fae; }
.swatch-zluta { background: #d9a62e; }
.swatch-fialova { background: #7a5c8e; }
.swatch-bila { background: #fff; }
.swatch-kovova { background: #b8bfc6; }
.swatch-bordo { background: #7e2b36; }
.swatch-tmavomodra { background: #33658a; }
.swatch-cerna { background: #1e2422; }

.clock-wheel {
	max-width: 100%;
	width: 24rem;
}

.clock-sector {
	cursor: pointer;
	fill: var(--el-tint);
	stroke: var(--el-base);
	stroke-width: 1.5;
	transition: opacity .15s ease;
}

.clock-sector:hover {
	opacity: .8;
}

.clock-sector.is-selected {
	stroke-width: 3;
}

.clock-sector.is-now {
	stroke: var(--me-ink);
	stroke-width: 2.5;
}

.clock-sector:focus-visible {
	opacity: 1;
	stroke: var(--me-ink);
	stroke-width: 4;
}

.clock-sector-label {
	fill: var(--me-ink);
	font-size: .625rem;
	font-weight: 600;
	pointer-events: none;
}

.clock-ticks text {
	fill: var(--me-muted);
	font-size: .6875rem;
}

.clock-hand {
	stroke: var(--me-ink);
	stroke-linecap: round;
	stroke-width: 2.5;
}

.clock-hub {
	fill: var(--me-paper);
	stroke: var(--me-border);
}

.clock-hub-top {
	fill: var(--me-muted);
	font-size: .75rem;
}

.clock-hub-main {
	fill: var(--me-ink);
	font-family: Lora, Georgia, serif;
	font-size: 1.0625rem;
	font-weight: 600;
}

.clock-readout {
	background: var(--me-surface);
	border: 1px solid var(--me-border);
	border-left: 4px solid var(--el-base, var(--me-primary));
	border-radius: .5rem;
}

.table-clock td,
.table-clock th {
	border-color: var(--me-border);
}

/* Side-by-side comparison; the row header carries the criterion, not a value. */

.table-compare td,
.table-compare th {
	border-color: var(--me-border);
	vertical-align: top;
}

.table-compare th[scope="row"] {
	color: var(--me-muted);
	font-weight: 600;
	width: 22%;
}

/* Three columns of running text have no chance below the md breakpoint. Each row
   becomes a stacked block; the column heading comes from the cell's data-label. */

@media (max-width: 767.98px) {
	.table-compare,
	.table-compare tbody,
	.table-compare tr,
	.table-compare td,
	.table-compare th {
		display: block;
		width: auto;
	}

	.table-compare thead {
		display: none;
	}

	.table-compare tr + tr {
		border-top: 1px solid var(--me-border);
	}

	.table-compare tr {
		padding: .85rem 0;
	}

	.table-compare th[scope="row"] {
		border: 0;
		color: var(--me-ink);
		font-size: 1.0625rem;
		padding: 0 0 .5rem;
		/* Beats the 22% from the desktop rule, which has higher specificity. */
		width: auto;
	}

	.table-compare td {
		border: 0;
		padding: 0 0 .6rem;
	}

	.table-compare td:last-child {
		padding-bottom: 0;
	}

	.table-compare td::before {
		color: var(--me-muted);
		content: attr(data-label);
		display: block;
		font-size: .75rem;
		letter-spacing: .05em;
		text-transform: uppercase;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pg-node .pg-halo,
	.clock-sector {
		transition: none;
	}
}

/* Element icon sprite — colour comes from the surrounding el-* class */

.element-icon-sprite {
	height: 0;
	position: absolute;
	width: 0;
}

.element-icon {
	color: var(--el-dark, var(--me-primary));
	display: block;
	height: 1.5rem;
	width: 1.5rem;
}

.el-icon-lg .element-icon {
	height: 1.9rem;
	width: 1.9rem;
}

.el-icon-sm {
	font-size: 1rem;
	height: 1.4rem;
	width: 1.4rem;
	vertical-align: -.35rem;
}

.el-icon-sm .element-icon {
	height: .95rem;
	width: .95rem;
}

.pg-sublabel {
	fill: var(--el-dark);
	font-size: .75rem;
	opacity: .75;
}

.attr-tile .attr-secondary {
	color: var(--me-muted);
	display: block;
	font-size: .8125rem;
	margin-top: .1rem;
}

.imbalance-label {
	color: var(--el-dark, var(--me-ink));
	font-weight: 600;
	margin-bottom: .25rem;
}

.opposition-row {
	background: var(--me-surface);
	border: 1px solid var(--me-border);
	border-radius: .375rem;
	height: 100%;
	padding: .9rem 1rem;
}

.opposition-verb {
	color: var(--me-muted);
	font-size: .875rem;
	margin: 0 .35rem;
}

.organ-clock-position {
	background: linear-gradient(135deg, var(--el-tint, var(--me-surface)), var(--me-surface));
	border: 1px solid var(--me-border);
	border-left: 4px solid var(--el-dark, var(--me-primary));
	border-radius: .5rem;
	padding: 1.5rem;
}

.organ-clock-position-head {
	align-items: flex-start;
	display: flex;
	gap: 2rem;
	justify-content: space-between;
}

.organ-clock-position-next {
	border-left: 1px solid var(--me-border);
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	min-width: 14rem;
	padding-left: 1.5rem;
}

.organ-clock-position-label {
	color: var(--me-muted);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.organ-clock-scale-labels {
	display: flex;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	justify-content: space-between;
}

.organ-clock-progress {
	appearance: none;
	background: var(--me-border);
	border: 0;
	border-radius: 999px;
	display: block;
	height: .75rem;
	overflow: hidden;
	width: 100%;
}

.organ-clock-progress::-webkit-progress-bar {
	background: var(--me-border);
	border-radius: 999px;
}

.organ-clock-progress::-webkit-progress-value {
	background: var(--el-dark, var(--me-primary));
	border-radius: 999px;
}

.organ-clock-progress::-moz-progress-bar {
	background: var(--el-dark, var(--me-primary));
	border-radius: 999px;
}

.organ-clock-time-note {
	color: var(--me-muted);
	font-size: .9rem;
}

@media (max-width: 767.98px) {
	.organ-clock-position-head {
		flex-direction: column;
		gap: 1.25rem;
	}

	.organ-clock-position-next {
		border-left: 0;
		border-top: 1px solid var(--me-border);
		min-width: 0;
		padding-left: 0;
		padding-top: 1rem;
		width: 100%;
	}
}

/* Authenticated editorial preview; warning colour is always paired with text and an icon. */
.content-review-tools {
	vertical-align: .35em;
}

.content-review-tools > .btn {
	white-space: nowrap;
}

.content-review-tools-menu {
	max-width: calc(100vw - 2rem);
	white-space: normal;
	width: 21rem;
}

.content-review-tools-menu .dropdown-item {
	white-space: normal;
}

.content-review-tools-status {
	color: var(--me-ink);
}

.content-review-preview main {
	border-top: 4px solid var(--warning, #ffc107);
}

@media (max-width: 575.98px) {
	.content-review-tools {
		display: block !important;
		margin: .75rem 0 .5rem !important;
	}

	.content-review-tools-menu {
		width: calc(100vw - 2rem);
	}
}