/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 22 2026 | 09:31:55 */
/* ==========================================================================
   CONTE MANGESA — ABBINAMENTI · SEZIONE 1 · HERO TIPOGRAFICA
   Snippet:   cm-abbinamenti-hero (CSS)
   Dove:      Custom CSS & JS → Frontend → Header → File esterno
   Struttura in Elementor (pagina Abbinamenti, prima sezione):
     Contenitore (larghezza piena) ................ cm-abbinamenti-hero
       └── Contenitore (contenuti) ................ cm-abbinamenti-hero__content
             ├── Immagine (monogramma CM oro) ..... cm-abbinamenti-hero__logo
             ├── Titolo "A TAVOLA"      (div) ..... cm-abbinamenti-hero__kicker
             ├── Titolo "ABBINAMENTI"   (div) ..... cm-abbinamenti-hero__title
             └── Titolo sottotitolo     (H1) ...... cm-abbinamenti-hero__subtitle

   DESIGN — questa pagina osa più delle altre. Tre elementi decorativi,
   tutti disegnati dal CSS (nessun widget, nessuna immagine in più):
     1. bagliore oro radiale, per togliere la piattezza al nero
     2. cornice oro INCLINATA dietro i contenuti (il testo resta dritto)
     3. FILO D'ORO che esce dal fondo della hero e prosegue nelle sezioni
        successive, legando tutta la pagina
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. FASCIA — nero con bagliore oro appena percettibile
   -------------------------------------------------------------------------- */
.elementor .e-con.cm-abbinamenti-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 100%;
  min-height: 56vh;                             /* altezza della testata */
  padding: 150px var(--cm-gutter) 96px;         /* in alto lascia spazio al menu */
  overflow: hidden;
  text-align: center;
  background-color: var(--cm-black);
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(255, 188, 47, 0.09), transparent 70%);
}

/* Toglie gli spazi extra che Elementor aggiunge sotto i widget */
.elementor .cm-abbinamenti-hero .elementor-widget:not(:last-child) {
  margin-block-end: 0;
}

/* IL FILO D'ORO: esce dal fondo della hero e "cade" verso la sezione dopo */
.elementor .e-con.cm-abbinamenti-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 3;
  width: 1px;
  height: 84px;                                 /* lunghezza del filo */
  max-width: 1px;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, var(--cm-gold) 100%);
}


/* --------------------------------------------------------------------------
   2. CONTENUTI + CORNICE INCLINATA
   -------------------------------------------------------------------------- */
.elementor .e-con.cm-abbinamenti-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
}

/* La cornice oro ruotata di pochi gradi dietro i contenuti.
   Il testo resta dritto: si inclina solo la cornice.
   width/height auto servono a disattivare il 100% che Elementor mette
   di suo sullo ::before dei contenitori. */
.elementor .e-con.cm-abbinamenti-hero__content::before {
  content: "";
  position: absolute;
  inset: -54px -70px;
  z-index: -1;
  width: auto;
  height: auto;
  pointer-events: none;
  border: 1px solid var(--cm-gold-subtle);
  border-radius: 26px;
  transform: rotate(-2.4deg);                   /* inclinazione della cornice */
}


/* --------------------------------------------------------------------------
   3. MONOGRAMMA
   -------------------------------------------------------------------------- */
.elementor .cm-abbinamenti-hero__logo {
  width: auto;
}

.elementor .cm-abbinamenti-hero__logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 82px;                                 /* altezza monogramma */
  margin: 0 auto;
  transform: rotate(-4deg);                     /* leggera inclinazione */
}


/* --------------------------------------------------------------------------
   4. TESTI
   -------------------------------------------------------------------------- */

/* Occhiello */
.elementor .cm-abbinamenti-hero__kicker {
  width: 100%;
  margin-top: 26px;
}

.elementor .cm-abbinamenti-hero__kicker .elementor-heading-title {
  margin: 0;
  font-family: var(--cm-font-display);
  font-size: 14px;                              /* grandezza occhiello */
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cm-gold);
}

/* Titolo */
.elementor .cm-abbinamenti-hero__title {
  width: 100%;
  margin-top: 16px;
}

.elementor .cm-abbinamenti-hero__title .elementor-heading-title {
  margin: 0;
  font-family: var(--cm-font-display);
  font-size: 74px;                              /* grandezza titolo */
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cm-white);
}

/* Linea oro decorativa sotto il titolo */
.elementor .cm-abbinamenti-hero__title .elementor-heading-title::after {
  content: "";
  display: block;
  width: 70px;
  height: 2px;
  margin: 26px auto 0;
  background-color: var(--cm-gold);
}

/* Sottotitolo — è l'H1 della pagina: contiene la parola chiave */
.elementor .cm-abbinamenti-hero__subtitle {
  width: 100%;
  margin-top: 24px;
}

.elementor .cm-abbinamenti-hero__subtitle .elementor-heading-title {
  max-width: 640px;                             /* larghezza massima del sottotitolo */
  margin: 0 auto;
  font-family: var(--cm-font-body);
  font-size: 22px;                              /* grandezza sottotitolo */
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cm-white-muted);
}


/* --------------------------------------------------------------------------
   5. RESPONSIVE
   -------------------------------------------------------------------------- */

/* Tablet */
@media (max-width: 1024px) {
  .elementor .e-con.cm-abbinamenti-hero {
    min-height: 48vh;
    padding-top: 128px;
    padding-bottom: 84px;
  }
  .elementor .e-con.cm-abbinamenti-hero__content::before {
    inset: -40px -40px;
  }
  .elementor .cm-abbinamenti-hero__title .elementor-heading-title {
    font-size: 58px;
  }
  .elementor .cm-abbinamenti-hero__subtitle .elementor-heading-title {
    font-size: 20px;
  }
}

/* Mobile: niente cornice inclinata, non c'è spazio per farla respirare */
@media (max-width: 767px) {
  .elementor .e-con.cm-abbinamenti-hero {
    min-height: 320px;
    padding-top: 112px;
    padding-bottom: 72px;
  }
  .elementor .e-con.cm-abbinamenti-hero__content::before {
    display: none;
  }
  .elementor .e-con.cm-abbinamenti-hero::after {
    height: 64px;
  }
  .elementor .cm-abbinamenti-hero__logo img {
    height: 66px;
  }
  .elementor .cm-abbinamenti-hero__kicker {
    margin-top: 20px;
  }
  .elementor .cm-abbinamenti-hero__kicker .elementor-heading-title {
    font-size: 12px;
    letter-spacing: 0.16em;
  }
  .elementor .cm-abbinamenti-hero__title .elementor-heading-title {
    font-size: 40px;
  }
  .elementor .cm-abbinamenti-hero__title .elementor-heading-title::after {
    margin-top: 20px;
  }
  .elementor .cm-abbinamenti-hero__subtitle {
    margin-top: 18px;
  }
  .elementor .cm-abbinamenti-hero__subtitle .elementor-heading-title {
    font-size: 19px;
  }
}