/* ============================================================
   Joshua Valentine — Brand Design Tokens + Helper Classes
   ============================================================ */

/* ── 1. CSS Custom Properties (design tokens) ─────────────── */
:root {
	/* Colors */
	--jv-gold:          #C28E3C;
	--jv-gold-hover:    #a87830;   /* ~8% darker for hover states */
	--jv-navy:          #0E1B2D;
	--jv-navy-hover:    #0a1522;
	--jv-navy-card:     #13243A;
	--jv-cream:         #F3F0EA;
	--jv-text-dark:     #16202E;
	--jv-text-muted-lt: #5B6573;   /* body copy on cream */
	--jv-text-muted-dk: #9AA6B5;   /* body copy on navy */
	--jv-hero-subtext:  #C5CDD9;   /* paragraphs + footer links on dark */
	--jv-white:         #FFFFFF;
	--jv-hairline-dk:   rgba(255, 255, 255, 0.12);
	--jv-hairline-dk-lo: rgba(255, 255, 255, 0.06);  /* header border */
	--jv-stats-bg:      rgba(255, 255, 255, 0.035);
	--jv-stats-border:  rgba(255, 255, 255, 0.14);
	--jv-social-bg:     rgba(255, 255, 255, 0.08);

	/* Typography */
	--jv-font-display: 'Oswald', sans-serif;
	--jv-font-body:    'Hanken Grotesk', sans-serif;

	/* Spacing */
	--jv-content-width:  1200px;
	--jv-content-pad:    48px;

	/* Radii */
	--jv-radius-btn:  3px;
	--jv-radius-card: 4px;
	--jv-radius-stat: 8px;

	/* Shadows */
	--jv-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* ── 2. Base / Reset ──────────────────────────────────────── */
html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: var(--jv-font-body);
	color: var(--jv-text-dark);
}

/* ── 3. Button Helper Classes ─────────────────────────────── */

/* Shared base */
.jv-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	font-family:     var(--jv-font-display);
	font-size:       12px;
	font-weight:     600;
	text-transform:  uppercase;
	letter-spacing:  1.5px;
	line-height:     1;
	padding:         16px 26px;
	border-radius:   var(--jv-radius-btn);
	border:          1px solid transparent;
	cursor:          pointer;
	text-decoration: none;
	transition:      background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.jv-btn:hover {
	transform:  translateY(-1px);
}

/* Gold — primary CTA */
.jv-btn-gold {
	background-color: var(--jv-gold);
	color:            var(--jv-white);
	border-color:     var(--jv-gold);
}

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

/* Navy — secondary / on light backgrounds */
.jv-btn-navy {
	background-color: var(--jv-navy);
	color:            var(--jv-white);
	border-color:     var(--jv-navy);
}

.jv-btn-navy:hover {
	background-color: var(--jv-navy-hover);
	border-color:     var(--jv-navy-hover);
	color:            var(--jv-white);
}

/* Outline — hero secondary (on dark backgrounds) */
.jv-btn-outline {
	background-color: transparent;
	color:            var(--jv-white);
	border-color:     rgba(255, 255, 255, 0.45);
}

.jv-btn-outline:hover {
	background-color: rgba(255, 255, 255, 0.08);
	border-color:     rgba(255, 255, 255, 0.70);
	color:            var(--jv-white);
}

/* ── 4. Eyebrow / Label ───────────────────────────────────── */
.jv-eyebrow {
	font-family:    var(--jv-font-display);
	font-size:      13px;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	color:          var(--jv-gold);
	display:        block;
	margin-bottom:  12px;
}

/* ── 5. Section Backgrounds ───────────────────────────────── */
.jv-bg-navy  { background-color: var(--jv-navy); }
.jv-bg-cream { background-color: var(--jv-cream); }

/* ── 6. Header nav — permanent desktop layout ────────────────
 *
 * Scoped to .elementor-location-header (Theme Builder header wrapper)
 * + our stable element IDs (he_wrap / he_nav) so no other menus are
 * affected. Applied only above 1024 px — hamburger below that is untouched.
 *
 * These rules live here so wp elementor flush-css can never undo them.
 */
@media (min-width: 1025px) {

    /* Outer container: logo | nav | CTA button in a row */
    .elementor-location-header .elementor-element-he_wrap {
        display:         flex !important;
        flex-direction:  row !important;
        flex-wrap:       nowrap !important;
        align-items:     center !important;
        justify-content: space-between !important;
    }

    /* Nav <ul>: horizontal */
    .elementor-location-header .elementor-element-he_nav .elementor-nav-menu--main {
        display:        flex !important;
        flex-direction: row !important;
        flex-wrap:      nowrap !important;
        align-items:    center;
    }

    /* Each <li> side-by-side */
    .elementor-location-header .elementor-element-he_nav .elementor-nav-menu--main > li {
        display:     inline-flex !important;
        align-items: center;
    }

    /* Nav links: white, no wrap */
    .elementor-location-header .elementor-element-he_nav .elementor-item {
        color:       #FFFFFF !important;
        white-space: nowrap;
    }

    /* Hover / active / current-page: gold */
    .elementor-location-header .elementor-element-he_nav .elementor-item:hover,
    .elementor-location-header .elementor-element-he_nav .elementor-item:focus,
    .elementor-location-header .elementor-element-he_nav .elementor-item.elementor-item-active,
    .elementor-location-header .elementor-element-he_nav .elementor-item.highlighted {
        color: #C28E3C !important;
    }

    /* Hide hamburger on desktop — prevents Elementor JS from collapsing the nav */
    .elementor-location-header .elementor-element-he_nav .elementor-menu-toggle {
        display: none !important;
    }

    /* Hide dropdown panel on desktop */
    .elementor-location-header .elementor-element-he_nav .elementor-nav-menu--dropdown {
        display: none !important;
    }
}

/* ── 7. Elementor overrides — ensure our fonts load globally ─ */
.elementor-widget-heading .elementor-heading-title,
h1, h2, h3 {
	font-family: var(--jv-font-display);
	text-transform: uppercase;
}

p,
.elementor-widget-text-editor {
	font-family: var(--jv-font-body);
}

/* ── 8. Mobile dropdown nav — navy background, white text ────────────────────
 *
 * Fixes alternating-row bug where some items rendered white-on-white.
 * Scoped to ≤1024 px only. !important overrides Elementor's inline styles
 * and any theme defaults that win by specificity.
 * Lives here so wp elementor flush-css can never touch it.
 */
@media (max-width: 1024px) {

    /* Dropdown panel + every list item = solid navy */
    .elementor-nav-menu--dropdown,
    .elementor-nav-menu__container.elementor-nav-menu--dropdown,
    .elementor-nav-menu--dropdown li,
    .elementor-nav-menu--dropdown .elementor-item {
        background-color: #0E1B2D !important;
    }

    /* Every link — normal state = white */
    .elementor-nav-menu--dropdown a,
    .elementor-nav-menu--dropdown .elementor-item,
    .elementor-nav-menu--dropdown .elementor-sub-item {
        color: #FFFFFF !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 14px 20px !important;
    }

    /* Hover / active / current-page = gold + slightly lighter bg */
    .elementor-nav-menu--dropdown a:hover,
    .elementor-nav-menu--dropdown .elementor-item:hover,
    .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
    .elementor-nav-menu--dropdown .elementor-item.highlighted {
        color: #C28E3C !important;
        background-color: rgba(255, 255, 255, 0.06) !important;
    }
}