/* ============================================================
   custom.css — Caseificio Raimo Vincenzo & F.lli
   Stili personalizzati aggiuntivi al tema Porto
   ============================================================ */

/* Flag Icons Library (bandiere SVG via CDN) */
@import url('https://cdn.jsdelivr.net/npm/flag-icons@7.2.3/css/flag-icons.min.css');


/* ------------------------------------------------------------
   Language Switcher — Bandiere nell'header
   ------------------------------------------------------------ */

/* Contenitore delle due bandiere */
.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-left: 10px;
}

/* Ogni singola bandiera */
.lang-flag {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none !important;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;

    /* Stato INATTIVO: grigio e rimpicciolita */
    opacity: 0.42;
    filter: grayscale(70%);
    transform: scale(0.88);

    transition: opacity       0.22s ease,
                filter        0.22s ease,
                transform     0.22s ease,
                border-color  0.22s ease;
}

/* Hover sulla bandiera inattiva */
.lang-flag:hover {
    opacity: 0.72;
    filter: grayscale(20%);
    transform: scale(1.0);
    text-decoration: none !important;
}

/* Stato ATTIVO: colori pieni, più grande, sottolineatura brand */
.lang-flag.lang-active {
    opacity: 1;
    filter: none;
    transform: scale(1.18);
    border-bottom: 2px solid #e36159; /* colore primario del tema */
}

/* Icona bandiera: dimensione e ombra leggera */
.lang-flag .fi {
    width: 1.35em;
    height: 1.0em;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.30);
}


/* ------------------------------------------------------------
   Sidebar prodotti — Rimozione freccia animata sui link
   ------------------------------------------------------------ */
.sidebar .nav-list .nav-link::after,
.sidebar .nav-list .nav-link::before {
    display: none !important;
    content: none !important;
}


/* ------------------------------------------------------------
   Pagina Fior di Ricotta — immagine prodotto responsive
   Desktop (≥768px): affiancata al testo (float a destra)
   Mobile: a tutta larghezza, con il testo sotto
   ------------------------------------------------------------ */
.ri-float-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 1.5rem 0;
}
@media (min-width: 768px) {
    .ri-float-img {
        float: right;
        width: 280px;
        margin: 0 0 1.5rem 1.5rem;
    }
}