/* Home pubblica Hobby Tecnica (contenuti da CSM) — ispirata a hobbytecnica.com */
:root {
    --sito-navbar-h: 72px;
}

@media (max-width: 991.98px) {
    :root {
        --sito-navbar-h: 66px;
    }
}

body.sito-layout {
    padding-top: 0;
}

.sito-navbar {
    font-family: Montserrat, system-ui, sans-serif;
    background: transparent !important;
    border-bottom: 1px solid transparent;
    box-shadow: none !important;
    transition:
        background-color 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.sito-navbar--fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

.sito-navbar--scrolled {
    background: #fff !important;
    border-bottom: 1px solid rgba(26, 55, 85, 0.12) !important;
    box-shadow: 0 2px 14px rgba(26, 55, 85, 0.08) !important;
}

/* Stato iniziale: voci bianche e grassetto sopra immagine hero (navbar-dark solo per icona hamburger) */
.sito-navbar:not(.sito-navbar--scrolled) .sito-navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.97) !important;
    font-weight: 700 !important;
}

.sito-navbar:not(.sito-navbar--scrolled) .navbar-brand,
.sito-navbar:not(.sito-navbar--scrolled) .navbar-brand span {
    color: #fff !important;
}

.sito-navbar:not(.sito-navbar--scrolled) .sito-nav-area-pro {
    border-color: rgba(255, 255, 255, 0.38) !important;
}

/* Dopo scroll: sfondo bianco, link azzurro/blu brand */
.sito-navbar--scrolled .sito-navbar-nav .nav-link {
    color: #1a3755 !important;
    font-weight: 700 !important;
}

.sito-navbar--scrolled .sito-navbar-nav .nav-link:hover,
.sito-navbar--scrolled .sito-navbar-nav .nav-link:focus {
    color: #2563ad !important;
}

.sito-navbar--scrolled .navbar-brand,
.sito-navbar--scrolled .navbar-brand span {
    color: #1a3755 !important;
}

.sito-navbar--scrolled .sito-nav-area-pro {
    border-color: rgba(26, 55, 85, 0.22) !important;
}

@media (max-width: 991.98px) {
    .sito-navbar:not(.sito-navbar--scrolled) .navbar-collapse {
        margin-top: 0.5rem;
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        background: rgba(15, 37, 56, 0.94);
    }
}

.sito-navbar .navbar-brand img {
    max-height: 52px;
    width: auto;
}

/* Due loghi in navbar: hero (prima visualizzazione) e versione dopo scroll */
.sito-navbar:not(.sito-navbar--scrolled) .sito-navbar-brand--dual .sito-navbar-logo--scrolled {
    display: none;
}

.sito-navbar.sito-navbar--scrolled .sito-navbar-brand--dual .sito-navbar-logo--hero {
    display: none;
}

.sito-navbar.sito-navbar--scrolled .sito-navbar-brand--dual .sito-navbar-logo--scrolled {
    display: block;
}

/* Solo logo 2: in alto testo fino allo scroll, poi immagine */
.sito-navbar:not(.sito-navbar--scrolled) .sito-navbar-brand--solo-scrolled .sito-navbar-logo--scrolled {
    display: none;
}

.sito-navbar:not(.sito-navbar--scrolled) .sito-navbar-brand--solo-scrolled .sito-navbar-title-fallback {
    display: inline;
}

.sito-navbar.sito-navbar--scrolled .sito-navbar-brand--solo-scrolled .sito-navbar-title-fallback {
    display: none;
}

.sito-navbar.sito-navbar--scrolled .sito-navbar-brand--solo-scrolled .sito-navbar-logo--scrolled {
    display: block;
}

.sito-navbar-brand--dual .sito-navbar-logo--hero,
.sito-navbar-brand--dual .sito-navbar-logo--scrolled,
.sito-navbar-brand--solo-hero .sito-navbar-logo--hero,
.sito-navbar-brand--solo-scrolled .sito-navbar-logo--scrolled {
    max-height: 52px;
    width: auto;
}

