/* =====================================================================
   CCAMon — stile del tema
   Organizzato per: base, header, hero, sezioni, servizi, notizie, footer,
   utilità e animazioni.
   ===================================================================== */

:root {
  --shadow-sm: 0 2px 8px rgba(14, 37, 71, 0.06);
  --shadow-md: 0 10px 30px rgba(14, 37, 71, 0.10);
  --shadow-lg: 0 24px 60px rgba(14, 37, 71, 0.18);
  --radius: 18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------------ base */
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Elimina i margini che WordPress inserisce tra i blocchi di primo livello
   (header / main / footer): con l'header fixed creavano una striscia bianca in alto. */
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }
.wp-site-blocks { padding-top: 0; }

.ccamon-eyebrow {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

/* gradiente sul testo (titoli "wow") */
.has-gradient-text {
  background: var(--wp--preset--gradient--brand-soft);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------------------------------------------------------------- header */
/* Stato di default (pagine interne): header navy "tinta unita". */
.ccamon-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--wp--preset--color--navy-deep);
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.ccamon-header.is-scrolled { box-shadow: 0 8px 28px rgba(14, 37, 71, 0.28); }

.ccamon-header-inner {
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  transition: padding 0.35s var(--ease);
}
.ccamon-header.is-scrolled .ccamon-header-inner { padding-top: 0.65rem; padding-bottom: 0.65rem; }

/* Home: l'header fluttua trasparente sopra l'hero (nessuno stacco bianco). */
body.home .ccamon-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background: transparent;
}
/* Scendendo "migliora": fondo navy translucido + blur + ombra. */
body.home .ccamon-header.is-scrolled {
  background: rgba(14, 37, 71, 0.9);
  backdrop-filter: saturate(150%) blur(12px);
  box-shadow: 0 8px 28px rgba(14, 37, 71, 0.28);
}

/* Logo */
.ccamon-logo { display: inline-flex; align-items: center; line-height: 0; }
.ccamon-logo img { height: 34px; width: auto; display: block; transition: height 0.35s var(--ease); }
.ccamon-header.is-scrolled .ccamon-logo img { height: 30px; }

/* Navigazione */
.ccamon-nav-group { gap: 1.8rem; }
.ccamon-header .wp-block-navigation {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 500;
  font-size: 1rem;
}
.ccamon-header .wp-block-navigation a,
.ccamon-header .wp-block-navigation .wp-block-navigation-item__content {
  color: #fff;
  transition: opacity 0.2s var(--ease);
}
/* underline animato arancione */
.ccamon-header .wp-block-navigation-item__content { position: relative; }
.ccamon-header .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -4px;
  height: 2px;
  background: var(--wp--preset--color--orange);
  transition: right 0.3s var(--ease);
}
.ccamon-header .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.ccamon-header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after { right: 0; }

/* CTA nell'header */
.ccamon-nav-cta .wp-block-button__link {
  padding: 0.55rem 1.2rem;
  box-shadow: 0 6px 18px rgba(225, 138, 46, 0.35);
}

/* Hamburger e overlay mobile */
.ccamon-header .wp-block-navigation__responsive-container-open,
.ccamon-header .wp-block-navigation__responsive-container-close { color: #fff; }
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--navy-deep);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: #fff; }

/* ------------------------------------------------------------------ hero */
.ccamon-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  /* Sfondo: overlay sfumato (in alto, per il testo) + illustrazione V2X (in basso a destra)
     + tinta unita di base. L'SVG è vettoriale: pochi KB, nessun impatto sulle performance. */
  background-color: #0E2547;
  background-image:
    radial-gradient(120% 90% at 82% 6%, rgba(46, 109, 180, 0.36) 0%, transparent 55%),
    linear-gradient(115deg, #0E2547 0%, #143158 55%, #1B3D6E 100%);
  /* landing a tutta altezza, contenuto centrato */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 900px) {
  .ccamon-hero { min-height: auto; }
}
/* leggera dissolvenza in basso per staccare con dolcezza dalla sezione chiara */
.ccamon-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;
  z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(14, 37, 71, 0.25));
  pointer-events: none;
}
.ccamon-hero * { color: inherit; }
.ccamon-hero :where(h1, h2, h3) { color: #fff; }

/* canvas della rete V2X animata — ora incorniciato nel pannello a destra */
.ccamon-hero-visual #ccamon-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.92;
}
/* alone luminoso che pulsa */
.ccamon-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 60vw;
  height: 60vw;
  max-width: 800px;
  max-height: 800px;
  top: -20%;
  right: -10%;
  background: radial-gradient(circle, rgba(61, 155, 224, 0.45) 0%, transparent 65%);
  filter: blur(20px);
  animation: ccamon-float 14s var(--ease) infinite alternate;
}
@keyframes ccamon-float {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-6%, 8%) scale(1.15); }
}

