/*

Theme Name: GeneratePress Child

Description: Stile Premium Magazine per Ricette (UX/UI Enhanced)

Template: generatepress

Version: 3.0 (Elegant Teal)

*/


/* 1. IMPORTAZIONE FONT GOOGLE (Playfair Display + Inter) */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');


/* =========================================

2. VARIABILI & CONFIGURAZIONE

========================================= */

:root {

  /* --- COLORI --- */

  --primary: #349E9E;
  /* Teal principale */

  --primary-dark: #236c6c;
  /* Teal scuro per testi/hover */

  --primary-light: #e0f2f2;
  /* Sfondo leggero accento */


  --text-main: #2D3748;
  /* Grigio scuro (non nero assoluto) per lettura */

  --text-head: #1a202c;
  /* Quasi nero per i titoli */

  --text-meta: #718096;
  /* Grigio medio per date/autori */


  --bg-body: #FAFAFA;
  /* Off-white caldo */

  --bg-card: #FFFFFF;
  /* Bianco puro */


  /* --- TIPOGRAFIA --- */

  --font-heading: 'Playfair Display', serif;
  /* Eleganza */

  --font-body: 'Inter', sans-serif;
  /* Leggibilità */


  /* --- UI DESIGN --- */

  --radius: 8px;
  /* Angoli leggermente smussati (più professionale di 16px) */

  --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);

  --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);

  --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}


/* Base Body */

body {

  background-color: var(--bg-body);

  color: var(--text-main);

  font-family: var(--font-body);

  font-size: 17px;
  /* 1px in più per leggibilità moderna */

  line-height: 1.8;

  -webkit-font-smoothing: antialiased;

}


/* Link Reset */

a {

  color: var(--primary);

  text-decoration: none;

  transition: var(--transition);

}

a:hover {
  color: var(--primary-dark);
}


/* Titoli Generali */

h1,
h2,
h3,
h4,
h5,
h6 {

  font-family: var(--font-heading);

  color: var(--text-head);

  line-height: 1.25;

  margin-bottom: 0.8em;

}


/* =========================================

3. HERO SECTION (Articolo Singolo)

========================================= */

.modern-hero {

  position: relative;

  height: 60vh;
  /* Più alto per impatto visivo */

  min-height: 500px;

  display: flex;

  align-items: center;
  /* Contenuto centrato verticalmente */

  justify-content: center;

  background-size: cover;

  background-position: center;

  margin-bottom: 60px;

}


.modern-hero::before {

  content: '';

  position: absolute;

  inset: 0;

  /* Overlay scuro per garantire leggibilità sempre */

  background: rgba(0, 0, 0, 0.4);

  backdrop-filter: blur(2px);
  /* Effetto "Frosted Glass" leggero */

}


.hero-container {

  position: relative;

  z-index: 2;

  text-align: center;

  max-width: 800px;

  padding: 0 20px;

  color: #fff;

  /* Effetto dissolvenza in entrata */

  animation: fadeIn Up 0.8s ease-out;

}


/* Categoria Hero */

.hero-cat a {

  font-family: var(--font-body);

  background: var(--primary);

  color: #fff;

  padding: 6px 16px;

  border-radius: 4px;

  font-size: 0.75rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  margin-bottom: 20px;

  display: inline-block;

}


/* Titolo Hero */

h1.hero-title {

  font-size: clamp(2.5rem, 5vw, 4rem);
  /* Responsive typography */

  color: #fff;

  margin: 20px 0;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

}


/* Meta Dati Hero */

.hero-meta {

  font-family: var(--font-body);

  font-size: 0.95rem;

  opacity: 0.9;

  font-weight: 300;

}

@media (max-width: 768px) {

  .entry-content {

    padding: 0 10px;

  }

}


/* =========================================

4. GRIGLIA & CARD (Home/Archivio) - ENHANCED

========================================= */


/* Layout Griglia Desktop */

@media (min-width: 769px) {

  .blog .site-main,
  .archive .site-main,
  .search .site-main {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 40px;

    padding: 60px 20px;

  }


  .blog .inside-article,
  .archive .inside-article {

    height: 100%;

    display: flex;

    flex-direction: column;

  }

  .entry-summary {

    flex-grow: 1;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

  }

}


/* Layout Mobile */

@media (max-width: 768px) {

  .blog .site-main,
  .archive .site-main,
  .search .site-main {

    padding: 30px 15px;

  }


  .blog .inside-article,
  .archive .inside-article {

    margin-bottom: 30px;

  }

}


