/* ==========================================================================
   Protaban Lake Home & Garden — design tokens
   Plaster #EDE6D8 · Fern #3F5B3E · Clay Blush #C97D5D · Charcoal #2A2724
   Stone #8C8579
   Display: Fraunces (soft) · Body: Work Sans · Utility: small-caps labels
   ========================================================================== */

:root {
	--ptl-plaster: #ede6d8;
	--ptl-plaster-dim: #e4dcca;
	--ptl-charcoal: #2a2724;
	--ptl-fern: #3f5b3e;
	--ptl-fern-deep: #2f4530;
	--ptl-clay: #c97d5d;
	--ptl-stone: #8c8579;
	--ptl-line: rgba(42, 39, 36, 0.12);

	/* season chip micro-colors */
	--ptl-spring: #7a9b5b;
	--ptl-summer: #d9a441;
	--ptl-fall: #b5623a;
	--ptl-winter: #6b8b95;

	--ptl-display: "Fraunces", Georgia, serif;
	--ptl-body: "Work Sans", -apple-system, sans-serif;

	--ptl-max: 1180px;
	--ptl-radius: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
	margin: 0;
	background: var(--ptl-plaster);
	color: var(--ptl-charcoal);
	font-family: var(--ptl-body);
	font-size: 17px;
	line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ptl-fern); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--ptl-clay); outline-offset: 2px; }

.screen-reader-text { position: absolute; left: -9999px; }
.skip-link:focus {
	position: fixed; left: 1rem; top: 1rem;
	background: var(--ptl-charcoal); color: var(--ptl-plaster);
	padding: 0.6rem 1rem; z-index: 1000; border-radius: 8px;
}

.wrap { max-width: var(--ptl-max); margin: 0 auto; padding: 0 1.5rem; }

h1, h2, h3, h4 {
	font-family: var(--ptl-display);
	font-weight: 500;
	line-height: 1.15;
	margin: 0 0 0.5em;
	color: var(--ptl-charcoal);
}

/* ---- Header ---- */
.site-header { background: var(--ptl-plaster); border-bottom: 1px solid var(--ptl-line); }
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; padding: 1.1rem 0; flex-wrap: wrap; }

.site-logo {
	display: flex; align-items: center; gap: 0.5rem;
	font-family: var(--ptl-display); font-size: 22px; font-weight: 500;
	color: var(--ptl-charcoal);
}
.site-logo:hover { text-decoration: none; }
.site-logo__mark { color: var(--ptl-fern); display: inline-flex; }

.main-navigation { flex: 1; display: flex; align-items: center; }
.main-navigation ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.main-navigation a {
	color: var(--ptl-stone); font-size: 13px; text-transform: uppercase;
	letter-spacing: 0.07em; font-weight: 600;
}
.main-navigation a:hover { color: var(--ptl-fern); text-decoration: none; }

.menu-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 0.5rem; }
.menu-toggle__bar { width: 22px; height: 2px; background: var(--ptl-charcoal); }

.site-search input {
	font-family: var(--ptl-body); font-size: 13px;
	border: 1.5px solid var(--ptl-line); border-radius: 999px;
	padding: 0.45rem 0.9rem; background: #fff; color: var(--ptl-charcoal); width: 210px;
}

/* ---- Leaf category tag + season chip (signature) ---- */
.post-card__tags { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.7rem; }

.leaf-tag {
	display: inline-flex; align-items: center;
	font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--ptl-fern-deep); background: rgba(63,91,62,0.1);
	border-radius: 999px; padding: 0.3rem 0.75rem;
}
.leaf-tag:hover { text-decoration: none; background: rgba(63,91,62,0.18); }
.leaf-tag--featured { background: rgba(201,125,93,0.18); color: var(--ptl-clay); }

.season-chip {
	display: inline-flex; align-items: center; gap: 0.3rem;
	font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
	color: #fff; border-radius: 999px; padding: 0.3rem 0.75rem;
}
.season-chip--spring { background: var(--ptl-spring); }
.season-chip--summer { background: var(--ptl-summer); }
.season-chip--fall { background: var(--ptl-fall); }
.season-chip--winter { background: var(--ptl-winter); }

/* ---- Hero ---- */
.hero { padding: 3rem 0 3.5rem; }
.hero__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.4rem; align-items: center; }
.hero__media img,
.hero__media .media-fallback { border-radius: var(--ptl-radius); }

/* ---- Media fallback: shown instead of a missing featured image, never a
   broken/empty box ---- */
