/* ==========================================================================
   Fixed right-edge contact rail (WhatsApp / Instant Call / Get in touch).
   Reuses the site's existing palette (#931867 plum, #00487F navy,
   #F8F9FA / #EDEFF2 neutrals already used by the footer + cmdk search) and
   type (Maven Pro). WhatsApp keeps its own brand green on the icon glyph
   only, matching the previous floating button — everything else (card
   chrome, hover fills, focus ring) comes straight from the site's tokens.
   ========================================================================== */

.contact-rail {
    position: fixed;
    top: 50%;
    right: env(safe-area-inset-right, 0px);
    transform: translateY(-50%);
    z-index: 2500;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e6ea;
    border-right: 0;
    border-radius: 14px 0 0 14px;
    box-shadow: -12px 8px 32px rgba(15, 23, 42, .10);
    overflow: hidden;
}

.contact-rail__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px 14px 16px;
    text-decoration: none;
    color: #14202e;
    font-family: 'Maven Pro Medium';
    font-size: 13.5px;
    letter-spacing: .01em;
    white-space: nowrap;
    border-bottom: 1px solid #EDEFF2;
    transition: background-color .25s ease, color .25s ease, padding-right .25s ease, gap .3s ease, padding .3s ease;
}

.contact-rail__item:last-child {
    border-bottom: 0;
}

.contact-rail__item:hover,
.contact-rail__item:focus-visible {
    background: #F8F9FA;
    padding-right: 26px;
}

.contact-rail__item:focus-visible {
    outline: 2px solid #00487F;
    outline-offset: -2px;
}

.contact-rail__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    margin: 0;
    border-radius: 50%;
    background: #F8F9FA;
    font-size: 14px;
    transition: background-color .25s ease, color .25s ease;
}

/* style.css has a global, unscoped `span { color: #fff; text-transform:
   uppercase; font-family: 'Airbnb Cereal App Black'; ... }` rule (legacy,
   predates this component). It out-specifies plain inheritance, so both
   spans here need every one of those properties reclaimed explicitly —
   without this the label renders white-on-white and shouty-caps. */
.contact-rail__label {
    display: inline-block;
    margin: 0;
    max-width: 140px;
    overflow: hidden;
    color: #14202e;
    font-family: 'Maven Pro Medium';
    font-size: 13.5px;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: .01em;
    transition: color .25s ease, max-width .3s ease, opacity .3s ease;
}

/* Desktop: collapse to icon-only once the visitor starts scrolling, toggled
   by contact-rail.js adding/removing this class on the container. Uses a
   smooth max-width/opacity collapse (rather than the hard clip technique
   the mobile breakpoint below uses) since this state changes live in front
   of the user. The mobile media query is left untouched as a CSS-only,
   JS-independent guarantee that small screens never show the wide layout. */
.contact-rail.is-compact .contact-rail__item {
    padding-left: 12px;
    padding-right: 12px;
    gap: 0;
}

.contact-rail.is-compact .contact-rail__item:hover,
.contact-rail.is-compact .contact-rail__item:focus-visible {
    padding-right: 12px;
}

.contact-rail.is-compact .contact-rail__label {
    max-width: 0;
    opacity: 0;
}

.contact-rail__item--whatsapp .contact-rail__icon { color: #25D366; }
.contact-rail__item--call .contact-rail__icon { color: #00487F; }
.contact-rail__item--contact .contact-rail__icon { color: #931867; }

.contact-rail__item--whatsapp:hover .contact-rail__icon,
.contact-rail__item--whatsapp:focus-visible .contact-rail__icon { background: #25D366; color: #ffffff; }
.contact-rail__item--call:hover .contact-rail__icon,
.contact-rail__item--call:focus-visible .contact-rail__icon { background: #00487F; color: #ffffff; }
.contact-rail__item--contact:hover .contact-rail__icon,
.contact-rail__item--contact:focus-visible .contact-rail__icon { background: #931867; color: #ffffff; }

.contact-rail__item--whatsapp:hover .contact-rail__label,
.contact-rail__item--whatsapp:focus-visible .contact-rail__label { color: #25D366; }
.contact-rail__item--call:hover .contact-rail__label,
.contact-rail__item--call:focus-visible .contact-rail__label { color: #00487F; }
.contact-rail__item--contact:hover .contact-rail__label,
.contact-rail__item--contact:focus-visible .contact-rail__label { color: #931867; }

/* ---------------------------------------------------------- mobile / tablet
   Below the site's existing lg breakpoint (992px, same one the header nav
   collapses at) the rail loses its text and becomes a compact icon-only
   column so it can't crowd page content or overlap the mobile nav.

   It also moves from vertically-centered to a bottom-right corner cluster:
   centering a ~190px-tall rail on a narrow screen means it lands mid-page
   over whatever happens to be there (verified it covers form fields on the
   Contact page and hero copy on the homepage at 390px) — anchoring to the
   corner is the conventional mobile pattern for these widgets and keeps a
   fixed, predictable footprint regardless of page content. 140px clears
   the cookie-consent banner (~119px tall at this width) while it's shown;
   the banner is removed from the DOM after the visitor makes a choice. */
@media (max-width: 991px) {
    .contact-rail {
        top: auto;
        bottom: 140px;
        right: env(safe-area-inset-right, 12px);
        transform: none;
        border-radius: 14px;
        border-right: 1px solid #e2e6ea;
    }

    .contact-rail__item {
        padding: 12px;
        gap: 0;
    }

    .contact-rail__item:hover,
    .contact-rail__item:focus-visible {
        padding-right: 12px;
    }

    .contact-rail__label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .contact-rail__icon {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-rail__item,
    .contact-rail__icon,
    .contact-rail__label {
        transition: none !important;
    }
}