/**
 * Theme Name: Small-Space Garden
 * Theme URI: https://grow.mo-o.net/
 * Author: Small-Space Garden Guide
 * Description: A lightweight block theme for U.S. balcony, patio, indoor, and tiny-yard gardeners.
 * Version: 1.0.0
 * Requires at least: 6.4
 * Requires PHP: 7.4
 * Text Domain: small-space-garden
 */

/* Original theme layout */
:root {
	--ssg-forest: #234735;
	--ssg-leaf: #49735a;
	--ssg-sage: #edf3e9;
	--ssg-clay: #c86543;
	--ssg-cream: #fffdf8;
	--ssg-ink: #183027;
}

html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body { background: var(--ssg-cream); color: var(--ssg-ink); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 0; }
a { text-underline-offset: .18em; }
.ssg-wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.ssg-header { background: rgba(255,253,248,.96); border-bottom: 1px solid #e8e2d6; position: sticky; top: 0; z-index: 10; }
.ssg-header-inner { align-items: center; display: flex; justify-content: space-between; min-height: 86px; }
.ssg-logo { align-items: center; color: var(--ssg-forest); display: flex; font: 700 1.55rem/1 Georgia, serif; gap: .75rem; text-decoration: none; }
.ssg-logo-mark { fill:none; height:47px; stroke:var(--ssg-forest); stroke-linecap:round; stroke-linejoin:round; stroke-width:2; width:40px; }
.ssg-menu { display: flex; gap: 1.7rem; list-style: none; margin: 0; padding: 0; }
.ssg-menu a { color: var(--ssg-ink); font-weight: 650; text-decoration: none; }
.ssg-menu a:hover { color: var(--ssg-clay); }

.ssg-hero-original { background: url('assets/hero-balcony-watercolor.png') right center/auto 100% no-repeat, linear-gradient(115deg,#f1f6eb 0%,#fffaf0 64%,#eef2df 100%); min-height: 545px; overflow: hidden; position: relative; }
.ssg-hero-original:after { background: linear-gradient(90deg,rgba(255,253,248,.98) 0%,rgba(255,253,248,.92) 36%,rgba(255,253,248,0) 66%); content:""; inset:0; position:absolute; }
.ssg-hero-copy { padding: 86px 0 150px; position: relative; z-index: 1; }
.ssg-kicker { color: var(--ssg-leaf); font-size: .78rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.ssg-hero-copy h1 { color: var(--ssg-forest); font: 700 clamp(3.2rem,6vw,6.5rem)/.94 Georgia,serif; letter-spacing: -.06em; margin: .6rem 0 1.3rem; max-width: 620px; }
.ssg-hero-copy p { font-size: 1.15rem; line-height: 1.7; max-width: 550px; }
.ssg-finder-panel { background: rgba(255,253,248,.96); border: 1px solid #d4d8c8; border-radius: 18px; box-shadow: 0 14px 35px rgba(35,71,53,.13); margin: -84px auto 0; padding: 28px; position: relative; z-index: 3; }
.ssg-finder-panel h2 { color: var(--ssg-forest); font: 700 1.6rem Georgia,serif; margin:0 0 18px; }
.ssgg-finder { background: transparent; box-shadow:none; padding:0; }
.ssg-section { padding: 84px 0; }
.ssg-section h2 { color: var(--ssg-forest); font: 700 clamp(2rem,3vw,3rem)/1.05 Georgia,serif; margin:0 0 .7rem; }
.ssg-section-intro { color:#5c6d61; margin:0 0 28px; }
.ssg-latest-section { padding-bottom: 18px; }
.ssg-section-heading { align-items: end; display:flex; justify-content:space-between; gap: 1rem; margin-bottom: 28px; }
.ssg-section-heading h2 { margin-bottom: 0; }
.ssg-section-kicker { color: var(--ssg-leaf); font-size: .78rem; font-weight: 800; letter-spacing: .13em; margin: 0 0 .45rem; text-transform: uppercase; }
.ssg-text-link, .ssg-read-link { color: var(--ssg-clay); font-weight: 750; text-decoration: none; }
.ssg-text-link:hover, .ssg-read-link:hover { text-decoration: underline; }
.ssg-latest-grid { display:grid; gap:20px; grid-template-columns:repeat(3, minmax(0,1fr)); }
.ssg-latest-card { background:#fffdf8; border:1px solid #e6dfd1; border-radius:16px; display:flex; flex-direction:column; overflow:hidden; }
.ssg-latest-image { aspect-ratio: 16 / 9; background:linear-gradient(150deg,#edf4e7,#f8f0dc); display:block; }
.ssg-latest-image img { display:block; height:100%; object-fit:cover; width:100%; }
.ssg-latest-card-content { display:flex; flex:1; flex-direction:column; padding:22px; }
.ssg-post-date { color:#5c6d61; font-size:.82rem; font-weight:700; letter-spacing:.02em; margin:0 0 .7rem; }
.ssg-latest-card h3 { color:var(--ssg-forest); font:700 1.45rem/1.13 Georgia,serif; margin:0 0 .8rem; }
.ssg-latest-card h3 a { color:inherit; text-decoration:none; }
.ssg-latest-card h3 a:hover { color:var(--ssg-clay); }
.ssg-latest-card-content > p:not(.ssg-post-date) { line-height:1.55; margin:0 0 1.2rem; }
.ssg-read-link { margin-top:auto; }
.ssg-all-guides-link { margin: 30px 0 0; text-align:center; }
.ssg-guides-page { padding:72px 0; }
.ssg-guides-page-header { margin:0 0 38px; max-width:700px; }
.ssg-guides-page-header h1 { color:var(--ssg-forest); font:700 clamp(2.6rem,5vw,4.6rem)/1 Georgia,serif; margin:.35rem 0 1rem; }
.ssg-guides-page-header > p:last-child { color:#5c6d61; font-size:1.08rem; line-height:1.6; }
.ssg-filter-summary { background:var(--ssg-sage); border-left:4px solid var(--ssg-leaf); margin:0 0 30px; padding:1rem 1.15rem; }
.ssg-filter-summary a { color:var(--ssg-forest); font-weight:700; }
.ssg-all-guides-grid .ssg-latest-card h2 { color:var(--ssg-forest); font:700 1.45rem/1.13 Georgia,serif; margin:0 0 .8rem; }
.ssg-all-guides-grid .ssg-latest-card h2 a { color:inherit; text-decoration:none; }
.ssg-all-guides-grid .ssg-latest-card h2 a:hover { color:var(--ssg-clay); }
.ssg-pagination { margin-top:42px; }
.ssg-pagination .page-numbers { display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; }
.ssg-pagination a, .ssg-pagination .current { border:1px solid #d7d3c8; border-radius:.4rem; color:var(--ssg-forest); display:inline-block; padding:.5rem .75rem; text-decoration:none; }
.ssg-pagination .current { background:var(--ssg-forest); border-color:var(--ssg-forest); color:#fff; }
.ssg-space-grid, .ssg-guide-grid { display:grid; gap:20px; grid-template-columns:repeat(3,1fr); }
.ssg-space-card, .ssg-guide-card { background:#fffdf8; border:1px solid #e6dfd1; border-radius:16px; overflow:hidden; }
/* Category cards intentionally keep the illustration above the copy, like the visual mockup. */
.ssg-space-visual { align-items:flex-end; aspect-ratio:1/.82; background:#fffdf8; display:flex; justify-content:center; overflow:hidden; padding:0; }
.ssg-space-visual img { display:block; height:100%; object-fit:cover; object-position:center center; width:100%; }
.ssg-space-card-content, .ssg-guide-card-content { padding:22px; }
.ssg-space-card h3, .ssg-guide-card h3 { color:var(--ssg-forest); font:700 1.7rem/1.1 Georgia,serif; margin:0 0 10px; }
.ssg-space-card a, .ssg-guide-card a { color:var(--ssg-clay); font-weight:700; text-decoration:none; }
.ssg-guide-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
.ssg-guide-card { display:grid; grid-template-columns: 38% 1fr; min-height:230px; }
.ssg-guide-visual { align-items:center; background:linear-gradient(150deg,#edf4e7,#f8f0dc); display:flex; font-size:4.8rem; justify-content:center; }
.ssg-guide-visual img { display:block; height:100%; object-fit:cover; width:100%; }
.ssg-guide-card h3 { font-size:1.55rem; }
.ssg-article { max-width:760px; padding:72px 0; }
.ssg-article h1 { color:var(--ssg-forest); font:700 clamp(2.6rem,5vw,4.6rem)/1 Georgia,serif; }
.ssg-article-featured-image { margin:28px 0 38px; }
.ssg-article-featured-image img { border-radius:16px; display:block; height:auto; max-width:100%; width:100%; }
.ssg-index-article { border-bottom:1px solid #e6dfd1; margin:0 0 30px; overflow:hidden; padding:0 0 30px; }
.ssg-index-thumbnail { display:block; float:left; margin:0 24px 10px 0; width:220px; }
.ssg-index-thumbnail img { border-radius:12px; display:block; height:150px; object-fit:cover; width:100%; }
.ssg-footer { background:var(--ssg-forest); color:#f1f5e7; margin-top:70px; padding:42px 0; }
.ssg-footer a { color:#fff; }

.ssg-site-header { border-bottom: 1px solid rgba(35, 71, 53, .12); }
.ssg-brand a { color: var(--ssg-forest); text-decoration: none; }
.ssg-nav a { color: var(--ssg-ink); text-decoration: none; font-weight: 600; }
.ssg-nav a:hover { color: var(--ssg-clay); }

.ssg-hero {
	background: radial-gradient(circle at 84% 18%, #d8e9bf 0, #d8e9bf 13%, transparent 13.5%), linear-gradient(135deg, #eef5e9 0%, #f8f4e9 65%, #f2dcc9 100%);
	border-radius: 1.5rem;
	margin-top: 1.5rem;
	overflow: hidden;
}
.ssg-eyebrow { color: var(--ssg-leaf); font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ssg-hero h1 { color: var(--ssg-forest); letter-spacing: -.045em; max-width: 12ch; }
.ssg-hero p { max-width: 42rem; }

.ssg-card-grid { gap: 1rem; }
.ssg-card {
	background: #fff;
	border: 1px solid rgba(35, 71, 53, .11);
	border-radius: 1rem;
	box-shadow: 0 4px 18px rgba(35, 71, 53, .05);
	height: 100%;
	transition: transform .18s ease, box-shadow .18s ease;
}
.ssg-card:hover { box-shadow: 0 11px 26px rgba(35, 71, 53, .12); transform: translateY(-3px); }
.ssg-card a { color: var(--ssg-forest); text-decoration: none; }
.ssg-card p { margin-bottom: 0; }

.ssgg-finder { box-shadow: 0 10px 28px rgba(35, 71, 53, .09); }
.ssgg-conditions { border-radius: .35rem; }
.wp-block-post-title a { color: var(--ssg-forest); text-decoration: none; }
.wp-block-post-title a:hover { color: var(--ssg-clay); }
.wp-block-post-template > li { border-bottom: 1px solid rgba(35, 71, 53, .12); padding-bottom: 2rem; }
body.home .wp-block-query.is-layout-grid {
	width: 100%;
}
body.home .wp-block-query.is-layout-grid > ul.wp-block-post-template.is-layout-flow {
	display: grid !important;
	width: 100%;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 1.25rem;
}
body.home ul.wp-block-post-template.is-layout-flow > li { border-bottom: 0; padding-bottom: 0; margin: 0; width: auto; }
.wp-block-post-date, .wp-block-post-author-name { color: #597266; font-size: .9rem; }
.ssg-footer { background: var(--ssg-forest); color: #eef5e9; margin-top: 4rem; }
.ssg-footer a { color: #fff; }

@media (max-width: 760px) {
	.ssg-header-inner { min-height:72px; }
	.ssg-menu { gap: .8rem; font-size:.85rem; }
	.ssg-hero-copy { padding:62px 0 130px; }
	.ssg-hero-original { background-position: 72% bottom; background-size: auto 78%; }
	.ssg-space-grid, .ssg-guide-grid, .ssg-latest-grid { grid-template-columns:1fr; }
	.ssg-section-heading { align-items:start; flex-direction:column; }
	.ssg-guide-card { grid-template-columns: 34% 1fr; }
	.ssg-hero { border-radius: 1rem; margin-top: .75rem; }
	.ssg-hero h1 { font-size: clamp(2.55rem, 13vw, 4rem); }
	body.home ul.wp-block-post-template.is-layout-flow { grid-template-columns: 1fr !important; }
}