/* ========== Hero (Nav Mockup) – match prototype ========== */
body.template-block-builder .hero.hero-nav-mockup, body.template-page .hero.hero-nav-mockup,
.editor-styles-wrapper .hero.hero-nav-mockup {
    position: relative;
    min-height: 800px;
    display: flex;
    flex-direction: column;
    /* Override generic `.hero` layout rules earlier in this file */
    height: auto !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    padding: 0 clamp(20px, 4vw, 56px) 64px;
    overflow: hidden;
    margin: 0!important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ========== Off-canvas nav (mockup) – ensure typography ========== */
body.template-block-builder .nav-panel-primary .nav-panel-btn-text,
body.template-page .nav-panel-primary .nav-panel-btn-text,
body.template-block-builder .nav-panel-primary .nav-panel-link,
body.template-page .nav-panel-primary .nav-panel-link {
	font-family: 'Lora', serif !important;
	color: #284227 !important;
}

body.template-block-builder .hero.hero-nav-mockup .hero-bg, body.template-page .hero.hero-nav-mockup .hero-bg,
.editor-styles-wrapper .hero.hero-nav-mockup .hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-image: url("../../../images/hero-nav-mockup.jpg");
    z-index: 0;
}

body.template-block-builder .hero.hero-nav-mockup .hero-bg::after, body.template-page .hero.hero-nav-mockup .hero-bg::after,
.editor-styles-wrapper .hero.hero-nav-mockup .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Linen hint + green vignette (match front-end; darker read). */
    background:
        linear-gradient(180deg, rgba(248, 247, 240, 0.03) 0%, rgba(248, 247, 240, 0.06) 50%, rgba(248, 247, 240, 0.03) 100%),
        linear-gradient(to right, rgba(20, 35, 18, 0.82) 0%, rgba(20, 35, 18, 0.52) 55%, rgba(20, 35, 18, 0.14) 100%),
        linear-gradient(to top, rgba(20, 35, 18, 0.75) 0%, rgba(20, 35, 18, 0) 52%);
}

body.template-block-builder .hero.hero-nav-mockup .hero-content, body.template-page .hero.hero-nav-mockup .hero-content,
.editor-styles-wrapper .hero.hero-nav-mockup .hero-content {
    position: relative;
    z-index: 1;
    /* Override generic `.hero-content` styles in this stylesheet */
    text-align: left !important;
    color: inherit !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    animation: none !important;
    isolation: auto !important;
    box-sizing: border-box !important;
}

/* Hero Dynamic Intake: upper band centered pills; full-width lower + light wash (mockup) */
body.template-block-builder .hero.hero-nav-mockup.hero-dynamic-intake, body.template-page .hero.hero-nav-mockup.hero-dynamic-intake,
.editor-styles-wrapper .hero.hero-nav-mockup.hero-dynamic-intake {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: clamp(48px, 9vh, 80px) 0 0 !important;
}

body.template-block-builder .hero.hero-nav-mockup.hero-dynamic-intake .hero-di-upper, body.template-page .hero.hero-nav-mockup.hero-dynamic-intake .hero-di-upper,
.editor-styles-wrapper .hero.hero-nav-mockup.hero-dynamic-intake .hero-di-upper {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: min(46vh, 420px) !important;
    min-width: 0 !important;
    padding: clamp(16px, 4vh, 48px) clamp(20px, 5vw, 80px) !important;
    box-sizing: border-box !important;
}

