/*
Theme Name: zengard-child
Description: A calm, modern visual redesign for a spiritual-therapy practice. Templates and post/page/comment logic are inherited unchanged from the parent theme; this is presentation only (plus header.php, overridden solely to drop 2012-era jQuery and unhide the site title as real text instead of an image).
Author: Domoszlai Katalin site
Template: zengard-theme
Version: 2.0
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
	--color-bg: #FAF7F0;
	--color-surface: #FFFFFF;
	--color-surface-alt: #F1ECDD;
	--color-text: #34322C;
	--color-text-muted: #706A5B;
	--color-primary: #6E7F52;
	--color-primary-dark: #3B4429;
	--color-primary-light: #A9B98C;
	--color-accent: #B9824F;
	--color-border: #E6E0CF;

	--font-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
	--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--radius: 1rem;
	--shadow-card: 0 1px 2px rgba(40, 35, 20, 0.04), 0 10px 30px rgba(40, 35, 20, 0.06);
	--container-max: 1160px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	font-size: 17px;
}

body {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

/* Old post content embeds video with hardcoded width="560" height="315"
   HTML attributes (2012-era YouTube embed code) — img's max-width rule
   doesn't reach iframes, so they ignored their container entirely and
   pushed the whole page into horizontal scroll on anything narrower
   than 560px. Force responsive sizing and recompute the aspect ratio
   since the fixed height attribute would otherwise squash/stretch it. */
.entry iframe,
.entry embed,
.entry object,
.entry video {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 0.6rem;
}

/* Safety net against any other legacy fixed-width relic; `clip` (unlike
   `hidden`) doesn't establish a scroll container, so it won't break the
   sidebar's position: sticky. */
html {
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-serif);
	font-weight: 400;
	color: var(--color-primary-dark);
	line-height: 1.3;
}

a {
	color: var(--color-accent);
}

a:hover {
	color: var(--color-primary-dark);
}

/* ==========================================================================
   Header / hero
   ========================================================================== */

#wrapper {
	width: 100%;
	max-width: none;
	margin: 0;
	background: var(--color-bg);
}

.site-header {
	position: relative;
	background:
		linear-gradient(135deg, rgba(59, 68, 41, 0.94), rgba(110, 127, 82, 0.88)),
		url('../zengard-theme/images/top.png');
	background-size: cover;
	background-position: center;
	color: #fff;
	text-align: center;
	padding: 4rem 1.5rem 0;
}

.site-header__inner {
	max-width: 640px;
	margin: 0 auto;
	padding-bottom: 2.75rem;
}

.site-branding {
	margin: 0;
}

.site-title {
	margin: 0;
	font-family: var(--font-serif);
	font-size: clamp(2rem, 5vw, 2.9rem);
	font-weight: 400;
	letter-spacing: 0.01em;
}

.site-title a {
	display: block;
	color: #fff;
	text-decoration: none;
}

.site-title a:hover {
	color: #fff;
	opacity: 0.85;
}

.site-tagline {
	display: block;
	margin-top: 0.6rem;
	font-family: var(--font-sans);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}

/* Nav */

.site-nav {
	position: relative;
	background: rgba(0, 0, 0, 0.18);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-nav__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--container-max);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.site-nav__list li {
	margin: 0;
}

.site-nav__list li a {
	display: block;
	padding: 1.05rem 1.15rem;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	position: relative;
	transition: color 0.2s ease;
}

.site-nav__list li a::after {
	content: "";
	position: absolute;
	left: 1.15rem;
	right: 1.15rem;
	bottom: 0.7rem;
	height: 2px;
	background: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}

.site-nav__list li a:hover,
.site-nav__list li a:focus-visible {
	color: #fff;
}

.site-nav__list li a:hover::after,
.site-nav__list li a:focus-visible::after {
	transform: scaleX(1);
}

.site-nav__list li.current_page_item > a {
	color: #fff;
}

.site-nav__list li.current_page_item > a::after {
	transform: scaleX(1);
	background: #fff;
}

.nav-toggle {
	display: none;
	align-items: center;
	gap: 0.6rem;
	margin: 0 auto;
	padding: 0.85rem 1.25rem;
	background: transparent;
	border: 0;
	color: #fff;
	font: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	cursor: pointer;
}

.nav-toggle__bars {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	width: 20px;
}

.nav-toggle__bars span {
	display: block;
	height: 2px;
	background: #fff;
	border-radius: 2px;
}

/* ==========================================================================
   Layout: content + sidebar
   ========================================================================== */

