.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-4d21369:#2E241C;--e-global-color-15fedf7:#B0522B;--e-global-color-c9c1208:#DDD3BE;--e-global-color-b5697db:#8A6440;--e-global-color-49fff61:#5C6B47;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-e3a6950-font-family:"Bebas Neue";--e-global-typography-e3a6950-font-weight:600;--e-global-typography-e43bf82-font-family:"Manrope";--e-global-typography-e43bf82-font-weight:400;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================
   RIDGEWAY PRODUCTIONS — CSS COMPLETO
   28 agosto 2026

   QUESTO FILE SOSTITUISCE TUTTO quello che hai in
   Elementor → Impostazioni sito → CSS personalizzato.

   Seleziona tutto quello che c'è là dentro, cancella, incolla questo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BLOCCA LO SCROLL ORIZZONTALE
   Oggi il contenuto è largo 559px in uno schermo da 485: la pagina si sposta
   di lato mentre si scorre.
   -------------------------------------------------------------------------- */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}


/* --------------------------------------------------------------------------
   2. TABLET E TELEFONO (sotto 900px)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {

  /* --- HEADER: menu su UNA riga sola, voci distribuite -----------------
     Prima il menu andava a capo su due righe e l'header rubava 92px di
     schermo. Ora: logo sopra, cinque voci su una riga distribuite da bordo
     a bordo. Misurato a 390px: una riga, header 76px.                    */

  .elementor-location-header header,
  .elementor-widget-html header {
    flex-wrap: wrap !important;
    padding: 14px 20px !important;
    row-gap: 8px !important;
  }

  .elementor-location-header header > a:first-of-type,
  .elementor-widget-html header > a:first-of-type {
    font-size: 21px !important;
    line-height: 1 !important;
  }

  .elementor-location-header header nav,
  .elementor-widget-html header nav {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 0 !important;
    font-size: 10.5px !important;
    letter-spacing: 0.06em !important;
  }

  /* CONTACT: via il bordo, che su una riga stretta rubava spazio.
     Resta distinto perché arancione.                                     */
  .elementor-location-header header nav a[style*="border"],
  .elementor-widget-html header nav a[style*="border"] {
    border: 0 !important;
    padding: 0 !important;
    color: #E8562B !important;
  }


  /* --- GRIGLIE: tutto a colonna singola --------------------------------
     Card clienti (4 col), servizi a zigzag (2 col), process (5 col),
     equipment (2 col), footer (3 col) e la pagina Contact.              */

  .elementor-widget-html [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }


  /* --- SPAZI LATERALI: da 56px a 20px ---------------------------------- */

  .elementor-widget-html section,
  .elementor-widget-html footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }


  /* --- HERO: un po' più basso, il testo non tocca i bordi -------------- */

  .elementor-widget-html section[style*="56vh"] {
    height: 46vh !important;
    min-height: 320px !important;
  }

  .elementor-widget-html section[style*="56vh"] h1 {
    font-size: 30px !important;
    line-height: 1.15;
  }


  /* --- IMMAGINI: mai più larghe dello schermo -------------------------- */

  .elementor-widget-html img {
    max-width: 100%;
    height: auto;
  }

  /* eccezione: le immagini in copertura assoluta (hero) mantengono
     l'altezza impostata */
  .elementor-widget-html section[style*="56vh"] img {
    height: 100% !important;
  }


  /* --- FORM DI CONTATTO: campi a piena larghezza ----------------------- */

  .elementor-form .elementor-field-group {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  .elementor-field-textual {
    font-size: 16px !important; /* sotto i 16px iOS zooma da solo */
  }


  /* --- BOTTONI CTA: leggibili e cliccabili ----------------------------- */

  .elementor-widget-html a[style*="background:#E8562B"] {
    display: inline-block;
    padding: 15px 26px !important;
    font-size: 13.5px !important;
  }
}


/* --------------------------------------------------------------------------
   3. TABLET (601–900px): le card clienti restano su due colonne
   -------------------------------------------------------------------------- */
