/*
Theme Name: Il Giardino delle Camelie
Theme URI: https://www.giardinocameliebiella.com
Description: Tema child di Twentig One. Palette colori estratta dal logo camelie.png.
Author: Il Giardino delle Camelie
Template: twentig-one
Version: 1.1.0
License: GPL-2.0-or-later
Text Domain: giardino-camelie
*/

/* La palette completa è in palette-colori.css, i colori del blocco editor in theme.json */

/* ## Dimensioni dei testi ## */
.h2-clamp {
    font-size: clamp(1.5rem, 2vw, 3.5rem);
}

.h3-clamp {
    font-size: clamp(1rem, 2vw, 3rem);
}

.h2plus-clamp {
    font-size: clamp(1.5rem, 14vw, 6rem);
}

.h3plus-clamp {
    font-size: clamp(2.5rem, 3vw, 3rem);
}

/* ## Header trasparente sopra la copertina (hero) ## */
/* ── Sposta la copertina per avere l'header sopra ── */
.wp-site-blocks {
    margin-top: 0;
}

@media (min-width: 782px) {
  .home .wp-site-blocks {
    margin-top: -113px !important;
  }
}

/* ── Header trasparente fisso sopra la copertina ── */
header.wp-block-template-part {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: transparent;
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

/* ── Anche il gruppo interno dell'header deve essere trasparente (spesso il tema gli assegna un colore di sfondo) ── */
header.wp-block-template-part > .wp-block-group {
    background-color: transparent;
}

/* ── Stato "scrollato": sfondo crema ── */
header.wp-block-template-part.is-scrolled {
    background-color: #f5ede2;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08); /* opzionale */
}

/* ── Colori menu: chiaro sopra la cover, scuro quando header opaco ── */
header.wp-block-template-part a,
header.wp-block-template-part .wp-block-site-title a,
header.wp-block-template-part .wp-block-navigation-item__label {
    color: #fdfaf6;
    transition: color 0.35s ease;
}

header.wp-block-template-part.is-scrolled a,
header.wp-block-template-part.is-scrolled .wp-block-site-title a,
header.wp-block-template-part.is-scrolled .wp-block-navigation-item__label {
    color: #3a2e26;
}

/* ── Compensazione admin bar quando sei loggato ── */
body.admin-bar header.wp-block-template-part {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar header.wp-block-template-part {
        top: 46px;
    }
}

@media screen and (max-width: 360px) {
    header .custom-logo-link img {
      max-width: 260px; /* Imposta larghezza massima del logo */
      height: auto; /* Mantieni le proporzioni */
  }
}


/* ## Altezza degli slider responsive ## */
/* ── Altezza degli slider default per mobile (sotto i 782px) ── */
.hero-responsive {
  /*min-height: 500px !important;*/
  min-height: calc(100vh - 113px); 

}

/* ── Altezza degli slider per tablet e desktop (da 782px in su) ── */
@media (min-width: 782px) {
  .hero-responsive {
    min-height: 100vh !important;
  }
}

/* ## Padding per il testo dei blocchi quadrati ## */
.padding-text-square {
    padding: var(--wp--preset--spacing--site-padding);
}

/* ## Icone della homepage ## */
/* Imposta il colore dell'icona */
.my-icon {
    width: 96px;
    height: 96px;
    color: #0284c7; /* L'icona diventerà blu azzurro! */
}

/* ## Colonne Meow Gallery per mobile ## */
@media (max-width: 768px) {
  /* Forzare la griglia a 2 colonne su mobile */
  .mgl-gallery {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important; /* Distanza tra le immagini */
  }

  /* Ripristinare l'aspetto quadrato 1:1 per ogni elemento */
  .mgl-gallery .mgl-item {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; /* Mantiene la proporzione quadrata */
    margin-bottom: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Fare in modo che l'immagine all'interno riempia perfettamente il quadrato senza distorcersi */
  .mgl-gallery .mgl-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Taglia l'immagine se necessario per riempire il quadrato */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }
}

/* Sostituisci .la-tua-classe con la classe che hai impostato */


/* ## Altezza del footer responsive ## */
/* ── Altezza del footer default per mobile (sotto i 782px) ── */
.footer-mobile {
  /*min-height: 500px !important;*/
  min-height: 100px; 

}

/* ── Altezza del footer default per tablet e desktop (da 782px in su) ── */
@media (min-width: 782px) {
  .footer-mobile {
    min-height: 0 !important;
  }
}