body.template-block-builder .hero.hero-nav-mockup.hero-dynamic-intake .hero-di-upper .hero-content, body.template-page .hero.hero-nav-mockup.hero-dynamic-intake .hero-di-upper .hero-content,
.editor-styles-wrapper .hero.hero-nav-mockup.hero-dynamic-intake .hero-di-upper .hero-content {
    text-align: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(14px, 2vw, 22px) !important;
    max-width: min(900px, 100%) !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.template-block-builder .hero.hero-nav-mockup.hero-dynamic-intake .hero-di-lower, body.template-page .hero.hero-nav-mockup.hero-dynamic-intake .hero-di-lower,
.editor-styles-wrapper .hero.hero-nav-mockup.hero-dynamic-intake .hero-di-lower {
    width: 100% !important;
    flex: 0 0 auto !important;
    position: relative !important;
}

body.template-block-builder .hero.hero-nav-mockup.hero-dynamic-intake .hero-di-divider, body.template-page .hero.hero-nav-mockup.hero-dynamic-intake .hero-di-divider,
.editor-styles-wrapper .hero.hero-nav-mockup.hero-dynamic-intake .hero-di-divider {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

body.template-block-builder .hero.hero-nav-mockup.hero-dynamic-intake .content-area.hero-di-panel-host, body.template-page .hero.hero-nav-mockup.hero-dynamic-intake .content-area.hero-di-panel-host,
.editor-styles-wrapper .hero.hero-nav-mockup.hero-dynamic-intake .content-area.hero-di-panel-host {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

body.template-block-builder .hero.hero-nav-mockup .hero-content::before, body.template-page .hero.hero-nav-mockup .hero-content::before,
body.template-block-builder .hero.hero-nav-mockup .hero-content::after, body.template-page .hero.hero-nav-mockup .hero-content::after,
.editor-styles-wrapper .hero.hero-nav-mockup .hero-content::before,
.editor-styles-wrapper .hero.hero-nav-mockup .hero-content::after {
    content: none !important;
    display: none !important;
}

body.template-block-builder .hero.hero-nav-mockup .hero-headline, body.template-page .hero.hero-nav-mockup .hero-headline,
.editor-styles-wrapper .hero.hero-nav-mockup .hero-headline {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 4.5vw, 3.625rem);
    font-weight: 400;
    color: var(--ms-linen, #f8f7f0);
    line-height: 1.13;
    letter-spacing: -0.01em;
    max-width: min(640px, 100%);
    min-width: 0;
    overflow-wrap: anywhere;
    margin: 0 0 48px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.15);
    box-sizing: border-box;
}

body.template-block-builder .hero.hero-nav-mockup .hero-headline em, body.template-page .hero.hero-nav-mockup .hero-headline em,
.editor-styles-wrapper .hero.hero-nav-mockup .hero-headline em {
    font-style: italic;
    color: #d4b97a;
}

body.template-block-builder .hero.hero-nav-mockup .cta-cluster-label, body.template-page .hero.hero-nav-mockup .cta-cluster-label,
.editor-styles-wrapper .hero.hero-nav-mockup .cta-cluster-label {
    font-family: var(--font-body);
    font-size: 0.66rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ms-linen, #f8f7f0);
    opacity: 0.6;
    margin: 0 0 14px;
}

body.template-block-builder .hero.hero-nav-mockup .cta-cluster, body.template-page .hero.hero-nav-mockup .cta-cluster,
.editor-styles-wrapper .hero.hero-nav-mockup .cta-cluster {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
}

body.template-block-builder .hero.hero-nav-mockup .cta-btn, body.template-page .hero.hero-nav-mockup .cta-btn,
.editor-styles-wrapper .hero.hero-nav-mockup .cta-btn {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    padding: 13px 26px;
    border-radius: 100px;
    border: 1.5px solid rgba(248,247,240,0.7);
    cursor: pointer;
    transition: background 260ms var(--ms-ease, ease), color 260ms var(--ms-ease, ease), border-color 260ms var(--ms-ease, ease);
    background: transparent;
    color: var(--ms-linen, #f8f7f0);
}

body.template-block-builder .hero.hero-nav-mockup .cta-btn.primary, body.template-page .hero.hero-nav-mockup .cta-btn.primary,
.editor-styles-wrapper .hero.hero-nav-mockup .cta-btn.primary {
    background: var(--ms-linen, #f8f7f0);
    color: var(--ms-green, #284227);
    border-color: var(--ms-linen, #f8f7f0);
}

body.template-block-builder .hero.hero-nav-mockup .cta-btn.primary:hover, body.template-page .hero.hero-nav-mockup .cta-btn.primary:hover,
.editor-styles-wrapper .hero.hero-nav-mockup .cta-btn.primary:hover {
    background: var(--ms-gold, #8a6e08);
    border-color: var(--ms-gold, #8a6e08);
    color: var(--ms-linen, #f8f7f0);
}

body.template-block-builder .hero.hero-nav-mockup .cta-btn:not(.primary):hover, body.template-page .hero.hero-nav-mockup .cta-btn:not(.primary):hover,
.editor-styles-wrapper .hero.hero-nav-mockup .cta-btn:not(.primary):hover {
    background: rgba(248,247,240,0.15);
    border-color: var(--ms-linen, #f8f7f0);
}

@media (max-width: 768px) {
    body.template-block-builder .hero.hero-nav-mockup, body.template-page .hero.hero-nav-mockup,
    .editor-styles-wrapper .hero.hero-nav-mockup {
        min-height: 520px;
        height: auto !important;
        padding: 0 20px 40px;
    }
    body.template-block-builder .hero.hero-nav-mockup .hero-headline, body.template-page .hero.hero-nav-mockup .hero-headline,
    .editor-styles-wrapper .hero.hero-nav-mockup .hero-headline {
        margin-bottom: 28px;
        max-width: 38rem;
    }
    body.template-block-builder .hero.hero-nav-mockup .cta-btn, body.template-page .hero.hero-nav-mockup .cta-btn,
    .editor-styles-wrapper .hero.hero-nav-mockup .cta-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}