/*
Theme Name: The Winning Grounds
Theme URI: https://example.com
Author: The Winning Grounds
Description: Custom theme for The Winning Grounds pickleball court booking website. Pairs with the "TWG Booking" and "TWG PayMaya Gateway" plugins.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: winning-grounds
*/

:root {
	--twg-brand: #c26f4b;
	--twg-accent: #697055;
	--twg-dark: #5e634a;
	--twg-cream: #f4f1ec;
	--twg-ink: #2c2c26;
	--font-heading: 'Playfair Display', Georgia, serif;
	--font-body: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	/* Real, measured header height (14px+14px padding + 58px logo) so every
	   inner page can clear the fixed header with zero extra gap. */
	--twg-header-h: 86px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--twg-ink);
	background: #fff;
	line-height: 1.65;
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	color: var(--twg-dark);
	line-height: 1.2;
	margin: 0 0 0.5em;
}

a { color: var(--twg-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.twg-container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.twg-section { padding: 72px 0; }

.twg-content-narrow { max-width: 780px; margin: 0 auto; }

.twg-eyebrow {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 13px;
	color: var(--twg-brand);
	font-weight: 600;
	margin-bottom: 12px;
}

.twg-btn {
	display: inline-block;
	padding: 15px 34px;
	border-radius: 40px;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.3px;
	cursor: pointer;
	border: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.twg-btn:hover { transform: translateY(-2px); text-decoration: none; }

.twg-btn-primary { background: var(--twg-brand); color: #fff; }
.twg-btn-primary:hover { box-shadow: 0 8px 24px rgba(194,111,75,0.35); color: #fff; }

.twg-btn-hero { background: var(--twg-brand); color: #fff; font-size: 16px; padding: 18px 42px; }

/* ---------------- HEADER ---------------- */
.twg-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	background: rgba(94,99,74,0.0);
	transition: background 0.25s ease, box-shadow 0.25s ease;
	padding: 14px 0;
}
.twg-header.is-scrolled {
	background: rgba(94,99,74,0.96);
	box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
/* Inner pages never show the raw hero, so the header is always solid there
   — give it the same shadow it gets on scroll so it visually separates
   from the page content instead of the two backgrounds bleeding together. */
body:not(.home) .twg-header {
	background: var(--twg-dark);
	box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

/* Every page uses this exact header (get_header() is shared site-wide).
   It matches .twg-container exactly, so the logo's left edge and the
   nav's right edge line up with the page content below — not with the
   browser's outer edges. */
.twg-header-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Logo wrapper: sized to the wordmark's real ~2.84:1 aspect ratio so it
   reads clearly at a glance without dominating the header/footer. */
.twg-logo { display: flex; align-items: center; }
.twg-logo-img,
.custom-logo {
	max-height: 58px;
	width: auto;
	height: auto;
}
.twg-footer-col .twg-logo-img,
.twg-footer-col .custom-logo {
	max-height: 72px;
	margin-bottom: 16px;
}

.twg-nav { display: flex; align-items: center; gap: 28px; }
.twg-nav-menu { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.twg-nav-menu a, .twg-footer-menu a {
	color: #fff;
	font-weight: 500;
	font-size: 15px;
}
.twg-footer-menu { list-style: none; margin: 0; padding: 0; }
.twg-footer-menu li { margin-bottom: 8px; }
.twg-footer-menu a { color: var(--twg-cream); }

.twg-nav-cta {
	background: var(--twg-brand);
	color: #fff !important;
	padding: 10px 22px;
	border-radius: 30px;
	font-weight: 600;
	font-size: 14px;
}

.twg-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
}
.twg-nav-toggle span { width: 26px; height: 2px; background: #fff; display: block; }

/* ---------------- HERO ---------------- */
.twg-hero {
	position: relative;
	height: 100vh;
	min-height: 560px;
	overflow: hidden;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.twg-hero-slider { position: absolute; inset: 0; }
.twg-hero-slide {
	position: absolute; inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.twg-hero-slide.is-active { opacity: 1; }
.twg-hero-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(94,99,74,0.55) 0%, rgba(44,44,38,0.65) 100%);
}
.twg-hero-content {
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: 760px;
	padding: 0 24px;
}
.twg-hero-content .twg-eyebrow { color: #f0d9c9; }
.twg-hero-content h1 {
	color: #fff;
	font-size: 52px;
	margin-bottom: 20px;
}
.twg-hero-subtitle {
	font-size: 18px;
	color: #f4f1ec;
	margin-bottom: 32px;
}
.twg-hero-dots {
	position: absolute;
	bottom: 28px; left: 0; right: 0;
	display: flex;
	justify-content: center;
	gap: 10px;
	z-index: 2;
}
.twg-hero-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: rgba(255,255,255,0.4);
	border: none;
	cursor: pointer;
}
.twg-hero-dot.is-active { background: #fff; }

/* ---------------- HIGHLIGHTS ---------------- */
.twg-highlights-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px;
}
.twg-highlight {
	text-align: center;
	padding: 32px 20px;
	border-radius: 10px;
	background: var(--twg-cream);
}
.twg-highlight h3 { color: var(--twg-brand); }

.twg-cta-band { background: var(--twg-dark); color: #fff; text-align: center; }
.twg-cta-band h2 { color: #fff; }
.twg-cta-band p { color: #e6e1d6; margin-bottom: 24px; }

/* ---------------- INNER PAGE CLEARANCE ---------------- */
/* The header is position:fixed, so every non-home page needs to be pushed
   down by exactly its height once, at the body level. Individual sections
   (page-hero, the map, etc.) then need no extra top offset of their own —
   that's what was causing the stray gap above the map on Contact Us. */
body:not(.home) { padding-top: var(--twg-header-h); }

/* ---------------- PAGE HERO (inner pages) ---------------- */
.twg-page-hero {
	background: var(--twg-dark);
	color: #fff;
	padding: 56px 0;
	text-align: center;
}
.twg-page-hero-compact { padding: 36px 0; }
.twg-page-hero h1 { color: #fff; margin: 0; }

/* ---------------- ABOUT PAGE ---------------- */
.twg-about-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 48px;
	align-items: center;
}
.twg-about-photo { position: relative; }
.twg-about-photo img { border-radius: 10px; }
.twg-founded-badge {
	position: absolute;
	bottom: -18px; right: -18px;
	background: var(--twg-brand);
	color: #fff;
	padding: 14px 20px;
	border-radius: 50%;
	font-weight: 700;
	font-size: 13px;
	text-align: center;
	box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.twg-vision-band { background: var(--twg-cream); text-align: center; }
.twg-vision-quote {
	font-family: var(--font-heading);
	font-style: italic;
	font-size: 26px;
	color: var(--twg-dark);
	max-width: 760px;
	margin: 0 auto;
}

/* ---------------- CONTACT PAGE ---------------- */
.twg-map-full { width: 100%; line-height: 0; }
.twg-map-full iframe { width: 100%; display: block; }
.twg-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 48px;
}
.twg-contact-item { margin-bottom: 26px; }
.twg-contact-item h4 { color: var(--twg-brand); margin-bottom: 6px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; }

/* ---------------- FOOTER ---------------- */
.twg-footer { background: var(--twg-ink); color: var(--twg-cream); padding-top: 56px; }
.twg-footer-inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 40px;
}
.twg-footer h4 { color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: 0.5px; }
.twg-footer p { color: #c9c6bd; font-size: 14px; }
.twg-footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.1);
	padding: 18px 0;
	text-align: center;
	font-size: 13px;
	color: #999;
}

/* ---------------- SHOP / WOOCOMMERCE ---------------- */
.woocommerce ul.products li.product .price { color: var(--twg-brand); font-weight: 600; }
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit,
.woocommerce input.button, .woocommerce-page a.button, .single_add_to_cart_button {
	background: var(--twg-brand) !important;
	color: #fff !important;
	border-radius: 30px !important;
	padding: 12px 26px !important;
	font-weight: 600 !important;
	border: none !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .single_add_to_cart_button:hover {
	background: var(--twg-dark) !important;
}
.woocommerce span.onsale { background: var(--twg-accent) !important; }
/* No extra offset needed here — body:not(.home) already clears the fixed header. */

/* ---------------- MISC ---------------- */
.twg-notice {
	background: #fbe4e0;
	color: #a13c2f;
	padding: 14px 18px;
	border-radius: 8px;
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 900px) {
	.twg-highlights-grid { grid-template-columns: 1fr; }
	.twg-about-grid, .twg-contact-grid { grid-template-columns: 1fr; }
	.twg-footer-inner { grid-template-columns: 1fr; }
	.twg-hero-content h1 { font-size: 36px; }

	.twg-nav-toggle { display: flex; }
	.twg-nav {
		position: absolute;
		top: 100%; left: 0; right: 0;
		background: var(--twg-dark);
		flex-direction: column;
		align-items: flex-start;
		padding: 20px 24px;
		display: none;
	}
	.twg-nav.is-open { display: flex; }
	.twg-nav-menu { flex-direction: column; gap: 16px; }
	.twg-nav-cta { margin-top: 10px; }
}