/* ==========================================================================
   CONTACT BUTTON
   fixed green round button on the right edge, links to the contact section of the home page.
   sizes and positions are from the live site (there a scaled font awesome icon stack).
   markup: footer.php
   ========================================================================== */

/* the center sits 10.5px above the vertical center of the viewport (like on the live site). */
.contact-button {
    position: fixed;
    top: calc(50% - 10.5px);
    right: 15.5px;
    z-index: 1000; /* below the header (mobile menu). */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54.4px;
    height: 54.4px;
    border-radius: 50%;
    background: var(--color-green-dark);
    color: var(--color-white);
    font-size: 25.4px;
    text-decoration: none;
    translate: 0 -50%;
    transition: scale .3s;
}

.contact-button:is(:hover, :focus-visible) {
    scale: 1.1;
}

.contact-button:focus-visible {
    outline: 2px solid var(--color-green-dark);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .contact-button {
        right: 12px;
        width: 36.7px;
        height: 36.7px;
        font-size: 17.1px;
    }
}

@media (max-width: 480px) {
    .contact-button {
        top: calc(50% - 8.5px);
        right: 7.3px;
        width: 32.6px;
        height: 32.6px;
        font-size: 15.2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-button {
        transition: none;
    }
}