/**
 * BIO FILAMENT — header WhatsApp button.
 * Turns the theme's generic nav button into a recognisable WhatsApp CTA:
 * official WhatsApp green, pill shape, and the WhatsApp glyph before the label.
 */

.ext-nav-extras-btn .wp-block-button__link {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    background-color: #25D366 !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.ext-nav-extras-btn .wp-block-button__link:hover,
.ext-nav-extras-btn .wp-block-button__link:focus {
    background-color: #1FB955 !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(37, 211, 102, .35);
    transform: translateY(-1px);
}

/* WhatsApp glyph, inlined as a data URI so no extra request is made.
   In RTL the icon sits to the right of the label, which ::before gives us. */
.ext-nav-extras-btn .wp-block-button__link::before {
    content: "";
    width: 1.05em;
    height: 1.05em;
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--bf2-wa-glyph) center / contain no-repeat;
            mask: var(--bf2-wa-glyph) center / contain no-repeat;
}

:root {
    --bf2-wa-glyph: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2A10 10 0 0 0 2 12c0 1.77.46 3.43 1.28 4.87L2 22l5.28-1.24A9.9 9.9 0 0 0 12 22a10 10 0 0 0 0-20Zm0 18a8 8 0 0 1-4.1-1.13l-.3-.17-3.12.73.76-3.04-.2-.32A8 8 0 1 1 12 20Zm4.46-5.63c-.24-.12-1.43-.7-1.65-.79-.22-.08-.38-.12-.54.12-.16.24-.62.79-.76.95-.14.16-.28.18-.52.06-.24-.12-1.03-.38-1.96-1.21-.72-.64-1.21-1.44-1.35-1.68-.14-.24-.02-.37.1-.49.11-.11.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.54-1.3-.74-1.78-.2-.47-.39-.4-.54-.41h-.46c-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2 0 1.18.86 2.32.98 2.48.12.16 1.69 2.66 4.1 3.63.57.24 1.02.39 1.37.5.58.18 1.1.16 1.51.1.46-.07 1.43-.58 1.63-1.15.2-.57.2-1.05.14-1.15-.06-.1-.22-.16-.46-.28Z'/%3E%3C/svg%3E");
}

@media (max-width: 600px) {
    .ext-nav-extras-btn .wp-block-button__link {
        padding-inline: 0.85rem !important;
    }
}