/* layout split dell'hero: copy a sinistra, visual a destra */
.ccamon-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) {
  .ccamon-hero-split { grid-template-columns: 1fr; gap: 2.4rem; }
}
.ccamon-hero-copy { max-width: 640px; }

/* pannello "vetro" con la rete animata + dato chiave fluttuante */
.ccamon-hero-visual {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: 22px;
  overflow: hidden;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1.5px),
    linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02));
  background-size: 26px 26px, auto;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
@media (max-width: 900px) {
  .ccamon-hero-visual { aspect-ratio: 16 / 10; }
}
@media (max-width: 480px) {
  .ccamon-hero-visual { aspect-ratio: 4 / 3; }
}
.ccamon-hero-visual-tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.85rem; border-radius: 999px;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 0.76rem; font-weight: 600; color: rgba(255, 255, 255, 0.92);
  background: rgba(14, 37, 71, 0.5); border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ccamon-hero-visual-tag .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--wp--preset--color--green);
  box-shadow: 0 0 0 0 rgba(46, 158, 91, 0.7);
  animation: ccamon-pulse 2.4s infinite;
}
.ccamon-hero-stat {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2;
  max-width: 80%; min-height: 116px;
  border-radius: 16px;
  background: rgba(14, 37, 71, 0.62); border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* i singoli dati ruotano in dissolvenza, sovrapposti (niente salti di layout) */
.ccamon-hero-stat-item {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 0.2rem;
  padding: 0.85rem 1.1rem;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  pointer-events: none;
}
.ccamon-hero-stat-item.is-active { opacity: 1; transform: none; }
.ccamon-hero-stat-n {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1;
  color: var(--wp--preset--color--gold);
}
.ccamon-hero-stat-l { font-size: 0.86rem; color: rgba(255, 255, 255, 0.86); line-height: 1.35; }

/* Card servizi nell'hero (impatto immediato, vetro su fondo scuro) */
.ccamon-hero-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  width: 100%;
}
.ccamon-hero-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  color: #fff;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.ccamon-hero-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent, var(--wp--preset--color--azure));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.ccamon-hero-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.42); }
.ccamon-hero-card:hover::before { transform: scaleX(1); }
.ccamon-hero-card .hc-icon {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.ccamon-hero-card .hc-icon svg { width: 22px; height: 22px; }
.ccamon-hero-card h3 { font-size: 1.08rem; margin: 0.15rem 0 0; color: #fff; }
.ccamon-hero-card .hc-desc { font-size: 0.82rem; color: rgba(255, 255, 255, 0.78); line-height: 1.4; }
.ccamon-hero-card .hc-arrow {
  margin-top: 0.6rem;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600; font-size: 0.82rem;
  color: var(--wp--preset--color--gold);
  transition: transform 0.3s var(--ease);
}
.ccamon-hero-card:hover .hc-arrow { transform: translateX(4px); }
@media (max-width: 900px) { .ccamon-hero-cards { grid-template-columns: 1fr 1fr; } }

.ccamon-hero .ccamon-eyebrow { color: var(--wp--preset--color--gold); }
.ccamon-hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 800; }
.ccamon-hero .ccamon-hero-lead { font-size: clamp(1.1rem, 1.6vw, 1.32rem); color: rgba(255,255,255,0.88); max-width: 48ch; }

/* badge tecnologici sotto la hero */
.ccamon-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ccamon-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  font-size: 0.85rem;
  font-family: var(--wp--preset--font-family--heading);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(4px);
}
.ccamon-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wp--preset--color--green); box-shadow: 0 0 0 0 rgba(46,158,91,0.7); animation: ccamon-pulse 2.4s infinite; }
@keyframes ccamon-pulse {
  0% { box-shadow: 0 0 0 0 rgba(46,158,91,0.6); }
  70% { box-shadow: 0 0 0 8px rgba(46,158,91,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,158,91,0); }
}

