/**
 * SCA | Floating button row alignment
 *
 * Aligns the three fixed-position bottom buttons into one row, all the same
 * size: the Click to Chat for WhatsApp plugin's cookie-left Hu-manity consent
 * icon (left), our own WhatsApp trigger (centered), and #sca-scroll-to-top
 * (right, styled in scroll-to-top.css). Same size/offset tokens as
 * scroll-to-top.css (--wp--preset--spacing--large / --small) so all three
 * match exactly.
 *
 * The Click to Chat for WhatsApp plugin's own on-screen widget is disabled
 * (WP admin: Click to Chat > Chat Button > Display); #sca-whatsapp-chat below
 * uses the plugin's documented `ctc_chat` class/`#ctc_chat` href hook instead,
 * so the plugin's own click handler still opens WhatsApp.
 *
 * @version 1.0.4
 */

/* WhatsApp trigger: centered, matches #sca-scroll-to-top's size/shape. */
#sca-whatsapp-chat {
    position: fixed;
    bottom: var(--wp--preset--spacing--small);
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    width: var(--wp--preset--spacing--large);
    height: var(--wp--preset--spacing--large);
    background-color: #25D366; /* WhatsApp brand green, so it reads as WhatsApp at a glance next to the orange scroll-to-top button */
    border-radius: var(--wp--custom--border-radius--full);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

#sca-whatsapp-chat:hover {
    background-color: #1ebe5b;
}

/* Slightly smaller than the Hu-manity cookie icon's own ~44px (owner preference, more
 * breathing room around the speech-bubble glyph). fill is set on both the svg and its
 * path: the SVG markup's path has its own fill="currentColor" attribute, which
 * otherwise wins over the parent svg's CSS fill and resolves to the theme's link
 * colour (orange) via inheritance, not white. */
#sca-whatsapp-chat svg {
    width: 2.3rem;
    height: 2.3rem;
    fill: #FFFFFF;
}

#sca-whatsapp-chat svg path {
    fill: #FFFFFF;
}

/* Hu-manity's cookie/revoke icon (#hu-revoke > #hu-revoke-wrapper > .hu-revoke-button,
 * loaded from cdn.hu-manity.co, not our markup): forced to the same size/offset as the
 * other two. !important because its own stylesheet is loaded after ours and we don't
 * control its specificity.
 *
 * #hu-revoke and #hu-revoke-wrapper are both sized too, not just the button: their own
 * default box is 50px, smaller than the 60px button forced below, and the button
 * overflows that box downward (not centered), so #hu-revoke's own `bottom` ends up 10px
 * below where the button actually renders. Sizing the two wrapper levels to match
 * removes the overflow so `bottom`/`left` on #hu-revoke describe where the button
 * itself actually sits.
 *
 * Only the icon (.hu-revoke-icon) is left alone: Hu-manity already sizes/centers it
 * proportionally to the button (relative units, not a fixed px size). Forcing the icon
 * to a fixed size too fought that proportional math and threw the icon off-center. */
#hu-revoke {
    bottom: var(--wp--preset--spacing--small) !important;
    left: var(--wp--preset--spacing--small) !important;
    width: var(--wp--preset--spacing--large) !important;
    height: var(--wp--preset--spacing--large) !important;
}

#hu-revoke-wrapper {
    width: var(--wp--preset--spacing--large) !important;
    height: var(--wp--preset--spacing--large) !important;
}

#hu-revoke .hu-revoke-button {
    width: var(--wp--preset--spacing--large) !important;
    height: var(--wp--preset--spacing--large) !important;
}