/* Area press Agape: font, logo e respiro della barra superiore.
   Caricato tramite resources.styles in options.json, così il bundle JS di h5ai
   resta intatto e la personalizzazione sopravvive a un aggiornamento. */

/* Switzer, ospitato qui e non preso dal CDN di Fontshare: una richiesta a un terzo
   su ogni pagina manderebbe l'IP di chi visita a un dominio esterno, che è la
   ragione per cui abbiamo appena tolto Google Fonts. Tre pesi, 60 KB in tutto,
   sono quelli che il CSS di h5ai usa davvero: normal, bold e un 300. */
@font-face {
    font-family: 'Switzer';
    src: url('fonts/switzer-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Switzer';
    src: url('fonts/switzer-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Switzer';
    src: url('fonts/switzer-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Un po' di respiro sopra e sotto. Il padding va sul contenitore e non sui figli:
   #toolbar e #flowbar sono fissi a 48px, e alzarli singolarmente lascerebbe icone e
   breadcrumb allineati in alto. Così l'altezza passa da 49 a 61px senza toccare
   nient'altro. È l'unico numero da ritoccare se serve più o meno spazio. */
#topbar {
    padding: 6px 0;
}

#backlink {
    /* Stesso box del backlink originale (36px + 6px di padding, content-box:
       h5ai non imposta border-box globale). */
    width: 104px;
    height: 36px;
    padding: 6px 12px;

    background-image: url('agape-logo.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-origin: content-box;

    /* Arancione istituzionale, quindi a piena intensità: attenuarlo lo
       trasformerebbe in un pesca slavato invece che nel colore del marchio. */
    opacity: 1;
    transition: filter .2s ease-in-out;
}

/* Le due righe "powered / by h5ai" */
#backlink div {
    display: none;
}

/* h5ai vira il link all'azzurro al passaggio del mouse: qui diventa nero.
   Il colore è dentro il file SVG e un background-image non si ricolora dal CSS,
   quindi si usa un filtro: brightness(0) azzera i canali lasciando intatto il
   canale alfa, cioè annerisce il tratto senza toccarne la forma. Un secondo file
   in versione nera funzionerebbe, ma si scaricherebbe al primo passaggio del
   mouse e si vedrebbe lo scatto. Sui browser che non supportano i filtri il logo
   resta arancione: si perde l'effetto, non il logo. */
#backlink:hover {
    filter: brightness(0);
    opacity: 1;
    background-color: transparent;
}