/* SLU Toolkit — Floating Contact Tabs frontend styles */

#slu-ctabs {
    position: fixed;
    top: var(--ctb-top, 50%);
    transform: translateY(-50%);
    z-index: 99998;
    display: flex;
    flex-direction: column;
    gap: var(--ctb-gap, 8px);
}

/* Each tab is only as wide as its own content, so one tab's label sliding
   open does not stretch the other (collapsed) tabs to match. Align the whole
   stack to the screen edge on its side. */
#slu-ctabs.slu-ctabs--right { right: 0; align-items: flex-end; }
#slu-ctabs.slu-ctabs--left  { left: 0;  align-items: flex-start; }

/* Tab */
.slu-ctabs-tab {
    display: flex;
    align-items: stretch;
    height: var(--ctb-height, 52px);
    text-decoration: none;
    background: var(--ctb-bg, #0f0f0f);
    border: var(--ctb-border-css, none);
    box-shadow: 0 2px 14px rgba(0,0,0,0.28);
    overflow: hidden;
    transition: background 0.25s ease, border-color 0.25s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    box-sizing: border-box;
}

/* Screen-facing corner is rounded; the edge-facing side is flat against the
   viewport. Right rail rounds its left corners; left rail rounds its right. */
#slu-ctabs.slu-ctabs--right .slu-ctabs-tab {
    border-radius: var(--ctb-radius, 10px) 0 0 var(--ctb-radius, 10px);
    border-right: none;
    flex-direction: row;           /* label (order 1) then icon (order 2) */
}
#slu-ctabs.slu-ctabs--left .slu-ctabs-tab {
    border-radius: 0 var(--ctb-radius, 10px) var(--ctb-radius, 10px) 0;
    border-left: none;
    flex-direction: row-reverse;   /* icon sits on the screen edge */
}

.slu-ctabs-tab:hover,
.slu-ctabs-tab:focus,
.slu-ctabs-tab:focus-visible {
    background: var(--ctb-bg-hover, #1f1f1f);
    outline: none;
    text-decoration: none;
}

/* ---- Icon block ----
   Sits on the flat (screen-edge) side in its own inset panel: a translucent
   overlay laid over the tab background so it reads a shade darker on any
   colour, plus a divider between icon and label tinted from the slot accent.
   Mirrors the original plugin's layered icon-panel look, adapted to the
   Toolkit's CSS-variable theming. */
.slu-ctabs-icon {
    width: var(--ctb-height, 52px);
    height: var(--ctb-height, 52px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ctb-slot-icon, var(--ctb-slot-accent, var(--ctb-icon, #fff)));
    background: rgba(0,0,0,0.22);
    transition: background 0.25s ease;
}
.slu-ctabs-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

/* Divider between icon panel and label. The icon sits on the screen-edge
   side, so the divider is on the label-facing edge of the icon: that's the
   LEFT edge on a right rail, the RIGHT edge on a left rail. Tinted from the
   slot accent at low opacity via color-mix, with a neutral fallback. */
#slu-ctabs.slu-ctabs--right .slu-ctabs-icon {
    border-left: 1.5px solid var(--ctb-slot-accent, rgba(255,255,255,0.14));
    border-left-color: color-mix(in srgb, var(--ctb-slot-accent, #ffffff) 32%, transparent);
}
#slu-ctabs.slu-ctabs--left .slu-ctabs-icon {
    border-right: 1.5px solid var(--ctb-slot-accent, rgba(255,255,255,0.14));
    border-right-color: color-mix(in srgb, var(--ctb-slot-accent, #ffffff) 32%, transparent);
}

/* Hover: deepen the icon panel alongside the tab background darkening. */
.slu-ctabs-tab:hover .slu-ctabs-icon,
.slu-ctabs-tab:focus .slu-ctabs-icon,
.slu-ctabs-tab:focus-visible .slu-ctabs-icon {
    background: rgba(0,0,0,0.32);
}

/* Label — collapsed to zero width, expands on hover (the slide-out) */
.slu-ctabs-label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    transition: max-width 0.38s cubic-bezier(0.34, 1.1, 0.64, 1),
                padding 0.38s cubic-bezier(0.34, 1.1, 0.64, 1);
}
.slu-ctabs-tab:hover .slu-ctabs-label,
.slu-ctabs-tab:focus .slu-ctabs-label,
.slu-ctabs-tab:focus-visible .slu-ctabs-label {
    max-width: 240px;
    padding: 0 16px;
}

/* Two-line label: caption above, value below */
.slu-ctabs-caption {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 3px;
    color: var(--ctb-caption, rgba(255,255,255,0.55));
}
.slu-ctabs-value {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ctb-value, #fff);
}

/* When there's no value line, vertically centre the caption on its own */
.slu-ctabs-caption:only-child {
    margin-bottom: 0;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--ctb-value, #fff);
}

/* ---- Visibility ----
   Hidden by default until JS applies the correct class for this viewport,
   so there's no flash of tabs on a breakpoint that should hide them.
   JS adds .slu-ctabs-ready once it has evaluated the viewport, and adds
   .slu-ctabs-hidden when the current viewport is a hidden one. */
#slu-ctabs { visibility: hidden; }
#slu-ctabs.slu-ctabs-ready { visibility: visible; }
#slu-ctabs.slu-ctabs-hidden { display: none !important; }