/* --- STILE CARD "Premium Magazine" --- */

.generate-columns .inside-article,
.blog .inside-article,
.archive .inside-article {

  background: var(--bg-card);

  border: none;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.04);

  border-radius: var(--radius);

  overflow: hidden;

  transition: var(--transition);

  padding: 0 !important;

  position: relative;

}


/* Hover Effect: Elegant Lift */

.inside-article:hover {

  transform: translateY(-6px);

  box-shadow: 0 12px 24px rgba(52, 158, 158, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.04);

}


/* Immagine Card - Aspect Ratio Perfetto */

.post-image {

  margin: 0 !important;

  overflow: hidden;

  position: relative;

  aspect-ratio: 16 / 10;
  /* Proporzioni cinematografiche */

}


.post-image img {

  height: 100%;

  width: 100%;

  object-fit: cover;

  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);

}


.inside-article:hover .post-image img {

  transform: scale(1.05);

}


/* Overlay Gradient su Immagine (opzionale, per dare profondità) */

.post-image::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  height: 40%;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.15), transparent);

  opacity: 0;

  transition: opacity 0.4s ease;

}


.inside-article:hover .post-image::after {

  opacity: 1;

}


/* Contenuto Card */

.entry-header {

  padding: 28px 32px 8px 32px;

}


.entry-summary {

  padding: 0 32px 32px 32px;

}


/* Meta Info (Data/Autore) - Prima del Titolo */

.entry-header .entry-meta {

  font-family: var(--font-body);

  font-size: 0.8rem;

  color: var(--text-meta);

  font-weight: 500;

  margin-bottom: 12px;

  letter-spacing: 0.5px;

  text-transform: uppercase;

}


.entry-header .entry-meta a {

  color: var(--primary);

}


/* Titolo Card - Più Bilanciato */

.entry-header .entry-title {

  font-size: 1.5rem;

  font-weight: 700;

  margin-bottom: 0;

  line-height: 1.3;

}


.entry-header .entry-title a {

  color: var(--text-head);

  transition: color 0.3s ease;

  display: inline;

  background-image: linear-gradient(120deg, var(--primary) 0%, var(--primary) 100%);

  background-repeat: no-repeat;

  background-size: 0% 2px;

  background-position: 0 100%;

  transition: background-size 0.3s ease, color 0.3s ease;

}


.entry-header .entry-title a:hover {

  color: var(--primary);

  background-size: 100% 2px;

}


/* Testo Estratto - Maggiore Leggibilità */

.entry-summary p {

  font-size: 0.95rem;

  color: var(--text-meta);

  line-height: 1.7;

  margin-bottom: 24px;

  margin-top: 16px;

}


/* Categorie/Tag nella Card */

.entry-summary .cat-links,
.entry-summary .tags-links {

  font-size: 0.75rem;

  margin-bottom: 16px;

}


.entry-summary .cat-links a,
.entry-summary .tags-links a {

  background: var(--primary-light);

  color: var(--primary-dark);

  padding: 4px 12px;

  border-radius: 4px;

  font-weight: 600;

  margin-right: 6px;

  display: inline-block;

  margin-bottom: 6px;

  transition: all 0.3s ease;

}


.entry-summary .cat-links a:hover,
.entry-summary .tags-links a:hover {

  background: var(--primary);

  color: #fff;

}


/* Bottone "Continua a Leggere" - Stile Premium */

.read-more-container {

  margin-top: auto;

  padding-top: 8px;

}


a.read-more {

  font-family: var(--font-body);

  font-size: 0.8rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  color: var(--primary);

  display: inline-flex;

  align-items: center;

  gap: 8px;

  transition: all 0.3s ease;

}


/* Freccia dopo il bottone */

a.read-more::after {

  content: '→';

  font-size: 1.1rem;

  transition: transform 0.3s ease;

}


a.read-more:hover {

  color: var(--primary-dark);

}


a.read-more:hover::after {

  transform: translateX(4px);

}


/* Separatore sottile tra meta e contenuto (opzionale) */

.entry-header::after {

  content: '';

  display: block;

  width: 40px;

  height: 3px;

  background: var(--primary);

  margin-top: 16px;

  border-radius: 2px;

  opacity: 0;

  transition: opacity 0.4s ease;

}