/* ---------------------------------------------------------- stat / numeri */
.ccamon-stat { text-align: center; }
.ccamon-stat .ccamon-stat-num {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 800;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.15;
  padding-block: 0.06em;          /* evita il taglio di ascendenti/discendenti col clip-text */
  white-space: nowrap;            /* "1.300.000" resta su una riga */
  background: var(--wp--preset--gradient--brand-soft);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ccamon-stat .ccamon-stat-label { color: var(--wp--preset--color--muted); font-size: 0.98rem; }

/* ------------------------------------------------------------- intestazioni sezione */
.ccamon-section-head { text-align: center; max-width: 720px; margin-inline: auto; }
.ccamon-section-head .ccamon-eyebrow { color: var(--wp--preset--color--orange); }

/* ----------------------------------------------------------- card servizi */
.ccamon-cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.ccamon-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.9rem 1.7rem 2rem;
  background: #fff;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
/* card-link: nessuna sottolineatura, colore di testo normale */
a.ccamon-card { text-decoration: none; color: inherit; }
a.ccamon-card h3 { color: var(--wp--preset--color--navy); }

/* "Scopri di più" in fondo alla card */
.ccamon-card-more {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--accent, var(--wp--preset--color--blue));
  margin-top: 0.4rem;
  transition: transform 0.3s var(--ease);
}
a.ccamon-card:hover .ccamon-card-more { transform: translateX(4px); }
/* barra colorata in alto che si rivela all'hover */
.ccamon-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--accent, var(--wp--preset--color--blue));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.ccamon-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.ccamon-card:hover::before { transform: scaleX(1); }

