/* =========================================================
   Top Bar – sticky with navigation
   ========================================================= */

/* ── Fixed header wrapper ───────────────────────────── */
.c-site-header-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
}

/* Push the main content down so it starts after the fixed header */
main {
    padding-top: calc(var(--top-bar-height, 2.5rem) + var(--nav-height, 10rem));
}

/* Define the top‑bar height for the calc above */
:root {
    --top-bar-height: 2.5rem;
}

/* ── Top Bar ────────────────────────────────────────── */
.c-top-bar {
    background: var(--top-bar-bg, #5900a8);
    color: var(--top-bar-text, #fff);
    font-size: var(--top-bar-font-size, 0.875rem) !important;
    padding: 0.4rem 0;
}

.c-top-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ── Contact links (phone / email) ──────────────────── */
.c-top-bar__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.c-top-bar__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--top-bar-text, #fff);
    text-decoration: none;
    white-space: nowrap;
    font-size: var(--font-size-sm) !important;
    transition: color 0.2s ease;
}

.c-top-bar__link:hover {
    color: var(--top-bar-hover, #e0e0e0);
}

.c-top-bar__link svg {
    flex-shrink: 0;
    color: inherit;
    pointer-events: none;
}

/* ── Social icons ───────────────────────────────────── */
.c-top-bar__social {
    display: flex;
    gap: 0.75rem;
}

.c-top-bar__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--top-bar-icon-size, 1.25rem) + 0.5rem);
    height: calc(var(--top-bar-icon-size, 1.25rem) + 0.5rem);
    transition: opacity 0.2s ease;
}

/* Brand colours – locked by platform‑specific classes */
.c-top-bar__social-link--facebook  { color: #1877F2 !important; }
.c-top-bar__social-link--twitter   { color: #000000 !important; }
.c-top-bar__social-link--instagram { color: #E4405F !important; }
.c-top-bar__social-link--linkedin  { color: #0A66C2 !important; }
.c-top-bar__social-link--youtube   { color: #FF0000 !important; }
.c-top-bar__social-link--tiktok    { color: #000000 !important; }

/* Hover – only change opacity, keep brand colour */
.c-top-bar__social-link:hover {
    opacity: 0.8;
    background: transparent !important;
    color:#fff !important;
}

.c-top-bar__social-link svg {
    width: var(--top-bar-icon-size, 1.25rem);
    height: var(--top-bar-icon-size, 1.25rem);
    fill: currentColor;
    pointer-events: none;
}

/* ── Mobile ─────────────────────────────────────────── */
@media (max-width: 600px) {
    .c-top-bar__inner {
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: space-between;
        gap: 0.5rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .c-top-bar__contact {
        gap: 0.75rem;
    }

    .c-top-bar__social {
        gap: 0.5rem;
    }
}