.inside-article:hover .entry-header::after {

  opacity: 1;

}


/* Footer Card - Se presenti commenti/condivisioni */

.entry-footer {

  padding: 0 32px 28px 32px;

  font-size: 0.8rem;

  color: var(--text-meta);

  border-top: 1px solid rgba(0, 0, 0, 0.06);

  padding-top: 16px;

  margin-top: auto;

}


footer.entry-meta {

  padding: 0 32px 28px 32px;

  font-size: 0.8rem;

}


/* Responsive Typography per Card */

@media (max-width: 768px) {

  .entry-header .entry-title {

    font-size: 1.35rem;

  }


  .entry-header,
  .entry-summary,
  footer.entry-meta {

    padding-left: 24px;

    padding-right: 24px;

  }

}


/* =========================================

5. CONTENUTO ARTICOLO (Leggibilità UX)

========================================= */

.single .inside-article {

  padding: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  border: none !important;

}


.entry-content {

  max-width: 720px;
  /* Standard aureo per lettura */

  margin: 0 auto;

  font-size: 1.15rem;
  /* 19px circa */

  color: var(--text-main);

}


/* Prima lettera del primo paragrafo (Drop Cap) - Opzionale, molto "Magazine" */

.entry-content>p:first-of-type::first-letter {

  float: left;

  font-family: var(--font-heading);

  font-size: 3.5rem;

  line-height: 0.8;

  padding-right: 12px;

  color: var(--primary);

  font-weight: 700;

}


/* Titoli interni H2 */

.entry-content h2 {

  font-size: 2.2rem;

  margin-top: 2.5em;

  margin-bottom: 0.8em;

  color: var(--text-head);

  display: flex;

  align-items: center;

}


/* =========================================

6. RICERCA MODALE (FULL SCREEN PREMIUM)

========================================= */


/* Overlay Sfondo con Blur Effect */

.gp-modal__overlay {

  background-color: rgba(190, 190, 190, 0.30) !important;

  backdrop-filter: blur(12px) saturate(140%);

  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  z-index: 9999;

}


/* Container Principale Modale */

.gp-modal__container {

  max-width: 100%;

  padding: 60px 20px;

}


/* Barra di Ricerca - Stile "Floating Pill" */

.search-modal-fields {

  background: #ffffff;

  border: 2px solid rgba(52, 158, 158, 0.15);

  border-radius: 60px;

  padding: 20px 35px;

  display: flex;

  align-items: center;

  gap: 20px;

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04);

  max-width: 720px;

  margin: 0 auto;

  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  position: relative;

}


/* Effetto Focus - Si illumina */

.search-modal-fields:focus-within {

  border-color: var(--primary);

  box-shadow: 0 16px 48px rgba(52, 158, 158, 0.12),
    0 4px 16px rgba(52, 158, 158, 0.08);

  transform: translateY(-4px) scale(1.01);

}


/* Ring animato al focus */

.search-modal-fields:focus-within::before {

  content: '';

  position: absolute;

  inset: -4px;

  border-radius: 64px;

  background: linear-gradient(135deg, var(--primary), var(--primary-light));

  opacity: 0.1;

  z-index: -1;

  animation: pulseRing 2s infinite;

}


@keyframes pulseRing {


  0%,
  100% {

    transform: scale(1);

    opacity: 0.1;

  }


  50% {

    transform: scale(1.02);

    opacity: 0.15;

  }

}


/* Campo Input */

.search-modal-form {

  background: transparent !important;

}


.search-modal-form .search-field {

  background: transparent !important;

  border: none !important;

  font-family: var(--font-body);

  font-size: 1.8rem !important;

  font-weight: 500;

  color: var(--text-head);

  width: 100%;

  height: auto !important;

  padding: 0 !important;

  outline: none;

  letter-spacing: -0.02em;

}


/* Placeholder elegante */

.search-modal-form .search-field::placeholder {

  color: #cbd5e0;

  font-weight: 400;

  font-style: italic;

}


/* Icona Lente - Stile Minimal */

.search-modal-form button {

  background: var(--primary-light);

  border: none;

  padding: 12px;

  border-radius: 50%;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--primary);

  transition: all 0.3s ease;

  flex-shrink: 0;

}


.search-modal-form button svg {

  width: 1.4em;

  height: 1.4em;

  fill: currentColor;

  transition: transform 0.3s ease;

}


/* Hover Button */

