/* Theme: Custom ("Fairway") — fancy, upscale equestrian estate look.
   Palette/fonts/shapes matched directly against the original Fairway Farm
   template (css/style.css, bundled with the template zip): near-black +
   deep brown with warm gold accents, Cormorant Garamond for headings,
   Marcellus for small caps/labels, Montserrat for body text. Reserved for
   plans with includes_custom_template = 1 (see
   App\Models\SiteTemplate::availableForSetup()). */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Marcellus&family=Montserrat:wght@400;500;600;700&display=swap');

:root {
    --color-primary: #2e1f16;      /* brown-deep */
    --color-primary-dark: #14110f; /* black */
    --color-accent: #c9a05c;       /* gold */
    --color-accent-light: #e6cd9c; /* gold-light */
    --color-bg: #faf6ef;           /* cream */
    --color-bg-alt: #f2ead9;       /* cream-2 */
    --color-text: #3a332b;
    --color-text-muted: #6f6656;
    --color-border: #e4dcc9;
    --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-accent: 'Marcellus', 'Cormorant Garamond', serif;
    --header-align: center;
    --radius: 8px;
    --radius-lg: 14px;
    --shadow-md: 0 20px 50px rgba(20,17,15,.22);
}

body { letter-spacing: .01em; }

/* ---------- Header ----------
   The original template's nav is fixed and transparent, floating directly
   over a full-bleed hero photo, then turning into a solid blurred bar once
   you scroll (effects.js already toggles .is-scrolled on .site-header for
   every theme -- this just gives that state something dramatic to do).
   There's no utility (phone/email) bar in the original design at all. */

.utility-bar { display: none; }

.site-header {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
    background: transparent; border-bottom: none; box-shadow: none;
    transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.site-header.is-scrolled {
    background: rgba(20,17,15,.92);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(230,205,156,.25);
    box-shadow: 0 6px 30px rgba(0,0,0,.25);
}
.site-header-inner { flex-direction: column; padding-bottom: .6rem; }
.site-brand, .site-brand span { color: #fff; font-size: 1.5rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-accent); }
.site-nav { justify-content: center; padding-top: .6rem; border-top: 1px solid rgba(230,205,156,.18); width: 100%; }
.site-nav a { color: rgba(250,246,239,.85); text-transform: uppercase; font-size: .78rem; letter-spacing: .1em; font-weight: 500; }
.site-nav a:hover { color: var(--color-accent-light); }
.site-nav-cta { border: 1px solid var(--color-accent-light); border-radius: 30px; padding: .5rem 1.1rem !important; color: var(--color-accent-light) !important; }
.site-nav-cta:hover { background: var(--color-accent-light); color: var(--color-primary-dark) !important; }

/* Compensates for the header no longer taking up space in normal flow
   (it's fixed): every page gets breathing room below it, except the
   home page's hero, which cancels that out to sit flush at the very top,
   full-bleed, with the transparent nav floating on top of the photo. */
main { padding-top: 130px; }
.hero { margin-top: -130px; }

/* So the fixed header doesn't cover the top of a section when the nav
   scrolls to it (e.g. clicking "Facility" in the nav). */
#about, #trainer, #facility, #awards, #horses-for-sale, #gallery, #location { scroll-margin-top: 110px; }

/* ---------- Hero ---------- */

.hero {
    min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 6rem 1.5rem; background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}
.hero::before { background: radial-gradient(circle at 80% 20%, rgba(201,160,92,.28) 0%, transparent 50%); }
.hero img.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; z-index: 0; }
.hero h1, .hero p, .hero-divider { position: relative; z-index: 1; }
.hero h1 { font-family: var(--font-heading); font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 600; letter-spacing: .02em; }
.hero p { font-family: var(--font-accent); font-style: normal; font-size: 1.25rem; color: rgba(250,246,239,.85); }
.hero-divider { width: 100px; height: 2px; background: var(--color-accent); }
.hero-divider::before, .hero-divider::after { content: '✦'; color: var(--color-accent); position: absolute; top: -9px; font-size: .8rem; }
.hero-divider::before { left: -18px; }
.hero-divider::after { right: -18px; }

/* ---------- Sections & typography ---------- */

.section { padding: 6.5rem 1.5rem; }
.section h2 { font-family: var(--font-heading); font-weight: 600; font-size: clamp(2rem, 3.5vw, 2.8rem); letter-spacing: .01em; }
.section h2::after { content: ''; display: block; width: 60px; height: 2px; background: var(--color-accent); margin: 1rem auto 0; }
.section-eyebrow { font-family: var(--font-accent); font-style: normal; font-size: .85rem; letter-spacing: .2em; }

.card-box, .animal-card, .faq-item, .facility-card, .award-photo, .gallery-item, .info-card {
    border-radius: var(--radius-lg);
    border-color: var(--color-border);
}
.card-box:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(20,17,15,.16); border-color: var(--color-accent); }

