/* ==========================================================================
   Header: barra fissa trasparente + menu mobile off-canvas.
   Fonte: CSS dei due widget HTML del template 13629 + il "CSS personalizzato"
   Elementor del secondo widget. Le due fonti si contraddicevano: qui c'e' il
   risultato finale della cascata, verificato sugli stili calcolati del sito vivo.
   ========================================================================== */

/* Contenitore di header e off-canvas: contiene solo elementi fissi, quindi e' alto 0.
   CORREZIONE rispetto al sito vivo: li' il container Elementor e' alto 20px (gap tra due
   widget vuoti) e lascia una fascia bianca sopra la prima sezione da 768px in su.
   Qui la fascia non c'e': nei confronti usare --ref-crop-top 20@768,1024,1440,1920.
   Lo z-index crea il contesto di impilamento (99999, da mobile 99, come sul vivo). */
.bedouin-header-wrap {
  position: relative;
  z-index: 99999;
}

/* Sentinella per header-sticky.js: quando esce dallo schermo si e' scrollato oltre 120px
   (la soglia "sticky start" impostata nel template Animation Addons). */
.bedouin-header-sentinel {
  position: absolute;
  top: 120px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* --- Barra ---------------------------------------------------------------
   Trasparente in cima alla pagina, crema dopo lo scroll (.is-scrolled, header-sticky.js).
   CORREZIONE rispetto al sito vivo: li' le regole dello stato crema esistono ma nessuno
   script le attiva, e sopra le sezioni beige il menu bianco sparisce. */
.bedouin-site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  padding: var(--header-pad-y) var(--header-pad-x);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s ease, padding 0.4s ease, border-bottom-color 0.4s ease;
}

.bedouin-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bedouin-header-logo {
  position: relative;
  display: block;
  height: 36px;
}

.bedouin-header-logo img {
  display: block;
  width: auto;
  height: 100%;
  transition: opacity 0.4s ease, transform 0.3s ease;
}

/* logo scuro sovrapposto, visibile solo nello stato crema */
.bedouin-header-logo .logo-dark {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.bedouin-header-logo:hover img {
  transform: scale(1.05);
}

/* --- Menu desktop -------------------------------------------------------- */
.bedouin-desktop-nav {
  display: flex;
  gap: 40px;
  align-items: center;
}

.bedouin-desktop-nav a.menu-item,
.bedouin-desktop-nav .menu-item-wrapper > span {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 5px;
  font-family: var(--font-sans);
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-beige);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.4s ease;
}

.bedouin-desktop-nav .menu-item-parent,
.bedouin-desktop-nav .menu-item-parent:hover {
  color: inherit;
  text-decoration: none;
}

/* sottolineatura che si allarga */
.bedouin-desktop-nav a.menu-item::after,
.bedouin-desktop-nav .menu-item-wrapper > span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-beige);
  transition: width 0.3s ease, background-color 0.4s ease;
}

.bedouin-desktop-nav a.menu-item:hover::after,
.bedouin-desktop-nav .menu-item-wrapper:hover > span::after,
.bedouin-desktop-nav .menu-item-wrapper:focus-within > span::after {
  width: 100%;
}

/* Voce con sottomenu. Il padding compensato dal margine negativo tiene aperto il
   sottomenu mentre il mouse scende. Vale anche per le voci del menu mobile (stessa classe). */
.bedouin-menu-item-has-children {
  position: relative;
  padding-bottom: 15px;
  margin-bottom: -15px;
}

.bedouin-desktop-dropdown-arrow {
  width: 12px;
  height: 12px;
  transition: transform 0.3s ease;
}

.bedouin-menu-item-has-children:hover .bedouin-desktop-dropdown-arrow,
.bedouin-menu-item-has-children:focus-within .bedouin-desktop-dropdown-arrow {
  transform: rotate(180deg);
}

.bedouin-desktop-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 180px;
  padding: 20px 25px;
  background-color: var(--color-beige);
  border: 1px solid rgba(0, 0, 0, 0.03);
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.bedouin-menu-item-has-children:hover .bedouin-desktop-submenu,
.bedouin-menu-item-has-children:focus-within .bedouin-desktop-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.bedouin-desktop-submenu a {
  font-family: var(--font-sans);
  font-size: var(--fs-subnav);
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-ardesia);
  text-decoration: none;
  transition: color 0.3s ease;
}

.bedouin-desktop-submenu a:hover {
  color: var(--color-mattone-caldo);
}

/* --- Selettore lingua (markup di TranslatePress) --------------------------
   Gli !important battono il CSS del plugin, che arriva con selettori propri. */
.bedouin-lang-switcher {
  display: flex;
  align-items: center;
}

