/* ============================================================
   TOP BAR — layout Academy
   Barra nera: badge a sinistra, call to action a destra.
   Markup: template-parts/headers/top-bar.php
   ============================================================ */
:root {
    --topbar-h: 40px;
}

.top-bar {
    width: 100%;
    min-height: var(--topbar-h);
    background: #0e0e0e;
    color: #fff;
    position: relative;
    z-index: 1001;
    overflow: hidden;
}

.top-bar__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 9px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.top-bar__badges {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    min-width: 0;
}

/* Colore dichiarato sullo span, non ereditato: general.css ha
   `p,span { color: var(--site-text-color) }` (#000) e una regola diretta batte
   sempre l'ereditarietà, per quanto debole sia. */
.top-bar__badge {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    letter-spacing: .06em;
    line-height: 1.2;
    color: #c9c5be;
}

.top-bar__badge > span {
    color: inherit;
}

.top-bar__badge.is-strong {
    color: #fff;
    font-weight: 600;
}

.top-bar__stars {
    color: #fff;
    letter-spacing: 1px;
}

.top-bar__cta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: color .25s ease;
}

.top-bar__cta:hover {
    color: #c9c5be;
}

@media (max-width: 1199.98px) {
    .top-bar__inner { padding: 9px 32px; }
    .top-bar__badges { gap: 18px; }
}

/* Sotto i 992px resta solo il badge principale: tre badge più la CTA su una
   riga sola diventano illeggibili. */
@media (max-width: 991.98px) {
    .top-bar__badge:not(.is-strong) { display: none; }
}

@media (max-width: 767.98px) {
    .top-bar__inner { padding: 8px 20px; gap: 12px; }
    .top-bar__badge,
    .top-bar__cta { font-size: 11px; }
    .top-bar__cta svg { display: none; }
}

@media (max-width: 479.98px) {
    /* Resta solo la CTA: è l'informazione che porta all'iscrizione. */
    .top-bar__badges { display: none; }
    .top-bar__inner { justify-content: center; }
}

/* L'header è fisso e insegue il bordo inferiore della top bar, che invece
   scorre via col documento: --header-top vale `altezza barra - scroll` e lo
   aggiorna top-bar.js a ogni frame, fino a 0 quando la barra è uscita.
   Il fallback copre il caso in cui il JS non giri. */
body.has-top-bar header {
    top: var(--header-top, var(--topbar-h));
}

body.has-top-bar.admin-bar header {
    top: calc(var(--header-top, var(--topbar-h)) + 30px);
}