.hero-csm {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: var(--sito-navbar-h);
    display: flex;
    align-items: center;
    background-color: #1a3755;
    background-size: cover;
    background-position: center center;
}

.hero-csm__bg {
    position: absolute;
    left: -6%;
    right: -6%;
    top: -20%;
    bottom: -20%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: 0;
    will-change: transform;
}

.hero-csm.hero-csm--noimg {
    background-image: linear-gradient(135deg, #1e4d6f 0%, #0f2538 55%, #1a3755 100%);
}

.hero-csm-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(15, 37, 56, 0.55), rgba(15, 37, 56, 0.75));
    pointer-events: none;
    z-index: 1;
}

.hero-csm-inner {
    position: relative;
    z-index: 2;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.csm-parallax-band--strip {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 260px;
    height: clamp(220px, 32vw, 380px);
}

/* Fascia immagine 2: titolo in sovrimpressione come hero */
.csm-parallax-band--caption {
    display: flex;
    align-items: center;
    justify-content: center;
}

.csm-parallax-band--caption-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(15, 37, 56, 0.5), rgba(15, 37, 56, 0.72));
}

.csm-parallax-band--caption-inner {
    position: relative;
    z-index: 2;
    padding: 1.75rem 1rem;
    pointer-events: none;
}

/* Fascia immagine 3: contenuti servizi aggiuntivi in sovrimpressione (altezza adattiva, più bassa se le bande sono compatte) */
.csm-parallax-band--strip.csm-parallax-band--sfondo3-overlay {
    height: auto;
    min-height: clamp(260px, 40vw, 520px);
    padding-top: 1.35rem;
    padding-bottom: 1.35rem;
    display: flex;
    align-items: center;
}

.csm-parallax-band--sfondo3-overlay .csm-parallax-band--sfondo3-overlay-shade {
    background: linear-gradient(to bottom, rgba(15, 37, 56, 0.56), rgba(15, 37, 56, 0.8));
}

.csm-parallax-band--sfondo3-inner {
    z-index: 2;
    width: 100%;
}

.csm-parallax-band--strip .csm-parallax-bg {
    position: absolute;
    left: -5%;
    right: -5%;
    top: -22%;
    bottom: -22%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: 0;
    will-change: transform;
}

.csm-parallax-bg {
    backface-visibility: hidden;
}

/* Titolo hero: ben leggibile ma senza saturare il viewport (+20% per migliore visibilità sull’immagine) */
.hero-csm-inner .hero-csm-headline,
.hero-csm-inner .hero-csm-headline :where(h1, h2, h3, h4, h5, h6, p, span, div),
.csm-parallax-band--caption .hero-csm-headline,
.csm-parallax-band--caption .hero-csm-headline :where(h1, h2, h3, h4, h5, h6, p, span, div) {
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    margin-top: 0 !important;
    margin-bottom: 0.15em !important;
    line-height: 1.12 !important;
}

.hero-csm-inner .hero-csm-headline,
.hero-csm-inner .hero-csm-headline :where(h1, h2, h3, h4, h5, h6, p, span, div) {
    font-size: clamp(1.98rem, 3.3vw + 1.2rem, 3.6rem) !important;
}

/* Fascia sfondo 2: «Centro di assistenza autorizzato di» +40% rispetto al titolo hero */
.csm-parallax-band--caption .hero-csm-headline,
.csm-parallax-band--caption .hero-csm-headline :where(h1, h2, h3, h4, h5, h6, p, span, div) {
    font-size: clamp(2.772rem, 4.62vw + 1.68rem, 5.04rem) !important;
}

.csm-parallax-band--caption .hero-csm-headline {
    margin-bottom: 0 !important;
}

