/*
 Theme Name:   NextAwards Child - Maskamente per Ricottacheeses
 Template:     nextawards
*/

/* ------------------------------------------------------------------------- *
/* GENERALI*/
/* ------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

/* ------------------------------------------------------------------------- *
/* MENU*/
/* ------------------------------------------------------------------------- */


.menu > li > ul{
  background: #fcf1e7!important;
}

.menu li ul > li a:hover{
  background:#fff!important;
}

.menu li ul > li > a{
  color:#e63911!important;
}

.header__quick ul li a {
    background: #E63911;
    color: #fff;
    border-radius: 20px;
    font-weight: 400;
    padding: 10px!important;
}



@media (max-width: 781px) {

   .header__logo-img, .header__logo_white-img {
    width: 100px!important;
    height: auto;
}
}


/* ------------------------------------------------------------------------- *
/* MEDIA TEXT*/
/* ------------------------------------------------------------------------- */

/* Gutenberg Columns: forzo 2 colonne per riga su mobile */
@media (max-width: 781px) {

  .cols-2-mobile.wp-block-columns {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  .cols-2-mobile.wp-block-columns > .wp-block-column {
    width: calc(50% - 12px) !important;
    flex: 0 0 calc(50% - 12px) !important;
  }
}


/* ------------------------------------------------------------------------- *
/* --- EFFETTO RICOTTA PER IMMAGINI E ICONE GUTENBERG PANNA--- */
/* ------------------------------------------------------------------------- */


/* Applichiamo l'effetto al wrapper del blocco immagine */
.ricotta-icon-effect {
    position: relative;
    display: inline-block;
    padding: 20px; /* Spazio per la forma organica */
    transition: all 0.4s ease;
    cursor: pointer;
}

/* Creiamo la forma organica (blob) dietro l'immagine */
.ricotta-icon-effect::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px; /* Regola in base alla dimensione delle tue icone */
    height: 80px;
    background: #fcf1e7; /* Colore rosa chiaro iniziale */
    border-radius: 35% 65% 70% 30% / 30% 40% 60% 70%;
    transform: translate(-50%, -50%);
    z-index: 0;
    transition: all 0.5s ease;
}

/* L'immagine effettiva */
.ricotta-icon-effect img {
    position: relative;
    z-index: 1;
    display: block;
    margin: 0 auto;
    width: 50px !important; /* Forza la dimensione dell'icona se necessario */
    height: auto !important;
    transition: all 0.3s ease;
    /* Se le tue icone sono rosse di base, questo filtro le tiene originali */
}

/* --- STATO HOVER --- */

/* Il blob diventa rosso e tondo */
.ricotta-icon-effect:hover::before {
    background: #e63911;
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
}

/* L'immagine PNG diventa bianca su sfondo rosso */
.ricotta-icon-effect:hover img {
    transform: scale(1.1);
    /* Filtro magico: rende l'immagine PNG completamente bianca */
    filter: brightness(0) invert(1); 
}


/* ------------------------------------------------------------------------- *
/* --- EFFETTO RICOTTA PER IMMAGINI E ICONE GUTENBERG BIANCO--- */
/* ------------------------------------------------------------------------- */


/* Applichiamo l'effetto al wrapper del blocco immagine */
.ricotta-icon-effect-2 {
    position: relative;
    display: inline-block;
    padding: 20px; /* Spazio per la forma organica */
    transition: all 0.4s ease;
    cursor: pointer;
}

/* Creiamo la forma organica (blob) dietro l'immagine */
.ricotta-icon-effect-2::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px; /* Regola in base alla dimensione delle tue icone */
    height: 80px;
    background: #ffffff; /* Colore rosa chiaro iniziale */
    border-radius: 35% 65% 70% 30% / 30% 40% 60% 70%;
    transform: translate(-50%, -50%);
    z-index: 0;
    transition: all 0.5s ease;
}

/* L'immagine effettiva */
.ricotta-icon-effect-2 img {
    position: relative;
    z-index: 1;
    display: block;
    margin: 0 auto;
    width: 50px !important; /* Forza la dimensione dell'icona se necessario */
    height: auto !important;
    transition: all 0.3s ease;
    /* Se le tue icone sono rosse di base, questo filtro le tiene originali */
}

/* --- STATO HOVER --- */

/* Il blob diventa rosso e tondo */
.ricotta-icon-effect-2:hover::before {
    background: #51c4f1;
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
}

/* L'immagine PNG diventa bianca su sfondo rosso */
.ricotta-icon-effect-2:hover img {
    transform: scale(1.1);
    /* Filtro magico: rende l'immagine PNG completamente bianca */
    filter: brightness(0) invert(1); 
}



/* ------------------------------------------------------------------------- *
/* --- EFFETTO RICOTTA PER BOTTONI GUTENBERG BIANCO ROSSO--- */
/* ------------------------------------------------------------------------- */