#casing {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 3rem 1.5rem 4rem;
	background: transparent;
	border-top: 0;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	width: 100%;
	float: none;
}

#content {
	order: 1;
	float: none;
	width: 100%;
	max-width: 100%;
	padding: 0;
}

.right {
	order: 2;
	float: none;
	width: 100%;
	max-width: 100%;
	padding: 0;
}

#footer {
	order: 3;
}

@media (min-width: 900px) {
	#casing {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 320px;
		align-items: start;
		gap: 3rem;
	}

	#content {
		grid-column: 1;
	}

	.right {
		grid-column: 2;
		position: sticky;
		top: 1.5rem;
	}

	#footer {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   Content card
   ========================================================================== */

.single {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: clamp(1.5rem, 4vw, 2.75rem);
	width: 100%;
	max-width: 100%;
	color: var(--color-text);
	font: inherit;
	text-align: left;
	height: auto;
}

.title {
	margin: 0 0 1.5rem;
}

.single h2 {
	margin: 0;
	padding: 0;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 400;
	text-align: left;
	overflow: visible;
}

.single h2 a,
.single h2 a:link,
.single h2 a:visited {
	color: var(--color-primary-dark);
	background: none;
}

.single h2 a:hover {
	color: var(--color-accent);
}

.entry {
	margin: 0;
	padding: 0;
}

.entry p {
	margin: 0 0 1.3rem;
	padding: 0;
	line-height: 1.85;
	color: var(--color-text);
}

.entry strong {
	color: var(--color-primary-dark);
	font-weight: 700;
}

.entry a:link,
.entry a:visited {
	color: var(--color-accent);
	background: none;
	border-bottom: 1px solid rgba(185, 130, 79, 0.4);
}

.entry a:hover {
	color: var(--color-primary-dark);
	border-bottom-color: currentColor;
}

blockquote {
	margin: 1.5rem 0;
	padding: 1rem 1.5rem;
	background: var(--color-surface-alt);
	border: 0;
	border-left: 3px solid var(--color-accent);
	border-radius: 0 0.6rem 0.6rem 0;
	color: var(--color-text-muted);
	font-family: var(--font-serif);
	font-style: italic;
}

/* Inline post images */

.custim,
img.alignleft,
img.alignright,
img.alignnone,
.wp-caption {
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: 0.6rem;
	padding: 6px;
}

/* Single-post meta bar (author/date/categories) */

.singleinfo {
	height: auto;
	margin: 1.5rem -2.75rem -2.75rem;
	padding: 1rem 2.75rem;
	background: var(--color-surface-alt);
	border-top: 1px solid var(--color-border);
	border-radius: 0 0 var(--radius) var(--radius);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

.singleinfo .author img {
	border: 2px solid var(--color-surface);
	border-radius: 50%;
	margin: 0;
}

.singleinfo .clock,
.singleinfo .comm,
.singleinfo .category {
	font-family: var(--font-sans);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.singleinfo .comm a:link,
.singleinfo .comm a:visited,
.singleinfo .category a:link,
.singleinfo .category a:visited {
	color: var(--color-accent);
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.right {
	background: transparent;
}

.sidebar1 {
	float: none;
	width: 100%;
	max-width: 100%;
	padding: 0;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	font-family: var(--font-sans);
}

.sidebar1 h2 {
	margin: 0;
	padding: 1rem 1.5rem;
	background: var(--color-primary-dark);
	color: #fff;
	font-family: var(--font-sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border: 0;
	line-height: 1.4;
}

.sidebar1 ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sidebar1 ul li {
	float: none;
	width: 100%;
	max-width: 100%;
	height: auto;
	line-height: 1.4;
	text-transform: none;
	border-bottom: 1px solid var(--color-border);
}

.sidebar1 ul li:last-child {
	border-bottom: 0;
}

.sidebar1 ul li a:link,
.sidebar1 ul li a:visited {
	display: block;
	padding: 0.7rem 1.5rem;
	background: transparent;
	color: var(--color-text-muted);
	font-size: 0.88rem;
	border: 0;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.sidebar1 ul li a:hover {
	background: var(--color-surface-alt);
	color: var(--color-primary-dark);
	box-shadow: inset 3px 0 0 var(--color-accent);
}

.sidebar1 p {
	padding: 1rem 1.5rem;
	color: var(--color-text-muted);
}

/* Tag cloud widget */

.sidebar1 .tagcloud {
	padding: 1rem 1.25rem 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.sidebar1 .tagcloud a {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	background: var(--color-surface-alt);
	border-radius: 999px;
	color: var(--color-text-muted) !important;
	/* font-size is intentionally left alone: WordPress writes an inline
	   style="font-size: ...pt" per tag, scaled by how often it's used —
	   that's the actual tag-cloud weighting, keep it. */
	line-height: 1.4;
	text-transform: none;
	text-decoration: none;
}

.sidebar1 .tagcloud a:hover {
	background: var(--color-primary-dark);
	color: #fff !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */

#footer {
	height: auto;
	width: 100%;
	float: none;
	margin: 0;
	padding: 2.5rem 1.5rem;
	background: var(--color-primary-dark);
	border-top: 0;
	color: rgba(255, 255, 255, 0.65);
	font-family: var(--font-sans);
	font-size: 0.82rem;
	letter-spacing: 0.03em;
	text-align: center;
}

#footer a:link,
#footer a:visited {
	color: rgba(255, 255, 255, 0.9);
}

#footer a:hover {
	color: #fff;
}

/* ==========================================================================
   Comments & forms
   ========================================================================== */

#comment {
	width: 100%;
	height: auto;
	padding: 0;
	margin-top: 2.5rem;
}

h3#comments,
#respond h3 {
	padding: 0;
	margin: 0 0 1.25rem;
	border: 0;
	background: none;
	border-radius: 0;
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--color-primary-dark);
}

#respond {
	height: auto;
	padding: clamp(1.25rem, 4vw, 2rem);
	margin: 0 0 2rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
}

