/* Website-parity contact launcher. Keep this file after header.css so the
   shared .btn defaults cannot change the launcher's compact state. */

.contact-tab {
    position: fixed;
    z-index: 110;
    inset-block-start: 30%;
    inset-inline-end: 0;
    display: inline-flex;
    inline-size: max-content;
    max-inline-size: 3.5rem;
    justify-content: flex-start;
    overflow: hidden;
    padding: .75rem;
    border: 0;
    border-radius: 20px 0 0 20px;
    box-shadow: 0 8px 20px rgb(0 28 23 / 40%);
    transform: translateY(-50%);
    transition: background-color 250ms cubic-bezier(0.2, 0, 0, 1),
    box-shadow 250ms cubic-bezier(0.2, 0, 0, 1),
    max-inline-size 250ms cubic-bezier(0.2, 0, 0, 1),
    padding-inline 250ms cubic-bezier(0.2, 0, 0, 1);
}

.contact-tab.btn:active {
    transform: translateY(-50%);
}

.contact-tab.btn--icon-plain.btn--icon-leading {
    padding-inline-start: 1rem;
    padding-inline-end: .75rem;
}

.contact-tab:hover,
.contact-tab:focus-visible {
    max-inline-size: min(calc(100vw - 1rem), 17rem);
    padding-inline: 1rem;
    box-shadow: 0 10px 24px rgb(0 28 23 / 40%);
}

.contact-tab .btn__icon {
    display: inline-grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    flex: none;
    color: currentColor;
}

.contact-tab .btn__icon svg {
    display: block;
}

.contact-tab .btn__label {
    display: inline-grid;
    flex: none;
    min-inline-size: 0;
    overflow: hidden;
}

.contact-tab__copy {
    display: inline-grid;
    inline-size: max-content;
    max-inline-size: 0;
    overflow: hidden;
    opacity: 0;
    text-align: start;
    white-space: nowrap;
    transition: max-inline-size 250ms cubic-bezier(0.2, 0, 0, 1),
    opacity 150ms cubic-bezier(0.2, 0, 0, 1);
}

.contact-tab:hover .contact-tab__copy,
.contact-tab:focus-visible .contact-tab__copy {
    max-inline-size: min(11rem, calc(100vw - 6rem));
    gap: .25rem;
    opacity: 1;
}

.contact-tab__copy span:first-child {
    font-weight: 600;
}

.contact-tab__copy span:last-child {
    font-size: .875rem;
    font-weight: 400;
}

.site-header[data-nav-open] ~ .contact-tab {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 767px) {
    .contact-tab {
        inset-block-start: auto;
        inset-block-end: 30%;
    }
}

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