/* ==========================================================================
   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;
}

/* Il contenitore del contenuto nel template Single e' a tutta larghezza,
   cosi' le fasce colorate arrivano ai bordi dello schermo. Una pagina
   scritta come testo semplice pero' non deve stendersi da un bordo
   all'altro: qui rimetto in gabbia tutto cio' che non e' una fascia.
   Sono elencate le due forme del markup di Elementor, con e senza il
   contenitore intermedio del widget. */
.elementor-widget-theme-post-content > .elementor-widget-container > :not(.e-con):not(.elementor),
.elementor-widget-theme-post-content > :not(.e-con):not(.elementor) {
  max-width: var(--container-width, 75rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* 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. Blog: schede articolo */

/* Si applicano al widget Archive Posts / Posts con la classe due-cards.
   Nel widget non imposto colori o tipografia: cosi' Elementor non genera
   regole per-elemento, che avrebbero specificita' maggiore di queste. */

.due-cards .elementor-post {
  background-color: var(--color-bg, #ffffff);
  border-bottom: 4px solid var(--color-primary, #E20714);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.10);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.due-cards .elementor-post:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}

.due-cards .elementor-post__thumbnail {
  position: relative;
  overflow: hidden;
}

/* Velo scuro in basso, come sulle card della libreria. */
.due-cards .elementor-post__thumbnail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 60%);
  pointer-events: none;
}

.due-cards .elementor-post__thumbnail img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.due-cards .elementor-post:hover .elementor-post__thumbnail img {
  transform: scale(1.08);
}

.due-cards .elementor-post__text {
  padding: 24px 24px 28px;
}

.due-cards .elementor-post__meta-data {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary, #E20714);
  border: 0;
  padding: 0;
  margin: 0 0 10px 0;
}

.due-cards .elementor-post__title {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 0 0 12px 0;
}

.due-cards .elementor-post__title a {
  color: var(--color-text, #1D1D1B);
  transition: color 0.25s ease;
}

.due-cards .elementor-post:hover .elementor-post__title a {
  color: var(--color-primary, #E20714);
}

.due-cards .elementor-post__excerpt p {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text, #1D1D1B);
  opacity: 0.75;
  margin: 0 0 16px 0;
}

.due-cards .elementor-post__read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-primary, #E20714);
  text-decoration: none;
}

.due-cards .elementor-post__read-more::after {
  content: "\2192";
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.3s ease;
}

.due-cards .elementor-post:hover .elementor-post__read-more::after {
  transform: translateX(5px);
}

/* Paginazione: quadrati pieni, niente angoli tondi. */
.elementor-pagination .page-numbers {
  display: inline-block;
  padding: 10px 16px;
  margin: 0 4px;
  background-color: var(--color-bg-2, #E8E8E8);
  color: var(--color-text, #1D1D1B);
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.85rem;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.elementor-pagination .page-numbers.current,
.elementor-pagination a.page-numbers:hover {
  background-color: var(--color-primary, #E20714);
  color: #ffffff;
}

/* ----------------------------------------------------- 4. Pagina articolo */

/* Occhiello con la data, dentro la testata scura. */
.due-article__meta .elementor-heading-title {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-weight: 400;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #ffffff;
  opacity: 0.85;
  margin: 0 0 12px 0;
}

/* Colonna di lettura: misura stretta, corpo piu' grande. */
.due-article__body {
  font-size: 1.1rem;
}

.due-article__body p {
  font-size: 1.1rem;
  line-height: 1.75;
  margin: 0 0 1.4rem 0;
}

.due-article__body h2 {
  margin-top: 2.5rem;
}

.due-article__body h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  margin-top: 12px;
  background-color: var(--color-primary, #E20714);
}

.due-article__body blockquote {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 5px solid var(--color-primary, #E20714);
  font-size: 1.2rem;
  line-height: 1.6;
}

.due-article__body img {
  display: block;
  margin: 2rem 0;
}

/* -------------------------------------------------------------- 5. 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);
}