/*
Theme Name:     DFD Native Child Theme
Theme URI: 		http://nativewptheme.net/home/
Description:    Native - Highly Functional Multifaceted WP Theme
Author:         DFD
Author URI:		http://dfd.name
Template:       dfd-native
Version:        1.0.0
*/

/* ==========================================================================
   RADIO TICINO — sistema di design
   --------------------------------------------------------------------------
   Fondo bianco, testo nero, armonizzazione di pagine e articoli.

   PERCHE' ESISTE QUESTO FILE
   Il tema oggi e' incoerente: il body ha sfondo nero E colore testo nero,
   i paragrafi sono forzati a bianco, alcuni h4 restano neri (quindi
   invisibili sul nero) e certi h1 sono gialli. Qui si riporta tutto a una
   sola regola: fondo chiaro, testo scuro, una scala tipografica sola.

   COME DISATTIVARLO
   Cancella tutto quello che sta sotto questa intestazione e salva.
   Il sito torna esattamente com'era: non viene modificato nessun contenuto.

   SULL'USO DI !important
   Il tema padre e WPBakery impostano i colori con selettori molto specifici
   e con stili inline generati (.vc_custom_*). Senza !important queste regole
   verrebbero semplicemente ignorate. E' limitato a colore, sfondo e famiglia
   di caratteri: non tocca posizionamento o dimensioni dei blocchi.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKEN
   Un solo posto per cambiare tutto. Il nero non e' #000: ha una punta di
   freddo, cosi' i grigi derivati non virano al marrone.
   -------------------------------------------------------------------------- */
:root{
  --rt-ground:      #ffffff;   /* fondo pagina */
  --rt-surface:     #f5f5f7;   /* box, righe alternate, sezioni staccate */
  --rt-surface-2:   #ebebef;   /* hover, bordi pieni */
  --rt-line:        #e2e2e7;   /* separatori */

  --rt-text:        #111113;   /* testo corrente */
  --rt-text-soft:   #3d3d45;   /* testo secondario */
  --rt-muted:       #6b6b76;   /* metadati, didascalie, etichette */

  --rt-fill:        #111113;   /* accento: il NERO come riempimento */
  --rt-on-fill:     #ffffff;   /* testo sopra l'accento */
  --rt-live:        #ff5600;   /* solo "in onda". Semantico, mai decorativo */

  --rt-display:     'Montserrat', 'Open Sans', system-ui, sans-serif;
  --rt-body:        'Open Sans', system-ui, -apple-system, sans-serif;

  --rt-measure:     68ch;      /* larghezza di lettura confortevole */
  --rt-radius:      10px;
  --rt-pill:        999px;

  /* ritmo verticale: una sola scala, usata ovunque */
  --rt-1: 8px;   --rt-2: 16px;  --rt-3: 24px;
  --rt-4: 32px;  --rt-5: 48px;  --rt-6: 64px;
}


/* --------------------------------------------------------------------------
   2. FONDO E TESTO
   Qui si annulla l'incoerenza di partenza (body nero + testo nero).
   Il player radio (.rtp-wrap) e i player video restano scuri di proposito:
   sono componenti a se', esclusi da tutte le regole che seguono.
   -------------------------------------------------------------------------- */
html,
body,
body.wp-singular,
.dfd-default-template,
.dfd-content-wrap,
.wpb-content-wrapper,
#main-content,
.main-content{
  background-color: var(--rt-ground) !important;
  color: var(--rt-text) !important;
}

