/*
Theme Name: Engle Haven
Theme URI: https://englehaven.com
Description: Companion child theme for Engle Haven, a luxury cabin retreat in the Smoky Mountains. Child of Hello Elementor — supplies the design tokens (forest-night palette, Cormorant Garamond + Jost), Google Fonts, and the mountain-ridge divider motif. All page layout is built in Elementor.
Author: Barron AI Solutions
Author URI: https://sbarron.com
Template: hello-elementor
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: engle-haven
*/

/* ------------------------------------------------------------------ *
 * Design tokens — Engle Haven
 * The palette and type are also set in the Elementor Kit (Site
 * Settings) so the client can adjust them in the editor. These CSS
 * variables back the theme-level motifs and the barron-* plugins.
 * ------------------------------------------------------------------ */
:root {
    --eh-forest-night: #1A211C;
    --eh-deep-pine:    #0F140F;
    --eh-haven-gold:   #C8941E;
    --eh-gold-soft:    #E0B654;
    --eh-warm-cream:   #F4EFE6;
    --eh-mist-sage:    #8A9A8B;

    /* Hooks consumed by barron-contact (duo form) + barron-compare */
    --bc-accent:     #C8941E;
    --bc-accent-ink: #1A211C;
    --bc-border:     rgba(244, 239, 230, 0.22);
    --bc-muted:      #8A9A8B;
}

/* ------------------------------------------------------------------ *
 * Base — quiet defaults. Elementor owns section/page layout; this
 * only sets the page canvas and typographic baseline so unstyled
 * fragments still read as Engle Haven.
 * ------------------------------------------------------------------ */
body {
    background-color: var(--eh-forest-night);
    color: var(--eh-warm-cream);
    font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: 0.01em;
}

a {
    color: var(--eh-haven-gold);
}

/* ------------------------------------------------------------------ *
 * Mountain-ridge divider motif — the logo's ridgeline echoed as a
 * section separator. Drop the class `eh-ridge` on any element (an
 * Elementor HTML widget or a container's CSS class field) to render
 * a thin gold ridge rule.
 * ------------------------------------------------------------------ */
.eh-ridge {
    display: block;
    width: 100%;
    height: 28px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 220px 28px;
    /* A simple peak line — gold stroke on transparent. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='28' viewBox='0 0 220 28'%3E%3Cpath d='M2 24 L46 8 L74 18 L110 2 L150 16 L182 6 L218 22' fill='none' stroke='%23C8941E' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
    opacity: 0.85;
}

.eh-ridge--center {
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------------------ *
 * Scroll-reveal — opt-in fade-up, progressive enhancement.
 *
 * Markup ships visible. reveal.js (and only reveal.js) adds
 * `eh-reveal-start` — the hidden state — then `eh-reveal-in` to
 * reveal. With JS off or failed, neither class is added and content
 * stays fully visible. The animation is never load-bearing.
 * ------------------------------------------------------------------ */
.eh-reveal-start {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
}

.eh-reveal-start.eh-reveal-in {
    opacity: 1;
    transform: translateY(0);
}