#commentform {
	padding: 0;
	color: var(--color-text-muted);
	font-family: var(--font-sans);
}

#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea {
	width: 100%;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 0.5rem;
	color: var(--color-text);
	padding: 0.65rem 0.85rem;
	font-family: inherit;
}

#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus,
#commentform input[type="url"]:focus,
#commentform textarea:focus {
	outline: none;
	border-color: var(--color-accent);
}

.comments input#submit {
	width: auto;
	line-height: 1.4;
	padding: 0.65rem 1.5rem;
	background: var(--color-accent);
	border: 0;
	border-radius: 0.5rem;
	color: #fff;
	font-family: var(--font-sans);
	font-weight: 600;
	letter-spacing: 0.03em;
	cursor: pointer;
}

.comments input#submit:hover {
	background: var(--color-primary-dark);
}

ol.commentlist {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}

ol.commentlist li {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	margin: 0 0 1rem;
	padding: 1.25rem 1.25rem 1.25rem 4.5rem;
}

ol.commentlist li div.vcard img.avatar {
	border: 2px solid var(--color-surface-alt);
	border-radius: 50%;
	left: 1.25rem;
	top: 1.25rem;
}

ol.commentlist li div.comment-meta {
	font-family: var(--font-sans);
	color: var(--color-text-muted);
}

ol.commentlist li div.reply {
	background: var(--color-primary-dark);
	border: 0;
	border-radius: 0.4rem;
}

/* ==========================================================================
   Blog-listing components (archive/index) — same tokens, kept consistent
   even though the site's front page is a static page, not the post loop.
   ========================================================================== */

.fblock {
	width: 100%;
	max-width: 100%;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 0.75rem;
	box-shadow: var(--shadow-card);
}

.fblock:hover {
	width: 100%;
	max-width: 100%;
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
}

.fblock h2 {
	font-size: 1.05rem;
	height: auto;
}

/* ==========================================================================
   Responsive: tablet / phone
   ========================================================================== */

@media (max-width: 899px) {
	.site-nav {
		display: flex;
		flex-direction: column;
	}

	.nav-toggle {
		display: inline-flex;
	}

	.site-nav__list {
		display: none;
		flex-direction: column;
		width: 100%;
	}

	.site-nav__list.is-open {
		display: flex;
	}

	.site-nav__list li a {
		text-align: center;
		padding: 0.9rem 1.5rem;
	}

	.singleinfo {
		margin: 1.5rem calc(-1 * clamp(1.5rem, 4vw, 2.75rem)) calc(-1 * clamp(1.5rem, 4vw, 2.75rem));
		padding: 1rem clamp(1.5rem, 4vw, 2.75rem);
	}
}

@media (max-width: 480px) {
	html {
		font-size: 16px;
	}

	.site-header {
		padding-top: 3rem;
	}

	ol.commentlist li {
		padding: 1rem 1rem 1rem 3.75rem;
	}
}