.ccamon-card .ccamon-card-icon {
  width: 54px; height: 54px; border-radius: 14px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent, #2E6DB4) 12%, white);
  color: var(--accent, #2E6DB4);
  margin-bottom: 0.25rem;
  transition: transform 0.45s var(--ease);
}
.ccamon-card:hover .ccamon-card-icon { transform: scale(1.08) rotate(-4deg); }
.ccamon-card .ccamon-card-icon svg { width: 28px; height: 28px; }

.ccamon-card h3 { font-size: 1.3rem; margin: 0; }
.ccamon-card .ccamon-card-kicker {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent, var(--wp--preset--color--blue));
}
.ccamon-card p { color: var(--wp--preset--color--muted); font-size: 0.98rem; margin: 0; }
.ccamon-card .ccamon-card-for {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--wp--preset--color--line);
  font-size: 0.85rem;
  color: var(--wp--preset--color--ink);
}
.ccamon-card .ccamon-card-for strong { color: var(--accent, var(--wp--preset--color--navy)); }
.ccamon-card .ccamon-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ccamon-card .ccamon-tag {
  font-size: 0.72rem; font-weight: 600;
  padding: 0.22rem 0.6rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #2E6DB4) 10%, white);
  color: var(--accent, #2E6DB4);
}

/* accenti per servizio */
.is-salvm      { --accent: #2E6DB4; }
.is-roadworks  { --accent: #E18A2E; }
.is-traffic    { --accent: #2E9E5B; }
.is-fleets     { --accent: #1C8C8C; }
.is-visio      { --accent: #3D9BE0; }
.is-obu        { --accent: #1B3D6E; }

/* etichetta del "livello" (servizio / applicativo) */
.ccamon-level-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600; font-size: 0.8rem; letter-spacing: 0.04em;
  padding: 0.4rem 1rem; border-radius: 999px;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--navy);
}

/* --------------------------------------------------- pagine di dettaglio */
.ccamon-detail-hero { position: relative; overflow: hidden; color: #fff; }
.ccamon-detail-hero :where(h1, h2, h3) { color: #fff; }
.ccamon-detail-hero .ccamon-eyebrow { color: var(--wp--preset--color--gold); }
.ccamon-detail-hero p { color: rgba(255, 255, 255, 0.9); }

/* checklist con spunta */
.ccamon-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.ccamon-checklist li {
  position: relative;
  padding-left: 2.1rem;
  line-height: 1.55;
}
.ccamon-checklist li::before {
  content: "";
  position: absolute; left: 0; top: 0.15rem;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: color-mix(in srgb, var(--accent, #2E6DB4) 15%, white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E6DB4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 0.85rem;
}

/* step numerati "come funziona" */
.ccamon-steps { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: step; }
.ccamon-step {
  position: relative;
  padding: 1.7rem 1.5rem;
  background: #fff;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.ccamon-step::before {
  counter-increment: step;
  content: counter(step);
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700; font-size: 1.1rem;
  color: #fff; background: var(--accent, var(--wp--preset--color--blue));
  margin-bottom: 0.9rem;
}
.ccamon-step h3 { font-size: 1.15rem; margin: 0 0 0.4rem; }
.ccamon-step p { color: var(--wp--preset--color--muted); font-size: 0.95rem; margin: 0; }

/* ----------------------------------------------------------- card notizie */
.ccamon-news { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ccamon-news .wp-block-post {
  background: #fff; border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  display: flex; flex-direction: column;
}
.ccamon-news .wp-block-post:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.ccamon-news .wp-block-post-featured-image img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
/* cover brandizzata per i post senza immagine in evidenza (iniettata via JS) */
.ccamon-news-cover {
  --cover: var(--wp--preset--color--blue);
  display: block; aspect-ratio: 16 / 9; position: relative; overflow: hidden;
  background:
    radial-gradient(120% 120% at 85% 15%, color-mix(in srgb, var(--cover) 65%, #0E2547) 0%, #0E2547 70%);
}
.ccamon-news-cover::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(255,255,255,0.55) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 22%, rgba(255,255,255,0.45) 0 2.5px, transparent 3px),
    radial-gradient(circle at 62% 68%, rgba(255,255,255,0.4) 0 2px, transparent 3px),
    radial-gradient(circle at 35% 75%, rgba(255,255,255,0.35) 0 1.5px, transparent 2.5px),
    linear-gradient(120deg, transparent 0 48%, color-mix(in srgb, var(--cover) 55%, transparent) 48% 50%, transparent 50%);
  opacity: 0.9;
}
.ccamon-news-cover svg {
  position: absolute; right: 1rem; bottom: 0.85rem; width: 40px; height: 40px;
  color: rgba(255,255,255,0.92); z-index: 1;
}
.ccamon-news .wp-block-post:hover .ccamon-news-cover svg { transform: translateX(3px); transition: transform 0.4s var(--ease); }
.ccamon-news .wp-block-post-title { font-size: 1.2rem; }
.ccamon-news .wp-block-post-title a { color: var(--wp--preset--color--navy); text-decoration: none; }
.ccamon-news .wp-block-post-date { color: var(--wp--preset--color--muted); font-size: 0.82rem; }

/* ---------------------------------------------------------------- footer */
.ccamon-footer { background: var(--wp--preset--color--navy-deep); color: rgba(255,255,255,0.78); }
.ccamon-footer :where(h1,h2,h3,h4) { color: #fff; }
.ccamon-footer a { color: rgba(255,255,255,0.78); text-decoration: none; }
.ccamon-footer a:hover { color: var(--wp--preset--color--gold); }
.ccamon-footer .wp-block-site-logo img { height: 34px; filter: brightness(0) invert(1); opacity: 0.95; }

/* ----------------------------------------------------------- bottoni extra */
.wp-block-button.is-style-ghost .wp-block-button__link {
  background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.5);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
.wp-block-button__link { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease); }
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(225,138,46,0.35); }

/* -------------------------------------------------------- reveal on scroll */
.ccamon-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.ccamon-reveal.is-visible { opacity: 1; transform: none; }
.ccamon-reveal[data-delay="1"] { transition-delay: 0.08s; }
.ccamon-reveal[data-delay="2"] { transition-delay: 0.16s; }
.ccamon-reveal[data-delay="3"] { transition-delay: 0.24s; }
.ccamon-reveal[data-delay="4"] { transition-delay: 0.32s; }
.ccamon-reveal[data-delay="5"] { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  .ccamon-reveal { opacity: 1; transform: none; transition: none; }
  .ccamon-hero::before, .ccamon-chip::before { animation: none; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------ contatti / form */
.ccamon-contact { --accent: var(--wp--preset--color--blue); }

/* layout pagina contatti: form + aside informazioni */
.ccamon-contact-layout { display: grid; gap: 2.5rem; grid-template-columns: 1.6fr 1fr; align-items: start; }
@media (max-width: 860px) { .ccamon-contact-layout { grid-template-columns: 1fr; } }

.ccamon-contact-aside {
  background: var(--wp--preset--gradient--brand);
  color: #fff;
  border-radius: var(--radius);
  padding: 2rem 1.9rem;
  box-shadow: var(--shadow-md);
  position: sticky; top: 96px;
}
.ccamon-contact-aside :where(h2, h3) { color: #fff; margin-top: 0; }
.ccamon-contact-aside a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ccamon-contact-aside .ccamon-eyebrow { color: var(--wp--preset--color--gold); }
.ccamon-contact-aside ul { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.ccamon-contact-aside li { position: relative; padding-left: 1.7rem; line-height: 1.5; color: rgba(255,255,255,0.92); }
.ccamon-contact-aside li::before {
  content: ""; position: absolute; left: 0; top: 0.3rem; width: 1.1rem; height: 1.1rem;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8B84B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E");
}

/* il form */
.ccamon-form {
  background: #fff;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--radius);
  padding: 2rem 1.9rem;
  box-shadow: var(--shadow-sm);
  display: grid; gap: 1.25rem;
}
.ccamon-field-row { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .ccamon-field-row { grid-template-columns: 1fr; } }

.ccamon-field { display: grid; gap: 0.4rem; }
.ccamon-field > label,
.ccamon-field-label { font-weight: 600; color: var(--wp--preset--color--ink); font-size: 0.95rem; }
.ccamon-field .req { color: var(--wp--preset--color--orange); }
.ccamon-field .opt { color: var(--wp--preset--color--muted); font-weight: 400; font-size: 0.85rem; }

.ccamon-form input[type="text"],
.ccamon-form input[type="email"],
.ccamon-form select,
.ccamon-form textarea {
  width: 100%; box-sizing: border-box;
  font: inherit; color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 12px;
  padding: 0.72rem 0.9rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.ccamon-form textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.ccamon-form select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362718F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 1.1rem; padding-right: 2.4rem;
}
.ccamon-form input:focus,
.ccamon-form select:focus,
.ccamon-form textarea:focus {
  outline: none; background: #fff;
  border-color: var(--wp--preset--color--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--blue) 22%, transparent);
}
.ccamon-field.has-error input,
.ccamon-field.has-error select,
.ccamon-field.has-error textarea { border-color: #d8442f; background: #fdf3f1; }
.ccamon-field-error { margin: 0; color: #c2381f; font-size: 0.85rem; }

/* chips servizi del form (checkbox stilizzate) — classe dedicata per non
   collidere con i badge .ccamon-chip dell'hero */
.ccamon-role-hint { margin: 0 0 0.3rem; color: var(--wp--preset--color--muted); font-size: 0.9rem; min-height: 1.2em; }
.ccamon-svc-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.ccamon-svc-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.95rem; border-radius: 999px; cursor: pointer;
  font-size: 0.9rem; font-weight: 600; line-height: 1;
  color: var(--wp--preset--color--navy);
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.15s var(--ease);
  user-select: none;
}
.ccamon-svc-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ccamon-svc-chip::before {
  content: ""; width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--wp--preset--color--navy) 30%, white);
  flex: none; transition: inherit;
}
.ccamon-svc-chip:hover { border-color: var(--accent, var(--wp--preset--color--blue)); transform: translateY(-1px); }
.ccamon-svc-chip.is-checked {
  color: #fff;
  background: var(--accent, var(--wp--preset--color--blue));
  border-color: var(--accent, var(--wp--preset--color--blue));
}
.ccamon-svc-chip.is-checked::before {
  border-color: #fff; background: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E6DB4' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 0.7rem;
}
.ccamon-svc-chip.is-suggested:not(.is-checked) { border-color: var(--accent, var(--wp--preset--color--blue)); border-style: dashed; }
.ccamon-svc-chip input:focus-visible + span { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 3px; border-radius: 4px; }
/* accenti per chip in base al servizio (riusa le variabili dei servizi) */
.ccamon-svc-chip.is-salvm { --accent: #2E6DB4; }
.ccamon-svc-chip.is-roadworks { --accent: #E18A2E; }
.ccamon-svc-chip.is-traffic { --accent: #2E9E5B; }
.ccamon-svc-chip.is-fleets { --accent: #1C8C8C; }
.ccamon-svc-chip.is-visio { --accent: #3D9BE0; }
.ccamon-svc-chip.is-obu { --accent: #1B3D6E; }
.ccamon-svc-chip.is-consulenza { --accent: #62718F; }

/* consenso privacy */
.ccamon-consent label { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; font-size: 0.9rem; color: var(--wp--preset--color--muted); cursor: pointer; }
.ccamon-consent input { margin-top: 0.2rem; flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--wp--preset--color--blue); }

/* azioni */
.ccamon-form-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.ccamon-submit {
  font: inherit; font-weight: 700; cursor: pointer; border: 0;
  color: #fff; padding: 0.85rem 1.8rem; border-radius: 999px;
  background: var(--wp--preset--gradient--accent, var(--wp--preset--color--orange));
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.ccamon-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(225,138,46,0.4); }
.ccamon-submit:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 3px; }
.ccamon-form-reassure { color: var(--wp--preset--color--muted); font-size: 0.85rem; }

/* notifiche esito */
.ccamon-form-notice { border-radius: 12px; padding: 0.9rem 1.1rem; margin-bottom: 1.2rem; font-size: 0.95rem; }
.ccamon-form-notice.is-success { background: color-mix(in srgb, var(--wp--preset--color--green) 12%, white); border: 1px solid color-mix(in srgb, var(--wp--preset--color--green) 35%, white); color: #1d6e40; }
.ccamon-form-notice.is-error { background: #fdf3f1; border: 1px solid #f0c4ba; color: #b8341c; }

/* honeypot: fuori dallo schermo, invisibile agli utenti reali */
.ccamon-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------- pagina contatti (sedi + mappa) */
.ccamon-contacts { display: grid; gap: 1.5rem; }

/* le due sedi, affiancate */
.ccamon-sedi { display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .ccamon-sedi { grid-template-columns: 1fr; } }

.ccamon-sede {
  --accent: var(--wp--preset--color--blue);
  position: relative;
  background: #fff;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.6rem 1.7rem;
  border-top: 4px solid var(--accent);
}
.ccamon-sede.is-operativa { --accent: var(--wp--preset--color--orange); }
.ccamon-sede.is-legale { --accent: var(--wp--preset--color--blue); }

.ccamon-sede-pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 12px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, white);
  margin-bottom: 0.9rem;
}
.ccamon-sede-pin svg { width: 1.4rem; height: 1.4rem; }
.ccamon-sede-label {
  display: block;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}
.ccamon-sede-addr { margin: 0.35rem 0 0; line-height: 1.55; color: var(--wp--preset--color--ink); font-size: 1.05rem; }
.ccamon-map-link {
  display: inline-block; margin-top: 0.8rem; font-weight: 600; font-size: 0.9rem;
  color: var(--accent); text-decoration: none;
}
.ccamon-map-link:hover { text-decoration: underline; }

/* la mappa */
.ccamon-contacts-map {
  min-height: 400px; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-md); border: 1px solid var(--wp--preset--color--line);
}
.ccamon-contacts-map iframe { display: block; width: 100%; height: 100%; min-height: 400px; }

/* strip email + demo */
.ccamon-contacts-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.7rem;
}
.ccamon-contacts-cta p { margin: 0; color: var(--wp--preset--color--ink); }
.ccamon-demo-btn {
  font-weight: 700; text-decoration: none; color: #fff; white-space: nowrap;
  padding: 0.8rem 1.7rem; border-radius: 999px;
  background: var(--wp--preset--gradient--accent, var(--wp--preset--color--orange));
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.ccamon-demo-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(225,138,46,0.4); }

/* riga dati legali nel footer */
.ccamon-legal { opacity: 0.62; margin-bottom: 0.35rem; }

/* ----------------------------------------------------------- accessibilità */
/* skip-link: nascosto finché non riceve il focus da tastiera */
.ccamon-skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 1000; padding: 0.7rem 1.2rem; border-radius: 0 0 12px 12px;
  background: var(--wp--preset--color--navy); color: #fff; text-decoration: none;
  font-weight: 600; box-shadow: var(--shadow-md);
  transition: transform 0.2s var(--ease);
}
.ccamon-skip:focus { transform: translate(-50%, 0); outline: 2px solid var(--wp--preset--color--gold); outline-offset: 2px; }
/* stato di focus visibile e coerente per chi naviga da tastiera */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--wp--preset--color--gold);
  outline-offset: 2px;
  border-radius: 4px;
}