/* ============================================================================
   FLOATING ELEMENTS — viewport-fixed sticky call button + social rail
   ----------------------------------------------------------------------------
   One subsystem, two instances. Rendered site-wide from marketing_footer.html.
   The whole point: enforce ONE consistent treatment so the social icons can
   never become the clashing rainbow (FB-blue / IG-gradient / TikTok-black)
   that signals a DIY site. Platform brand colours are intentionally ignored —
   every icon shares --fe-accent. User picks platforms + URLs; CSS owns style.

   COLOUR NOTE: the public site does NOT load palette.css, but it DOES load
   /brand.css which defines the --mkt-* marketing vars. We key off
   --mkt-color-1 (primary brand) with a hardcoded fallback so this works even
   if the var is absent. Do not introduce palette.css-only vars here.
   ============================================================================ */

:root {
    --fe-accent: var(--mkt-color-1, #1d4ed8);
    --fe-accent-hover: var(--mkt-color-2, #1e40af);
    --fe-on-accent: #ffffff;
    --fe-size: 44px;          /* uniform icon button diameter */
    --fe-gap: 10px;
    --fe-z: 1000;             /* below modal overlays, above page content */
}

/* ----------------------------------------------------------------------------
   SOCIAL RAIL — fixed, left edge, vertically centred (desktop)
   ---------------------------------------------------------------------------- */
.fe-social-rail {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--fe-z);
    display: flex;
    flex-direction: column;
    gap: var(--fe-gap);
    padding: 8px 8px 8px 0;
}

.fe-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--fe-size);
    height: var(--fe-size);
    border-radius: 0 var(--fe-size) var(--fe-size) 0; /* flush to the edge */
    background-color: var(--fe-accent);
    color: var(--fe-on-accent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    text-decoration: none;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.fe-social-link:hover,
.fe-social-link:focus-visible {
    background-color: var(--fe-accent-hover);
    transform: translateX(3px);
    outline: none;
}

.fe-social-link svg {
    width: 20px;
    height: 20px;
    fill: currentColor;       /* monochrome — inherits --fe-on-accent */
}

/* ----------------------------------------------------------------------------
   STICKY CALL BUTTON — fixed, bottom-left pill (desktop)
   Bottom-left keeps clear of the bottom-right site-help trigger.
   ---------------------------------------------------------------------------- */
.fe-call-btn {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: var(--fe-z);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    background-color: var(--fe-accent);
    color: var(--fe-on-accent);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.fe-call-btn:hover,
.fe-call-btn:focus-visible {
    background-color: var(--fe-accent-hover);
    transform: translateY(-2px);
    outline: none;
}

.fe-call-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex-shrink: 0;
}

/* ----------------------------------------------------------------------------
   MOBILE (<= 768px) — resolve the rail/button collision.
   The vertical rail and a bottom-left button fight for the left edge on small
   screens, so on mobile the call action wins (it is the priority conversion):
   the call button becomes a full-width bottom bar and the social rail hides.
   Refine later if a fancier mobile treatment is wanted.
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .fe-social-rail {
        display: none;
    }

    .fe-call-btn {
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;
        justify-content: center;
        padding: 14px 20px;
        font-size: 1rem;
    }

    /* Keep the bottom bar from sitting on top of footer content. */
    .mk-footer {
        padding-bottom: 72px;
    }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .fe-social-link,
    .fe-call-btn {
        transition: none;
    }
}

/* Never print floating chrome. */
@media print {
    .fe-social-rail,
    .fe-call-btn {
        display: none !important;
    }
}