/* Site navigation: subtle hover and dropdown motion, parish accent colors. */
:root {
    --parish-terracotta: #E07A5F;
    --parish-sand: #F4F1DE;
    --parish-dark: #3D405B;
}

.navbar {
    box-shadow: 0 0.125rem 0.5rem rgba(61, 64, 91, 0.08);
}

.navbar .nav-link {
    position: relative;
    font-size: 1.1rem;
    background-image: linear-gradient(var(--parish-terracotta), var(--parish-terracotta));
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 0 2px;
    transition: background-size 0.3s ease, color 0.2s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
    background-size: calc(100% - 1.5rem) 2px;
}

.navbar .nav-link i {
    display: inline-block;
    transition: transform 0.25s ease;
}

.navbar .nav-link:hover i {
    transform: translateY(-2px);
}

.navbar .dropdown-menu {
    border: 0;
    border-radius: 0.75rem;
    box-shadow: 0 0.75rem 1.5rem rgba(61, 64, 91, 0.15);
    overflow: hidden;
    animation: nav-dropdown-in 0.2s ease both;
}

.navbar .dropdown-item {
    transition: background-color 0.2s ease, padding-left 0.2s ease;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus-visible {
    background-color: var(--parish-sand);
    padding-left: 1.75rem;
}

@keyframes nav-dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .navbar .nav-link,
    .navbar .nav-link i,
    .navbar .dropdown-item,
    .navbar .dropdown-menu {
        transition: none !important;
        animation: none !important;
    }

    .navbar .nav-link:hover i {
        transform: none;
    }
}