/*
 * Local Guide Pages – Unified Stylesheet
 * North Shore Vacation Rentals / Hill Country Lakes Rentals
 * File: /assets/css/local-guide.css
 *
 * Covers three templates:
 *   page-island-guide.php       — The Island on Lake Travis
 *   page-hollows-guide.php      — The Hollows on Lake Travis
 *   page-pointventure-guide.php — Point Venture on Lake Travis
 *
 * Strategy: shared structural rules use the .lg- (local-guide) prefix.
 * Per-page theming is applied via a body class:
 *   .lg-theme-island
 *   .lg-theme-hollows
 *   .lg-theme-pointventure
 *
 * No two templates will ever load on the same page, so CSS custom
 * properties are re-declared per theme class rather than at :root.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   1. THEME TOKEN DECLARATIONS
   Each theme class declares the same set of semantic variables so all
   structural rules below can reference them without any theme conditionals.
───────────────────────────────────────────────────────────────────────────── */

/* Island on Lake Travis — navy · gold · teal */
.lg-theme-island {
	--lg-bg:            #F7F3EC;
	--lg-bg-dark:       #0F1D35;
	--lg-bg-mid:        #1B2A4A;
	--lg-bg-card:       #FFFFFF;
	--lg-bg-section:    #F7F3EC;
	--lg-bg-divider:    #1B2A4A;
	--lg-accent:        #C9963A;   /* gold */
	--lg-accent-light:  #E4B86A;
	--lg-accent-pale:   #F0D9A8;
	--lg-muted:         #8896AE;   /* slate */
	--lg-text:          #1B2A4A;
	--lg-text-soft:     #4A5872;
	--lg-border:        #EDE7DA;
	--lg-eyebrow:       #6AADAB;   /* teal-light */
	--lg-serif:         'Cormorant Garamond', Georgia, serif;
	--lg-sans:          'DM Sans', system-ui, sans-serif;
	--lg-h1-weight:     300;
	--lg-h2-weight:     300;
	--lg-badge-bg:      rgba(201,150,58,.1);
	--lg-badge-color:   #C9963A;
	--lg-cta-bg:        #0F1D35;
	--lg-cta-glow:      rgba(201,150,58,.06);
	--lg-footer-border: rgba(201,150,58,.08);
	--lg-footer-muted:  #8896AE;
}

/* The Hollows — nightfall · warm-flint · cedar */
.lg-theme-hollows {
	--lg-bg:            #F4F0E6;
	--lg-bg-dark:       #2E2A35;
	--lg-bg-mid:        #2E2A35;
	--lg-bg-card:       #FFFFFF;
	--lg-bg-section:    #F4F0E6;
	--lg-bg-divider:    #2E2A35;
	--lg-accent:        #C4956A;   /* warm-flint */
	--lg-accent-light:  #E8CBA8;
	--lg-accent-pale:   #E8CBA8;
	--lg-muted:         #A89880;   /* caliche-deep */
	--lg-text:          #2E2A35;
	--lg-text-soft:     #524D5C;
	--lg-border:        #E4DDD0;
	--lg-eyebrow:       #C4956A;   /* warm-flint (no teal equivalent) */
	--lg-serif:         'Lora', Georgia, serif;
	--lg-sans:          'Outfit', system-ui, sans-serif;
	--lg-h1-weight:     400;
	--lg-h2-weight:     400;
	--lg-badge-bg:      rgba(196,149,106,.1);
	--lg-badge-color:   #C4956A;
	--lg-cta-bg:        #2E2A35;
	--lg-cta-glow:      rgba(196,149,106,.06);
	--lg-footer-border: rgba(196,149,106,.08);
	--lg-footer-muted:  #A89880;
}

