/*
Theme Name: Astra Child
Description: Child theme strutturato per Astra.
Author: Tribe Value
Author URI: tribevalue.it
Version: 1.0.0
Template: astra
Text Domain: astra-child
*/

/* Offset dinamico per la admin bar di WordPress: 32px desktop, 46px mobile.
   Cascata: la variabile è definita su body.admin-bar (solo se loggato) e
   viene ereditata da tutti i discendenti. Fallback 0px per i visitatori. */
:root {
  --tv-admin-bar-offset: 0px;
}

body.admin-bar {
  --tv-admin-bar-offset: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    --tv-admin-bar-offset: 46px;
  }
}

/* Header sticky: si appiccica sotto la admin bar quando presente */.cta_button_square a.uagb-infobox-cta-link.wp-block-button__link {
    border-radius: 20px !important;
}
.ast-theme-transparent-header #masthead {
  top: var(--tv-admin-bar-offset, 0px) !important;
  z-index: 9999 !important;
  position: sticky !important;
  /* Usiamo rgba invece di transparent per evitare repaint flash */
  background-color: rgba(255, 255, 255, 0) !important;
  /* Transizione SOLO sul box-shadow, mai sul background-color */
  transition: box-shadow 0.3s ease-in-out !important;
  will-change: box-shadow;
  transform: translateZ(0);
  backface-visibility: hidden;
  /* Isola il repaint per evitare che il menu venga ricollegato */
  contain: layout paint;
}

.ast-theme-transparent-header #masthead.scrolled {
  background-color: var(--ast-global-color-5) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

}

/* Testi bianchi a riposo */
.ast-theme-transparent-header #masthead .menu-link,
.ast-theme-transparent-header #masthead .ast-custom-button {
  color: #fff !important;
  transition: color 0.3s ease-in-out;
}

/* Testi scuri dopo scroll */
.ast-theme-transparent-header #masthead.scrolled .menu-link,
.ast-theme-transparent-header #masthead.scrolled .ast-custom-button {
  color: var(--ast-global-color-7) !important;
}

.ast-custom-button.active {
  border-color: var(--ast-global-color-7);
}

/* test */

.ast-mobile-header-wrap .ast-primary-header-bar .active,
.ast-primary-header-bar .site-primary-header-wrap .active {
  max-height: 60px !important;
}

header .custom-logo-link img.active {
  max-width: 70px !important;
  width: 100% !important;
  height: auto;
}

.site-branding.ast-site-identity.active {
  margin: 0 !important;
  padding: 0 !important;
}

a.menu-link.active {
  font-size: 14px !important;
}

/* Font size costante anche durante lo scroll - NON ridurre */
.ast-theme-transparent-header #masthead.scrolled .menu-link,
.ast-theme-transparent-header #masthead.scrolled .ast-custom-button,
a.menu-link.active {
  font-size: 14px !important;
}



.uagb-block-33081fb0.wp-block-uagb-image .wp-block-uagb-image__figure img:hover, .uagb-block-b25e813a.wp-block-uagb-image .wp-block-uagb-image__figure img:hover {
    box-shadow: 0px 0px 0 rgba(0, 0, 0, 0.07);
}

.cta_button_square a.uagb-infobox-cta-link.wp-block-button__link {
    border-radius: 20px !important;
}

#block-21, #block-16 {
    margin: 0;
}
p.p_footer {
    margin: 0;
}

section#block-19 {
    margin: 0 0 0.75em 0 !important;
}

/* ============================================
   COLORI MENU PRINCIPALE - Astra override
   Queste regole sovrascrivono il customizer
   ============================================ */

/* Colore base dei link del menu (stato normale) */
#masthead .main-header-menu .menu-link,
#masthead .ast-builder-menu .menu-link,
#masthead .menu-link {
  color: #333333 !important;
  text-transform: uppercase !important;
}

/* Colore link al passaggio del mouse (hover) */
#masthead .main-header-menu .menu-item:hover > .menu-link,
#masthead .ast-builder-menu .menu-item:hover > .menu-link {
  color: #8bc34a !important;
  text-transform: uppercase !important;
}

