/*
 Theme Name:   Cambia Rotta
 Description:  Tema custom per sito Cambia Rotta
 Author:       Gabriele Donatacci
 Author URI:   https://www.gabrieledonatacci.it/
 Template:     astra
 Version:      1.0.0
 Text Domain:  cambiarottalibro
*/
html,body{
	overflow-x: clip;
}
body.error404 .ast-404-layout-1 h1.page-title {
  color: var(--ast-global-color-3);
}
#ast-scroll-top{
	bottom: 90px;
    right: -2px;
}

.primary_btn {
  padding: 14px 22px;
  text-decoration: none;
  border-radius: 5px;
  background: rgb(0, 108, 228);
  color: rgb(255, 255, 255);
  transition: all 0.3s ease-in-out;
}

.primary_btn:hover {
  background-color: #0053b3;
  color: rgb(255, 255, 255);
}

.primary_btn:focus {
  background-color: #0053b3;
  color: rgb(255, 255, 255);
}

.small_btn {
  padding: 10px 22px;
  font-size: 12px;
}

.small_select,
.small_input {
  padding: 5px 10px;
  font-size: 14px;
}

.w_100 {
  width: 100% !important;
}

input[type=email],
input[type=number],
input[type=password],
input[type=reset],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
select,
textarea {
  border-radius: 5px;
  padding: 7px 10px;
  outline-color: rgb(0, 108, 228);
}


/*blocco social link*/
.wp-block-social-links {
  padding-left: 0 !important;
}

.wp-block-social-link:hover {
  opacity: 0.6 !important;
  transform: none !important;
}

/*bottoni, icone, svg e container*/
.wp-block-button__link,
.uagb-button__link,
.uagb-button__icon,
.uagb-button__icon svg,
a,
#ast-scroll-top,
.ahfb-svg-iconset svg,
.wp-block-uagb-container,
.wp-social-link,
.uagb-icon-list__source-wrap,
.uagb-icon-list__source-wrap svg,
.uagb-icon-list__label,
.search_submit_box {
  transition: all 0.3s ease-in-out !important;
}

.uagb-infobox__content-wrap {
  word-break: normal;
}

/* FOOTER */
.footer_widget_1_container .uagb-heading-text,
.footer_widget_1_container p .footer_widget_1_container a {}

/*TABS*/
.uagb-tabs__panel .uagb-tab {
  border-radius: 5px;
  overflow: hidden;
}

/* Base: transizione sull'elemento interattivo reale */
.uagb-tabs__panel .uagb-tab .uagb-tabs-list {
  display: block !important;
  border-radius: 5px;
  transition: background-color 0.15s ease-out, color 0.15s ease-out !important;
}

/* Stato attivo */
.uagb-tabs__panel .uagb-tab.uagb-tabs__active .uagb-tabs-list {
  background-color: #006ce4;
  color: #fff;
}

/* Hover */
.uagb-tabs__panel .uagb-tab .uagb-tabs-list:hover {
  background-color: #3389ea;
  color: #fff;
}

/* Focus (accessibilità + niente lag) */
.uagb-tabs__panel .uagb-tab .uagb-tabs-list:focus {
  background-color: #006ce4;
  color: #fff;
  outline: none;
}

.uagb-tabs__wrap .uagb-tabs__body-container {
  padding: 15px 0;
}

.uagb-tabs__wrap .uagb-tabs__body-container th,
.uagb-tabs__wrap .uagb-tabs__body-container td {
  font-size: 14px;
}

.uagb-tabs__body-wrap {
  border-radius: 5px;
}

/* =========================================================
   TRANSPARENT HEADER ASTRA - HEADER TRASPARENTE / STICKY / ANIMATO
========================================================= */


/* ---------------------------------------------------------
   HEADER FISSO IN ALTO
   - Mantiene l’header sempre visibile
   - Occupa tutta la larghezza viewport
--------------------------------------------------------- */
.ast-theme-transparent-header .site-header{
	position: fixed !important;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 100vw;
}


/* ---------------------------------------------------------
   TRANSIZIONE GENERALE HEADER
   - Anima tutti i cambiamenti dell’header
   - Es: background, transform, colori, ecc.
--------------------------------------------------------- */
.ast-theme-transparent-header .main-header-bar{
	transition: all ease-in-out 0.4s !important;
}


/* ---------------------------------------------------------
   HEADER NASCOSTO
   - Quando viene aggiunta la classe ".hidden"
   - L’header viene spostato fuori viewport verso l’alto
   - Tipicamente usato con JS durante lo scroll
--------------------------------------------------------- */
.ast-theme-transparent-header .main-header-bar.hidden{
	transform: translateY(-100%) !important;
}


