/* ==========================================================================
   RADIOFRANCO — Design System personalizzato (restyling moderno)
   File unico collegato a tutte le pagine per garantire coerenza visiva.
   Sovrascrive gli stili di Mobirise senza toccare la struttura HTML.
   Autore: restyling 2026
   ========================================================================== */

:root {
  --rf-primary:        #2f4bef;   /* blu elettrico principale */
  --rf-primary-dark:   #1b2a8f;   /* blu profondo */
  --rf-primary-darker: #0d1330;   /* navy/ink per sezioni scure e testo */
  --rf-accent:         #ff375f;   /* rosso-corallo per CTA/urgenza */
  --rf-cyan:           #17c3e6;   /* accento ciano per dettagli */
  --rf-whatsapp:       #25d366;   /* verde WhatsApp */
  --rf-ink:            #141a33;   /* testo principale */
  --rf-muted:          #5b6472;   /* testo secondario */
  --rf-bg:             #f5f7ff;   /* sfondo chiaro alternativo */
  --rf-line:           #e6e9f5;   /* bordi/linee */
  --rf-radius:         16px;
  --rf-radius-sm:      10px;
  --rf-shadow:         0 10px 30px rgba(20, 26, 51, .10);
  --rf-shadow-lg:      0 20px 45px rgba(20, 26, 51, .18);
  --rf-grad:           linear-gradient(135deg, #2f4bef 0%, #3b5bfd 55%, #17c3e6 130%);
  --rf-grad-dark:      linear-gradient(135deg, #0d1330 0%, #1b2a8f 60%, #2f4bef 130%);
  --rf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans", sans-serif;

  /* --- Token SEMANTICI (rimappati in dark mode da un unico blocco) --------- */
  --rf-page-bg:        #ffffff;                 /* sfondo pagina/sezioni */
  --rf-page-bg-alt:    #f5f7ff;                 /* sezioni alternate */
  --rf-surface:        #ffffff;                 /* card, navbar, dropdown */
  --rf-surface-2:      #f5f7ff;                 /* superfici secondarie */
  --rf-navbar-bg:      #ffffff;                 /* sfondo navbar */
  --rf-ink-soft:       #2a3350;                 /* titoli su superfici */
  --rf-brand-purple:   #33217a;                 /* viola brand del logo */
  --rf-hero-ink:       #ffffff;                 /* testo sulla hero */
}

/* ------------------------------ Base ------------------------------------- */
body {
  font-family: var(--rf-font);
  color: var(--rf-ink);
  background: var(--rf-page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .1px;
  transition: background .4s ease, color .4s ease;
}

/* Sfondo uniforme e controllabile via token su tutte le sezioni di contenuto.
   Escluse: hero (header4), footer e blocco montascale (content5) che hanno
   un loro fondo scuro/gradiente. Batte i background per-cid di Mobirise. */
body > section:not([class*="header4"]):not([id^="footer"]):not([class*="content5"]):not(.menu):not([class*="rf-hero"]) {
  background: var(--rf-page-bg) !important;   /* shorthand: azzera anche i gradienti decorativi per-cid */
  transition: background .4s ease;
}
h1, h2, h3, h4, h5, h6,
.mbr-section-title, .card-title { transition: color .3s ease; }

h1, h2, h3, h4, h5, h6,
.mbr-section-title, .card-title, .navbar-caption {
  font-family: var(--rf-font) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  color: var(--rf-ink);
}

a { transition: color .2s ease; }

img { border-radius: 6px; }

/* IL LOGO VA RETTO. La fascia viola della targa arriva a filo dei due angoli
   in basso del PNG (gli altri due sono trasparenti), quindi i 6px qui sopra
   gliela smussano e in barra si vede un rettangolo stondato.

   L'eccezione ESISTEVA GIA', ed e' il motivo per cui vale la pena scriverlo:
   era `.navbar-logo img`, cioe' il markup Mobirise, e ha smesso di agganciare
   il giorno in cui la navbar e' stata riscritta con `.rf-nav__brand` /
   `.rf-nav__logo`. Nessuno se n'e' accorto perche' **una regola CSS che non
   aggancia piu' niente non da' errore: smette e basta**. Insieme a quella
   erano morti anche `.clients-img`, `.socicon` e `.mbr-iconfont` — zero
   occorrenze in tutto il sito — e sono stati tolti. Quando si riscrive del
   markup, le eccezioni scritte sui vecchi selettori vanno cercate a mano. */
.rf-nav__logo { border-radius: 0; }

/* --------------------------- Selezione testo ----------------------------- */
::selection { background: var(--rf-primary); color: #fff; }

/* --------------------------- Navbar / Menu ------------------------------- */
.menu .navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--rf-navbar-bg) !important;   /* sfondo pieno, nessun blur = scroll fluido */
  box-shadow: 0 2px 14px rgba(20, 26, 51, .08);
  border-bottom: 1px solid var(--rf-line);
  padding: .45rem 1.2rem !important;
  transition: background .4s ease, border-color .4s ease;
}

.navbar-caption {
  font-weight: 800 !important;
  letter-spacing: .04em;
  color: var(--rf-primary-dark) !important;
}

/* Link del menu */
.navbar .nav-link.link,
.navbar .nav-item .nav-link {
  color: var(--rf-ink) !important;
  font-weight: 600 !important;
  position: relative;
  border-radius: 8px;
  transition: color .2s ease, background .2s ease;
}
.navbar .nav-link.link:hover,
.navbar .nav-item .nav-link:hover,
.navbar .nav-link.link:focus {
  color: var(--rf-primary) !important;
}
/* Sottolineatura animata */
.navbar .nav-item > .nav-link.link::after {
  content: "";
  position: absolute;
  left: 1.4em; right: 1.4em;
  bottom: .35em;
  height: 2px;
  background: var(--rf-grad);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.navbar .nav-item > .nav-link.link:hover::after { transform: scaleX(1); }

.navbar .mbr-iconfont-btn { color: var(--rf-primary); }

/* Dropdown */
.navbar .dropdown-menu {
  border: 1px solid var(--rf-line) !important;
  border-radius: var(--rf-radius-sm) !important;
  box-shadow: var(--rf-shadow) !important;
  padding: .4rem !important;
  background: var(--rf-surface) !important;
  overflow: hidden;
}
.navbar .dropdown-item {
  color: var(--rf-ink) !important;
  border-radius: 8px;
  padding: .55rem .9rem !important;
  transition: background .18s ease, color .18s ease;
}
.navbar .dropdown-item:hover {
  background: var(--rf-bg) !important;
  color: var(--rf-primary) !important;
}

/* Hamburger mobile */
.navbar .hamburger span { background-color: var(--rf-primary) !important; }

/* ------------------------------ Bottoni ---------------------------------- */
.btn {
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  padding: .7rem 1.6rem !important;
  border: 2px solid transparent !important;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .2s ease, background .2s ease, color .2s ease !important;
  box-shadow: 0 6px 16px rgba(47, 75, 239, .18);
}
.btn:hover, .btn:focus {
  transform: translateY(-2px);
  box-shadow: var(--rf-shadow-lg);
}
.btn:active { transform: translateY(0); }

.btn-primary, .btn-primary.display-4 {
  background: var(--rf-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.btn-secondary, .btn-secondary.display-4 {
  background: var(--rf-primary-darker) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.btn-danger, .btn-danger.display-4 {
  background: linear-gradient(135deg, #ff375f, #ff5b7f) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(255, 55, 95, .28);
}
.btn-success, .btn-success.display-4 {
  background: linear-gradient(135deg, #25d366, #1ebd5a) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(37, 211, 102, .28);
}
.btn-primary-outline, .btn-primary-outline.display-4 {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .85) !important;
  color: #fff !important;
  box-shadow: none;
}
.btn-primary-outline:hover, .btn-primary-outline.display-4:hover {
  background: #fff !important;
  color: var(--rf-primary-dark) !important;
}

/* Bottone CTA nella navbar (WhatsApp/CHAT) */
.navbar-buttons .btn {
  background: linear-gradient(135deg, #25d366, #1ebd5a) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(37, 211, 102, .28);
}

/* --------------------------- Titoli di sezione --------------------------- */
.mbr-section-title.display-2 {
  position: relative;
  font-size: clamp(2rem, 4.2vw, 3.2rem) !important;
  line-height: 1.08;
}
/* Linea accento sotto ai titoli centrati */
.align-center .mbr-section-title.display-2::after,
.mbr-section-title.align-center.display-2::after {
  content: "";
  display: block;
  width: 74px;
  height: 5px;
  margin: 18px auto 0;
  border-radius: 4px;
  background: var(--rf-grad);
}
.mbr-section-subtitle { color: var(--rf-muted); }

/* --------------------------------- Hero ---------------------------------- */
/* Hero coerente su tutte le pagine: gradiente scuro, immagine parallax
   e overlay neutralizzati per garantire testo bianco sempre leggibile. */
section[class*="header4"] {
  background: var(--rf-grad-dark) !important;
  position: relative;
}
section[class*="header4"] [class*="jarallax"],
section[class*="header4"] > .mbr-overlay {
  display: none !important;
}
section[class*="header4"] .container { position: relative; z-index: 2; }
section[class*="header4"] .mbr-section-title,
section[class*="header4"] .mbr-text,
section[class*="header4"] h1,
section[class*="header4"] h2,
section[class*="header4"] p { color: #fff !important; }
section[class*="header4"] .display-2 {
  font-size: clamp(2.4rem, 6vw, 4.4rem) !important;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .25);
}

/* Titoli "header1" (CHI SIAMO, SERVIZI...) su sfondo chiaro */
.header1 .mbr-section-title { color: var(--rf-ink) !important; }

/* --------------------------------- Card ---------------------------------- */
.card {
  background: transparent;
}
.card-wrapper {
  background: var(--rf-surface);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-radius) !important;
  box-shadow: var(--rf-shadow);
  overflow: hidden;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .4s ease;
}
.card-wrapper:hover {
  transform: translateY(-8px);
  box-shadow: var(--rf-shadow-lg);
  border-color: rgba(47, 75, 239, .35);
}
.card-img { overflow: hidden; }
.card-img img {
  border-radius: 0 !important;
  transition: transform .5s ease;
  width: 100%;
}
.card-wrapper:hover .card-img img { transform: scale(1.06); }
.card-box, .card-box.p-3 { padding: 1.4rem 1.5rem 0.4rem !important; }
.card-title { color: var(--rf-ink) !important; }
.card .mbr-text { color: var(--rf-muted) !important; }
.card .mbr-section-btn { padding: 1rem 1.5rem 1.5rem !important; }

/* --------------------------- Sezioni contenuto --------------------------- */
.content6, .content7 { background: var(--rf-page-bg); }
.mbr-figure img { border-radius: var(--rf-radius); box-shadow: var(--rf-shadow); }

/* Blocco montascale con overlay */
.content5 .mbr-white { color: #fff !important; }

/* ------------------------------ Carosello marchi ------------------------- */
.clients .clients-img {
  filter: grayscale(100%);
  opacity: .6;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
.clients .wrap-img:hover .clients-img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.08);
}

/* ------------------------------- Footer ---------------------------------- */
/* I footer Mobirise hanno id tipo "footer1-19", "footer1-1l": targetizzo l'id. */
section[id^="footer"] {
  background: var(--rf-grad-dark) !important;
  color: #fff;
}
section[id^="footer"] h1, section[id^="footer"] h2, section[id^="footer"] h3,
section[id^="footer"] h4, section[id^="footer"] h5, section[id^="footer"] h6 {
  color: #fff !important;
  letter-spacing: .04em;
}
section[id^="footer"] .mbr-text,
section[id^="footer"] p, section[id^="footer"] em { color: rgba(255, 255, 255, .80) !important; }
section[id^="footer"] a { color: #fff; }
section[id^="footer"] a.text-success { color: var(--rf-cyan) !important; }
section[id^="footer"] a.text-secondary { color: #fff !important; }
section[id^="footer"] hr { border-color: rgba(255, 255, 255, .18); }
section[id^="footer"] .soc-item a {
  display: inline-flex;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  transition: background .2s ease, transform .2s ease;
}
section[id^="footer"] .soc-item a:hover {
  background: rgba(255, 255, 255, .22);
  transform: translateY(-3px);
}
section[id^="footer"] .soc-item a span { color: #fff; }

/* --------------------------- Pulsante Torna su --------------------------- */
#scrollToTop .mbr-arrow-up-icon,
.scrollToTop a {
  background: var(--rf-grad) !important;
  color: #fff !important;
  border-radius: 50% !important;
  box-shadow: var(--rf-shadow-lg);
}

/* ------------------- Pulsante WhatsApp flottante (via JS) ---------------- */
.rf-whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1050;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--rf-whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .45);
  color: #fff;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
  animation: rf-wa-pulse 2.4s infinite;
}
.rf-whatsapp-float:hover {
  transform: scale(1.08);
  color: #fff;
  box-shadow: 0 14px 32px rgba(37, 211, 102, .6);
}
.rf-whatsapp-float svg { width: 34px; height: 34px; fill: #fff; }
/* Con una gallery a schermo intero aperta il pulsante darebbe fastidio:
   .modal-open lo mette Bootstrap (marchi/montascale), .rf-lb-open la nostra. */
body.modal-open .rf-whatsapp-float,
body.rf-lb-open .rf-whatsapp-float,
body.modal-open .scrollToTop,
body.rf-lb-open .scrollToTop { display: none !important; }
@keyframes rf-wa-pulse {
  0%   { box-shadow: 0 10px 26px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.45); }
  70%  { box-shadow: 0 10px 26px rgba(37,211,102,.45), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 10px 26px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width: 520px) {
  .rf-whatsapp-float { width: 54px; height: 54px; right: 16px; bottom: 16px; }
  .rf-whatsapp-float svg { width: 30px; height: 30px; }
}

/* =========================================================================
   DARK MODE — un unico blocco che rimappa i token semantici.
   Superfici navy + accenti blu/ciano del brand. Il circuito rame-oro e il
   logo viola animato restano firma della sola hero (vedi radiofranco-hero.css
   inline nella home). Attivata da body.dark (toggle in radiofranco.js).
   ========================================================================= */
body.dark {
  --rf-page-bg:      #070912;
  --rf-page-bg-alt:  #0d1122;
  --rf-surface:      #141a2e;
  --rf-surface-2:    #1b2138;
  --rf-navbar-bg:    rgba(9, 12, 22, .92);
  --rf-ink:          #eaf2ff;
  --rf-ink-soft:     #eaf2ff;
  --rf-muted:        #9fb0cf;
  --rf-line:         rgba(255, 255, 255, .10);
  --rf-shadow:       0 10px 30px rgba(0, 0, 0, .55);
  --rf-shadow-lg:    0 22px 48px rgba(0, 0, 0, .65);
}
/* navbar in dark: semitrasparente con blur (le superfici sotto scorrono) */
body.dark .menu .navbar {
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, .5);
}
/* card: batte le regole per-cid Mobirise (.cid-XXX .card-wrapper{background:#fff}) */
body.dark .card-wrapper { background: var(--rf-surface); }
body.dark .card-wrapper:hover {
  border-color: rgba(37, 195, 230, .5);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .6), 0 0 0 1px rgba(37, 195, 230, .12);
}
/* titoli e testi seguono i token; forzo i residui Mobirise su fondo scuro */
body.dark .mbr-section-title,
body.dark .card-title,
body.dark h1, body.dark h2, body.dark h3,
body.dark h4, body.dark h5, body.dark h6 { color: var(--rf-ink) !important; }
body.dark .header1 .mbr-section-title { color: var(--rf-ink) !important; }
body.dark .mbr-text, body.dark p, body.dark .display-7,
body.dark .mbr-section-subtitle { color: var(--rf-muted); }
body.dark .card .mbr-text { color: var(--rf-muted) !important; }
/* link di testo Bootstrap che diventerebbero illeggibili */
body.dark .text-primary { color: #8fb2ff !important; }
/* carosello marchi: i loghi (spesso scuri) restano visibili su un chip chiaro */
body.dark .clients .wrap-img {
  background: #eef2ff;
  border-radius: 12px;
  padding: 10px 14px;
}
body.dark .clients .clients-img { filter: none; opacity: .9; }
body.dark .clients .wrap-img:hover .clients-img { opacity: 1; }
/* immagini: bordo tenue per staccarle dal fondo */
body.dark .mbr-figure img,
body.dark .card-img img { box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
/* separatore social/condividi */
body.dark hr { border-color: rgba(255, 255, 255, .12); }
/* blocco montascale (content5): overlay scuro sull'immagine per coerenza in dark
   (batte lo style inline bianco opacity .2) */
body.dark .content5 .mbr-overlay { background-color: #05060f !important; opacity: .72 !important; }

/* ------------------- Interruttore tema chiaro/scuro ---------------------- */
/* Interruttore a due vie: binario con sole e luna, pomello che scorre sulla
   posizione attiva. Lo stato è aria-checked, non una classe. */
.rf-theme-switch {
  --sw-w: 62px; --sw-h: 32px; --sw-pad: 3px;
  padding: 0; border: none; background: none; cursor: pointer;
  line-height: 0; flex-shrink: 0; margin-right: .6rem;
  border-radius: 999px;
}
.rf-theme-switch__track {
  position: relative; display: block;
  width: var(--sw-w); height: var(--sw-h);
  border-radius: 999px;
  background: var(--rf-surface-2);
  border: 1px solid var(--rf-line);
  box-shadow: inset 0 2px 5px rgba(20, 26, 51, .12);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
body.dark .rf-theme-switch__track {
  background: #0b1024;
  border-color: rgba(120, 150, 255, .3);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6);
}

/* Le due icone restano ferme e stanno SOPRA il pomello: quella attiva si
   legge sul pomello, l'altra resta smorzata sul binario. */
.rf-theme-switch__ico {
  position: absolute; top: 50%; z-index: 2;
  width: 16px; height: 16px;
  margin-top: -8px; fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .35s ease, opacity .35s ease, transform .35s ease;
}
.rf-theme-switch__ico.is-sun  { left: 7px;  stroke: #b26a00; opacity: 1; }
.rf-theme-switch__ico.is-moon { right: 7px; stroke: #7d8aa8; opacity: .5; fill: none; }
body.dark .rf-theme-switch__ico.is-sun  { stroke: #6b7796; opacity: .45; }
body.dark .rf-theme-switch__ico.is-moon { stroke: #ffe07a; opacity: 1; }

/* Pomello */
.rf-theme-switch__knob {
  position: absolute; top: var(--sw-pad); left: var(--sw-pad); z-index: 1;
  width: calc(var(--sw-h) - var(--sw-pad) * 2 - 2px);
  height: calc(var(--sw-h) - var(--sw-pad) * 2 - 2px);
  border-radius: 50%;
  background: linear-gradient(160deg, #ffffff, #e9eeff);
  box-shadow: 0 2px 6px rgba(20, 26, 51, .3), 0 0 0 1px rgba(20, 26, 51, .06);
  transition: transform .35s cubic-bezier(.34, 1.4, .5, 1), background .35s ease, box-shadow .35s ease;
}
.rf-theme-switch[aria-checked="true"] .rf-theme-switch__knob {
  transform: translateX(calc(var(--sw-w) - var(--sw-h)));
  background: linear-gradient(160deg, #2a3866, #131a35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .6), 0 0 0 1px rgba(150, 175, 255, .35),
              0 0 12px rgba(120, 150, 255, .35);
}

.rf-theme-switch:hover .rf-theme-switch__knob { box-shadow: 0 4px 12px rgba(20, 26, 51, .35); }
body.dark .rf-theme-switch:hover .rf-theme-switch__knob { box-shadow: 0 4px 14px rgba(0, 0, 0, .7), 0 0 0 1px rgba(150, 175, 255, .5); }
.rf-theme-switch:focus-visible { outline: 2px solid var(--rf-primary); outline-offset: 3px; }
body.dark .rf-theme-switch:focus-visible { outline-color: #7d9dff; }

@media (max-width: 480px) { .rf-theme-switch { --sw-w: 54px; --sw-h: 29px; } }

/* ---------------- Tabella marchi (marchi.html) in dark mode -------------- */
/* Il blocco tabella di Mobirise ha un fondo azzurro fisso per-cid: in dark il
   testo diventa chiaro e resta illeggibile. Qui la tabella segue i token. */
body.dark .section-table .table,
body.dark .section-table .table thead,
body.dark .section-table .table tbody,
body.dark .section-table .table tr {
  background: var(--rf-surface) !important;
}
body.dark .section-table .table .head-item {
  background: var(--rf-surface-2) !important;
  color: var(--rf-ink) !important;
  border-color: var(--rf-line) !important;
}
body.dark .section-table .table .body-item {
  background: transparent !important;
  color: var(--rf-muted) !important;
  border-color: var(--rf-line) !important;
}
body.dark .section-table .table tbody tr:nth-child(even) { background: var(--rf-page-bg-alt) !important; }
body.dark .section-table .dataTables_filter input,
body.dark .section-table .dataTables_filter label {
  background: var(--rf-surface-2) !important;
  color: var(--rf-ink) !important;
  border-color: var(--rf-line) !important;
}

/* Nota: le vecchie toppe per stato.html (.search-container, .card-custom) sono
   state tolte il 2026-07-31, quando la pagina e' stata rifatta senza Mobirise:
   ora ricerca e schede usano .rf-stato__* in home.css, gia' su token. */

/* ------------------------- Rimozioni estetiche --------------------------- */
/* Nasconde i link pubblicitari di Mobirise ("free site builder" ecc.) */
section.engine { display: none !important; }

/* --------------------------- Rispetto motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  *:not(.stato-pronto) {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}