/* Sottotitolo: proporzionato al titolo (tipo “lead”), +20% */
.hero-csm-inner .hero-csm-tagline,
.hero-csm-inner .hero-csm-tagline :where(p, span, div, li, h1, h2, h3, h4, h5, h6),
.hero-csm-inner .hero-csm-tagline {
    color: rgba(255, 255, 255, 0.94) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    font-size: clamp(1.2rem, 1.32vw + 0.984rem, 1.575rem) !important;
}

.sito-section-title {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    color: #1a3755;
}

.sito-card-servizio {
    border-radius: 0.5rem;
    border: none;
    box-shadow: 0 4px 20px rgba(26, 55, 85, 0.08);
    height: 100%;
}

.sito-card-servizio .icon-wrap img {
    max-height: 112px;
    max-width: 112px;
    object-fit: contain;
}

/* Prima riga del campo testo = titolo (grassetto, ~1,6× il corpo: −20% rispetto al precedente 2em); il resto invariato */
.sito-card-servizio .pub-html.sito-servizio-offerto-html .sito-servizio-offerto-titolo {
    font-family: Montserrat, sans-serif;
    font-weight: 700 !important;
    font-size: 1.6em;
    line-height: 1.25;
    margin-bottom: 0.65rem !important;
    color: #1a3755;
}

.sito-card-servizio .pub-html.sito-servizio-offerto-html .sito-servizio-offerto-titolo :where(p):last-child {
    margin-bottom: 0 !important;
}

.sito-card-servizio .pub-html.sito-servizio-offerto-html .sito-servizio-offerto-corpo {
    font-size: 1rem;
    margin-bottom: 0 !important;
}

/* HTML nel campo (es. un solo paragrafo con più righe): prima linea a schermo come titolo */
/* Solo se il primo blocco è un <p> grezzo (textarea senza formatter): evita ::first-line sul wrapper .corpo */
.sito-card-servizio .pub-html.sito-servizio-offerto-html:not(:has(.sito-servizio-offerto-titolo)) > p:first-child::first-line {
    font-weight: 700 !important;
    font-size: 160%;
    line-height: 1.25 !important;
    font-family: Montserrat, sans-serif;
    color: #1a3755;
}

/* Produttori: bande verticali affiancate, tutti visibili (niente carousel) */
.sito-produttori-grid .sito-produttore-banda {
    padding: 1rem 0.65rem;
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 2px 14px rgba(26, 55, 85, 0.07);
    min-height: 100%;
}