.desktop-lang::before {
  content: "";
  display: block;
  width: 1px;
  height: 15px;
  margin-right: 25px;
  margin-left: -5px;
  background-color: var(--color-beige);
  opacity: 0.4;
  transition: background-color 0.4s ease;
}

.bedouin-lang-switcher .trp-language-switcher {
  position: relative;
  border: none !important;
  background: transparent !important;
}

.bedouin-lang-switcher .trp-ls-shortcode-current-language {
  display: none !important;
}

.bedouin-lang-switcher .trp-ls-shortcode-language {
  display: block !important;
  position: static !important;
  width: auto !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bedouin-lang-switcher a,
.bedouin-lang-switcher a span {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-nav) !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--color-beige) !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: opacity 0.3s ease, color 0.4s ease !important;
}

.bedouin-lang-switcher a:hover {
  opacity: 0.6;
}

.mobile-lang {
  display: none;
}

.desktop-lang {
  display: flex;
}

/* --- Azioni: CTA e hamburger --------------------------------------------- */
.bedouin-header-actions {
  display: flex;
  align-items: center;
  gap: 30px;
}

.bedouin-header-cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px 24px;
  font-family: var(--font-display);
  font-size: var(--fs-cta-header);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-mattone-caldo);
  background-color: var(--color-beige);
  border: 1px solid var(--color-beige);
  transition: color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.4s ease, border-color 0.4s ease;
}

/* riempimento mattone da sinistra all'hover */
.bedouin-header-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: var(--color-mattone-caldo);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.bedouin-header-cta:hover {
  color: var(--color-beige);
}

.bedouin-header-cta:hover::before {
  transform: scaleX(1);
}

.bedouin-hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 12px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}

.bedouin-hamburger-btn:focus:not(:focus-visible) {
  outline: none;
}

.bedouin-hamburger-btn span {
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: var(--color-beige);
  transition: transform 0.3s ease, background-color 0.4s ease;
}

.bedouin-hamburger-btn:hover span:first-child {
  transform: translateY(-2px);
}

.bedouin-hamburger-btn:hover span:last-child {
  transform: translateY(2px);
}

/* --- Stato crema (dopo 120px di scroll) -----------------------------------
   Regole dello stato ".wcf-sticky-header" scritte nel widget 4e57ad56 del sito vivo. */
.bedouin-header-wrap.is-scrolled .bedouin-site-header {
  padding: 15px var(--header-pad-x);
  background-color: var(--color-beige);
  border-bottom-color: var(--color-header-line);
}

.is-scrolled .bedouin-header-logo .logo-light {
  opacity: 0;
}

.is-scrolled .bedouin-header-logo .logo-dark {
  opacity: 1;
}

.is-scrolled .bedouin-desktop-nav a.menu-item,
.is-scrolled .bedouin-desktop-nav .menu-item-wrapper > span {
  color: var(--color-ardesia);
}

.is-scrolled .bedouin-desktop-nav a.menu-item::after,
.is-scrolled .bedouin-desktop-nav .menu-item-wrapper > span::after {
  background-color: var(--color-ardesia);
}

.is-scrolled .bedouin-hamburger-btn span {
  background-color: var(--color-ardesia);
}

.is-scrolled .bedouin-header-cta {
  color: var(--color-mattone-caldo);
  background-color: transparent;
  border-color: var(--color-mattone-caldo);
}

/* Sul vivo la regola sopra (con !important) batteva anche l'hover: testo mattone sul
   riempimento mattone, cioe' "Preventivo" invisibile al passaggio del mouse. Corretto. */
.is-scrolled .bedouin-header-cta:hover {
  color: var(--color-beige);
}

.is-scrolled .bedouin-lang-switcher a,
.is-scrolled .bedouin-lang-switcher a span {
  color: var(--color-ardesia) !important;
}

.is-scrolled .desktop-lang::before {
  background-color: var(--color-ardesia);
}

@media (max-width: 991px) {
  .bedouin-site-header {
    padding: var(--header-pad-mobile);
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .bedouin-header-wrap.is-scrolled .bedouin-site-header {
    padding: 15px var(--header-pad-mobile);
  }

  .bedouin-hamburger-btn {
    display: flex;
  }

  .bedouin-desktop-nav,
  .bedouin-header-cta,
  .desktop-lang {
    display: none;
  }

  .mobile-lang {
    display: flex;
  }

  .bedouin-header-actions {
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .bedouin-header-wrap {
    z-index: 99;
  }
}

/* ==========================================================================
   Menu mobile off-canvas
   ========================================================================== */
.bedouin-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(28, 29, 32, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.bedouin-offcanvas-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* Pannello che scorre da destra, in apertura e in chiusura.
   CORREZIONE rispetto al sito vivo: li' due regole in conflitto (right:-100% animato +
   translateX(100%) non animato) lo facevano aprire scorrendo e chiudere di scatto.
   Qui un solo meccanismo, transform (niente ricalcolo del layout).
   visibility nascosta a pannello chiuso, con ritardo pari alla transizione: l'ombra non
   sborda sul bordo destro della pagina e i link del menu chiuso escono dal giro del Tab. */
.bedouin-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  width: 340px;
  max-width: 85vw;
  height: 100%;
  overflow-y: auto;
  background-color: var(--color-beige);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    visibility 0s linear 0.45s;
}

.bedouin-offcanvas.is-open {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    visibility 0s linear 0s;
}

@media (min-width: 992px) {
  .bedouin-offcanvas,
  .bedouin-offcanvas-overlay {
    display: none;
  }
}

.bedouin-offcanvas-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 100%;
  padding: 2.5rem 2rem;
}

