/* SLU Toolkit — Mobile CTA Bar frontend styles
 *
 * Markup:
 *   #slu-mcta-bar.slu-mcta--{icon_bar|button_bar|button_grid}[.slu-mcta--no-bar-bg]
 *     > .slu-mcta-btn.slu-mcta-btn--{toolkit|elementor}.slu-mcta-btn--{icon-top|icon-left|text}[.slu-mcta-btn--no-bg]
 *         > .slu-mcta-icon > svg,  .slu-mcta-label
 *       (Elementor style wraps both in .elementor-button-content-wrapper)
 *
 * Every rule is anchored on #slu-mcta-bar. The Kit's `.elementor-kit-N button`
 * (0,1,1) and Hello's `button` reset must never beat a Toolkit-style button, and
 * Elementor-style buttons carry no Toolkit visual rules at all — only layout —
 * so the Kit shows through except where render_bar() emits per-slot overrides.
 *
 * The desktop-hide media query is emitted inline by render_bar() from the Mobile
 * breakpoint setting. It used to live here as a fixed 768px rule, which meant a
 * breakpoint above 768 could never show the bar.
 */

/* ── Bar ──────────────────────────────────────────────────────────────── */

#slu-mcta-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--mcb-gap, 6px);
    padding: 10px 14px;
    width: var(--mcb-bar-width, auto);
    max-width: var(--mcb-bar-width, calc(100vw - 32px));
    background: var(--mcb-bar-bg, #0f0f0f);
    border: var(--mcb-bar-border-css, 1px solid rgba(255,255,255,0.08));
    border-radius: var(--mcb-bar-radius, 24px);
    box-shadow: 0 -2px 32px rgba(0,0,0,0.45), 0 2px 0 rgba(255,255,255,0.04) inset;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s cubic-bezier(0.16,1,0.3,1), transform 0.45s cubic-bezier(0.16,1,0.3,1);
    box-sizing: border-box;
}

#slu-mcta-bar.slu-mcta-visible {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
}

/* Bar background off — no fill, border or shadow; the buttons float on their
   own. Taps in the gaps between buttons fall through to the page. */
#slu-mcta-bar.slu-mcta--no-bar-bg {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}
#slu-mcta-bar.slu-mcta--no-bar-bg.slu-mcta-visible { pointer-events: none; }
#slu-mcta-bar.slu-mcta--no-bar-bg.slu-mcta-visible .slu-mcta-btn { pointer-events: auto; }

.slu-mcta-divider {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,0.1);
    border-radius: 1px;
    margin: 0 2px;
    flex-shrink: 0;
}

/* ── Layouts ──────────────────────────────────────────────────────────── */

#slu-mcta-bar.slu-mcta--button_bar,
#slu-mcta-bar.slu-mcta--button_grid {
    width: var(--mcb-bar-width, calc(100vw - 32px));
    align-items: stretch;
}
#slu-mcta-bar.slu-mcta--button_grid { flex-wrap: wrap; }

#slu-mcta-bar.slu-mcta--button_bar .slu-mcta-divider,
#slu-mcta-bar.slu-mcta--button_grid .slu-mcta-divider { display: none; }

#slu-mcta-bar.slu-mcta--button_bar .slu-mcta-btn,
#slu-mcta-bar.slu-mcta--button_grid .slu-mcta-btn {
    width: auto;
    height: auto;
    min-width: 0;
}

/* Single row: every button takes an equal share. */
#slu-mcta-bar.slu-mcta--button_bar .slu-mcta-btn { flex: 1 1 0; }

/* Grid: cell = (row width − gaps) ÷ columns. flex-grow lets a short last row
   fill the width (5 buttons at 3 columns → 3 + two halves). The −0.5px stops
   sub-pixel rounding from pushing the last column onto a new row. */
#slu-mcta-bar.slu-mcta--button_grid .slu-mcta-btn {
    flex: 1 1 calc((100% - (var(--mcb-cols, 3) - 1) * var(--mcb-gap, 6px)) / var(--mcb-cols, 3) - 0.5px);
}

/* ── Buttons: shared layout (both styles) ─────────────────────────────── */

#slu-mcta-bar .slu-mcta-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    box-sizing: border-box;
    margin: 0;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
#slu-mcta-bar .slu-mcta-btn--icon-left,
#slu-mcta-bar .slu-mcta-btn--text {
    flex-direction: row;
    gap: 8px;
    flex-shrink: 1;   /* text buttons shrink (label ellipsises) rather than overflow the screen */
    min-width: 0;
}

#slu-mcta-bar .slu-mcta-btn:hover,
#slu-mcta-bar .slu-mcta-btn:focus,
#slu-mcta-bar .slu-mcta-btn:visited { text-decoration: none; }
#slu-mcta-bar .slu-mcta-btn:active { transform: scale(0.92); }

#slu-mcta-bar .slu-mcta-icon {
    display: block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    line-height: 0;
}
#slu-mcta-bar .slu-mcta-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}
#slu-mcta-bar .slu-mcta-label { display: block; }

/* ── Toolkit style ────────────────────────────────────────────────────── */

