/* =========================================================
   Get a Quote CTA
   ========================================================= */

.nav-quote {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    isolation: isolate;

    min-height: 54px;

    padding: 0.8rem 1.6rem !important;

    text-decoration: none !important;

    background: linear-gradient(
        180deg,
        #ffe889 0%,
        #f5c842 18%,
        #d9a514 52%,
        #b8860b 100%
    );

    border: 2px solid #ffe99a;
    border-radius: 6px;

    color: #ffffff !important;

    /*
     * Match hero-button typography
     */
    font-family: inherit;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.5;

    letter-spacing: normal;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 0 -2px 0 rgba(99, 67, 0, 0.35),
        0 2px 5px rgba(0, 0, 0, 0.3),
        0 0 14px rgba(245, 215, 110, 0.35);

    text-shadow:
        0 1px 2px rgba(80, 50, 0, 0.6);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
}


/* =========================================================
   Glossy Reflection
   ========================================================= */

.nav-quote::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 45%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.65),
        transparent
    );

    transform: translateX(-250%) skewX(-20deg);

    animation: quote-shine 3.5s ease-in-out infinite;

    pointer-events: none;
}


/* Keep icon and text above reflection */

.nav-quote > * {
    position: relative;
    z-index: 1;
}


/* =========================================================
   Quote Icon
   ========================================================= */

.nav-quote i {
    color: #fff7a8 !important;

    filter:
        drop-shadow(0 0 3px rgba(255, 255, 255, 0.9))
        drop-shadow(0 0 5px rgba(255, 232, 137, 0.8));
}


/* =========================================================
   Hover
   ========================================================= */

.nav-quote:hover {
    background: linear-gradient(
        180deg,
        #fff3a8 0%,
        #ffd95a 18%,
        #e8b72c 52%,
        #c9950d 100%
    ) !important;

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -2px 0 rgba(99, 67, 0, 0.3),
        0 4px 10px rgba(0, 0, 0, 0.35),
        0 0 22px rgba(255, 220, 90, 0.65);

    filter: saturate(1.1);
}

.nav-quote:hover i {
    color: #ffffff !important;

    filter:
        drop-shadow(0 0 4px #ffffff)
        drop-shadow(0 0 8px #ffe889);
}


/* =========================================================
   Focus / Active
   ========================================================= */

.nav-quote:focus,
.nav-quote:focus-visible,
.nav-quote:active {
    color: #ffffff !important;

    outline: none;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 0 -2px 0 rgba(99, 67, 0, 0.35),
        0 2px 5px rgba(0, 0, 0, 0.3),
        0 0 14px rgba(245, 215, 110, 0.35);
}


/* =========================================================
   Animated Shine
   ========================================================= */

@keyframes quote-shine {

    0%,
    55% {
        transform: translateX(-250%) skewX(-20deg);
    }

    75%,
    100% {
        transform: translateX(350%) skewX(-20deg);
    }

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 575.98px) {

    .nav-quote {
        min-height: 54px;

        padding: 0.8rem 1.6rem !important;

        font-size: 1rem !important;
    }

}