/**
 * MP Blocks - MP Topbar block styles
 *
 * Modern announcement bar. Desktop: balanced columns. Mobile: auto-scroll
 * (one column at a time, fade) + navigation arrows.
 *
 * Ported from the standalone "topbar" module (Stephane Le Coz / Qwiik).
 *
 * @author    Maxime Potier <contact@maximepotier.fr>
 * @copyright 2026 Maxime Potier
 * @license   Commercial - All rights reserved
 */

.mptb {
    --mptb-text: #ffffff;
    --mptb-size: 14px;

    box-sizing: border-box;
    color: var(--mptb-text);
    font-size: var(--mptb-size);
    line-height: 1.4;
    width: 100%;
}

.mptb *,
.mptb *::before,
.mptb *::after {
    box-sizing: border-box;
}

/* Merged into the theme's sticky header (sticky mode): if that host is a flex
   container (Bootstrap navbar...), the bar takes its own row instead of sitting
   next to the logo/menu. No effect if the host is a regular block. */
.mptb--merged {
    flex-basis: 100%;
    max-width: 100%;
}

/* "content" mode: the bar ALSO carries the theme's .container class (added in
   the template) -> same max width and centering as the rest of the page. If the
   bar ends up INSIDE a theme .container (already-contained zone), neutralize the
   inner container to avoid a double gutter. */
.container .mptb.mptb--content.container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Sticky: the mptb--fixed class is added by the JS on scroll (more reliable than
   position: sticky, which breaks as soon as a parent has overflow). In fixed
   mode the bar spans the full viewport width, even in "content" mode. */
.mptb--fixed {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1055; /* above the theme's sticky headers (Bootstrap ~1030) */
    margin-top: 0 !important;
    max-width: none;
    width: 100%;
}

.mptb-inner {
    align-items: center;
    display: flex;
    gap: 24px;
    justify-content: center;
    margin: 0 auto;
    min-height: 40px;
    padding: 8px 16px;
    position: relative;
}

/* Fixed height: the bar is exactly --mptb-height, content stays vertically
   centered (align-items) and vertical padding collapses so it doesn't overflow.
   Width/icons/text adapt automatically. */
.mptb[style*="--mptb-height"] .mptb-inner {
    min-height: var(--mptb-height);
    height: var(--mptb-height);
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

.mptb-col {
    align-items: center;
    display: flex;
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    text-align: center;
}

/* Subtle separators between columns (desktop). rgba fallback for browsers
   without color-mix (< 2023): the separator stays visible. */
.mptb-col + .mptb-col {
    border-left: 1px solid rgba(255, 255, 255, .25);
    border-left: 1px solid color-mix(in srgb, var(--mptb-text) 25%, transparent);
    padding-left: 24px;
}

.mptb-link {
    align-items: center;
    color: var(--mptb-text);
    display: inline-flex;
    gap: var(--mptb-gap, 8px);
    min-width: 0;
    text-decoration: none;
}

/* Icon / image after the text: reverse the order of the link's children. */
.mptb--icon-after .mptb-link { flex-direction: row-reverse; }
.mptb--icon-after .mptb-phone { flex-direction: row; } /* phone keeps icon + label + number */

a.mptb-link:hover {
    color: var(--mptb-text);
    opacity: .85;
    text-decoration: none;
}

.mptb-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mptb-number {
    font-weight: 700;
    white-space: nowrap;
}

.mptb-ico {
    flex-shrink: 0;
    height: var(--mptb-icon-h, 18px);
    width: var(--mptb-icon-h, 18px);
}

.mptb-img {
    flex-shrink: 0;
    height: var(--mptb-icon-h, 18px);
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

.mptb-phone .mptb-ico {
    color: var(--mptb-text);
}

/* Navigation arrows (mobile only) */
.mptb-nav {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--mptb-text);
    cursor: pointer;
    display: none;
    flex-shrink: 0;
    height: 28px;
    justify-content: center;
    opacity: .8;
    padding: 0;
    width: 28px;
}

.mptb-nav svg {
    height: 18px;
    width: 18px;
}

.mptb-nav:hover {
    opacity: 1;
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    .mptb-inner {
        gap: 8px;
    }

    .mptb-col + .mptb-col {
        border-left: 0;
        padding-left: 0;
    }

    /* Scroll mode: one column visible at a time, cross-fade. */
    .mptb--slide .mptb-inner {
        display: grid;
        grid-template-columns: 28px 1fr 28px;
        align-items: center;
    }

    .mptb--slide .mptb-col {
        grid-area: 1 / 2;
        opacity: 0;
        pointer-events: none;
        transition: opacity .5s ease;
    }

    .mptb--slide .mptb-col.mptb-col--active {
        opacity: 1;
        pointer-events: auto;
    }

    .mptb--slide.mptb--arrows .mptb-nav {
        display: flex;
    }

    .mptb--slide.mptb--arrows .mptb-nav--prev { grid-area: 1 / 1; }
    .mptb--slide.mptb--arrows .mptb-nav--next { grid-area: 1 / 3; }

    /* Without scrolling: stacked columns. */
    .mptb:not(.mptb--slide) .mptb-inner {
        flex-direction: column;
        gap: 6px;
        padding: 10px 16px;
    }
}

@media (min-width: 768px) {
    .mptb-nav {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mptb--slide .mptb-col {
        transition: none;
    }
}