.btn-cta, .cta-btn {
    border-radius: 40px; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; font-weight: 600;
    background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent)); color: var(--color-primary-dark);
    padding: .95rem 2rem;
}
.btn-cta:hover, .cta-btn:hover { box-shadow: 0 14px 30px rgba(201,160,92,.4); }
.btn-cta-ghost { background: rgba(250,246,239,.08); border: 1px solid rgba(230,205,156,.5); color: var(--color-accent-light); }
.btn-cta-ghost:hover { background: rgba(230,205,156,.18); box-shadow: none; }

/* ---------- Marquee ---------- */

.marquee-strip { background: var(--color-primary-dark); border-top: 1px solid rgba(230,205,156,.2); border-bottom: 1px solid rgba(230,205,156,.2); }
.marquee-track span { font-family: var(--font-accent); letter-spacing: .18em; color: var(--color-accent-light); }

/* ---------- About stats (stats-strip reused as the glam callout row) ---------- */

.stats-strip { background: var(--color-primary); border-bottom: none; }
.stat-item .stat-num { font-family: var(--font-heading); background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-size: 2.2rem; }
.stat-item .stat-label { color: rgba(255,255,255,.75); font-family: var(--font-accent); letter-spacing: .08em; }

/* ---------- Trainer spotlight ---------- */

.trainer-spotlight { background: var(--color-primary-dark); color: #f4ecd8; border-radius: var(--radius-lg); }
.trainer-spotlight .section-eyebrow { color: var(--color-accent-light); }
.trainer-spotlight h2 { color: #fff; }
.trainer-spotlight-role { color: var(--color-accent-light) !important; font-family: var(--font-accent); font-style: normal; font-size: 1.1rem; }
.trainer-spotlight-copy p { color: rgba(244,236,216,.85); }
.trainer-spotlight-quote { border-left-color: var(--color-accent); color: var(--color-accent-light); font-family: var(--font-heading); }
.trainer-spotlight-media img { border-radius: var(--radius-lg); box-shadow: 0 25px 60px rgba(0,0,0,.5); }

/* ---------- Facility grid ---------- */

.facility-card { box-shadow: var(--shadow-md); }
.facility-caption h3 { font-family: var(--font-heading); font-size: 1.3rem; }

/* ---------- Awards & Achievements ---------- */

.awards-showcase-section { background: linear-gradient(160deg, #241a12 0%, var(--color-primary-dark) 100%); color: #f4ecd8; border-radius: var(--radius-lg); }
.awards-showcase-section .section-eyebrow { color: var(--color-accent-light); }
.awards-showcase-section h2 { color: #fff; }
.awards-showcase-section .card-box { background: rgba(250,246,239,.04); border-color: rgba(230,205,156,.18); }
.awards-showcase-section .card-box h3 { color: #fff; font-family: var(--font-heading); font-size: 1.4rem; }
.awards-showcase-section .award-meta, .awards-showcase-section p { color: rgba(244,236,216,.75); }
.award-icon { background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent)); color: var(--color-primary-dark); }
.award-photo-tag { font-family: var(--font-accent); text-transform: none; background: rgba(20,17,15,.7); border: 1px solid rgba(230,205,156,.4); color: var(--color-accent-light); }

/* ---------- Horses for sale ---------- */

.sale-price, .animal-price { font-family: var(--font-accent); color: var(--color-accent); }

/* ---------- Gallery ---------- */

.gallery-item img { filter: saturate(1.05); }
.gallery-note { font-family: var(--font-accent); }

/* ---------- Testimonials ---------- */

.testimonial p { font-family: var(--font-heading); font-style: italic; font-size: 1.1rem; }
.testimonial .quote-icon { color: var(--color-accent); }

/* ---------- Location / info cards ---------- */

.info-card { box-shadow: var(--shadow-md); border: none; }
.info-card i { background: var(--color-bg-alt); color: var(--color-accent); }
.info-card h3 { font-family: var(--font-heading); }
.social-links a { background: var(--color-primary-dark); color: var(--color-accent-light); border: none; }
.social-links a:hover { background: var(--color-accent); color: var(--color-primary-dark); }

/* ---------- Footer ---------- */

.site-footer { background: var(--color-primary-dark); }
.site-footer h4, .site-footer strong { font-family: var(--font-accent); letter-spacing: .08em; }
.site-footer-col p i { color: var(--color-accent); }