/* ==== UNA BELLA VITA THEME (for existing ASP.NET MVC, BS3) ==== */
/* Put this AFTER your normal site.css in _Layout.cshtml */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&family=Playfair+Display:wght@400;600;700&display=swap');

:root {
    --ubv-dark: #111;
    --ubv-accent: #6b8f71;
}

/* Global text */
body {
    font-family: "Merriweather", Georgia, serif;
    line-height: 1.7;
    color: #222;
    background: #fff;
}

h1, h2, h3, h4 {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 600;
    letter-spacing: .2px;
}

/* 1. Top bar override
   Your current layout has: <div style="background-color:white; color:black;">
   We override it to the dark bar.
*/
div[style*="background-color:white"] {
    background-color: #111 !important;
    color: #fff !important;
    border: 0;
}

    div[style*="background-color:white"] > .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1.25rem;
        min-height: 60px;
    }

    /* 2. Old menu was <ul class="nav navbar-nav"><li><a class="btn ...">
   Strip the button look and make them nav links.
*/
    div[style*="background-color:white"] ul.nav.navbar-nav {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin: 0;
        padding: 0;
    }

        div[style*="background-color:white"] ul.nav.navbar-nav > li > a {
            background: transparent !important;
            border: none !important;
            color: #eee !important;
            font-weight: 400;
            line-height: 1.1;
            padding: .45rem .85rem .4rem;
            display: block;
            white-space: normal;
            text-align: left;
            font-family: "Merriweather", Georgia, serif;
        }

            div[style*="background-color:white"] ul.nav.navbar-nav > li > a:hover,
            div[style*="background-color:white"] ul.nav.navbar-nav > li > a:focus {
                background: rgba(255,255,255,.06) !important;
                color: #fff !important;
                text-decoration: none;
            }
            /* second line inside links */
            div[style*="background-color:white"] ul.nav.navbar-nav > li > a span {
                display: block;
                font-size: .65rem;
                opacity: .7;
                line-height: 1.1;
            }

/* 3. MAIN HERO (Home page) 
   You already changed Home/Index to use <div class="hero">...
   This is the big header.
*/
.hero {
    background-image: url("/Content/images/index-hero.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 56vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* move text higher */
    padding-top: 10vh; /* adjust if too high/low */
    text-align: center;
    color: #fff;
}

    .hero h1 {
        font-family: "Playfair Display", Georgia, serif;
        font-weight: 600;
        font-size: clamp(5rem, 10vw, 9rem);
        line-height: 1.1;
    }

    .hero p.lead {
        font-family: "Merriweather", Georgia, serif;
        font-size: clamp(1.5rem, 2.5vw, 3rem);
        line-height: 1.3;
        max-width: 48rem;
        margin: 1rem auto 0 auto;
        letter-spacing: 0.02em;
        color: #f5f5f5;
    }

/* 4. AUXILIARY HERO (small header on About, Portfolio, Blog, etc.) */
.hero-small {
    background-image: url("/Content/images/aux-hero.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 26vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #808080;
}

    .hero-small h1 {
        font-size: clamp(2.1rem, 4vw, 3.2rem);
        margin-bottom: .25rem;
    }

    .hero-small .lead {
        font-size: 1.9rem;
        margin-bottom: 0;
        color: darkslateblue;
    }

/* 5. Links + footer */
a {
    color: var(--ubv-accent);
}

    a:hover {
        color: #55745c;
    }

footer,
.site-footer,
#footer {
    background: #111;
    color: #eee;
    padding: 1.5rem 0;
    text-align: center;
    margin-top: 3rem;
}

/* 6. mobile tweaks */
@media (max-width: 992px) {
    div[style*="background-color:white"] > .container {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero {
        padding-top: 6vh;
    }

        .hero h1 {
            font-size: clamp(3.4rem, 11vw, 6rem);
        }

        .hero p.lead {
            font-size: clamp(1.2rem, 3.5vw, 2rem);
        }
}


/* Home content spacing under hero */
.ubv-home-content {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

/* Remove the hard-coded row height; let columns grow naturally */
.ubv-home-row {
    margin-top: .25rem;
}

/* Make the old Bootstrap wells look cleaner and more modern */
.well {
    border-radius: 0;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: none;
}

/* Your "homewell" class was used historically; keep it but make it flexible */
.homewell {
    min-height: 360px; /* similar intent without forcing overflow */
}

/* Buttons: keep Bootstrap 3 behavior but nudge toward UBV palette */
.btn-default {
    border-color: rgba(0,0,0,.2);
}

.btn-success {
    background-color: var(--ubv-accent);
    border-color: var(--ubv-accent);
}

    .btn-success:hover,
    .btn-success:focus {
        background-color: #55745c;
        border-color: #55745c;
    }

/* Small spacing helper already used in markup */
.addSpace {
    margin: 2px;
}

/* Make the large quote block breathe on mobile */
.alert.alert-info {
    border-radius: 0;
}

@media (max-width: 768px) {
    .alert.alert-info {
        font-size: 1.25em !important;
    }
}

/* Home page video announcement */
.ubv-announcement {
    margin-top: .75rem;
}
.ubv-video-alert {
    font-family: "Merriweather", Georgia, serif;
    font-size: 1.35rem; /* bigger overall */
    border-radius: 0;
    border: 0;
    padding: 1.4rem 1.25rem;
    background: linear-gradient( to right, rgba(255, 215, 0, 0.18), rgba(255, 215, 0, 0.06) );
    color: #222;
}

    .ubv-video-alert a {
        font-weight: 700;
        color: #5a7f62;
        text-decoration: none;
    }

        .ubv-video-alert a:hover {
            text-decoration: underline;
        }


.ubv-video-alert-media {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
}

.ubv-video-thumb {
    width: 120px;
    height: 80px;
    flex-shrink: 0;
    background-image: url("/Content/images/video-thumb.png");
    background-size: cover;
    background-position: center 20%;
    border-radius: 12px; /* more rounded */
    overflow: hidden;
    /* soften */
    filter: contrast(0.92) saturate(0.92) brightness(1.03);
    opacity: 0.92;
    /* gentler shadow */
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
}


.ubv-video-text {
    display: flex;
    flex-direction: column;
}

.ubv-video-headline {
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.ubv-video-sub {
    font-size: 1.15rem;
}






/* Slightly larger on desktop */
@media (min-width: 992px) {
    .ubv-video-alert {
        font-size: 1.35rem;
        padding: 1.25rem 1rem;
    }
}
.ubv-video-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2em;
    height: 2.2em;
    font-size: 1.1em;
    color: #5a7f62;
    border: 2px solid rgba(90,127,98,.35);
    border-radius: 50%;
    line-height: 1;
}

@media (max-width: 768px) {
    .ubv-video-alert-media {
        flex-direction: column;
        text-align: center;
    }

    .ubv-video-thumb {
        width: 160px;
        height: 100px;
    }
}

.ubv-badge-new {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    padding: .25rem .55rem;
    border-radius: 999px;
    color: #2e4f3a;
    background: rgba(90,127,98,.14);
    border: 1px solid rgba(90,127,98,.25);
    transform: translateY(-1px);
}