/* Colore voce di menu attiva/corrente */
#masthead .main-header-menu .current-menu-item > .menu-link,
#masthead .ast-builder-menu .current-menu-item > .menu-link {
  color: #8bc34a !important;
  text-transform: uppercase !important;
}

/* Bottone CTA (es. CONTATTACI) - testo e sfondo */
#masthead .ast-custom-button,
#masthead .ast-builder-layout-element .ast-custom-button {
  color: #ffffff !important;
  background-color: #8bc34a !important;
  border-color: #8bc34a !important;
}

/* Bottone CTA - hover */
#masthead .ast-custom-button:hover {
  color: #ffffff !important;
  background-color: #7cb342 !important;
  border-color: #7cb342 !important;
}

/* Mantiene la dimensione del font costante anche in sticky/scrolled */
html body #masthead.scrolled .menu-link,
html body #masthead.scrolled .ast-custom-button,
html body #masthead .menu-link,
html body #masthead .ast-custom-button,
html body #masthead.scrolled a.menu-link.active {
  font-size: 14px !important;
}

/* Evita che il menu scompaia durante la transizione dell'header */
#masthead .main-header-menu,
#masthead .ast-builder-menu,
#masthead .main-header-bar-navigation {
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
  will-change: auto;
  /* Forza il menu su un layer GPU separato per evitare flash */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ============================================
   GUTENKIT IMAGE BOX - altezza uniforme
   Pagina: /il-laboratorio-galenico/
   Forza tutti i box della stessa riga ad avere
   la stessa altezza, allineando le immagini.
   ============================================ */
.gkit-info-image-box {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.gkit-info-image-box .gkit-box-header {
  flex: 0 0 auto; /* l'header mantiene la sua altezza naturale */
  width: 100%;
}

/* Se il box usa la variante floating-style, il body va allungato */
.gkit-info-image-box .gkit-box-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* ============================================
   BOX SERVIZI - effetto hover
   ============================================ */
.box_servizi {
  /* Ombra leggera a riposo per dare profondità al box */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  /* Transizione fluida su spostamento e ombra */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  /* GPU layer per evitare repaint durante l'animazione */
  will-change: transform, box-shadow;
  aspect-ratio:  5/ 4;
}

.box_servizi:hover {
  /* Solleva il box di 6px verso l'alto */
  transform: translateY(-6px);
  /* Ombra più marcata e diffusa per enfatizzare l'hover */
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

/* Su dispositivi touch (no hover) evitiamo lo spostamento */
@media (hover: none) {
  .box_servizi:hover {
    transform: none;
  }
}

/* ============================================
   LOGO SU MOBILE E TABLET
   Problema 1: Astra con "Logo diverso per header trasparente" attivo nasconde
   il logo normale (.custom-mobile-logo-link) e mostra quello bianco
   (.transparent-custom-logo). Su mobile/tablet non c'è l'header sticky che
   ripristina il logo, quindi il logo bianco resta sempre visibile.
   Fix: forziamo il logo a colori nascondendo quello bianco.

   Problema 2: Astra genera `filter: url(#ast-img-color-filter-2)` su
   `.ast-theme-transparent-header .site-logo-img img` quando è impostato un
   "Logo color" per l'header trasparente. Questo filtro SVG rende bianca
   qualsiasi immagine logo su tutti i dispositivi.
   Fix: resettiamo il filtro su mobile/tablet e quando l'header è scrolled.
   ============================================ */

/* Mostra logo a colori su mobile/tablet (se è impostato un logo trasparente separato) */
body.ast-theme-transparent-header.ast-replace-site-logo-transparent.ast-header-break-point .custom-mobile-logo-link {
  display: inline-block !important;
}
body.ast-theme-transparent-header.ast-replace-site-logo-transparent.ast-header-break-point .transparent-custom-logo {
  display: none !important;
}

/* Rimuove il filtro colore bianco dal logo su mobile/tablet */
body.ast-theme-transparent-header.ast-header-break-point .site-logo-img img {
  filter: none !important;
}

/* Rimuove il filtro colore bianco dal logo su desktop dopo lo scroll */
.ast-theme-transparent-header #masthead.scrolled .site-logo-img img {
  filter: none !important;
}


/* custom footer*/
#block-33{margin:0 !important}

@media screen and (max-width:667px){p.p_footer {
    text-align: center !important;
}

}