/* ==========================================================================
   DUE - Kit per i template del Theme Builder

   Header e footer restano costruiti in Elementor: qui ci sono solo gli stili
   che l'editor non sa esprimere da solo (stato sticky, logo mini che compare,
   fascia menu agganciata al colore primario del Customizer).
   Le classi si applicano ai contenitori Elementor dal campo "Classi CSS".
   ========================================================================== */

/* ------------------------------------------------------------- 1. Header */

.due-header {
  width: 100%;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Fascia superiore con il logo grande, centrata. */
.due-header__logo {
  padding: 15px 0;
}

.due-header__logo img {
  max-width: 280px;
  height: auto;
  display: block;
}

/* Fascia menu nel colore primario. */
.due-header__bar {
  background-color: var(--color-primary, #E20714);
  width: 100%;
}

/* Logo mini: nascosto finche' l'header non diventa sticky. */
.due-header__mini {
  display: none;
  align-items: center;
  flex-shrink: 0;
}

.due-header__mini img {
  max-height: 36px;
  width: auto;
  display: block;
}

/* Stato sticky: Elementor aggiunge .elementor-sticky--effects appena
   superata la soglia impostata nel widget. */
.due-header.elementor-sticky--effects {
  /* I contenitori Elementor dipingono lo sfondo anche attraverso la propria
     custom property: la impostiamo insieme alla dichiarazione classica, cosi'
     la fascia diventa primaria comunque venga risolto lo sfondo. */
  --background-color: var(--color-primary, #E20714);
  background-color: var(--color-primary, #E20714);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.due-header.elementor-sticky--effects .due-header__logo {
  display: none;
}

.due-header.elementor-sticky--effects .due-header__mini {
  display: flex;
}

/* Voci di menu: bianche, maiuscole, con la barra secondaria all'hover. */
.due-header .elementor-nav-menu .elementor-item {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: var(--menu-size, 13px);
  text-transform: uppercase;
  color: #ffffff;
  padding: 15px 20px;
  fill: #ffffff;
  transition: background-color 0.3s ease;
}

.due-header .elementor-nav-menu .elementor-item:hover,
.due-header .elementor-nav-menu .elementor-item:focus,
.due-header .elementor-nav-menu .elementor-item.elementor-item-active,
.due-header .elementor-nav-menu .elementor-item.highlighted {
  background-color: var(--color-secondary, #bc111b);
  color: #ffffff;
}

/* Sottomenu a tendina. */
.due-header .elementor-nav-menu--dropdown {
  background-color: var(--color-primary, #E20714);
}

.due-header .elementor-nav-menu--dropdown .elementor-item {
  color: #ffffff;
}

/* Hamburger su mobile. */
.due-header .elementor-menu-toggle {
  color: #ffffff;
  background: transparent;
}

/* ------------------------------------------ 2. Testata delle pagine interne */

/* Usata dai template Single e Archive: immagine di sfondo con velo scuro e
   titolo in basso, come l'hero-page di UNO. Lo sfondo lo imposta Elementor
   sul contenitore; qui stanno solo i colori del testo. */

.due-page-hero .elementor-heading-title {
  color: #ffffff;
}

.due-page-hero__title .elementor-heading-title {
  font-size: var(--h1-size, clamp(2.2rem, 5vw, 4rem));
  line-height: 1.05;
  text-align: center;
  margin: 0;
}

/* Contenuto delle pagine interne: i titoli del widget "Contenuto" seguono
   la tipografia del tema senza doverli ritoccare uno per uno. */
.elementor-widget-theme-post-content h2 {
  margin-top: 2rem;
}

.elementor-widget-theme-post-content ul {
  padding-left: 1.2rem;
}

.elementor-widget-theme-post-content li {
  margin-bottom: 0.4rem;
}

/* -------------------------------------------------------------- 3. Footer */

.due-footer {
  background-color: var(--color-text, #1D1D1B);
  color: #ffffff;
}

.due-footer h1,
.due-footer h2,
.due-footer h3,
.due-footer h4,
.due-footer h5,
.due-footer h6,
.due-footer .elementor-heading-title {
  color: #ffffff;
}

/* Titoletto di colonna: piccolo, maiuscolo, con filetto primario. */
.due-footer__title .elementor-heading-title {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding-bottom: 10px;
  position: relative;
}

.due-footer__title .elementor-heading-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background-color: var(--color-primary, #E20714);
}

.due-footer p,
.due-footer li {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  line-height: 1.7;
}

.due-footer a {
  color: var(--color-primary, #E20714);
  font-weight: 700;
  text-decoration: none;
}

.due-footer a:hover {
  color: #ffffff;
}

.due-footer__logo img {
  max-width: 200px;
  height: auto;
}

/* Menu del footer: verticale, senza sfondi. */
.due-footer .elementor-nav-menu .elementor-item {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.95rem;
  font-weight: 400;
  text-transform: none;
  color: rgba(255, 255, 255, 0.75);
  padding: 6px 0;
}

.due-footer .elementor-nav-menu .elementor-item:hover,
.due-footer .elementor-nav-menu .elementor-item.elementor-item-active {
  color: var(--color-primary, #E20714);
  background: transparent;
}

/* Riga finale, piu' scura: copyright e note legali. */
.due-footer__bottom {
  background-color: #111111;
  color: rgba(255, 255, 255, 0.6);
}

.due-footer__bottom p {
  font-size: 0.8rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
}

.due-footer__bottom a {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  text-decoration: underline;
}

.due-footer__bottom a:hover {
  color: var(--color-primary, #E20714);
}