/* =========================================================
   Contact CTA Buttons
   ========================================================= */

.nav-contact-buttons {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* =========================================================
   Base Button
   ========================================================= */

.nav-contact-btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    overflow: hidden;
    isolation: isolate;

    min-height: 48px;
    padding: 0.7rem 1.15rem;

    border-radius: 6px;
    border: 2px solid transparent;

    color: #ffffff !important;

    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;

    text-decoration: none !important;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        0 2px 5px rgba(0, 0, 0, 0.3);

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

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

.nav-contact-btn::before {
    content: "";

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

    width: 45%;
    height: 100%;

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

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

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

    pointer-events: none;
}

/* Keep content above shine */

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

/* =========================================================
   Ring Me (Call) — Blue (Switched)
   ========================================================= */

.nav-ring {
    background: linear-gradient(
        180deg,
        #69c9ff 0%,
        #3299df 20%,
        #2378b8 55%,
        #185d91 100%
    );

    border-color: #91d8ff;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -2px 0 rgba(0, 45, 90, 0.35),
        0 2px 5px rgba(0, 0, 0, 0.3),
        0 0 12px rgba(60, 170, 240, 0.3);
}

.nav-ring i {
    color: #d9f3ff !important;

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

.nav-ring:hover {
    background: linear-gradient(
        180deg,
        #91dcff 0%,
        #4eb2ef 20%,
        #2d8ccc 55%,
        #1c6ca5 100%
    );

    transform: translateY(-2px);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -2px 0 rgba(0, 45, 90, 0.25),
        0 4px 10px rgba(0, 0, 0, 0.35),
        0 0 20px rgba(70, 185, 255, 0.6);

    filter: saturate(1.1);
}

/* =========================================================
   Email Me — Green (Switched)
   ========================================================= */

.nav-email {
    background: linear-gradient(
        180deg,
        #62e88a 0%,
        #31b85c 20%,
        #209447 55%,
        #167338 100%
    );

    border-color: #8ff3aa;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -2px 0 rgba(0, 70, 25, 0.35),
        0 2px 5px rgba(0, 0, 0, 0.3),
        0 0 12px rgba(67, 220, 111, 0.3);
}

.nav-email i {
    color: #d5ffe1 !important;

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

.nav-email:hover {
    background: linear-gradient(
        180deg,
        #83f5a2 0%,
        #45d86f 20%,
        #2caf56 55%,
        #198542 100%
    );

    transform: translateY(-2px);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -2px 0 rgba(0, 70, 25, 0.25),
        0 4px 10px rgba(0, 0, 0, 0.35),
        0 0 20px rgba(67, 230, 115, 0.6);

    filter: saturate(1.1);
}

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

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

    outline: none;
}

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

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

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

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

@media (max-width: 575.98px) {
    .nav-contact-buttons {
        width: 100%;
        gap: 0.5rem;
    }

    .nav-contact-btn {
        flex: 1;

        min-height: 50px;
        padding: 0.7rem 0.9rem;

        font-size: 0.95rem;
    }
}