/**
 * Green Country Online Child - Phase 2 site chrome.
 * Homepage, listing/term pages, search results, footer, buttons.
 * Uses Kadence's palette custom properties where available, with fallbacks.
 */

:root {
	--gco-accent: var(--global-palette1, #2f6b3d);
	--gco-accent-dark: var(--global-palette2, #234f2d);
	--gco-ink: var(--global-palette3, #1a1f1a);
	--gco-text: var(--global-palette4, #33383f);
	--gco-muted: var(--global-palette5, #5c6670);
	--gco-border: var(--global-palette6, #e2e6e3);
	--gco-surface: var(--global-palette7, #f5f7f4);
	--gco-surface-2: var(--global-palette8, #eef1ed);
	--gco-white: var(--global-palette9, #ffffff);
	--gco-max: 1140px;
}

/* --- Shared container ------------------------------------------------- */
.gco-container {
	max-width: var(--gco-max);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.gco-home .gco-section,
.gco-terms-page,
.gco-archive,
.gco-search-results {
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.gco-section + .gco-section {
	border-top: 1px solid var(--gco-border);
}

.gco-section > .gco-container > h2 {
	margin-top: 0;
	font-size: clamp(1.4rem, 3vw, 1.9rem);
}

.gco-section__lead {
	color: var(--gco-muted);
	max-width: 60ch;
	margin-top: .25rem;
}

.gco-section__note {
	margin-top: 1rem;
	font-weight: 600;
}

/* --- Buttons ------------------------------------------------------- */
.gco-btn {
	display: inline-block;
	padding: .7rem 1.25rem;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
	border: 1px solid transparent;
}

.gco-btn + .gco-btn {
	margin-left: .5rem;
}

.gco-btn--primary {
	background: var(--gco-accent);
	color: var(--gco-white);
}

.gco-btn--primary:hover,
.gco-btn--primary:focus {
	background: var(--gco-accent-dark);
	color: var(--gco-white);
}

.gco-btn--ghost {
	border-color: currentColor;
	color: var(--gco-accent);
	background: transparent;
}

/* --- Hero -----------------------------------------------------------------
 * Homepage only (scoped to .gco-home). Downtown photo as a CSS background with
 * a left-to-right dark gradient so the white HTML text stays readable while the
 * storefronts and food truck toward the centre/right remain visible. All hero
 * copy is live HTML text; nothing is baked into the image. The dark
 * background-color is a deliberate fallback: if the JPG is missing the hero is
 * still a readable dark panel rather than broken.
 * ---------------------------------------------------------------------- */
.gco-home .gco-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 560px;
	padding-block: clamp(2.5rem, 7vw, 5rem);
	color: #ffffff;
	background-color: #141c15;
	background-image:
		linear-gradient(
			to right,
			rgba(12, 20, 13, 0.84) 0%,
			rgba(12, 20, 13, 0.62) 38%,
			rgba(12, 20, 13, 0.24) 72%,
			rgba(12, 20, 13, 0.08) 100%
		),
		url("../images/hero-downtown.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 62% center;
}

.gco-home .gco-hero .gco-container {
	position: relative;
	z-index: 1;
}

.gco-home .gco-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .8rem;
	font-weight: 700;
	color: #e8efe6;
	margin: 0 0 .75rem;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.gco-home .gco-hero__title {
	margin: 0;
	font-size: clamp(1.9rem, 5vw, 3rem);
	line-height: 1.12;
	max-width: 20ch;
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.gco-home .gco-hero__lead {
	margin: 1.1rem 0 1.75rem;
	font-size: clamp(1rem, 2.2vw, 1.2rem);
	max-width: 54ch;
	color: rgba(255, 255, 255, .93);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

.gco-home .gco-hero__actions {
	margin: 0;
}

.gco-home .gco-hero .gco-btn--ghost {
	color: #ffffff;
	border-color: rgba(255, 255, 255, .8);
}

.gco-home .gco-hero .gco-btn--ghost:hover,
.gco-home .gco-hero .gco-btn--ghost:focus {
	background: rgba(255, 255, 255, .14);
	color: #ffffff;
}

/* Tablet: a touch shorter, nudge the framing toward the storefronts. */
@media (max-width: 900px) {
	.gco-home .gco-hero {
		min-height: 500px;
		background-position: 68% center;
	}
}

/* Mobile crop: flat overlay (text spans more width) and shift right so the
 * food truck and storefronts stay in frame. */
@media (max-width: 600px) {
	.gco-home .gco-hero {
		min-height: 440px;
		background-image:
			linear-gradient(
				to bottom,
				rgba(12, 20, 13, 0.58) 0%,
				rgba(12, 20, 13, 0.64) 100%
			),
			url("../images/hero-downtown.jpg");
		background-position: 72% center;
	}
}

/* --- Search form ---------------------------------------------- */
.gco-search {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 1rem;
	max-width: 520px;
}

.gco-search input[type="search"] {
	flex: 1 1 220px;
	padding: .65rem .8rem;
	border: 1px solid var(--gco-border);
	border-radius: 6px;
	font-size: 1rem;
}

.gco-search button {
	padding: .65rem 1.2rem;
	border: 0;
	border-radius: 6px;
	background: var(--gco-accent);
	color: var(--gco-white);
	font-weight: 600;
	cursor: pointer;
}

.gco-search button:hover,
.gco-search button:focus {
	background: var(--gco-accent-dark);
}

/* --- Card grid (reused from business.css class name) --------- */
.gco-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
	margin-top: 1.5rem;
}

/* --- Term link grid --------------------------------------- */
.gco-term-grid {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: .6rem;
}

.gco-term-grid a {
	display: block;
	padding: .8rem 1rem;
	background: var(--gco-surface);
	border: 1px solid var(--gco-border);
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	color: var(--gco-ink);
}

.gco-term-grid a:hover,
.gco-term-grid a:focus {
	background: var(--gco-surface-2);
	border-color: var(--gco-accent);
}

/* --- Value section --------------------------------------- */
.gco-value-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.gco-value-card {
	background: var(--gco-surface);
	border-radius: 8px;
	padding: 1.25rem;
}

.gco-value-card h3 {
	margin: 0 0 .4rem;
	font-size: 1.05rem;
}

.gco-value-card p {
	margin: 0;
	color: var(--gco-text);
	font-size: .95rem;
}

/* --- CTA ------------------------------------------------- */
.gco-section--cta .gco-container {
	background: var(--gco-accent);
	color: var(--gco-white);
	border-radius: 10px;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	text-align: center;
}

.gco-section--cta h2 {
	color: var(--gco-white);
}

.gco-section--cta .gco-section__lead {
	color: rgba(255, 255, 255, .9);
	margin-inline: auto;
}

.gco-section--cta .gco-btn--primary {
	background: var(--gco-white);
	color: var(--gco-accent-dark);
}

/* --- Archive / term-page headers ------------------------ */
.gco-archive__header,
.gco-terms-page__header {
	margin-bottom: 1.5rem;
}

.gco-archive__intro {
	color: var(--gco-muted);
	max-width: 60ch;
}

.gco-terms-page__back,
.gco-search-results .pagination {
	margin-top: 1.5rem;
}

/* --- Empty states -------------------------------------- */
.gco-empty {
	color: var(--gco-muted);
}

.gco-empty--panel {
	background: var(--gco-surface);
	border: 1px solid var(--gco-border);
	border-radius: 8px;
	padding: 1.5rem;
	margin-top: 1.5rem;
}

.gco-empty--panel h2 {
	margin-top: 0;
	color: var(--gco-ink);
}

.gco-empty__actions {
	margin-top: 1rem;
}

/* --- Search result list ------------------------------- */
.gco-results .gco-result {
	padding: 1rem 0;
	border-bottom: 1px solid var(--gco-border);
}

.gco-results .gco-result h2 {
	margin: 0 0 .25rem;
	font-size: 1.15rem;
}

/* --- Footer (replaces Kadence's) ---------------------- */
#colophon.site-footer,
.site-footer.site-footer {
	display: none;
}

.gco-footer {
	background: var(--gco-ink);
	color: #d8ddd8;
	padding-block: 2.5rem;
	margin-top: 3rem;
}

.gco-footer__inner {
	display: grid;
	gap: 1rem;
}

.gco-footer__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--gco-white);
}

.gco-footer__tag {
	margin: .35rem 0 0;
	max-width: 50ch;
	font-size: .95rem;
}

.gco-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.1rem;
}

.gco-footer__nav a {
	color: #d8ddd8;
	text-decoration: none;
	font-weight: 600;
	font-size: .95rem;
}

.gco-footer__nav a:hover,
.gco-footer__nav a:focus {
	color: var(--gco-white);
	text-decoration: underline;
}

.gco-footer__legal {
	margin: 0;
	font-size: .85rem;
	color: #9fa89f;
}

@media (min-width: 720px) {
	.gco-footer__inner {
		grid-template-columns: 1fr auto;
		align-items: start;
	}

	.gco-footer__legal {
		grid-column: 1 / -1;
	}
}