/* ============================================================
   TopBar sperimentale sopra la navbar
   Colore:
    - main_color presente => classe .cp-topbar-branded, colore via
      variabile inline --cp-navbar-bg
    - main_color assente   => topBarCePosto (mai gli stati credito)
   Dimensioni dinamiche per taglia (topbar_size: S/M/L, default M):
    - --cp-topbar-h   (altezza barra) definito su html.* per pilotare
      anche navbar top e offset contenuto
    - --cp-topbar-img / --cp-topbar-font definiti su .cp-topbar--*
   Allo scroll la topbar collassa lasciando 2px visibili (filo colorato).
   ============================================================ */

html.cp-topbar-size-s {
    --cp-topbar-h: 56px;
    --cp-topbar-hh: 28px;
}
html.cp-topbar-size-m {
    --cp-topbar-h: 80px;
    --cp-topbar-hh: 40px;
}
html.cp-topbar-size-l {
    --cp-topbar-h: 100px;
    --cp-topbar-hh: 50px;
}

.cp-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--cp-topbar-h, 80px);
    z-index: 1034;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 50px;
    border: none;
    transition: transform .3s ease;
}

.cp-topbar--s {
    --cp-topbar-img: 44px;
    --cp-topbar-font: 16px;
}
.cp-topbar--m {
    --cp-topbar-img: 62px;
    --cp-topbar-font: 20px;
}
.cp-topbar--l {
    --cp-topbar-img: 78px;
    --cp-topbar-font: 24px;
}

/* main_color presente: colore via variabile inline */
.cp-topbar.cp-topbar-branded {
    background: var(--cp-navbar-bg, #ffffff);
}

/* senza main_color: la topbar usa sempre topBarCePosto (mai gli stati
   credito, che restano solo sulla navbar), senza il bordo inferiore
   per l'unità visiva */
.cp-topbar.topBarCePosto {
    border-bottom: none;
}

/* collasso: restano 2px visibili in alto (filo colorato del main_color della topbar) */
body.cp-nav-collapsed .cp-topbar {
    transform: translateY(calc(-100% + 2px));
}

/* ============================================================
   Trasferimento brand nella navbar quando la topbar collassa:
   immagine+titolo si spostano accanto alla casetta e si ridimensionano
   per entrare nei 40px della navbar.
   - verticale: centro brand (H/2) -> centro navbar collassata (20),
     quindi translateY = 18px + H/2 (vale per ogni taglia)
   - orizzontale: a destra della casetta (--cp-casetta-w misurata via JS)
   Solo su schermi >= 768px (su mobile la navbar è a hamburger).
   ============================================================ */
.cp-topbar .cp-topbar-brand {
    transition: transform .3s ease, gap .3s ease;
    will-change: transform;
}

body:not(.cp-nav-collapsed) .cp-topbar .cp-topbar-brand {
    transform: translate(0, 0);
}

body.cp-nav-collapsed .cp-topbar .cp-topbar-brand {
    transform: translate(calc(var(--cp-casetta-w, 0px) + 10px), calc(18px + var(--cp-topbar-hh, 40px)));
}

body.cp-nav-collapsed .cp-topbar-brand {
    gap: 6px;
}

body.cp-nav-collapsed .cp-topbar-brand img {
    width: 28px;
    height: 28px;
}

body.cp-nav-collapsed .cp-topbar-title {
    font-size: 14px;
}

/* nel trasferimento in navbar (bianca, topBarCePosto) il brand deve essere
   leggibile: colore scuro, non l'eventuale colore chiaro della topbar */
body.cp-nav-collapsed .cp-topbar-brand,
body.cp-nav-collapsed .cp-topbar-brand:hover,
body.cp-nav-collapsed .cp-topbar-brand:focus,
body.cp-nav-collapsed .cp-topbar-brand:active {
    color: #333 !important;
}

@media (max-width: 767px) {
    body.cp-nav-collapsed .cp-topbar .cp-topbar-brand {
        transform: none;
    }
}

/* ============================================================
   Footer attività (web): si appende al body in flusso di pagina
   e scrolla con essa. L'HTML è compilato (colori inline), qui solo
   tipografia e piccoli aggiustamenti responsive.
   ============================================================ */
.cp-activity-footer {
    width: 100%;
}

.cp-footer {
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.6;
}

.cp-footer a:hover {
    text-decoration: underline;
}

@media (max-width: 767px) {
    .cp-footer {
        font-size: 11px;
    }
}

.cp-topbar-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    color: inherit;
    text-decoration: none;
}

.cp-topbar-brand img {
    width: var(--cp-topbar-img, 62px);
    height: var(--cp-topbar-img, 62px);
}

/* nessun cambio di colore su hover/focus: il colore resta quello
   assegnato (scuro o chiaro) in base allo sfondo */
.cp-topbar-brand,
.cp-topbar-brand:hover,
.cp-topbar-brand:focus,
.cp-topbar-brand:active {
    color: inherit !important;
}

.cp-topbar-title,
.cp-topbar-title:hover,
.cp-topbar-title:focus {
    color: inherit !important;
}

.cp-topbar-title {
    font-size: var(--cp-topbar-font, 20px);
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
}

/* navbar di seguito alla topbar */
.navbar-fixed-top {
    transition: top .3s ease;
}

body:not(.cp-nav-collapsed) .navbar-fixed-top {
    top: var(--cp-topbar-h, 80px);
}

body.cp-nav-collapsed .navbar-fixed-top {
    top: 0;
}

/* offset contenuto: padding-top pilotato dalla var --cp-topbar-h
   (inline in body.php: calc(var(--cp-topbar-h, 0px) + 70px)).
   Collassato: torna a 70px (solo navbar); serve !important per battere
   lo stile inline di body.php. */
.wrap > .container {
    transition: padding-top .3s ease;
}

body.cp-nav-collapsed .wrap > .container {
    padding-top: 70px !important;
}

/* Copertina full-bleed di attivita-fe: il container ha padding:unset
   (override_containers.css), quindi l'offset topbar va sulla copertina
   stessa. Collassato: torna a inizio pagina. */
.wrap .copertina {
    margin-top: var(--cp-topbar-h, 0px);
    transition: margin-top .3s ease;
}

body.cp-nav-collapsed .wrap .copertina {
    margin-top: 0;
}