.sito-produttori-grid .sito-produttore-banda img {
    max-height: 120px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* Sezione «Centro di assistenza autorizzato di»: 3 bande per fila (layout), immagini e testo più evidenti */
.sito-produttori-grid--assistenza .sito-produttore-banda {
    padding: 1.35rem 1.1rem;
}

.sito-produttori-grid--assistenza .sito-produttore-banda img {
    max-height: 200px;
}

.sito-produttori-grid--assistenza .sito-produttore-banda .pub-html {
    font-size: 1.125rem;
    line-height: 1.55;
}

.sito-produttori-grid--assistenza .sito-produttore-banda .pub-html :where(h1, h2, h3) {
    font-family: Montserrat, sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a3755;
    line-height: 1.3;
    margin-bottom: 0.45rem;
}

.sito-produttori-grid--assistenza .sito-produttore-banda .pub-html :where(h4, h5, h6) {
    font-family: Montserrat, sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: #1a3755;
    margin-bottom: 0.35rem;
}

.sito-produttori-grid--assistenza .sito-produttore-banda .pub-html p,
.sito-produttori-grid--assistenza .sito-produttore-banda .pub-html li {
    font-size: 1.0625rem;
    margin-bottom: 0.45rem;
}

.sito-produttori-grid--assistenza .sito-produttore-banda .pub-html p:last-child {
    margin-bottom: 0;
}

/* Servizi/prodotti aggiuntivi: standalone larghezza/altezza standard; su sfondo 3 quattro colonne, compatte in verticale */
.sito-aggiuntivi-grid.sito-aggiuntivi-grid--standalone .sito-produttore-banda {
    padding: 1.45rem 1.2rem;
    border-radius: 0.55rem;
    min-height: 100%;
    background: #fff;
    box-shadow: 0 4px 20px rgba(26, 55, 85, 0.1);
}

.sito-aggiuntivi-grid.sito-aggiuntivi-grid--on-sfondo .sito-produttore-banda {
    padding: 0.55rem 1.2rem 0.65rem;
    border-radius: 0.55rem;
    min-height: 100%;
    /* Azzurro/blu in armonia con hero e acqua piscina (#1e4d6f / teal): pieno in alto, sfuma in trasparenza in basso su ogni banda */
    background: linear-gradient(
        to bottom,
        rgba(25, 95, 150, 0.9) 0%,
        rgba(36, 118, 168, 0.72) 38%,
        rgba(52, 152, 200, 0.42) 68%,
        rgba(41, 144, 194, 0) 100%
    );
    box-shadow: 0 8px 28px rgba(12, 48, 78, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.sito-aggiuntivi-grid.sito-aggiuntivi-grid--on-sfondo .sito-aggiuntivi-testo {
    flex-grow: 1 !important;
    min-height: 0;
}

.sito-aggiuntivi-grid.sito-aggiuntivi-grid--on-sfondo .sito-produttore-banda .mb-3 {
    margin-bottom: 0.35rem !important;
}

/* Sfondo 3: icone senza pannello bianco — trasparenza sul gradiente azzurro della banda */
.sito-aggiuntivi-grid.sito-aggiuntivi-grid--on-sfondo .sito-aggiuntivo-icona-wrap--sfondo3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 7rem;
    height: 7rem;
    background: transparent;
    border-radius: 0.45rem;
    box-shadow: none;
}

/* Icone servizi aggiuntivi: stesso riquadro per tutte (proporzioni conservate con object-fit) */
.sito-aggiuntivi-grid .sito-produttore-banda img {
    width: 5.5rem;
    height: 5.5rem;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.sito-aggiuntivi-testo,
.sito-aggiuntivi-testo :where(p, span, div, li, h1, h2, h3, h4, h5, h6, a) {
    font-family: Montserrat, sans-serif;
    font-weight: 700 !important;
    font-size: 1.0625rem;
    line-height: 1.45;
    color: #1a3755;
}

.sito-aggiuntivi-testo :where(ul, ol) {
    padding-left: 1.15rem;
    margin-bottom: 0;
}

.sito-aggiuntivi-testo :where(p):last-child {
    margin-bottom: 0;
}

/* Testo su bande sfondo 3: bianco per contrasto sul blu/azzurro */
.sito-aggiuntivi-grid.sito-aggiuntivi-grid--on-sfondo .sito-aggiuntivi-testo,
.sito-aggiuntivi-grid.sito-aggiuntivi-grid--on-sfondo .sito-aggiuntivi-testo :where(p, span, div, li, h1, h2, h3, h4, h5, h6, a) {
    color: rgba(255, 255, 255, 0.97);
    text-shadow: 0 1px 2px rgba(15, 37, 56, 0.35);
}

.sito-aggiuntivi-grid.sito-aggiuntivi-grid--on-sfondo .sito-aggiuntivi-testo a {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.45);
    text-underline-offset: 0.12em;
}

/* Card video (home): fasce orizzontali alternate + layout legacy se riusato */
.sito-video-fascia--tone-a {
    background: linear-gradient(180deg, #dfeaf6 0%, #d3e2f2 100%);
}

.sito-video-fascia--tone-b {
    background: linear-gradient(180deg, #f5f6f8 0%, #eceef2 100%);
}

.sito-video-fascia--sep {
    border-top: 1px solid rgba(26, 55, 85, 0.14);
}

.sito-video-embed {
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(26, 55, 85, 0.12);
    background: #0f2538;
}

.sito-video-fascia-testo {
    padding: 0.25rem 0;
}

.sito-video-card {
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(26, 55, 85, 0.1);
    background: #fff;
}

.sito-video-card .ratio,
.sito-video-fascia .ratio {
    background: #0f2538;
}

/* Card video: stessa logica della sezione Servizi offerti (prima riga = titolo in evidenza) */
.sito-video-card .pub-html.sito-servizio-offerto-html,
.sito-video-fascia .pub-html.sito-servizio-offerto-html {
    font-size: 1rem;
    line-height: 1.5;
}

.sito-video-card .pub-html.sito-servizio-offerto-html .sito-servizio-offerto-titolo,
.sito-video-fascia .pub-html.sito-servizio-offerto-html .sito-servizio-offerto-titolo {
    font-family: Montserrat, sans-serif;
    font-weight: 700 !important;
    font-size: 2em;
    line-height: 1.25;
    margin-bottom: 0.65rem !important;
    color: #1a3755;
}

.sito-video-card .pub-html.sito-servizio-offerto-html .sito-servizio-offerto-titolo :where(p):last-child,
.sito-video-fascia .pub-html.sito-servizio-offerto-html .sito-servizio-offerto-titolo :where(p):last-child {
    margin-bottom: 0 !important;
}

.sito-video-card .pub-html.sito-servizio-offerto-html .sito-servizio-offerto-corpo,
.sito-video-fascia .pub-html.sito-servizio-offerto-html .sito-servizio-offerto-corpo {
    font-size: 1rem;
    margin-bottom: 0 !important;
}

.sito-video-card .pub-html.sito-servizio-offerto-html:not(:has(.sito-servizio-offerto-titolo)) > p:first-child::first-line,
.sito-video-fascia .pub-html.sito-servizio-offerto-html:not(:has(.sito-servizio-offerto-titolo)) > p:first-child::first-line {
    font-weight: 700 !important;
    font-size: 200%;
    line-height: 1.25 !important;
    font-family: Montserrat, sans-serif;
    color: #1a3755;
}

.sito-video-card .pub-html.sito-servizio-offerto-html .sito-servizio-offerto-corpo p:last-child,
.sito-video-fascia .pub-html.sito-servizio-offerto-html .sito-servizio-offerto-corpo p:last-child {
    margin-bottom: 0;
}

.sito-video-card .pub-html.sito-servizio-offerto-html ul,
.sito-video-card .pub-html.sito-servizio-offerto-html ol,
.sito-video-fascia .pub-html.sito-servizio-offerto-html ul,
.sito-video-fascia .pub-html.sito-servizio-offerto-html ol {
    margin-bottom: 0.45rem;
    padding-left: 1.1rem;
}

/* Corpo testo: riempie la card in altezza così le card affiancate restano allineate */
.sito-video-card-body {
    min-height: 5rem;
}

.sito-footer {
    /* Fascia chiara: il logo con testo blu resta leggibile (prima su #0f2538 tendeva a “perdersi”). */
    background: #e8eef4;
    color: #1a3755;
    font-size: 1.0625rem;
    border-top: 1px solid rgba(26, 55, 85, 0.12);
}

/* Bootstrap .small riduce a .875em: qui tutto il testo del footer scala insieme */
.sito-footer .small {
    font-size: 1em;
}

.sito-footer a {
    color: #0b63a3;
    font-weight: 500;
}

.sito-footer a:hover {
    color: #094a7a;
}

.sito-footer-social-link {
    color: #1a3755;
    line-height: 0;
    transition: color 0.15s ease;
}

.sito-footer-social-link:hover {
    color: #0b63a3;
}

.sito-footer-social-link svg {
    display: block;
    width: 24px;
    height: 24px;
}

.pub-html {
    word-wrap: break-word;
}

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

/* +20% rispetto alle dimensioni precedenti; .btn.btn-cta-hero batte le utility Bootstrap */
.btn.btn-cta-hero {
    border-radius: 2rem;
    padding: 0.66rem 1.62rem;
    font-weight: 600;
    font-size: 1.2rem;
}