@media (min-width: 601px) and (max-width: 900px) {

  .rp-clients-grid,
  .elementor-widget-html [style*="repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* --------------------------------------------------------------------------
   4. TELEFONI PICCOLI (sotto 400px)
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {

  .elementor-location-header header nav,
  .elementor-widget-html header nav {
    font-size: 9.5px !important;
    letter-spacing: 0.04em !important;
  }

  .elementor-widget-html section,
  .elementor-widget-html footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* ==========================================================================
   AGGIUNTA — 29 luglio, secondo passaggio
   Sistema la pagina CONTACT, l'unica rimasta rotta dopo il primo blocco.

   Motivo: Contact non usa un widget HTML come le altre pagine, ma i
   CONTENITORI NATIVI di Elementor (.e-con), che il CSS precedente non
   toccava. Restavano affiancati anche sul telefono, schiacciando il form
   a 76px di larghezza.
   ========================================================================== */

@media (max-width: 900px) {

  /* i contenitori Elementor passano da riga a colonna */
  .elementor .e-con.e-flex,
  .elementor .e-con-inner {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  /* e i loro figli occupano tutta la larghezza */
  .elementor .e-con.e-flex > .e-con,
  .elementor .e-con.e-flex > .elementor-element,
  .elementor .e-con-inner > .e-con,
  .elementor .e-con-inner > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
  }

  /* campi del form a piena larghezza e altezza utile per il messaggio */
  .elementor-form .elementor-field-group,
  .elementor-field-group .elementor-field {
    width: 100% !important;
    max-width: 100% !important;
  }

  .elementor-field-group textarea {
    min-height: 130px !important;
  }

  /* bottone invio ben visibile */
  .elementor-form .elementor-button {
    width: 100% !important;
    padding: 16px !important;
  }
}


/* ==========================================================================
   RIDGEWAY — SCHERMI LARGHI  (versione corretta, 24 agosto)

   Ora fa una cosa sola: allinea logo e menu alla colonna del contenuto.
   Tutto il resto è risolto direttamente nell'HTML delle pagine.
   ========================================================================== */

@media (min-width: 1320px) {
  .elementor-location-header header,
  .elementor-widget-html header {
    padding-left: calc((100% - 1180px) / 2) !important;
    padding-right: calc((100% - 1180px) / 2) !important;
  }
}


/* ==========================================================================
   AGGIUNTA — 24 agosto, sera
   Le colonne delle pagine non usano più CSS grid ma flexbox (grid veniva
   posizionato in modo sbagliato da qualcosa nel tema/plugin: le colonne
   finivano nelle celle sbagliate). Questa regola le rimette in colonna
   singola sul telefono, come faceva prima quella sulle griglie.
   ========================================================================== */

@media (max-width: 900px) {
  .elementor-widget-html section > div[style*="display:flex"][style*="flex-wrap"],
  .elementor-widget-html article[style*="display:flex"],
  .elementor-widget-html section[style*="display:flex"][style*="flex-wrap"] {
    flex-direction: column !important;
  }
  .elementor-widget-html article[style*="display:flex"] > *,
  .elementor-widget-html section[style*="display:flex"][style*="flex-wrap"] > *,
  .elementor-widget-html section > div[style*="display:flex"][style*="flex-wrap"] > * {
    flex: 1 1 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    order: 0 !important;
  }
  .elementor-widget-html article img { height: 260px !important; }
}


/* ==========================================================================
   SFONDO NERO — 28 agosto

   Il fondo pagina passa dal marrone caldo #3A342D al quasi-nero #0B0A09.
   Non serve reincollare le pagine: gli sfondi sono scritti negli stili in
   linea SENZA !important, quindi una regola con !important li batte.

   Le tre profondita' del sito restano distinte, altrimenti fasce e footer
   sparirebbero dentro la pagina:

     pagina   #0B0A09   quasi nero
     fasce    #16130F   appena piu' chiaro (CTA, riga loghi, Paul American)
     footer   #000000   nero pieno, chiude in fondo

   L'header resta #0B0A09: sopra il video della home deve restare leggibile.
   ========================================================================== */

body,
.elementor-widget-html div[style*="background:#3A342D"] {
  background: #0B0A09 !important;
}

.elementor-widget-html section[style*="background:#0B0A09"] {
  background: #16130F !important;
}

.elementor-widget-html footer[style*="background:#070605"] {
  background: #000000 !important;
}


/* ==========================================================================
   HEADER — simbolo accanto al nome
   Sotto i 480px lo schermo non basta per simbolo + nome per esteso:
   resta il simbolo, che a quel punto e' gia' riconoscibile.
   ========================================================================== */

@media (max-width: 480px) {
  .elementor-location-header header > a:first-of-type span,
  .elementor-widget-html header > a:first-of-type span {
    display: none;
  }
  .elementor-location-header header > a:first-of-type svg,
  .elementor-widget-html header > a:first-of-type svg {
    height: 30px !important;
  }
}

/* PORTFOLIO — immagine a sinistra nelle voci dispari, a destra nelle pari.
   Vale solo da 901px in su: sotto, il telefono impila e mette sempre
   l'immagine per prima, come già fa. */
@media (min-width: 901px) {
  .rp-portfolio article:nth-of-type(odd) > a.rw-imglink,
  .rp-portfolio article:nth-of-type(odd) > span.rw-imglink { order: -1 }
  .rp-portfolio article:nth-of-type(even) > a.rw-imglink,
  .rp-portfolio article:nth-of-type(even) > span.rw-imglink { order: 1 }
}/* End custom CSS */