/*
Theme Name: Lake Spivey Genesis
Theme URI: https://deploypete.com
Description: Genesis child theme recreating the Lake Spivey Golf Club site. Serves as the legacy "before" state for the Pete Panel + MCP modernization demo.
Author: Pedro Consuegra
Author URI: https://pedroconsuegra.com
Version: 1.0.0
Template: genesis
Text Domain: lakespivey
*/

/* ---------------------------------------------------------------------------
   Base - deliberately in the dated Genesis idiom: system fonts, boxy layout,
   heavy green, tight max-width. This is what we are modernizing away from.
--------------------------------------------------------------------------- */
:root {
	--green: #1f5c34;
	--green-dark: #163f24;
	--gold: #c9a227;
	--ink: #333;
	--wrap: 1140px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
	background: #fff;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

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

/* ---------------------------------------------------------------------------
   Utility bar (injected via genesis_before_header)
--------------------------------------------------------------------------- */
.utility-bar {
	background: var(--green-dark);
	color: #fff;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.utility-bar .wrap {
	display: flex;
	align-items: center;
	gap: 18px;
	height: 40px;
}
.utility-link { color: #fff; text-decoration: none; }
.utility-cta { background: var(--gold); color: #222; padding: 6px 14px; font-weight: bold; }
.utility-social { margin-left: auto; display: flex; gap: 10px; }
.utility-social a {
	width: 24px; height: 24px; line-height: 24px; text-align: center;
	background: #fff; color: var(--green-dark); border-radius: 50%;
	text-decoration: none; font-size: 12px; font-weight: bold;
}

/* ---------------------------------------------------------------------------
   Site header + primary nav (Genesis default markup)
--------------------------------------------------------------------------- */
.site-header { background: #fff; border-bottom: 4px solid var(--green); }
.site-header .wrap { display: flex; align-items: center; min-height: 90px; }
.site-title { font-size: 26px; margin: 0; }
.site-title a { color: var(--green); text-decoration: none; text-transform: uppercase; letter-spacing: .03em; }
.site-description { color: #888; font-style: italic; margin: 0 0 0 12px; }

.genesis-nav-menu { background: var(--green); }
.genesis-nav-menu .wrap { display: flex; }
.genesis-nav-menu a {
	display: block; color: #fff; text-decoration: none;
	padding: 14px 18px; font-size: 14px; text-transform: uppercase;
}
.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a { background: var(--green-dark); }

/* ---------------------------------------------------------------------------
   Hero slider
--------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero-track { display: flex; }
.hero-slide {
	flex: 0 0 100%;
	height: 460px;
	background-size: cover;
	background-position: center;
	animation: heroFade 12s infinite;
}
.hero-slide:nth-child(2) { animation-delay: 4s; }
.hero-slide:nth-child(3) { animation-delay: 8s; }
/* Simple CSS-only rotation for the demo; no JS dependency. */
.hero-track { width: 100%; }
@keyframes heroFade { 0%,28% { opacity: 1; } 33%,100% { opacity: .55; } }

/* ---------------------------------------------------------------------------
   Welcome block
--------------------------------------------------------------------------- */
.welcome { padding: 46px 0; text-align: center; background: #f6f7f5; }
.welcome h1 {
	color: var(--green);
	font-size: 30px;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin: 0 0 18px;
}
.welcome p { max-width: 900px; margin: 0 auto 16px; }

/* ---------------------------------------------------------------------------
   Feature cards - the boxy 4-up grid typical of these Genesis golf sites
--------------------------------------------------------------------------- */
.feature-cards { padding: 40px 0 56px; }
.cards-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.card {
	border: 1px solid #ddd;
	background: #fff;
	text-align: center;
	padding-bottom: 20px;
}
.card-img { height: 150px; background-size: cover; background-position: center; }
.card h3 {
	color: var(--green);
	text-transform: uppercase;
	font-size: 17px;
	margin: 16px 10px 8px;
}
.card p { font-size: 14px; color: #555; padding: 0 16px; min-height: 66px; }
.btn {
	display: inline-block;
	background: var(--green);
	color: #fff;
	text-decoration: none;
	padding: 9px 20px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.btn:hover { background: var(--green-dark); }

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */
.site-footer {
	background: var(--green-dark);
	color: #cfe0d4;
	padding: 40px 0 24px;
	font-size: 14px;
}
.footer-columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	max-width: var(--wrap);
	margin: 0 auto 24px;
	padding: 0 20px;
	text-align: left;
}
.footer-columns h4 { color: #fff; text-transform: uppercase; font-size: 15px; margin: 0 0 10px; }
.footer-columns a { color: var(--gold); }
.site-copyright { text-align: center; color: #9db8a5; font-size: 13px; }

/* ---------------------------------------------------------------------------
   Responsive - minimal, as these older themes tended to be
--------------------------------------------------------------------------- */
@media (max-width: 980px) {
	.cards-grid { grid-template-columns: repeat(2, 1fr); }
	.footer-columns { grid-template-columns: 1fr; }
	.genesis-nav-menu .wrap { flex-wrap: wrap; }
}
@media (max-width: 560px) {
	.cards-grid { grid-template-columns: 1fr; }
	.hero-slide { height: 300px; }
	.site-header .wrap { flex-direction: column; min-height: 0; padding: 14px 20px; }
}