:root {
    --color-primary: #172B45;
    --color-primary-light: #243F60;
    --color-accent: #C5A46D;
    --color-background: #F6F3ED;
    --color-surface: #FFFFFF;
    --color-text: #30343B
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px
}

body {
    background: var(--color-background);
    color: var(--color-text)
}

/* Navbar predefinita: tutte le pagine interne */
#navbar {
    background: var(--color-primary);
    transition: background-color .3s;
    z-index: 1030;
}

/* Navbar trasparente soltanto nella home */
body.home #navbar {
    background: rgba(23, 43, 69, .6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.home #navbar.scrolled,
body.home #navbar.menu-open {
    background: var(--color-primary);
}

#navbar .nav-link {
    color: #fff;
    padding: .75rem
}

#navbar .nav-link:hover,
#navbar .nav-link:focus {
    color: var(--color-accent)
}

#navbar .nav-link.active {
    color: var(--color-primary);
    background: var(--color-surface);
    border-radius: 50rem;
    padding-inline: 1.2rem
}

.dropdown-menu {
    background: var(--color-primary);
    border: 1px solid var(--color-primary-light);
    border-radius: 12px;
    padding: .5rem
}

.dropdown-item {
    color: #fff;
    border-radius: 6px;
    padding: .6rem .8rem
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--color-primary-light);
    color: #fff
}

.hero {
    min-height: 100vh;
    min-height: 100svh;
    background-image: linear-gradient(rgba(23, 43, 69, .48), rgba(23, 43, 69, .68)), url('../image/front-image.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center
}

.hero-content {
    padding-top: 125px;
    padding-bottom: 65px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem
}

.hero h1 {
    max-width: 950px;
    text-wrap: balance
}

.hero-subtitle {
    font-size: clamp(1.15rem, 2.3vw, 1.75rem);
    margin: 0
}

.btn-gold {
    background: var(--color-accent);
    color: var(--color-primary);
    border: 2px solid var(--color-accent);
    font-weight: 700;
    transition: background-color .2s, transform .2s
}

.btn-gold:hover,
.btn-gold:focus {
    background: #D8BA86;
    border-color: #D8BA86;
    color: var(--color-primary);
    transform: translateY(-2px)
}

.main-content {
    position: relative;
    background: var(--color-background)
}

.section-title {
    color: var(--color-primary)
}

.section-rule {
    width: 90px;
    height: 4px;
    background: var(--color-accent);
    border-radius: 10px;
    margin-top: .8rem
}

.about-image {
    width: 100%;
    height: auto;
    object-fit: cover
}

.cta-card {
    background: var(--color-surface);
    color: var(--color-primary);
    border: 1px solid rgba(23, 43, 69, .1);
    min-height: 340px;
    box-shadow: 0 6px 24px rgba(23, 43, 69, .07);
    transition: transform .25s, box-shadow .25s
}

.cta-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(23, 43, 69, .14)
}

.cta-card .card-body {
    gap: 1rem
}

.cta-icon {
    font-size: 3rem;
    color: var(--color-accent)
}

.site-footer {
    background: var(--color-primary)
}

.site-footer a {
    color: var(--color-background);
    text-decoration: none;
    overflow-wrap: anywhere
}

.site-footer a:hover {
    color: var(--color-accent);
    text-decoration: underline
}

.footer-links li {
    margin: .65rem 0
}

.footer-logo {
    height: auto;
    max-width: 100%
}

.footer-rule {
    border-color: var(--color-accent);
    opacity: .65
}

@media(min-width:992px) {
    .hero {
        background-attachment: fixed
    }
}

@media(max-width:991.98px) {
    #navbar .navbar-collapse {
        padding: 1rem 0;
        max-height: calc(100svh - 95px);
        overflow-y: auto
    }

    #navbar .nav-link.active {
        display: inline-block
    }

    .hero h1 {
        font-size: clamp(2rem, 5vw, 3.4rem)
    }

    .cta-card {
        min-height: 300px
    }
}

@media(max-width:575.98px) {
    #navbar .navbar-brand img {
        width: 62px
    }

    .hero-content {
        padding-top: 105px;
        padding-bottom: 45px;
        gap: 1.1rem
    }

    .hero h1 {
        font-size: clamp(1.8rem, 8vw, 2.6rem)
    }

    .hero-subtitle {
        font-size: 1.05rem
    }

    .hero .btn {
        font-size: 1rem !important
    }

    .cta-card {
        min-height: 280px
    }

    .cta-card h3 {
        font-size: 1.4rem !important
    }

    .site-footer {
        padding-block: 2.5rem !important
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .cta-card,
    .btn-gold {
        transition: none
    }

    .cta-card:hover,
    .btn-gold:hover {
        transform: none
    }
}