.search-modal-form button:hover {

  background: var(--primary);

  color: #ffffff;

  transform: scale(1.08);

}


.search-modal-form button:hover svg {

  transform: rotate(15deg);

}


/* Bottone Close (X) - Top Right */

.gp-modal__close {

  color: var(--text-meta);

  font-size: 2rem;

  font-weight: 300;

  top: 30px;

  right: 30px;

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: transparent;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.3s ease;

  cursor: pointer;

}


.gp-modal__close:hover {

  background: rgba(52, 158, 158, 0.1);

  color: var(--primary);

  transform: rotate(90deg) scale(1.1);

}


/* Suggerimento testo sotto la barra */

.search-modal-form::after {

  content: 'Premi Invio per cercare...';

  display: block;

  text-align: center;

  margin-top: 20px;

  font-size: 0.85rem;

  color: var(--text-meta);

  font-weight: 500;

  letter-spacing: 0.5px;

  opacity: 0;

  transition: opacity 0.3s ease;

}


.search-modal-fields:focus-within+.search-modal-form::after {

  opacity: 1;

}


/* Responsive Mobile */

@media (max-width: 768px) {

  .search-modal-fields {

    padding: 16px 24px;

    border-radius: 48px;

  }


  .search-modal-form .search-field {

    font-size: 1.4rem !important;

  }


  .search-modal-form button {

    padding: 10px;

  }


  .search-modal-form button svg {

    width: 1.2em;

    height: 1.2em;

  }


  .gp-modal__close {

    top: 20px;

    right: 20px;

    width: 40px;

    height: 40px;

    font-size: 1.5rem;

  }

}


/* =========================================

7. RECIPE MAKER

========================================= */


/* 1. IL CONTENITORE PRINCIPALE (La "Card" Ricetta) */

.wprm-recipe-container {

  background-color: #ffffff !important;

  border-radius: var(--radius) !important;

  box-shadow: var(--shadow-card) !important;

  padding: 0 !important;

  /* Più spazio interno */

  margin: 0 !important;

}


.wprm-recipe {

  border-radius: var(--radius);

}


/* 2. TITOLO RICETTA */

h2.wprm-recipe-name {
  font-family: var(--font-heading) !important;
  color: var(--text-head) !important;
  font-size: 2.2rem !important;
  line-height: 1.2 !important;
  margin-bottom: 20px !important;
  font-style: normal !important;
  /* Rimuove il corsivo di default se c'è */
}


/* Sommario sotto il titolo */

.wprm-recipe-summary {
  font-family: var(--font-body) !important;
  color: var(--text-body) !important;
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
}


.wprm-recipe-group-name,
.wprm-recipe-ingredient-group-name {
  font-family: var(--font-heading) !important;
  line-height: 1.6 !important;
  font-style: italic;
  margin-bottom: 10px;
}


.wprm-recipe-ingredient-unit {
  font-weight: 700;
}


.wprm-recipe-ingredient-name,
.wprm-recipe-ingredient-unit {
  margin-right: 5px;
}


/* 3. ICONE E LINEE DECORATIVE */

/* Ricolora tutte le icone e linee col tuo Teal */

.wprm-recipe-icon svg g,
.wprm-recipe-icon svg path,
.wprm-recipe-icon svg g fill {
  fill: var(--primary) !important;
}


.wprm-decoration-line {
  border-color: var(--primary) !important;
  opacity: 0.3;
  /* Più elegante se meno forte */
}


/* 4. META DATI (Tempo, Porzioni, Calorie) */

/* Rimuove i bordi tratteggiati brutti */

.wprm-recipe-block-container {
  border: none !important;
}


/* Stile delle etichette (es: "Preparazione") */

.wprm-recipe-details-label {
  font-family: var(--font-body) !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  letter-spacing: 1px !important;
  color: var(--text-meta) !important;
}


/* Stile dei valori (es: "40 min") */

.wprm-recipe-time,
.wprm-recipe-servings,
.wprm-recipe-nutrition {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  font-size: 1.1rem !important;
}


/* 5. INGREDIENTI (Lista Pulita) */
.wprm-recipe-ingredients-container {
  background: #fafafa;
  border-radius: var(--radius);
  margin-top: 30px;
}

.wprm-recipe-ingredient {
  display: grid !important;
  list-style: none !important;
  margin: 2px 6px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  align-items: center;
  gap: 5px;
  grid-template-columns: 0.1fr 0.2fr 1fr;
  row-gap: 4px;
  font-size: 0.95rem;
  padding-bottom: 5px !important;
}