/* ---------------------------------------------------------
   MENU DESKTOP - COLORE TESTO DOPO SCROLL
   - Quando Astra aggiunge ".transparent-off"
   - I link diventano "neri"
--------------------------------------------------------- */
.ast-theme-transparent-header 
#ast-desktop-header 
.main-header-bar.transparent-off 
li a.menu-link{
	color: #4b5563;
}


/* ---------------------------------------------------------
   HAMBURGER MENU MOBILE - VERSIONE HEADER TRASPARENTE
   - Icona blu
--------------------------------------------------------- */
.ast-theme-transparent-header 
.main-header-bar 
.mobile-menu-toggle-icon 
.ast-mobile-svg{
	fill: #006ce4 !important;
}


/* ---------------------------------------------------------
   HAMBURGER MENU MOBILE - VERSIONE POST SCROLL
   - Icona blu quando header non è più trasparente
--------------------------------------------------------- */
.ast-theme-transparent-header 
.main-header-bar.transparent-off 
.mobile-menu-toggle-icon 
.ast-mobile-svg{
	fill: #006ce4 !important;
}


/* ---------------------------------------------------------
   MENU DESKTOP - HOVER / FOCUS / PAGINA ATTIVA
   - Mantiene il testo blu nello stato transparent-off
--------------------------------------------------------- */
.ast-theme-transparent-header 
#ast-desktop-header 
.main-header-bar.transparent-off 
li:hover > a.menu-link,

.ast-theme-transparent-header 
#ast-desktop-header 
.main-header-bar.transparent-off 
li:focus > a.menu-link,

.ast-theme-transparent-header 
#ast-desktop-header 
.main-header-bar.transparent-off 
li.current_page_item > a.menu-link{
	color: #006ce4;
}


/* ---------------------------------------------------------
   UNDERLINE MENU - VERSIONE HEADER NON TRASPARENTE
   - Cambia il colore della linea sotto ai link
--------------------------------------------------------- */
.ast-theme-transparent-header 
#ast-desktop-header 
.main-header-bar.transparent-off  
li > a.menu-link::after{
	background-color: #006ce4;
}


/* ---------------------------------------------------------
   TOGGLE SUBMENU MOBILE
   - Rimuove outline e ombre dal bottone submenu
   - ATTENZIONE: peggiora accessibilità tastiera
--------------------------------------------------------- */
.ast-builder-menu-mobile 
.main-navigation 
.menu-item.menu-item-has-children 
> .ast-menu-toggle{
	outline: none;
	box-shadow: unset;
}


/* ---------------------------------------------------------
   RESET PADDING E MARGIN MENU DESKTOP
   - Serve per controllo preciso degli spazi
--------------------------------------------------------- */
#ast-desktop-header 
.ast-main-header-wrap 
.main-header-menu 
> li > a.menu-link{
	padding: 0 !important;
	margin: 0 !important;
}


/* ---------------------------------------------------------
   SPAZIATURA TRA VOCI MENU
   - Gap verticale e orizzontale
--------------------------------------------------------- */
#ast-desktop-header 
.ast-main-header-wrap 
.main-header-menu{
	row-gap: 20px;
	column-gap: 40px;
}


/* ---------------------------------------------------------
   UNDERLINE ANIMATA MENU
   - Crea la linea sotto ai link
   - Inizialmente invisibile (width:0)
--------------------------------------------------------- */
#ast-desktop-header 
.ast-main-header-wrap 
.main-header-menu 
> li > a.menu-link::after {

	content: "";
	position: absolute;
	bottom: -2px;
	left: 50%;
	width: 0%;
	height: 2px;
	background-color: #006ce4;
	transition: width 0.4s ease, left 0.4s ease;
	transform: translateX(-50%);
}


/* ---------------------------------------------------------
   UNDERLINE BLU SU HEADER TRASPARENTE
   - Override colore linea quando header è trasparente
--------------------------------------------------------- */
body.ast-theme-transparent-header 
#ast-desktop-header 
.ast-main-header-wrap 
.main-header-menu 
li a::after{
	background-color: #006ce4;
}


/* ---------------------------------------------------------
   ANIMAZIONE UNDERLINE
   - Hover menu
   - Pagina corrente
   - Espande la linea al 100%
--------------------------------------------------------- */
#ast-desktop-header 
.ast-main-header-wrap 
.main-header-menu 
> li:hover > a::after,

#ast-desktop-header 
.ast-main-header-wrap 
.main-header-menu 
> li.current_page_item > a::after{
	width: 100%;
	left: 50%;
}


/* =========================================================
   FINE HEADER
========================================================= */