/* ============================================================
   Studio Gemma - Custom CSS
   Deploy: FTP nella root del sito come  css/custom.css  (sovrascrivi), poi hard refresh (Ctrl+F5).
   ============================================================ */

/* Le figure decorative assolute non devono intercettare i click */
[class*="custom-el-"],
[class*="custom-pos-"] {
    pointer-events: none;
}

/* === TEMA: verde "primary" più tenue — "Menta tenue" #65BD91 (sostituisce l'acido #4be296).
   --primary è usato ~100 volte via var() nel theme → l'override si propaga (hero, header, accenti).
   Le regole esplicite coprono eventuali usi con colore fisso. I colori personalizzati dei
   professionisti (header-giulia-avola ecc.) hanno specificità maggiore → restano invariati. === */
:root { --primary: #65bd91; }
.bg-primary { background-color: #65bd91 !important; }
.svg-fill-color-primary { fill: #65bd91 !important; }

/* --- Logo: dimensione controllata, più piccolo su mobile --- */
.header-logo img,
#offCanvasLogo img { height: 46px; width: auto; }
@media (max-width: 575px) { .header-logo img { height: 36px; } }

/* === Menu mobile (offcanvas): dropdown a fisarmonica ===
   NB: nell'offcanvas il link genitore è  li.dropdown > a.nav-link  (senza dropdown-toggle),
   il toggle lo gestisce js/custom.js aggiungendo la classe .open al <li>. */
/* tutte le voci top-level: stessa spaziatura → restano allineate a sinistra,
   a prescindere dalla classe dell'anchor (nav-link o dropdown) */
#offCanvasNav > ul > li > a {
    display: block;
    padding: .6rem 0;
}

/* parent con sottomenu: spazio a destra per la freccia */
#offCanvasNav li.dropdown > a {
    position: relative;
    padding-right: 2.5rem;
}

/* freccia: zona di tap larga, allineata a destra */
#offCanvasNav li.dropdown > a .fa-chevron-down {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.5rem;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .2s ease;
}

/* sottomenu: nascosto in flusso normale, mostrato quando il <li> ha .open */
#offCanvasNav .dropdown-menu {
    display: none;
    position: static;
    float: none;
    border: 0;
    box-shadow: none;
    background: transparent;
    margin: 0;
    padding: 0 0 0 1rem;
    list-style: none;
}
#offCanvasNav li.open > .dropdown-menu { display: block; }
#offCanvasNav li.open > a .fa-chevron-down { transform: rotate(180deg); }

/* === Slider contatti: normalizza le foto (anche verticali) a un formato costante === */
.contact-slider img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* === Footer: telefono/email responsivi (scala su mobile, niente overflow) === */
.footer-contact-link {
    font-size: clamp(0.85rem, 3.2vw, 1.15rem);
}

/* === Footer: icone social un filo piu' grandi e centrate nel cerchio (hover) === */
#footer .social-icons li a { display: inline-flex; align-items: center; justify-content: center; }
#footer .social-icons li a i { font-size: 1.25rem; line-height: 1; }

/* === Box contatti (pagina professionista): numero di telefono responsivo === */
.contatti-box-link {
    font-size: clamp(0.8rem, 3.2vw, 1.05rem);
}
/* bottone "Scrivimi una mail": l'icona e' un SVG inline (data-icon la sostituisce all'<img>),
   quindi serve il flex per allinearla al testo e una dimensione esplicita */
.contatti-box-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.contatti-box-btn svg,
.contatti-box-btn img {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

/* === Form contatti: dopo l'invio il POST torna su #form-contatti, cosi' l'utente
   vede il messaggio di esito invece di ritrovarsi in cima alla pagina.
   scroll-margin-top compensa l'header sticky: se cambi l'altezza dell'header, ritocca qui. === */
#form-contatti {
    scroll-margin-top: 120px;
}

/* === Menu desktop: nasconde "Home" sotto i 1024px (il logo porta gia' alla home) === */
@media (max-width: 1023.98px) {
    #header #mainNav > li.first { display: none; }
}

/* === Menu mobile (offcanvas): nasconde "Home" (il logo porta gia' alla home) === */
#offCanvasNav > ul > li.first { display: none; }

/* === Contatti: blocchi info di altezza uguale, icone equidistanti (da desktop) === */
@media (min-width: 992px) {
    .contact-info-col { display: flex; flex-direction: column; }
    .contact-info-col > .feature-box { flex: 1 1 0; align-items: center; }
    .contact-info-col > .feature-box:first-child { margin-top: 0 !important; }
}

/* === Box callout "Quando rivolgersi": azzurrino tenue (tint dell'acqua #5ebfc3) invece del grigio === */
.box-azzurro { background-color: #e3f4f5; }

/* === Link nel corpo dei contenuti: verde scuro accessibile (WCAG AA ~6.3:1) al posto
      del verde chiaro del tema (#4be296, ~1.7:1). Solo <a> senza classe = link di testo,
      esclusi pulsanti/menu/breadcrumb. Sottolineatura: non affidarsi al solo colore. === */
.main p a:not([class]) {
    color: #246c48;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.main p a:not([class]):hover {
    color: #17402b;
}

/* === Liste puntate nei contenuti: dimensione allineata al testo (Porto le rende piccole) === */
.main .container ul:not(.breadcrumb):not(.list):not(.social-icons):not(.nav):not(.dropdown-menu) > li {
    font-size: 1rem;
    line-height: 1.6;
}

/* === Card team home: accent col colore personale del professionista === */
.team-card { border-top: 4px solid var(--accent); }
.team-card .team-photo {
    border: 3px solid var(--accent);
}

/* === Header pagina professionista: colore personalizzato (classe via alias) === */
.page-header.header-giulia-avola      { background-color: #5ebfc3 !important; }
.page-header.header-elisabetta-lupidi { background-color: #b7d7b0 !important; }
.page-header.header-mauro-simonetti   { background-color: #0069a6 !important; }
/* sul blu scuro di Mauro il testo va chiaro */
.header-mauro-simonetti h1,
.header-mauro-simonetti p,
.header-mauro-simonetti .breadcrumb,
.header-mauro-simonetti .breadcrumb a { color: #eaf3f9 !important; }
/* la trama a onde e' scura: sul blu di Mauro la schiariamo per renderla visibile */
.header-mauro-simonetti .custom-el-5 img { filter: brightness(0) invert(1); }

/* === Header: su mobile usiamo la foto quadrata (piu' pulita da sola), centrata e capped === */
@media (max-width: 767.98px) {
    .header-photo { max-width: 260px; margin: 0 auto; }
}