body.bedouin-menu-open {
  overflow: hidden;
  touch-action: none;
}

.bedouin-menu-close {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-block;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
  color: var(--color-ardesia);
  text-align: center;
  white-space: nowrap;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.bedouin-menu-close:hover {
  opacity: 0.5;
}

.bedouin-menu-nav {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}

.bedouin-menu-nav > a {
  display: block;
  padding: 0.9rem 0;
  font-family: var(--font-display);
  font-size: var(--fs-offcanvas);
  color: var(--color-nero);
  text-decoration: none;
  border-bottom: 1px solid rgba(28, 29, 32, 0.08);
  transition: opacity 0.3s ease;
}

.bedouin-menu-nav > a:hover,
.bedouin-submenu-toggle:hover {
  color: var(--color-nero);
  opacity: 0.5;
}

.bedouin-submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.9rem 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-offcanvas);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-nero);
  text-align: left;
  white-space: nowrap;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(28, 29, 32, 0.08);
  /* raggio ereditato sul sito vivo dallo stile pulsanti del kit Elementor:
     incurva appena le estremita' del filo inferiore */
  border-radius: 4px;
  box-shadow: none;
  appearance: none;
  user-select: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.bedouin-submenu-toggle:focus:not(:focus-visible) {
  outline: none;
}

.bedouin-dropdown-arrow {
  width: 18px;
  height: 18px;
  pointer-events: none;
  transition: transform 0.3s ease;
}

.bedouin-menu-item-has-children.is-open .bedouin-dropdown-arrow {
  transform: rotate(180deg);
}

.bedouin-submenu {
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.bedouin-menu-item-has-children.is-open .bedouin-submenu {
  max-height: 300px;
  margin-top: 20px;
}

.bedouin-submenu a {
  display: block;
  padding: 0.5rem 0;
  font-family: var(--font-mono);
  font-size: var(--fs-subnav);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-nero);
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.bedouin-submenu a:hover {
  color: var(--color-nero);
  opacity: 1;
}

.bedouin-menu-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  width: 100%;
  margin-top: auto;
  padding-top: 2rem;
  padding-bottom: 30px;
}

.bedouin-menu-socials {
  display: flex;
  gap: 1rem;
  margin-bottom: 32px;
}

.bedouin-menu-socials a {
  color: var(--color-nero);
  text-decoration: none;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.bedouin-menu-socials a:hover {
  color: var(--color-nero);
  opacity: 1;
}

.bedouin-menu-socials svg {
  width: 20px;
  height: 20px;
}

.bedouin-menu-cta {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 1.1rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--color-beige);
  background-color: var(--color-nero);
  border: 1px solid var(--color-nero);
  transition: color 0.3s ease;
}

/* velo beige che entra da sinistra all'hover ed esce a destra */
.bedouin-menu-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: var(--color-beige);
  transform: translateX(-101%);
}

.bedouin-menu-cta:hover {
  color: var(--color-nero);
}

.bedouin-menu-cta:hover::before {
  animation: bedouinMenuSlideIn 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

.bedouin-menu-cta:not(:hover)::before {
  animation: bedouinMenuSlideOut 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes bedouinMenuSlideIn {
  from { transform: translateX(-101%); }
  to { transform: translateX(0); }
}

@keyframes bedouinMenuSlideOut {
  from { transform: translateX(0); }
  to { transform: translateX(101%); }
}

/* --- Barra di amministrazione di WordPress (la vede solo chi è collegato) -------------------
   È fissa in alto con z-index 100000, sopra il nostro header fisso: senza questa regola copre
   logo e menu. Sotto i 783px WordPress la fa scorrere con la pagina, quindi lì l'header resta a 0
   (con un margine fisso resterebbe uno spazio vuoto appena si scorre). */
@media screen and (min-width: 783px) {
  body.admin-bar .bedouin-site-header,
  body.admin-bar .bedouin-offcanvas {
    top: 32px;
  }

  body.admin-bar .bedouin-offcanvas {
    height: calc(100% - 32px);
  }
}