body{
  font-family: var(--rt-body) !important;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Il tema forza il testo a bianco in molti punti: lo si riporta a scuro
   ovunque tranne che nelle zone volutamente scure. */
.dfd-content-wrap p,
.dfd-content-wrap li,
.dfd-content-wrap td,
.dfd-content-wrap dd,
.dfd-content-wrap dt,
.wpb_text_column p,
.wpb_text_column li,
.vc_column_text p,
.vc_column_text li,
.entry-content p,
.entry-content li{
  color: var(--rt-text) !important;
}

/* Zone che devono restare scure: non toccarle. */
.rtp-wrap, .rtp-wrap *,
.video-js, .video-js *,
.vjs-tech,
footer .rtp-wrap *{
  background-color: revert !important;
  color: revert !important;
}


/* --------------------------------------------------------------------------
   3. SCALA TIPOGRAFICA
   Una sola scala per pagine e articoli. La gerarchia la fa il PESO, non
   famiglie nuove: Montserrat e Open Sans sono gia' caricati, non si
   aggiunge un solo byte di download.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.dfd-title,
.wpb_text_column h1, .wpb_text_column h2,
.wpb_text_column h3, .wpb_text_column h4{
  font-family: var(--rt-display) !important;
  color: var(--rt-text) !important;
  text-wrap: balance;
  margin: 0;
}

h1, .dfd-title{
  font-size: clamp(30px, 4.2vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 1.14 !important;
  letter-spacing: -0.025em !important;
}
h2{
  font-size: clamp(24px, 3vw, 30px) !important;
  font-weight: 800 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.02em !important;
}
h3{
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.32 !important;
  letter-spacing: -0.01em !important;
}
h4{
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.42 !important;
}
h5, h6{
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--rt-muted) !important;
}

/* Ritmo verticale: lo spazio lo mette il fratello precedente, cosi' i
   margini non si sommano ne' collassano fra blocchi WPBakery. */
.wpb_text_column h2,
.vc_column_text h2,
.entry-content h2{ margin-top: var(--rt-5) !important; margin-bottom: var(--rt-2) !important; }

.wpb_text_column h3,
.vc_column_text h3,
.entry-content h3{ margin-top: var(--rt-4) !important; margin-bottom: var(--rt-1) !important; }

.wpb_text_column h4,
.vc_column_text h4,
.entry-content h4{ margin-top: var(--rt-3) !important; margin-bottom: var(--rt-1) !important; }

.wpb_text_column > *:first-child,
.vc_column_text > *:first-child,
.entry-content > *:first-child{ margin-top: 0 !important; }

.wpb_text_column p,
.vc_column_text p,
.entry-content p{ margin: 0 0 var(--rt-2) !important; }


/* --------------------------------------------------------------------------
   4. LARGHEZZA DI LETTURA
   Una riga di 130 caratteri e' faticosa da seguire. Il testo corrente si
   ferma a ~68 caratteri; immagini, gallerie e righe a tutta larghezza no.
   -------------------------------------------------------------------------- */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote,
.wpb_text_column .wpb_wrapper > p,
.wpb_text_column .wpb_wrapper > ul,
.wpb_text_column .wpb_wrapper > ol{
  max-width: var(--rt-measure);
}

/* Centra la colonna di lettura solo quando il blocco e' isolato a tutta
   larghezza; dentro colonne affiancate resta allineata a sinistra. */
.vc_row:not(.vc_inner) > .twelve.columns > .wpb_text_column .wpb_wrapper > p{
  margin-left: auto; margin-right: auto;
}


/* --------------------------------------------------------------------------
   5. COLLEGAMENTI
   Sottolineatura discreta invece del cambio di colore: si distinguono
   senza introdurre un secondo colore nel sistema.
   -------------------------------------------------------------------------- */
.dfd-content-wrap a:not(.dfd-button):not(.vc_btn3):not(.btn):not([class*="rtp-"]),
.entry-content a:not(.dfd-button):not(.vc_btn3):not(.btn){
  color: var(--rt-text) !important;
  text-decoration: underline;
  text-decoration-color: var(--rt-surface-2);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  transition: text-decoration-color .15s ease;
}
.dfd-content-wrap a:not(.dfd-button):not(.vc_btn3):not(.btn):hover,
.entry-content a:not(.dfd-button):not(.vc_btn3):not(.btn):hover{
  text-decoration-color: var(--rt-fill);
}

/* Stato di messa a fuoco visibile: oggi manca del tutto. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline: 2px solid var(--rt-fill) !important;
  outline-offset: 3px !important;
}


/* --------------------------------------------------------------------------
   6. BOTTONI
   La geometria c'e' gia' (pillole nere maiuscole). Qui si sistema la
   GERARCHIA: una sola azione primaria piena per schermata, il resto in
   contorno. Oggi ogni bottone urla allo stesso volume.
   -------------------------------------------------------------------------- */
.dfd-button,
.vc_btn3,
.wpcf7 input[type="submit"],
button.dfd-button{
  font-family: var(--rt-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  border-radius: var(--rt-pill) !important;
  padding: 14px 30px !important;
  border: 2px solid var(--rt-fill) !important;
  background-color: var(--rt-fill) !important;
  color: var(--rt-on-fill) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
  display: inline-block;
  line-height: 1 !important;
}
.dfd-button:hover,
.vc_btn3:hover,
.wpcf7 input[type="submit"]:hover{
  transform: scale(1.04);
  background-color: #000 !important;
  color: var(--rt-on-fill) !important;
}

/* Variante secondaria: aggiungi la classe dfd-button-outline nell'editor */
.dfd-button-outline,
.vc_btn3.vc_btn3-style-outline{
  background-color: transparent !important;
  color: var(--rt-fill) !important;
}
.dfd-button-outline:hover,
.vc_btn3.vc_btn3-style-outline:hover{
  background-color: var(--rt-fill) !important;
  color: var(--rt-on-fill) !important;
}


/* --------------------------------------------------------------------------
   7. IMMAGINI E MEDIA
   Stesso raggio, stesso comportamento responsivo ovunque. Le proporzioni
   sono preservate: niente ritagli imposti.
   -------------------------------------------------------------------------- */
.wpb_single_image img,
.entry-content img,
.dfd-content-wrap .wpb_wrapper > img{
  max-width: 100%;
  height: auto;
  border-radius: var(--rt-radius);
  display: block;
}

figcaption,
.wpb_single_image .vc_figure-caption{
  font-size: 14px !important;
  color: var(--rt-muted) !important;
  margin-top: var(--rt-1) !important;
  line-height: 1.5;
}

iframe, video{ max-width: 100%; border-radius: var(--rt-radius); }


/* --------------------------------------------------------------------------
   8. ELENCHI, CITAZIONI, TABELLE
   -------------------------------------------------------------------------- */
.entry-content ul,
.entry-content ol,
.wpb_text_column ul,
.wpb_text_column ol{
  margin: 0 0 var(--rt-2) !important;
  padding-left: 22px !important;
}
.entry-content li,
.wpb_text_column li{ margin-bottom: 6px; }

blockquote{
  margin: var(--rt-4) 0 !important;
  padding: 0 0 0 var(--rt-3) !important;
  border-left: 3px solid var(--rt-fill) !important;
  background: none !important;
  font-size: 20px !important;
  line-height: 1.5 !important;
  color: var(--rt-text-soft) !important;
  font-style: normal !important;
}

.entry-content table,
.wpb_text_column table{
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin-bottom: var(--rt-3);
}
.entry-content th, .wpb_text_column th{
  text-align: left;
  background: var(--rt-surface) !important;
  color: var(--rt-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--rt-line) !important;
}
.entry-content td, .wpb_text_column td{
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--rt-line) !important;
}
/* Le tabelle larghe scorrono da sole invece di allargare la pagina */
.entry-content table, .wpb_text_column table{ display: block; overflow-x: auto; }


/* --------------------------------------------------------------------------
   9. MODULI (Contact Form 7)
   -------------------------------------------------------------------------- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 textarea,
.wpcf7 select{
  width: 100%;
  font-family: var(--rt-body) !important;
  font-size: 16px !important;      /* sotto i 16px iOS zooma da solo */
  color: var(--rt-text) !important;
  background: var(--rt-surface) !important;
  border: 1px solid var(--rt-line) !important;
  border-radius: var(--rt-radius) !important;
  padding: 13px 16px !important;
  margin-bottom: var(--rt-2);
  transition: border-color .15s ease, background .15s ease;
}
.wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus{
  border-color: var(--rt-fill) !important;
  background: var(--rt-ground) !important;
}
.wpcf7 textarea{ min-height: 150px; resize: vertical; }
.wpcf7-not-valid-tip{ color: var(--rt-live) !important; font-size: 13px !important; }
.wpcf7 label{
  display: block;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .4px;
  color: var(--rt-muted) !important;
  margin-bottom: 6px;
}