/* Point Venture — navy · gold (same palette as Island, no teal) */
.lg-theme-pointventure {
	--lg-bg:            #F7F3EC;
	--lg-bg-dark:       #0F1D35;
	--lg-bg-mid:        #1B2A4A;
	--lg-bg-card:       #FFFFFF;
	--lg-bg-section:    #F7F3EC;
	--lg-bg-divider:    #1B2A4A;
	--lg-accent:        #C9963A;
	--lg-accent-light:  #E4B86A;
	--lg-accent-pale:   #F0D9A8;
	--lg-muted:         #8896AE;
	--lg-text:          #1B2A4A;
	--lg-text-soft:     #4A5872;
	--lg-border:        #EDE7DA;
	--lg-eyebrow:       #C9963A;   /* gold, no teal */
	--lg-serif:         'Cormorant Garamond', Georgia, serif;
	--lg-sans:          'DM Sans', system-ui, sans-serif;
	--lg-h1-weight:     300;
	--lg-h2-weight:     300;
	--lg-badge-bg:      rgba(201,150,58,.1);
	--lg-badge-color:   #C9963A;
	--lg-cta-bg:        #0F1D35;
	--lg-cta-glow:      rgba(201,150,58,.06);
	--lg-footer-border: rgba(201,150,58,.08);
	--lg-footer-muted:  #8896AE;
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. BASE RESET (scoped to .lg- elements to avoid theme conflicts)
───────────────────────────────────────────────────────────────────────────── */
.lg-hero,
.lg-section,
.lg-divider-block,
.lg-cta-section,
.lg-footer {
	box-sizing: border-box;
}

.lg-hero *,
.lg-section *,
.lg-divider-block *,
.lg-cta-section *,
.lg-footer * {
	box-sizing: border-box;
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. HERO
───────────────────────────────────────────────────────────────────────────── */
.lg-hero {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: var(--lg-bg-dark);
	position: relative;
	overflow: hidden;
	padding: 80px 24px;
	text-align: center;
}

/* Shared ambient glow — overridden per theme below */
.lg-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Island: dual-radial teal + gold */
.lg-theme-island .lg-hero::before {
	background:
		radial-gradient(ellipse 60% 70% at 20% 50%, rgba(74,142,140,.08)  0%, transparent 60%),
		radial-gradient(ellipse 70% 40% at 80% 20%, rgba(201,150,58,.06)  0%, transparent 60%);
}

/* Hollows: warm amber + lake-dusk */
.lg-theme-hollows .lg-hero::before {
	background:
		radial-gradient(ellipse 60% 50% at 50% 30%, rgba(196,149,106,.08) 0%, transparent 60%),
		radial-gradient(ellipse 50% 60% at 80% 70%, rgba(94,126,138,.06)  0%, transparent 50%);
}

/* Point Venture: single gold centre */
.lg-theme-pointventure .lg-hero::before {
	background:
		radial-gradient(ellipse 70% 50% at 50% 30%, rgba(201,150,58,.08)  0%, transparent 60%);
}

/* ── Island-only pill badge ──────────────────────────────────────────────── */
.lg-island-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: rgba(74,142,140,.1);
	border: 1px solid rgba(74,142,140,.25);
	font-size: 9px;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: #6AADAB;
	font-family: var(--lg-sans);
	margin-bottom: 32px;
	position: relative;
	z-index: 1;
}

.lg-pill-icon {
	font-size: 18px;
}

/* ── Shared hero typography ─────────────────────────────────────────────── */
.lg-hero-eyebrow {
	position: relative;
	z-index: 1;
	font-family: var(--lg-sans);
	font-size: 10px;
	letter-spacing: .4em;
	text-transform: uppercase;
	color: var(--lg-eyebrow);
	opacity: .7;
	margin: 0 0 24px;
	font-weight: 400;
}

.lg-hero-h1 {
	position: relative;
	z-index: 1;
	font-family: var(--lg-serif);
	font-weight: var(--lg-h1-weight);
	font-size: clamp(34px, 7vw, 68px);
	line-height: 1.07;
	color: var(--lg-bg);        /* linen / cream on dark */
	margin: 0 0 20px;
}

/* Hollows linen is slightly warm — explicit override */
.lg-theme-hollows .lg-hero-h1 {
	color: #F4F0E6;
}

.lg-hero-h1 em {
	color: var(--lg-accent);
	font-style: italic;
}

.lg-hero-sub {
	position: relative;
	z-index: 1;
	font-family: var(--lg-sans);
	font-size: clamp(14px, 1.8vw, 17px);
	color: var(--lg-muted);
	max-width: 580px;
	margin: 0 0 48px;
	letter-spacing: .02em;
	line-height: 1.7;
}

/* ── Hero stats ─────────────────────────────────────────────────────────── */
.lg-hero-stats {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	justify-content: center;
}

.lg-h-stat {
	text-align: center;
}

.lg-h-stat-n {
	font-family: var(--lg-serif);
	font-size: clamp(28px, 4vw, 44px);
	color: var(--lg-accent);
	font-weight: var(--lg-h1-weight);
	line-height: 1;
}

/* Hollows uses weight 500 for stat numbers */
.lg-theme-hollows .lg-h-stat-n {
	font-weight: 500;
}

.lg-h-stat-l {
	font-family: var(--lg-sans);
	font-size: 9px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--lg-muted);
	margin-top: 6px;
}

