/*
Theme Name: Vanessa & Logan
Theme URI: https://abqfinestwebdesign.com/
Author: Albuquerque's Finest Web Design
Author URI: https://abqfinestwebdesign.com/
Description: Custom wedding theme for Vanessa & Logan with LAV style controller support.
Version: 36.24.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: Private
Text Domain: lav
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
	--lav-cream:        #faf7f2;
	--lav-white:        #ffffff;
	--lav-gold:         #b8965a;
	--lav-gold-light:   #d4b483;
	--lav-gold-pale:    #f7f1e8;
	--lav-charcoal:     #2c2c2c;
	--lav-gray:         #6b6b6b;
	--lav-gray-light:   #e8e4de;

	--lav-font-display: 'Cormorant Garamond', Georgia, serif;
	--lav-font-body:    'Jost', 'Helvetica Neue', sans-serif;
	--lav-font-script:  'Great Vibes', cursive;

	/* Alias tokens — used by style controller & legacy code */
	--lav-primary:      var(--lav-gold);
	--lav-heading-font: var(--lav-font-display);
	--lav-bg:           var(--lav-cream);
	--lav-text:         var(--lav-charcoal);
	--lav-accent:       var(--lav-gold);
	--lav-surface:      var(--lav-white);
	--lav-line:         var(--lav-gray-light);

	--lav-max-width:    1200px;
	--lav-section-pad:  clamp(5rem, 9vw, 8rem);
	--lav-gutter:       clamp(1.25rem, 4vw, 2.5rem);

	/* Radius scale */
	--lav-radius-sm:    6px;
	--lav-radius-md:    16px;
	--lav-radius-lg:    26px;

	/* Style controller compatibility */
	--lav-button-radius: 0px;
	--lav-photo-radius:  50%;
	--lav-style-hero:    var(--lav-charcoal);

	/* Shadow scale */
	--lav-shadow-sm:    0 2px 8px rgba(0,0,0,0.05);
	--lav-shadow-md:    0 8px 28px rgba(0,0,0,0.07);
	--lav-shadow-lg:    0 20px 55px rgba(0,0,0,0.08);

	--lav-transition:   0.25s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
	font-size: 16px;
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
}

body {
	background-color: var(--lav-cream);
	color: var(--lav-charcoal);
	font-family: var(--lav-font-body);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.75;
}

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

a {
	color: var(--lav-gold);
	text-decoration: none;
	transition: color var(--lav-transition);
}

a:hover { color: var(--lav-charcoal); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--lav-font-display);
	font-weight: 400;
	line-height: 1.2;
	color: var(--lav-charcoal);
}

.lav-display {
	font-family: var(--lav-font-display);
	font-size: clamp(3.5rem, 8vw, 7rem);
	font-weight: 300;
	font-style: italic;
	letter-spacing: -0.01em;
	line-height: 1.05;
}

.lav-section-title {
	font-family: var(--lav-font-display);
	font-size: clamp(2rem, 4vw, 3.5rem);
	font-weight: 300;
	font-style: italic;
	margin-bottom: 1rem;
	text-wrap: balance;
}

.lav-eyebrow {
	font-family: var(--lav-font-body);
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--lav-gold);
	display: block;
	margin-bottom: 0.875rem;
}

.lav-script-line {
	display: block;
	font-family: var(--lav-font-script);
	font-size: clamp(2.8rem, 7vw, 6.5rem);
	font-weight: 400;
	line-height: 1;
	color: var(--lav-gold);
	margin-bottom: clamp(1.75rem, 4vw, 3rem);
	letter-spacing: 0;
	text-transform: none;
}

.lav-divider {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 2rem auto;
	max-width: 200px;
}

.lav-divider::before,
.lav-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--lav-gold-light);
}

.lav-divider span { color: var(--lav-gold); font-size: 0.9rem; }

.lav-prose { max-width: 760px; }
.lav-prose p { margin-bottom: 1.25rem; color: var(--lav-gray); font-size: 1rem; line-height: 1.8; }
.lav-prose p:last-child { margin-bottom: 0; }

/* ============================================================
   LAYOUT
   ============================================================ */
.lav-container {
	max-width: var(--lav-max-width);
	margin: 0 auto;
	padding: 0 var(--lav-gutter);
	width: 100%;
}

.lav-narrow { max-width: 760px; }

.lav-section {
	padding: var(--lav-section-pad) 0;
	scroll-margin-top: 80px;
}

.lav-section--alt { background-color: var(--lav-white); }
.lav-text-center { text-align: center; }
.lav-text-center .lav-prose { margin-left: auto; margin-right: auto; }
.lav-section-intro { max-width: 700px; margin: 0 auto 2rem; }

/* ============================================================
   BUTTONS
   ============================================================ */
.lav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.875rem 2.25rem;
	font-family: var(--lav-font-body);
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	border: 1px solid var(--lav-gold);
	color: var(--lav-gold);
	background: transparent;
	cursor: pointer;
	transition: background var(--lav-transition), color var(--lav-transition),
	            border-color var(--lav-transition), box-shadow var(--lav-transition);
	border-radius: var(--lav-button-radius);
	text-decoration: none;
	white-space: nowrap;
}

.lav-btn:hover { background: var(--lav-gold); color: var(--lav-white); }

.lav-btn--solid { background: var(--lav-gold); color: var(--lav-white); }
.lav-btn--solid:hover { background: var(--lav-charcoal); border-color: var(--lav-charcoal); color: var(--lav-white); }

.lav-btn--ghost { background: transparent; color: var(--lav-cream); border-color: rgba(255,255,255,0.5); }
.lav-btn--ghost:hover { background: var(--lav-white); color: var(--lav-charcoal); border-color: var(--lav-white); }

.lav-btn--outline { background: transparent; color: var(--lav-gold); border-color: var(--lav-gold); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes lav-fade-up {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes lav-scroll-hint {
	0%, 100% { opacity: 0; transform: scaleY(0); transform-origin: top; }
	50%       { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

.lav-animate { opacity: 0; }
.lav-animate.is-visible { animation: lav-fade-up 0.75s ease forwards; }
.lav-animate--delay-1 { animation-delay: 0.12s; }
.lav-animate--delay-2 { animation-delay: 0.24s; }
.lav-animate--delay-3 { animation-delay: 0.36s; }

/* ============================================================
   UTILITY
   ============================================================ */
.lav-placeholder-text { color: var(--lav-gray); font-style: italic; font-size: 0.9rem; }
.lav-muted { opacity: 0.72; font-style: italic; }
.lav-inline-link { color: var(--lav-gold); text-decoration: underline; text-underline-offset: 3px; }
.lav-page-crosslinks { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 2rem; }