.media-fallback {
	display: block; width: 100%; aspect-ratio: 16/12; border-radius: var(--ptl-radius);
	background: linear-gradient(150deg, var(--ptl-clay), var(--ptl-fern));
	position: relative;
}
.media-fallback::after {
	content: ""; position: absolute; inset: 0; margin: auto; width: 30px; height: 30px;
	top: 50%; left: 50%; transform: translate(-50%, -50%);
	background: var(--ptl-plaster); opacity: 0.55;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c0 6-5 9-5 14a5 5 0 0 0 10 0c0-5-5-8-5-14z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c0 6-5 9-5 14a5 5 0 0 0 10 0c0-5-5-8-5-14z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hero__title { font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 0.6rem; }
.hero__title a { color: var(--ptl-charcoal); }
.hero__excerpt { color: #5b5650; margin-bottom: 0.8rem; font-size: 1.05rem; }

/* ---- Botanical divider (signature) ---- */
.botanical-divider { color: var(--ptl-fern); background: var(--ptl-plaster); line-height: 0; }
.botanical-divider svg { width: 100%; height: 40px; display: block; }

/* ---- Layout ---- */
.content-layout { display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem; padding: 2.75rem 0 3rem; }
.content-layout--single { grid-template-columns: 1fr; }

.section-heading {
	font-family: var(--ptl-display); font-size: 1.4rem; color: var(--ptl-charcoal);
	margin-bottom: 1.6rem; position: relative; display: inline-block;
}
.section-heading::after {
	content: ""; display: block; width: 42px; height: 3px; background: var(--ptl-clay);
	margin-top: 0.4rem; border-radius: 2px;
}

/* ---- Cards ---- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.post-card {
	background: #fff; border-radius: var(--ptl-radius); overflow: hidden;
	border: 1px solid var(--ptl-line);
}
.post-card__media img,
.post-card__media .media-fallback { margin-bottom: 0; border-radius: 0; }
.post-card__body { padding: 1.1rem 1.2rem 1.3rem; }
.post-card__title { font-size: 1.15rem; margin-bottom: 0.4rem; }
.post-card__title a { color: var(--ptl-charcoal); }
.post-card__excerpt { font-size: 0.95rem; color: #5b5650; margin-bottom: 0.5rem; }
.entry-meta {
	display: block; font-size: 11px; color: var(--ptl-stone);
	text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}

/* ---- Single article ---- */
.single-article__title { font-size: clamp(1.9rem, 3.5vw, 2.6rem); }
.single-article__media { margin: 1.5rem 0; }
.single-article__media img,
.single-article__media .media-fallback { border-radius: var(--ptl-radius); }
.single-article__content { font-size: 1.08rem; }
.single-article__content p { margin: 0 0 1.3em; }
.single-article__content h2 { font-size: 1.5rem; margin-top: 1.6em; }
.single-article__content h3 { font-size: 1.25rem; margin-top: 1.4em; }
.single-article__content blockquote {
	border-left: 4px solid var(--ptl-clay); margin: 1.5em 0; padding: 0.2em 0 0.2em 1.2em;
	font-style: italic; color: var(--ptl-stone);
}
.single-article__tags { margin-top: 2rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.tag-chip {
	font-size: 11px; font-weight: 600; background: var(--ptl-plaster-dim);
	border-radius: 999px; padding: 0.3rem 0.7rem; color: var(--ptl-charcoal);
}

/* ---- Sidebar / widgets ---- */
.widget { margin-bottom: 2rem; }
.widget-title { font-family: var(--ptl-display); font-size: 1.1rem; border-bottom: 1px solid var(--ptl-line); padding-bottom: 0.4rem; }

/* ---- Archive / search headers ---- */
.archive-header { margin-bottom: 2rem; }
.archive-header__title { font-size: 1.8rem; }
.archive-header__description { color: var(--ptl-stone); }

/* ---- 404 ---- */
.error-404 { max-width: 560px; margin: 4rem auto; text-align: center; padding: 0 1.5rem; }

/* ---- Comments ---- */
.comments-area { margin-top: 3rem; border-top: 1px solid var(--ptl-line); padding-top: 2rem; }
.comment-list { list-style: none; padding: 0; }
.comment-list .children { list-style: none; padding-left: 1.5rem; }

/* ---- Footer ---- */
.site-footer { background: var(--ptl-fern-deep); color: var(--ptl-plaster); }
.site-footer__inner { padding: 2.5rem 0; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; }
.site-logo--footer { font-family: var(--ptl-display); color: var(--ptl-plaster); margin: 0 0 0.3rem; font-size: 20px; }
.site-footer__tagline { color: rgba(237,230,216,0.72); margin: 0; font-size: 0.9rem; }
.footer-navigation ul { list-style: none; display: flex; gap: 1.2rem; margin: 0; padding: 0; }
.footer-navigation a { color: var(--ptl-plaster); font-size: 12px; text-transform: uppercase; font-weight: 600; }
.site-footer__copy {
	grid-column: 1 / -1; border-top: 1px solid rgba(237,230,216,0.15);
	margin-top: 1.5rem; padding-top: 1.5rem; font-size: 0.8rem; color: rgba(237,230,216,0.55);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.content-layout { grid-template-columns: 1fr; }
	.post-grid { grid-template-columns: repeat(2, 1fr); }
	.hero__inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.post-grid { grid-template-columns: 1fr; }
	.main-navigation { order: 3; flex-basis: 100%; }
	.main-navigation ul { display: none; flex-direction: column; width: 100%; }
	.main-navigation.is-open ul { display: flex; }
	.menu-toggle { display: flex; }
	.site-search input { width: 100%; }
	.site-footer__inner { grid-template-columns: 1fr; }
}

/* Contact form (page-contact.php) */
.contact-form {
	max-width: 560px;
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}
.contact-form__field { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; }
.contact-form__field label {
	font-family: var(--ptl-body);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ptl-stone);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	font-family: var(--ptl-body);
	font-size: 1rem;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--ptl-line);
	border-radius: 8px;
	background: var(--ptl-plaster);
	color: var(--ptl-charcoal);
}
.contact-form input:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: var(--ptl-fern);
	box-shadow: 0 0 0 3px rgba(63, 91, 62, 0.15);
}
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form__field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__submit {
	align-self: flex-start;
	background: var(--ptl-fern);
	color: #fff;
	border: none;
	padding: 0.75rem 1.6rem;
	border-radius: 8px;
	font-family: var(--ptl-body);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
}
.contact-form__submit:hover { background: var(--ptl-fern-deep); }
.contact-form__notice { padding: 0.85rem 1rem; border-radius: 8px; font-size: 0.95rem; margin-top: 1.5rem; }
.contact-form__notice--success { background: rgba(63, 91, 62, 0.08); border: 1px solid var(--ptl-fern); color: var(--ptl-fern); }
.contact-form__notice--error { background: rgba(201, 125, 93, 0.08); border: 1px solid var(--ptl-clay); color: var(--ptl-clay); }