/* ── Scroll nudge ────────────────────────────────────────────────────────── */
.lg-hero-scroll {
	position: relative;
	z-index: 1;
	font-family: var(--lg-sans);
	font-size: 10px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--lg-muted);
	opacity: .4;
	animation: lg-pulse 2s ease infinite;
	margin: 64px 0 0;
}

@keyframes lg-pulse {
	0%, 100% { opacity: .3; }
	50%       { opacity: .7; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. LAYOUT UTILITIES
───────────────────────────────────────────────────────────────────────────── */
.lg-container {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 24px;
}

.lg-section {
	padding: 96px 0;
	background: var(--lg-bg-section);
}


/* ─────────────────────────────────────────────────────────────────────────────
   5. SECTION TYPOGRAPHY
───────────────────────────────────────────────────────────────────────────── */
.lg-sec-label {
	font-family: var(--lg-sans);
	font-size: 10px;
	letter-spacing: .35em;
	text-transform: uppercase;
	font-weight: 400;
	color: var(--lg-accent);
	opacity: .6;
	display: block;
	margin-bottom: 16px;
}

.lg-section-h2 {
	font-family: var(--lg-serif);
	font-weight: var(--lg-h2-weight);
	font-size: clamp(26px, 3.8vw, 42px);
	line-height: 1.17;
	margin: 0 0 16px;
	color: var(--lg-text);
}

.lg-section-h2 em {
	color: var(--lg-accent);
	font-style: italic;
}

.lg-sec-lead {
	font-family: var(--lg-sans);
	font-size: 15px;
	line-height: 1.85;
	color: var(--lg-text-soft);
	max-width: 660px;
	margin: 0 0 48px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   6. TIP CARDS
───────────────────────────────────────────────────────────────────────────── */
.lg-tip-grid {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lg-tip-card {
	background: var(--lg-bg-card);
	padding: 32px;
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 20px;
	border-bottom: 3px solid var(--lg-border);
	transition: border-color .3s;
}

.lg-tip-card:hover {
	border-bottom-color: var(--lg-accent);
}

.lg-tip-icon {
	font-size: 28px;
	padding-top: 2px;
	display: block;
}

.lg-tip-name {
	font-family: var(--lg-serif);
	font-size: 19px;
	color: var(--lg-text);
	font-weight: var(--lg-h2-weight);
	margin: 0 0 6px;
	line-height: 1.3;
}

.lg-tip-body {
	font-family: var(--lg-sans);
	font-size: 13.5px;
	line-height: 1.85;
	color: var(--lg-text-soft);
	margin: 0;
}

.lg-tip-badge {
	display: inline-block;
	font-family: var(--lg-sans);
	font-size: 9px;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: 3px 10px;
	margin-top: 10px;
	background: var(--lg-badge-bg);
	color: var(--lg-badge-color);
	font-weight: 400;
}


/* ─────────────────────────────────────────────────────────────────────────────
   7. PULL QUOTE DIVIDER
───────────────────────────────────────────────────────────────────────────── */
.lg-divider-block {
	padding: 64px 24px;
	text-align: center;
	background: var(--lg-bg-divider);
}

.lg-divider-quote {
	font-family: var(--lg-serif);
	font-size: clamp(18px, 2.8vw, 28px);
	font-weight: var(--lg-h2-weight);
	color: var(--lg-bg);
	line-height: 1.43;
	max-width: 650px;
	margin: 0 auto;
	font-style: italic;
	/* reset WP theme blockquote defaults */
	border: none;
	padding: 0;
	background: none;
}

.lg-theme-hollows .lg-divider-quote {
	color: #F4F0E6;
}

.lg-divider-quote em {
	color: var(--lg-accent);
	font-style: italic;
}

.lg-divider-attr {
	font-family: var(--lg-sans);
	font-size: 10px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--lg-muted);
	margin-top: 16px;
	display: block;
}


/* ─────────────────────────────────────────────────────────────────────────────
   8. CTA SECTION
───────────────────────────────────────────────────────────────────────────── */
.lg-cta-section {
	padding: 96px 24px;
	text-align: center;
	background: var(--lg-cta-bg);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.lg-cta-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 50% at 50% 50%, var(--lg-cta-glow) 0%, transparent 60%);
	pointer-events: none;
}

.lg-cta-h2 {
	position: relative;
	z-index: 1;
	font-family: var(--lg-serif);
	font-weight: var(--lg-h2-weight);
	font-size: clamp(26px, 4.5vw, 48px);
	color: var(--lg-bg);
	line-height: 1.17;
	margin: 0 0 16px;
}

.lg-theme-hollows .lg-cta-h2 {
	color: #F4F0E6;
}

.lg-cta-h2 em {
	color: var(--lg-accent);
	font-style: italic;
}

.lg-cta-sub {
	position: relative;
	z-index: 1;
	font-family: var(--lg-sans);
	font-size: 14px;
	color: var(--lg-muted);
	max-width: 480px;
	margin: 0 0 40px;
	line-height: 1.7;
}

.lg-cta-btn {
	position: relative;
	z-index: 1;
	display: inline-block;
	padding: 16px 40px;
	border: 1px solid var(--lg-accent);
	color: var(--lg-accent);
	font-family: var(--lg-sans);
	font-size: 10px;
	letter-spacing: .3em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .25s, color .25s;
}

.lg-cta-btn:hover,
.lg-cta-btn:focus-visible {
	background: var(--lg-accent);
	color: var(--lg-bg-dark);
	outline: none;
}

.lg-cta-or {
	position: relative;
	z-index: 1;
	font-family: var(--lg-sans);
	font-size: 12px;
	color: var(--lg-muted);
	margin-top: 20px;
	display: block;
	opacity: .6;
}

.lg-cta-phone {
	position: relative;
	z-index: 1;
	font-family: var(--lg-serif);
	font-size: 22px;
	color: var(--lg-bg);
	text-decoration: none;
	display: inline-block;
	margin-top: 8px;
	transition: color .2s;
}

.lg-theme-hollows .lg-cta-phone {
	color: #F4F0E6;
}

.lg-cta-phone:hover {
	color: var(--lg-accent-light);
}


/* ─────────────────────────────────────────────────────────────────────────────
   9. FOOTER
───────────────────────────────────────────────────────────────────────────── */
.lg-footer {
	padding: 40px 24px;
	text-align: center;
	background: var(--lg-cta-bg);
	border-top: 1px solid var(--lg-footer-border);
}

.lg-footer p {
	font-family: var(--lg-sans);
	font-size: 11px;
	color: var(--lg-footer-muted);
	opacity: .4;
	margin: 0;
}

.lg-footer p + p {
	margin-top: 6px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   10. SCROLL REVEAL
───────────────────────────────────────────────────────────────────────────── */
.lg-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .6s ease, transform .6s ease;
}

.lg-reveal.lg-visible {
	opacity: 1;
	transform: translateY(0);
}


/* ─────────────────────────────────────────────────────────────────────────────
   11. RESPONSIVE
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.lg-hero-stats {
		gap: 32px;
	}

	.lg-tip-card {
		grid-template-columns: 1fr;
	}

	.lg-tip-icon {
		font-size: 24px;
		padding-top: 0;
	}
}