/* --------------------------------------------------------------------------
   10. RITMO FRA LE RIGHE WPBAKERY
   Il problema principale dell'impaginazione: ogni riga ha padding diversi,
   accumulati in anni di modifiche. Qui si impone una spaziatura sola.
   Le righe che nell'editor hanno un padding esplicito lo mantengono.
   -------------------------------------------------------------------------- */
.dfd-content-wrap .vc_row:not(.vc_inner){
  padding-top: var(--rt-5);
  padding-bottom: var(--rt-5);
}
.dfd-content-wrap .vc_row.vc_inner{
  padding-top: 0;
  padding-bottom: 0;
}
/* Righe vuote usate come spaziatore: si chiudono da sole */
.dfd-content-wrap .vc_row:not(.vc_inner):empty,
.dfd-content-wrap .vc_row:not(.vc_inner) > .twelve.columns:empty{
  padding: 0 !important;
  min-height: 0 !important;
}
.dfd-spacer-module{ max-height: var(--rt-5); }


/* --------------------------------------------------------------------------
   11. ARTICOLI
   147 dei 218 articoli sono HTML semplice senza WPBakery: sono quelli che
   guadagnano di piu' da una tipografia coerente.
   -------------------------------------------------------------------------- */
.single-post .entry-content{ font-size: 18px; line-height: 1.7; }