/* --- ANIMAZIONE DI BASE PER IL MORPHING --- */
@keyframes liquidMorph {
  0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 30% / 50% 60% 30% 60%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

/* --- EFFETTO SOFT PER LE ICONE PNG --- */
.ricotta-icon-soft {
    position: relative;
    display: inline-block;
    padding: 25px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.ricotta-icon-soft::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90px;
    height: 90px;
    background: #fff5f2;
    /* Forma liquida iniziale */
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: translate(-50%, -50%);
    z-index: 0;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    animation: liquidMorph 8s ease-in-out infinite;
}

.ricotta-icon-soft:hover::before {
    background: #e63911;
    width: 110px;
    height: 110px;
    transform: translate(-50%, -50%) rotate(15deg);
}

.ricotta-icon-soft img {
    position: relative;
    z-index: 1;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.ricotta-icon-soft:hover img {
    transform: scale(1.15) rotate(-5deg);
    filter: brightness(0) invert(1);
}

/* --- EFFETTO SOFT PER I BOTTONI --- */
.ricotta-button-soft .wp-block-button__link {
    position: relative;
    background-color: #e63911 !important;
    color: #fff !important;
    border: 2px solid #f2ede4 !important;
    padding: 14px 35px !important;
    border-radius: 50px !important;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
    z-index: 1;
    overflow: hidden;
}

.ricotta-button-soft .wp-block-button__link::before {
    content: '';
    position: absolute;
    top: 100%; /* Parte dal basso */
    left: 50%;
    width: 120%;
    height: 120%;
    background: #ffffff;
    border-radius: 50% 50% 0 0;
    transform: translateX(-50%);
    z-index: -1;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.ricotta-button-soft .wp-block-button__link:hover {
    color: #e63911 !important;
    border-color: #e63911 !important;
    transform: translateY(-4px);
}

.ricotta-button-soft .wp-block-button__link:hover::before {
    top: -10%; /* Sale e copre tutto */
    border-radius: 0;
}


/* ------------------------------------------------------------------------- *
/* --- EFFETTO RICOTTA PER BOTTONI GUTENBERG BIANCO CELESTE--- */
/* ------------------------------------------------------------------------- */

/* --- ANIMAZIONE DI BASE PER IL MORPHING --- */
@keyframes liquidMorph {
  0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 30% / 50% 60% 30% 60%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

/* --- EFFETTO SOFT PER LE ICONE PNG --- */
.ricotta-icon-soft {
    position: relative;
    display: inline-block;
    padding: 25px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.ricotta-icon-soft::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90px;
    height: 90px;
    background: #fff5f2;
    /* Forma liquida iniziale */
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: translate(-50%, -50%);
    z-index: 0;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    animation: liquidMorph 8s ease-in-out infinite;
}

.ricotta-icon-soft:hover::before {
    background: #51C4F1;
    width: 110px;
    height: 110px;
    transform: translate(-50%, -50%) rotate(15deg);
}

.ricotta-icon-soft img {
    position: relative;
    z-index: 1;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.ricotta-icon-soft:hover img {
    transform: scale(1.15) rotate(-5deg);
    filter: brightness(0) invert(1);
}

/* --- EFFETTO SOFT PER I BOTTONI --- */
.ricotta-button-soft-2 .wp-block-button__link {
    position: relative;
    background-color: #51C4F1 !important;
    color: #fff !important;
    border: 2px solid #f2ede4 !important;
    padding: 14px 35px !important;
    border-radius: 50px !important;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
    z-index: 1;
    overflow: hidden;
}

.ricotta-button-soft-2 .wp-block-button__link::before {
    content: '';
    position: absolute;
    top: 100%; /* Parte dal basso */
    left: 50%;
    width: 120%;
    height: 120%;
    background: #ffffff;
    border-radius: 50% 50% 0 0;
    transform: translateX(-50%);
    z-index: -1;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.ricotta-button-soft-2 .wp-block-button__link:hover {
    color: #51C4F1 !important;
    border-color: #51C4F1 !important;
    transform: translateY(-4px);
}

.ricotta-button-soft-2 .wp-block-button__link:hover::before {
    top: -10%; /* Sale e copre tutto */
    border-radius: 0;
}

/* ------------------------------------------------------------------------- *
/* ANIMAZIONI BACKGROUND VIDEO IMG*/
/* ------------------------------------------------------------------------- */

/* ANIMAZIONE BACK HOME HERO */

/* Rendiamo la sezione il contenitore di riferimento */
.hero-home {
    position: relative !important;
    overflow: hidden;
    min-height: 100vh; /* O l'altezza che hai impostato */
}

/* Gestione delle immagini fluttuanti */
.hero-home .float-item {
    position: absolute !important;
    z-index: 1; /* Default basso */
    pointer-events: none;
    transition: transform 0.1s ease-out; /* Fluidità per il mouse */
    margin: 0 !important; /* Rimuove margini di default di Gutenberg */
}

/* Layer Front: Molto sfocato, passa "sopra" il contenuto se vuoi */
.hero-home .layer-front {
    filter: blur(10px);
    z-index: 10;
}

/* Layer Mid: Nitido */
.hero-home .layer-mid {
    filter: blur(0px);
    z-index: 5;
}

/* Layer Back: Leggermente sfocato e piccolo */
.hero-home .layer-back {
    filter: blur(4px);
    opacity: 0.7;
    z-index: 2;
}

/* Animazione di galleggiamento (Floating) */
.hero-home .float-item img {
    animation: floating-hero 6s ease-in-out infinite;
    display: block;
    width: auto;
}

@keyframes floating-hero {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.hero-contact {
    min-height: 70vh; /* O l'altezza che hai impostato */
}


/* ANIMAZIONE VIDEO WEBM */


.hero-video {
  position: relative;
  overflow: hidden;
  min-height: 70vh; /* regola a piacere */
}

.hero-video__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* porta il contenuto sopra il video */
.hero-video > *:not(.hero-video__bg):not(.hero-video__bottom) {
  position: relative;
  z-index: 2;
}

/* overlay opzionale per migliorare leggibilità testo */
.hero-video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,0.0); /* cambia intensità */
}

/* IMMAGINI IN BACK SOPRA ANIMAZIONE VIDEO */

/* overlay immagine alla base della hero */
.hero-video__bottom{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  margin: 0 !important;
}

.hero-video__bottom img{
  width: 100%;
  height: auto;
  display: block;
}

.hero-video .wp-block-html{
  margin: 0 !important;
}







/* ------------------------------------------------------------------------- *
/* RICETTE*/
/* ------------------------------------------------------------------------- */



/* 1. STILI BASE E UTILITY */

.recipe-card, .recipe-card-home, .archive-recipe-card, .recipe-square-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 2. PAGINA RICETTA SINGOLA */

.recipe-flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 20px;
}

.recipe-card {
    flex: 1;
    min-width: 300px;
    padding: 30px;
    border: 1px solid #eaeaea;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.recipe-card h3 {
    margin-top: 0;
    color: #000;
    border-bottom: 2px solid #51c4f1;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.ingredient-list ul, .card-content ul {
    list-style: none;
    padding-left: 0;
}

.card-content ul li {
    padding: 8px 0;
    border-bottom: 1px solid #f9f9f9;
}

/* 3. HOME STRIP & CAROUSEL */

.latest-recipes-strip {
    padding: 50px 0;
    background-color: transparent;
}

.recipes-flex-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.recipe-card-home {
    flex: 1;
    min-width: 280px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.recipe-card-home:hover {
    transform: translateY(-10px);
}

.card-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.badge-servings {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: bold;
}

.card-body {
    padding: 20px;
    text-align: center;
}

.btn-view {
    display: inline-block;
    color: #51c4f1;
    border: 1px solid #51c4f1;
    padding: 8px 20px;
    border-radius: 5px;
    transition: all 0.3s;
}

.recipe-card-home:hover .btn-view {
    background: #51c4f1;
    color: #fff;
}

/* 4. ARCHIVIO GRID & SQUARE GRID */

.recipe-archive-grid, .recipe-grid-square {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 40px 0;
}

.recipe-grid-square { gap: 15px; } /* Override gap per la versione quadrata */

.archive-recipe-card { border: 1px solid #eee; }

.archive-recipe-card:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-color: #51c4f1;
}

.square-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.square-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.recipe-square-card:hover img { transform: scale(1.1); }

.square-overlay {
    position: absolute;
    inset: 0; /* Scorciatoia per top, left, bottom, right: 0 */
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
    text-align: center;
}

.recipe-square-card:hover .square-overlay { opacity: 1; }

.overlay-content h3 {
    color: #fff;
    text-transform: uppercase;
    font-size: 1.2em;
}

.servings-info {
    color: #fff;
    font-weight: bold;
    background: #51c4f1;
    padding: 4px 12px;
    border-radius: 4px;
}

/* 5. RESPONSIVE (MEDIA QUERIES) */

/* Tablet (992px) */
@media (max-width: 992px) {
    .recipe-archive-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile Generico (768px) */
@media (max-width: 768px) {
    .recipe-flex-container, .recipes-flex-row { flex-direction: column; }
    
    .recipe-card { min-width: 100%; }

    /* Griglia quadrata a 2 colonne */
    .recipe-grid-square {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0 10px;
    }

    /* Carousel Home Mobile */
    .is-home-carousel {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 15px;
        padding: 20px;
        scrollbar-width: none;
    }
    
    .is-home-carousel::-webkit-scrollbar { display: none; }
    
    .is-home-carousel .recipe-square-card {
        flex: 0 0 75%;
        scroll-snap-align: center;
    }

    /* Overlay sempre visibile su Mobile per leggibilità */
    .square-overlay {
        opacity: 1;
        background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 60%);
        align-items: flex-end;
        padding-bottom: 15px;
    }
}

/* Smartphone Small (600px - 480px) */
@media (max-width: 600px) {
    .recipe-archive-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    /* Opzionale: se vuoi la griglia quadrata a 1 colonna sui telefoni molto piccoli */
    /* .recipe-grid-square { grid-template-columns: 1fr; } */
}

/* --- Hero Section Ricetta Singola --- */
.recipe-hero {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 40px;
    background: #fdfaf7; /* Un colore leggero di sfondo */
    padding: 20px;
    border-radius: 20px;
}

.recipe-hero-image {
    flex: 1;
    max-width: 500px; /* Limita la larghezza massima dell'immagine */
}

.recipe-hero-image img {
    width: 100%;
    height: 450px; /* Altezza fissa per un look pulito */
    object-fit: cover; /* Taglia l'immagine senza deformarla */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.recipe-hero-content {
    flex: 1;
}

.recipe-hero-content h1 {
    font-size: 2.5em;
    margin-bottom: 15px;
    color: #333;
}

.recipe-meta-strip {
    margin-bottom: 20px;
    font-size: 1.1em;
}

.meta-item i {
    color: #51c4f1;
    margin-right: 8px;
}

/* --- Responsive Mobile --- */
@media (max-width: 768px) {
    .recipe-hero {
        flex-direction: column; /* Impila immagine e testo */
        padding: 10px;
        gap: 20px;
    }

    .recipe-hero-image {
        max-width: 100%;
        width: 100%;
    }

    .recipe-hero-image img {
        height: 300px; /* Più bassa su mobile per non occupare tutto lo schermo */
    }

    .recipe-hero-content h1 {
        font-size: 1.8em;
        text-align: center;
    }
    
    .recipe-meta-strip {
        text-align: center;
    }
}

/* Stile per la lista ingredienti (ul/li generati dall'editor) */
.ingredient-list .card-content ul {
    list-style: none !important; /* Rimuove i pallini standard */
    padding: 0 !important;
    margin: 0;
}

.ingredient-list .card-content ul li {
    position: relative;
    padding: 12px 0 12px 35px; /* Spazio per l'icona a sinistra */
    border-bottom: 1px dashed #eee; /* Riga tratteggiata elegante */
    font-size: 1.05rem;
    color: #444;
    transition: all 0.2s ease;
}

/* Icona personalizzata (un cerchietto o una spunta) */
.ingredient-list .card-content ul li::before {
    content: '\f00c'; /* Codice FontAwesome per la spunta (se hai FA attivo) */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #d2b48c; /* Colore crema/ricotta */
    font-size: 0.9rem;
}

/* Se NON usi FontAwesome, usa questo per un pallino moderno: */
/*
.ingredient-list .card-content ul li::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #d2b48c;
    border-radius: 50%;
}
*/

.ingredient-list .card-content ul li:last-child {
    border-bottom: none;
}

/* Effetto al passaggio del mouse */
.ingredient-list .card-content ul li:hover {
    padding-left: 40px;
    color: #000;
    background-color: #fdfbf9;
}

/* Quando l'utente clicca sull'ingrediente (simulato via CSS se vuoi, o via JS) */
.ingredient-list .card-content ul li {
    cursor: pointer;
    user-select: none;
}

/* Aggiungi questa classe via JavaScript se vuoi l'effetto "fatto" */
.ingredient-list .card-content ul li.checked {
    text-decoration: line-through;
    opacity: 0.5;
}

/* Stile quando l'ingrediente è completato */
.ingredient-list ul li.is-checked {
    text-decoration: line-through; /* Sbarra il testo */
    opacity: 0.5; /* Lo rende semitrasparente */
    color: #888; /* Cambia il colore in grigio */
    transition: all 0.3s ease;
}

/* Opzionale: cambia l'icona quando è spuntato */
.ingredient-list ul li.is-checked::before {
    color: #2ecc71; /* Il pallino/spunta diventa verde */
    content: '\f058'; /* Cambia l'icona in un cerchio spuntato (se usi FontAwesome) */
}

/* ------------------------------------------------------------------------- *
/* ACCORDION PERSONALIZZAZIONE NATIVO GUTEMBERG*/
/* ------------------------------------------------------------------------- */





/* ------------------------------------------------------------------------- *
/* FOOTER*/
/* ------------------------------------------------------------------------- */
footer{margin-top: 0!important;}
.wp-block-social-links .wp-social-link svg{height: 2em;width: 2em;}