/* --- SOLUZIONE PROBLEMA 1: ASSEGNAZIONE FISSA --- */
/* Forziamo ogni elemento nella sua corsia. 
   Se 'unit' manca, la corsia 2 rimane vuota e il nome non si sposta. */

.wprm-recipe-ingredient-amount {
  grid-column: 1;
  /* Blocca nella colonna 1 */
  text-align: right;
  /* Allinea i numeri a destra verso l'unità */
  color: var(--text-head);
  margin: 0 !important;
  font-weight: 400;
}

.wprm-recipe-ingredient-unit {
  display: flex;
  grid-column: 2;
  /* Blocca nella colonna 2 */
  justify-content: start;
  align-items: flex-end;
  /* Allinea l'unità vicino al numero */
  font-size: 14px !important;
  margin: 0 !important;
  font-weight: 400;
}

.wprm-recipe-ingredient-name {
  grid-column: 3;
  font-weight: 500;
  /* Blocca nella colonna 3 */
  line-height: 1.3;
  margin: 0 !important;
}

.wprm-recipe-ingredient-notes {
  /* Blocca nella colonna 4 */
  color: var(--text-meta);
  font-style: italic;
  line-height: 1.3;
  margin: 0 !important;
  grid-column: 3 / -1;
  /* Parte dalla colonna 3 e va fino alla fine */
  display: block;
  margin-top: 0;
  opacity: 0.8;
  column-span: 3;
  text-align: left;
  font-size: 12px !important;
}

/* Rimuove bordo all'ultimo elemento */
.wprm-recipe-ingredient:last-child {
  border-bottom: none !important;
}

@media (max-width: 600px) {
  .wprm-recipe-ingredient {
    font-size: 0.95rem;
    grid-template-columns: 0.2fr 0.4fr 1fr;
  }


  /* Le note vanno a capo, occupando tutta la larghezza (dalla colonna 3 alla fine o tutta la riga) */
  .wprm-recipe-ingredient-notes {
    font-size: 12px !important;
  }
}

/* 6. ISTRUZIONI (Step Numerati) */

.wprm-recipe-instruction-group {
  margin-top: 30px;
}


/* Il numero dello step diventa un cerchio colorato */

.wprm-recipe-instruction {
  counter-increment: wprm-step;
  position: relative;
  /* Spazio per il numero */
  margin-bottom: 10px !important;
}


.wprm-recipe-instruction::before {

  content: counter(wprm-step);

  position: absolute;

  left: 0;

  top: 0;

  width: 35px;

  height: 35px;

  background-color: var(--primary);

  color: #fff;

  border-radius: 50%;

  text-align: center;

  line-height: 35px;

  font-weight: 700;

  font-family: var(--font-body);

  font-size: 1rem;

  box-shadow: 0 4px 6px rgba(52, 158, 158, 0.3);

}


.wprm-recipe-instruction-text {

  font-family: var(--font-body) !important;

  font-size: 1.05rem !important;

  color: var(--text-body) !important;

}


/* 7. NOTE (Box finale) */

.wprm-recipe-notes-container {

  background-color: var(--primary-light) !important;

  padding: 20px !important;

  border-radius: var(--radius) !important;

  border: 1px solid var(--primary) !important;

  margin-top: 30px;

}


.wprm-recipe-notes-header {

  margin-top: 10px !important;

}


/* Titoli delle sezioni (Ingredienti, Istruzioni) */

h3.wprm-recipe-header {

  font-family: var(--font-heading) !important;

  color: var(--text-head) !important;

  font-size: 1.5rem !important;

  margin-bottom: 15px !important;

  border: none !important;

  /* Rimuove righe strane */

}


/* Per mettere sempre il banner della riservatezza più in alto possibile */
/* Limita l'ingombro del banner OneSignal su dispositivi mobili */
@media (max-width: 768px) {

  /* 1. Blocchiamo il PADRE di OneSignal a un livello basso */
  #onesignal-slidedown-container {
    z-index: 2147483645 !important;
    top: 15px !important;
    left: 5% !important;
    right: 5% !important;
  }

  /* 2. Alziamo il PADRE della Privacy (il banner Quantcast/InMobi) */
  #qc-cmp2-container {
    z-index: 2147483646 !important;
  }
}