#slu-mcta-bar .slu-mcta-btn--toolkit {
    background: var(--mcb-slot-bg, var(--mcb-icon-bg, rgba(255,255,255,0.06)));
    border: var(--mcb-icon-border-css, none);
    border-radius: var(--mcb-icon-radius, 16px);
    box-shadow: none;
    color: var(--mcb-icon-color, #fff);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: background 0.2s ease, transform 0.15s ease;
}
/* The Back-to-Top slot is a <button>: Hello's reset and the Kit's `button`
   rules both target it. The #slu-mcta-bar anchor already outranks them; the
   !important on radius is belt-and-braces for the one property that bit before. */
#slu-mcta-bar button.slu-mcta-btn--toolkit { border-radius: var(--mcb-icon-radius, 16px) !important; }

#slu-mcta-bar .slu-mcta-btn--toolkit:hover,
#slu-mcta-bar .slu-mcta-btn--toolkit:focus,
#slu-mcta-bar .slu-mcta-btn--toolkit:focus-visible {
    background: var(--mcb-slot-bg-hover, var(--mcb-slot-bg, var(--mcb-icon-bg-hover, rgba(255,255,255,0.14))));
    color: var(--mcb-icon-color, #fff);
    outline: none;
}
#slu-mcta-bar .slu-mcta-btn--toolkit:visited { color: var(--mcb-icon-color, #fff); }

#slu-mcta-bar .slu-mcta-btn--toolkit .slu-mcta-icon {
    color: var(--mcb-slot-icon-color, var(--mcb-slot-accent, var(--mcb-icon-color, #fff)));
}

/* Icon above label — the original 58×58 tile. */
#slu-mcta-bar .slu-mcta-btn--toolkit.slu-mcta-btn--icon-top {
    width: 58px;
    height: 58px;
    min-height: 58px;
    padding: 0;
}
#slu-mcta-bar .slu-mcta-btn--toolkit.slu-mcta-btn--icon-top .slu-mcta-label {
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--mcb-slot-label-color, rgba(255,255,255,0.55));
}
/* Accent dot */
#slu-mcta-bar .slu-mcta-btn--toolkit.slu-mcta-btn--icon-top::before {
    content: '';
    position: absolute;
    top: 6px; right: 8px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--mcb-slot-accent, #fff);
    opacity: 0.9;
}

/* Icon beside label / text only — a real button, sized by the Button Text controls. */
#slu-mcta-bar .slu-mcta-btn--toolkit.slu-mcta-btn--icon-left,
#slu-mcta-bar .slu-mcta-btn--toolkit.slu-mcta-btn--text {
    width: auto;
    height: auto;
    min-height: var(--mcb-btn-h, 52px);
    padding: 0 12px;
}
/* In the full-width layouts the cell sets the width, so keep side padding tight —
   four buttons on a 390px phone leave ~90px each. */
#slu-mcta-bar.slu-mcta--button_bar .slu-mcta-btn--toolkit.slu-mcta-btn--icon-left,
#slu-mcta-bar.slu-mcta--button_bar .slu-mcta-btn--toolkit.slu-mcta-btn--text,
#slu-mcta-bar.slu-mcta--button_grid .slu-mcta-btn--toolkit.slu-mcta-btn--icon-left,
#slu-mcta-bar.slu-mcta--button_grid .slu-mcta-btn--toolkit.slu-mcta-btn--text { padding: 0 8px; gap: 6px; }
#slu-mcta-bar .slu-mcta-btn--toolkit.slu-mcta-btn--icon-left .slu-mcta-label,
#slu-mcta-bar .slu-mcta-btn--toolkit.slu-mcta-btn--text .slu-mcta-label {
    font-size: var(--mcb-btn-fs, 14px);
    font-weight: var(--mcb-btn-fw, 600);
    text-transform: var(--mcb-btn-tt, none);
    letter-spacing: normal;
    line-height: 1.2;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mcb-slot-label-color, var(--mcb-icon-color, #fff));
}

/* ── Elementor style ──────────────────────────────────────────────────────
   Visuals (background, colour, typography, padding, radius, border) come from
   the Kit's .elementor-button rules. Only layout is set here. */

#slu-mcta-bar .slu-mcta-btn--elementor .elementor-button-content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}
#slu-mcta-bar .slu-mcta-btn--elementor.slu-mcta-btn--icon-top .elementor-button-content-wrapper {
    flex-direction: column;
    gap: 4px;
}
#slu-mcta-bar .slu-mcta-btn--elementor .slu-mcta-icon {
    width: 1.25em;
    height: 1.25em;
    margin: 0;
    color: var(--mcb-slot-icon-color, currentColor);
}
#slu-mcta-bar .slu-mcta-btn--elementor.slu-mcta-btn--icon-top .slu-mcta-icon { width: 1.5em; height: 1.5em; }
#slu-mcta-bar .slu-mcta-btn--elementor .slu-mcta-label {
    flex: 0 1 auto;   /* Elementor gives .elementor-button-text flex-grow, which un-centres it */
    min-width: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Background off (either style) ────────────────────────────────────────
   Specificity (1,2,0) / (1,3,0) outranks the Toolkit hover and the Kit's
   .elementor-kit-N .elementor-button:hover (0,3,0). Border is kept. */

#slu-mcta-bar .slu-mcta-btn.slu-mcta-btn--no-bg,
#slu-mcta-bar .slu-mcta-btn.slu-mcta-btn--no-bg:hover,
#slu-mcta-bar .slu-mcta-btn.slu-mcta-btn--no-bg:focus,
#slu-mcta-bar .slu-mcta-btn.slu-mcta-btn--no-bg:focus-visible {
    background: transparent;
    box-shadow: none;
}