.single-post .entry-title,
.single-post h1.dfd-title{ margin-bottom: var(--rt-2) !important; }

.entry-meta, .post-meta, .dfd-post-details{
  font-size: 13px !important;
  color: var(--rt-muted) !important;
  letter-spacing: .3px;
}

/* Anteprime articolo in griglia: stessa card ovunque */
.dfd-blog-item, .blog-post-item{
  background: var(--rt-ground);
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-radius);
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.dfd-blog-item:hover, .blog-post-item:hover{
  border-color: var(--rt-fill);
  transform: translateY(-2px);
}


/* --------------------------------------------------------------------------
   12. INTESTAZIONE E PIE' DI PAGINA
   -------------------------------------------------------------------------- */
.footer-style-1,
.subfooter-style-on{
  background-color: var(--rt-surface) !important;
  color: var(--rt-text-soft) !important;
  border-top: 1px solid var(--rt-line);
}
.footer-style-1 a,
.subfooter-style-on a{ color: var(--rt-text-soft) !important; }
.footer-style-1 a:hover,
.subfooter-style-on a:hover{ color: var(--rt-text) !important; }

.footer-style-1 h1, .footer-style-1 h2,
.footer-style-1 h3, .footer-style-1 h4{
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--rt-muted) !important;
  margin-bottom: var(--rt-2) !important;
}


/* --------------------------------------------------------------------------
   13. SEGNALE "IN ONDA"
   L'unico colore oltre al bianco/nero, e solo per dire che la diretta e'
   attiva. Se compare come decorazione, e' usato male.
   -------------------------------------------------------------------------- */
.rt-live{
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--rt-live);
  background: rgba(255,86,0,.12);
  border-radius: var(--rt-pill);
  padding: 3px 10px;
}
.rt-live::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: var(--rt-live);
  animation: rt-pulse 1.4s ease-in-out infinite;
}
@keyframes rt-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }


/* --------------------------------------------------------------------------
   14. TELEFONO
   -------------------------------------------------------------------------- */
@media (max-width: 767px){
  body{ font-size: 16px; }
  .single-post .entry-content{ font-size: 17px; }
  .dfd-content-wrap .vc_row:not(.vc_inner){
    padding-top: var(--rt-4);
    padding-bottom: var(--rt-4);
  }
  .dfd-button, .vc_btn3, .wpcf7 input[type="submit"]{
    width: 100%;
    text-align: center;
    padding: 15px 24px !important;
  }
  blockquote{ font-size: 18px !important; padding-left: var(--rt-2) !important; }
}


/* --------------------------------------------------------------------------
   15. ACCESSIBILITA' E STAMPA
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print{
  .rtp-wrap, .footer-style-1, .subfooter-style-on, header, nav{ display: none !important; }
  body{ background: #fff !important; color: #000 !important; font-size: 12pt; }
  a{ text-decoration: none !important; }
}