/*
Theme Name: Studio Rotale Gullo
Theme URI: https://studiorotalegullo.it
Author: Studio Rotale Gullo
Description: Tema a blocchi nativo WordPress per lo Studio Rotale Gullo — Diritto Canonico. Palette Opzione A (Porpora). Nessun page builder: tutto resta modificabile da Aspetto -> Editor.
Version: 1.107.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: studiorotalegullo
*/

/* ==========================================================================
   Tutte le classi di questo tema condividono il prefisso "srg-"
   (Studio Rotale Gullo), cosi' non si confondono mai con le classi
   generate automaticamente da WordPress. Colori, font e taglie vengono
   sempre dal theme.json (var(--wp--preset--...)) — mai valori scritti
   a mano qui, per restare fedeli alla fonte unica di verita'.
   ========================================================================== */

.srg-eyebrow {
  display: block;
  font-family: var(--wp--preset--font-family--work-sans);
  font-size: var(--wp--preset--font-size--etichetta);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--porpora);
  margin-bottom: var(--wp--preset--spacing--xs);
}

.srg-eyebrow.is-on-dark {
  color: var(--wp--preset--color--avorio);
  opacity: 0.85;
}

/* Sezione hero: testata a tutta larghezza.
   Opacita' e overlay (colore/gradiente) si controllano dal pannello
   "Sovrapposizione" del blocco Copertina nell'editor — niente piu' forzato qui via CSS. */
.srg-hero.wp-block-cover {
  min-height: 720px;
  padding: 0;
}
/* Foto di sfondo dell'hero della home: leggero zoom continuo ("effetto
   Ken Burns"), molto lento perche' resta dietro al testo per parecchio
   tempo mentre il visitatore legge. */
.srg-hero .wp-block-cover__image-background {
  animation: srg-hero-kenburns 8s ease-in-out infinite alternate;
}
@keyframes srg-hero-kenburns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.12);
  }
}
@media (prefers-reduced-motion: reduce) {
  .srg-hero .wp-block-cover__image-background {
    animation: none;
  }
}
@media (max-width: 600px) {
  .srg-hero.wp-block-cover {
    min-height: 680px !important;
  }
}
.srg-hero .wp-block-cover__inner-container {
  padding: 56px 6vw 46px;
}

/* Banner di pagina interna (es. "Lo studio"): foto + titolo centrato,
   piu' basso dell'hero della home perche' non e' la prima cosa che si vede del sito */
.srg-page-hero.wp-block-cover {
  min-height: 420px;
  padding: 0;
}
@media (max-width: 600px) {
  .srg-page-hero.wp-block-cover {
    min-height: 320px !important;
  }
}
.srg-page-hero .wp-block-cover__inner-container {
  padding: 40px 6vw;
}
.srg-page-hero-title {
  margin: 0 !important;
}

/* Pagina "Lo studio": tappe a piena larghezza, alternate Travertino/Avorio
   direttamente (nessun pannello incassato dentro una fascia) — altezza
   fissa identica per ogni tappa, foto a bordo (nessun margine), numero
   della tappa in filigrana dietro al testo. */
.srg-studio-band {
  padding: var(--wp--preset--spacing--xl) 6vw;
}
.srg-studio-band > * {
  max-width: 1320px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.srg-studio-band--intro {
  text-align: center;
}
.srg-panel-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  font-size: 13px;
  color: var(--wp--preset--color--porpora);
  margin: 0 0 var(--wp--preset--spacing--s) !important;
}
.srg-studio-cta {
  padding: var(--wp--preset--spacing--l) 6vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--m);
  text-align: center;
}
.srg-studio-panel {
  align-items: stretch !important;
  height: 470px;
  overflow: hidden;
  /* Bordo a bordo, come le bande "Chi siamo"/"Cosa facciamo" in home:
     niente margine, la foto tocca il bordo dello schermo */
  padding: 0 !important;
}
.srg-studio-panel-photo {
  margin: 0 !important;
  height: 470px;
}
.srg-studio-panel-img {
  height: 100%;
  margin: 0 !important;
}
.srg-studio-panel-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}
.srg-studio-panel-text {
  position: relative;
  display: flex !important;
  align-items: center;
  /* Centrato: stesso spazio a destra e a sinistra, invece di
     addossarsi al bordo esterno (vedi sotto, --end non serve piu') */
  justify-content: center;
  /* Margine dal bordo pagina: la cifra in filigrana usa lo stesso
     valore (vedi .srg-panel-num--right/--left) cosi' restano allineate */
  padding: 0 var(--wp--preset--spacing--xl) !important;
}
.srg-panel-inner {
  position: relative;
  z-index: 1;
  max-width: 34em;
}
/* Allineamento a specchio: il testo resta sempre vicino al bordo esterno
   della pagina (mai verso la foto), cosi' la didascalia parte sempre dallo
   stesso margine coerente, anche se la foto alterna lato ad ogni tappa. */
.srg-studio-panel-text--end {
  justify-content: center;
}
.srg-panel-inner h2 {
  margin: 0 0 var(--wp--preset--spacing--s) !important;
  line-height: 1.2;
}
.srg-panel-inner p {
  margin: 0 !important;
  line-height: 1.65;
}
.srg-panel-num {
  position: absolute;
  /* Non negativo: un valore negativo la spinge fuori dal bordo
     superiore del pannello, che ha overflow:hidden — la cifra veniva
     tagliata (visibile solo in parte, "1980"/"Oggi" segnalati) */
  top: 12px;
  z-index: 0;
  pointer-events: none;
  font-family: var(--wp--preset--font-family--playfair-display);
  font-weight: 700;
  font-size: clamp(60px, 9vw, 100px);
  line-height: 1;
  color: var(--wp--preset--color--oro);
  opacity: 0.16;
  margin: 0 !important;
}
/* Stesso margine del testo (.srg-studio-panel-text), cosi' la cifra
   resta allineata al testo invece di sporgere fino al bordo pagina */
.srg-panel-num--right {
  right: var(--wp--preset--spacing--xl);
}
.srg-panel-num--left {
  left: var(--wp--preset--spacing--xl);
}
/* Fascia intermedia (tablet/laptop piccolo): il testo, ormai piu' stretto
   per lasciare spazio a foto piu' grandi, rischia di non stare piu' nei
   420px fissi del pannello — meglio un'altezza che si adatta al contenuto
   che tagliare le parole. */
@media (max-width: 1100px) {
  .srg-studio-panel {
    height: auto;
  }
  .srg-studio-panel-photo {
    height: auto;
  }
  .srg-studio-panel-text {
    /* Piu' spazio sopra (non solo il consueto spacing--l) per fare
       posto alla cifra in filigrana, che qui non e' piu' centrata
       verticalmente ma parte dall'alto del blocco */
    padding: 84px 8vw var(--wp--preset--spacing--l) !important;
  }
  .srg-panel-num {
    top: -8px;
    font-size: 76px;
  }
}
@media (max-width: 760px) {
  .srg-studio-panel,
  .srg-studio-panel .wp-block-column {
    flex-basis: 100% !important;
  }
  .srg-studio-panel-photo {
    height: 260px;
  }
  .srg-studio-panel-text {
    padding: 72px 6vw var(--wp--preset--spacing--l) !important;
  }
  .srg-panel-num {
    top: -6px;
    font-size: 56px;
  }
  /* Da mobile in giu' le tappe impilate seguono l'ordine del markup
     (foto/testo alternati a coppie nel codice), cosi' due foto o due
     testi finiscono spesso vicini uno all'altro. Forzando sempre
     foto-poi-testo in ogni tappa si alternano davvero, una dopo l'altra. */
  .srg-studio-panel-photo {
    order: 1;
  }
  .srg-studio-panel-text {
    order: 2;
  }
  /* Su mobile la cifra in filigrana resta sempre allineata a destra,
     invece di alternare sinistra/destra come su desktop. */
  .srg-panel-num--left {
    left: auto;
    right: var(--wp--preset--spacing--xl);
  }
}

/* Titolo banner "Aree di competenza": 60px fisso impostato a mano, troppo
   grande su schermi stretti (non si riduce da solo come il preset "testata"
   usato dagli altri banner) — lo scala solo sotto i 600px. */
@media (max-width: 600px) {
  .srg-aree-page-title {
    font-size: 34px !important;
  }
}

/* Briciole di navigazione sopra il banner di pagina (aree di competenza, ecc.) */
.srg-crumbs {
  font-size: 13px;
  color: var(--wp--preset--color--inchiostro);
  opacity: 0.65;
  margin: 0 !important;
}
.srg-crumbs a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.srg-crumbs a:hover,
.srg-crumbs a:focus-visible {
  border-bottom-color: currentColor;
}
.srg-crumbs .srg-crumbs-sep {
  margin: 0 6px;
  opacity: 0.7;
}
.srg-crumbs .srg-crumbs-current {
  color: var(--wp--preset--color--porpora);
  font-weight: 600;
  opacity: 1;
}

/* Sottosezioni affiancate dentro le pagine di area (es. "La sentenza esecutiva" /
   "Il processus brevior" in Diritto matrimoniale canonico) */
.srg-area-subcards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--m);
  margin-top: var(--wp--preset--spacing--s) !important;
}
.srg-area-subcard {
  background: var(--wp--preset--color--pannello);
  border: 1px solid var(--wp--preset--color--oro);
  padding: var(--wp--preset--spacing--m) !important;
}
.srg-area-subcard h3 {
  margin: 0 0 10px !important;
  color: var(--wp--preset--color--inchiostro);
}
.srg-area-subcard p {
  margin: 0 !important;
}
@media (max-width: 760px) {
  .srg-area-subcards {
    grid-template-columns: 1fr;
  }
}

/* Banda di invito ai contatti in chiusura pagina di area */
.srg-area-cta-text {
  max-width: 46em;
  font-size: var(--wp--preset--font-size--sottotitolo);
}

/* Home — bande "Chi siamo" / "Cosa facciamo": foto a bordo pagina
   (nessun margine, ne' verticale ne' orizzontale) + testo affiancato,
   alternate di sfondo e di lato */
.srg-home-band-photo {
  margin: 0 !important;
}
.srg-home-band-img {
  height: 100%;
  margin: 0 !important;
  overflow: hidden;
}
.srg-home-band-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}
/* Foto "Chi siamo" (Alessia Gullo con Papa Francesco): la foto e la
   colonna hanno per caso le stesse proporzioni, quindi "object-fit:
   cover" da solo non tagliava nulla (l'immagine intera ci stava gia'
   dentro) e la persona indesiderata sul bordo sinistro restava
   visibile. Uno zoom con origine sul bordo destro la spinge fuori
   dall'inquadratura, che e' tagliata dall'overflow:hidden qui sopra. */
@media (max-width: 760px) {
  .srg-home-band-img img[src*="chi-siamo-alessia-gullo"] {
    transform: scale(1.08);
    transform-origin: 75% center;
  }
}
.srg-home-band-text {
  display: flex !important;
  align-items: center;
  /* Centrato: stesso spazio a destra e a sinistra, come in "Lo studio" */
  justify-content: center;
  /* stacca il testo dal bordo della foto e dal bordo della pagina */
  padding: 0 6vw !important;
}
.srg-home-band-inner {
  max-width: 34em;
}
.srg-home-band-inner .srg-panel-label {
  margin-bottom: var(--wp--preset--spacing--m) !important;
}
.srg-home-band-inner h2 {
  margin: 0 0 var(--wp--preset--spacing--m) !important;
  line-height: 1.2;
}
@media (max-width: 760px) {
  .srg-home-band,
  .srg-home-band .wp-block-column {
    flex-basis: 100% !important;
  }
  .srg-home-band-text {
    padding: var(--wp--preset--spacing--l) 6vw !important;
  }
}

/* Griglia "Aree di competenza": alternanza testo / immagine come nel sito attuale.
   Altezza di riga fissa: ogni rettangolo (testo o foto) ha esattamente la stessa
   dimensione, invece di adattarsi alla lunghezza del testo di ciascuna cella. */
.srg-aree-grid {
  grid-auto-rows: minmax(520px, auto);
  gap: 2px;
  background: var(--wp--preset--color--oro);
}
.srg-aree-grid > * {
  background: var(--wp--preset--color--travertino);
  margin: 0 !important;
}
.srg-cell {
  padding: var(--wp--preset--spacing--l) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: var(--wp--preset--spacing--m);
  min-height: 280px;
}
.srg-cell h3,
.srg-cell p {
  margin: 0 !important;
}
.srg-cell .wp-block-buttons {
  justify-content: center;
  margin: 0 !important;
}
.srg-cell-img {
  min-height: 320px;
  align-self: stretch;
}
.srg-cell-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 780px) {
  /* colonne piu' strette: il testo va a capo di piu', serve una riga piu' alta
     per non far uscire il testo dal rettangolo (verificato fino a 2 colonne da 232px) */
  .srg-aree-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(900px, auto); }
}
@media (max-width: 520px) {
  .srg-aree-grid { grid-template-columns: 1fr; grid-auto-rows: minmax(560px, auto); }
}

/* Scheda indirizzo sopra la mappa */
.srg-mapcard {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--s);
  background: var(--wp--preset--color--pannello);
  border: 1px solid var(--wp--preset--color--oro);
  padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
  max-width: 30em;
  color: var(--wp--preset--color--inchiostro);
}
.srg-mapcard .srg-pin {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--wp--preset--color--porpora);
  color: var(--wp--preset--color--avorio);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.srg-mapcard small {
  display: block;
  color: var(--wp--preset--color--inchiostro);
  opacity: 0.65;
  font-size: 12.5px;
  margin-top: 2px;
}

/* Header sempre visibile durante lo scorrimento, con una leggera
   contrazione e un'ombra al primo scroll per staccarlo dal contenuto.
   Lo sticky va sul wrapper <header> generato da WordPress per il
   template-part (alto quanto l'intera pagina), non su .srg-header
   stesso: quel wrapper e' alto solo quanto l'header, quindi da solo
   non avrebbe margine per restare "incollato" durante lo scroll. */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
}
.srg-header {
  row-gap: 12px;
  transition: padding-top 0.3s ease, padding-bottom 0.3s ease, box-shadow 0.3s ease;
}
.srg-header.is-scrolled {
  padding-top: var(--wp--preset--spacing--xs) !important;
  padding-bottom: var(--wp--preset--spacing--xs) !important;
  box-shadow: 0 8px 20px -8px rgba(20, 14, 10, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .srg-header {
    transition: none;
  }
}
.srg-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  margin: 0;
}
.srg-logo-link img {
  height: clamp(42px, 5vw, 66px);
  width: auto;
  display: block;
}

/* Font Jost, auto-ospitato come gli altri caratteri del tema */
@font-face {
  font-family: "Jost";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/Jost-500.woff2") format("woff2");
}

/* Navigazione header */
/* Icona hamburger: di suo nera (colore testo di default), invisibile
   sul rosso porpora dell'header — qui in avorio come il resto del menu. */
.srg-header .wp-block-navigation__responsive-container-open {
  color: var(--wp--preset--color--avorio) !important;
}
.srg-header .wp-block-navigation__responsive-container-open svg {
  fill: var(--wp--preset--color--avorio);
}
.wp-block-navigation__container {
  gap: 1.75rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: 0.5rem !important;
}
.wp-block-navigation__responsive-container-content {
  padding-left: 6vw;
  padding-right: 6vw;
}
.wp-block-navigation a {
  text-decoration: none;
  font-family: "Jost", var(--wp--preset--font-family--work-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  display: inline-block;
  padding: 4px 2px;
  transition: transform 0.25s ease, color 0.25s ease;
}
.srg-header .wp-block-navigation a {
  color: var(--wp--preset--color--avorio) !important;
}
/* Con 7 voci il menu non deve andare a capo sugli schermi medi: spazi piu' stretti */
@media (min-width: 601px) and (max-width: 1240px) {
  .srg-header .wp-block-navigation__container {
    gap: 14px !important;
  }
}
/* Fino a 1240px le 7 voci non stanno comode accanto al logo (tra 900 e
   1200px finivano su una seconda riga sotto il logo, o con l'ultima voce
   da sola): da 601px a 1240px si usa gia' il menu hamburger (WP di suo lo attiva solo sotto
   i 600px). Queste due regole rifanno, in quella fascia, quello che WP
   fa sotto i 600px: nascondono il menu esteso e mostrano il bottone. Il
   pannello a schermo intero che si apre e' lo stesso del mobile. */
@media (min-width: 601px) and (max-width: 1240px) {
  .srg-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
  .srg-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}
/* Voce di menu evidenziata solo sulla pagina corrispondente: "Home" usa la
   classe "home" che WordPress aggiunge da solo al <body>; le altre pagine
   usano "page-slug-<slug>", aggiunta dal filtro in functions.php. */
body.home .srg-header .srg-nav-home a,
body.page-slug-lo-studio .srg-header .srg-nav-lo-studio a,
body.page-slug-chi-siamo .srg-header .srg-nav-chi-siamo a,
body.page-slug-domande-frequenti .srg-header .srg-nav-domande-frequenti a,
body.page-slug-collaborazioni .srg-header .srg-nav-collaborazioni a,
body.page-slug-contatti .srg-header .srg-nav-contatti a {
  /* Testo dello stesso colore (Avorio) delle altre voci, per restare sopra la
     soglia di contrasto AA (l'Oro sul Porpora scendeva a 3.43:1, sotto il
     minimo 4.5:1) — "pagina corrente" si vede dalla sottolineatura bianca. */
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #FFFFFF;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.wp-block-navigation a:hover,
.wp-block-navigation a:focus-visible {
  transform: translateY(-3px);
}
.wp-block-navigation a:active {
  transform: scale(0.96);
}

/* Menu a tendina "Aree di competenza": sfondo chiaro proprio, non eredita
   l'Avorio-su-Porpora dell'header (che sopra una tendina chiara sarebbe
   illeggibile, come il difetto gia' noto del flyout mobile). */
.wp-block-navigation__submenu-container {
  background: var(--wp--preset--color--avorio) !important;
  border-top: 2px solid var(--wp--preset--color--oro);
  min-width: 280px;
  padding: 6px 0;
}
.srg-header .wp-block-navigation__submenu-container a {
  color: var(--wp--preset--color--inchiostro) !important;
  font-weight: 500;
  padding: 12px 20px;
  transform: none !important;
}
.srg-header .wp-block-navigation__submenu-container a:hover,
.srg-header .wp-block-navigation__submenu-container a:focus-visible {
  background: var(--wp--preset--color--pannello) !important;
  color: var(--wp--preset--color--porpora) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  border-top: none;
  border-left: 2px solid var(--wp--preset--color--oro);
  min-width: 0;
}

/* Menu mobile (overlay a schermo intero quando si apre l'hamburger):
   prima restava bianco con testo avorio quasi invisibile, voci allineate
   a destra e il sottomenu "Aree di competenza" sempre aperto (WP nasconde
   di default la sua freccina nell'overlay). Rifatto per somigliare al
   riferimento fornito: intestazione col logo sempre visibile in alto,
   pannello rosso sotto con voci allineate a sinistra a piena larghezza,
   e "Aree di competenza" chiuso con un "+" che lo apre al tocco. */
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--porpora) !important;
}
/* Il logo va disegnato dentro il pannello stesso (non "scoperto" facendo
   iniziare il rosso piu' in basso dell'intestazione): quel trucco
   dipendeva dall'altezza esatta dell'header, che cambia con la
   larghezza dello schermo e lasciava uno spiraglio con la pagina sotto
   visibile a certe larghezze. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  position: relative;
  padding-top: 76px;
}
.wp-block-navigation__responsive-dialog a.srg-mobile-menu-logo {
  display: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog a.srg-mobile-menu-logo {
  display: block !important;
  position: fixed;
  z-index: 1;
  line-height: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.srg-mobile-menu-logo img {
  display: block;
  height: 100%;
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  /* Di suo il bottone e' incollato esattamente allo spigolo (top:0;
     right:0), cosi' il cerchio restava tagliato a meta' dai bordi dello
     schermo e la X dentro sembrava fuori centro. Un margine dallo
     spigolo lascia respirare il cerchio intero. */
  top: 18px !important;
  right: 18px !important;
  background: rgba(247, 241, 230, 0.12);
  border-radius: 50%;
  padding: 8px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
  fill: var(--wp--preset--color--avorio);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: stretch !important;
  padding-top: 24px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  width: 100% !important;
  gap: 0 !important;
  align-items: stretch !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
  width: 100%;
  border-bottom: 1px solid rgba(247, 241, 230, 0.25);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child {
  border-bottom: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  text-align: left !important;
  padding: 18px 2px;
  font-size: 24px;
  font-weight: 600;
  color: var(--wp--preset--color--avorio) !important;
}
/* WP nasconde di serie questo pulsante (freccina) nell'overlay mobile e
   mostra il sottomenu sempre aperto: lo riportiamo visibile come "+" e
   lo mettiamo noi in ascolto (script in parts/header.html) per aprire e
   chiudere il sottomenu, che di base resta chiuso. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
  width: auto;
  flex: 1 1 auto;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  position: relative;
  color: var(--wp--preset--color--avorio) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
  display: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle::before,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle::after {
  content: "";
  position: absolute;
  background: var(--wp--preset--color--avorio);
  opacity: 1;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle::before {
  width: 16px;
  height: 2px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle::after {
  width: 2px;
  height: 16px;
}
.wp-block-navigation__responsive-container.is-menu-open li.has-child.srg-submenu-open .wp-block-navigation-submenu__toggle::after {
  transform: rotate(90deg);
  opacity: 0;
}
/* Sottovoci di "Aree di competenza": chiuse di default, stesso sfondo
   rosso (non piu' il riquadro avorio pensato per il menu a tendina da
   desktop), rientrate per segnalare la gerarchia. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  display: none !important;
  background: transparent !important;
  border-left: 2px solid var(--wp--preset--color--oro);
  padding: 0 0 6px 18px;
}
.wp-block-navigation__responsive-container.is-menu-open li.has-child.srg-submenu-open .wp-block-navigation__submenu-container {
  display: flex !important;
  flex-basis: 100%;
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 18px !important;
  font-weight: 500;
  padding: 12px 2px !important;
  color: var(--wp--preset--color--avorio) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
  border-bottom: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
  background: transparent !important;
  color: var(--wp--preset--color--oro) !important;
}

/* Animazione pulsanti ("Scopri di più" e simili): un velo oro scorre
   da sinistra a coprire lo sfondo bordeaux al passaggio del mouse. */
.wp-element-button {
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color 0.35s ease;
}
.wp-element-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wp--preset--color--oro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  z-index: -1;
}
.wp-element-button:hover::before,
.wp-element-button:focus-visible::before {
  transform: scaleX(1);
}
.wp-element-button:hover,
.wp-element-button:focus-visible {
  color: var(--wp--preset--color--inchiostro) !important;
}

/* Focus visibile ovunque, tastiera compresa (linee guida accessibilita') */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--wp--preset--color--oro);
  outline-offset: 2px;
}

/* Rispetta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto !important; }
}

/* Scorrimento morbido verso le ancore di pagina (es. indice rapido "Diritto
   matrimoniale canonico"); disattivato sopra se l'utente preferisce meno movimento */
html {
  scroll-behavior: smooth;
}
/* Le intestazioni con ancora non restano nascoste sotto una barra sticky */
:where(h2, h3)[id] {
  scroll-margin-top: 76px;
}

/* Indice rapido sticky nelle pagine di area con piu' temi (es. Diritto
   matrimoniale canonico: Annullamento + Scioglimento) */
.srg-subnav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  background: var(--wp--preset--color--pannello);
  border-bottom: 1px solid var(--wp--preset--color--oro);
  padding: 0 6vw;
}
.srg-subnav a {
  flex: none;
  padding: 14px 16px;
  font-family: var(--wp--preset--font-family--work-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--wp--preset--color--inchiostro);
  opacity: 0.7;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.srg-subnav a:hover,
.srg-subnav a:focus-visible {
  opacity: 1;
  color: var(--wp--preset--color--porpora);
  border-bottom-color: var(--wp--preset--color--oro);
}

/* Misura di lettura confortevole per i paragrafi lunghi: si adatta alla larghezza
   dello schermo (invece di restare fissa) cosi' su schermi grandi il testo non
   sembra andare a capo troppo presto */
.srg-measure {
  max-width: clamp(50ch, 55vw, 90ch);
}

/* Pagine "legali" (privacy, cookie): usano il template generico
   page.html invece di un pattern su misura, quindi qui diamo un
   minimo di titolo e di leggibilita' (larghezza di misura, spaziatura
   fra i paragrafi) invece di lasciare il testo grezzo da un bordo
   all'altro dello schermo. */
.srg-legal-title {
  max-width: clamp(50ch, 55vw, 90ch);
  margin: 0 auto;
}
.srg-legal-page > * {
  max-width: clamp(50ch, 55vw, 90ch);
  margin-left: auto;
  margin-right: auto;
}
.srg-legal-page h2 {
  margin-top: var(--wp--preset--spacing--l);
}
.srg-legal-page p,
.srg-legal-page ul {
  color: #463A33;
  line-height: 1.7;
}

/* Titolo hero: stessa larghezza massima dell'anteprima approvata (.s-hero-inner) */
.srg-hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  margin: 0 0 14px !important;
  color: #ffffff;
}
.srg-hero-heading {
  max-width: 100%;
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  line-height: 1.08;
  margin: 0 0 20px !important;
  color: #ffffff;
}
@media (min-width: 700px) {
  .srg-hero-heading {
    white-space: nowrap;
  }
}
.srg-hero-sub {
  max-width: 620px;
  line-height: 1.55;
  margin: 0 !important;
  color: rgba(255,255,255,0.92);
}
@media (max-width: 600px) {
  .srg-hero-heading {
    font-size: clamp(2.1rem, 8vw, 2.75rem);
  }
}

/* Sezione contatti: foto sfumata a schermo intero (niente mappa incorporata, niente cookie di terze parti) con la card indirizzo sovrapposta
   in basso a sinistra, sfumata verso il colore di sfondo (non uno scrim scuro) */
.srg-contact {
  position: relative;
  min-height: 620px;
  overflow: hidden;
}
.srg-contact-map {
  position: absolute;
  inset: 0;
  margin: 0;
}
.srg-contact-map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  /* foto nitida, appena scurita; la sfumatura verso il beige e' in .srg-contact::after */
  filter: brightness(.92);
}
.srg-contact::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,14,10,.05) 0%, var(--wp--preset--color--travertino) 88%);
  pointer-events: none;
}
.srg-contact-inner {
  position: relative;
  z-index: 1;
  min-height: 620px;
  padding: 70px 6vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}

/* Scheda mappa: composta con blocchi nativi (gruppo + paragrafi), non piu' HTML grezzo */
.srg-pin {
  margin: 0 !important;
}

/* Pagina "Chi siamo": selettore a schede a pillola, con mini-ritratto,
   un profilo alla volta per restare leggibile. */
.srg-bio-tabs {
  display: flex;
  gap: 8px;
  max-width: 460px;
  margin: 0 0 var(--wp--preset--spacing--l);
  background: var(--wp--preset--color--avorio);
  border: 1px solid var(--wp--preset--color--travertino);
  border-radius: 16px;
  padding: 8px;
}
.srg-bio-tab {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: none;
  border-radius: 11px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--wp--preset--font-family--work-sans);
  transition: background-color .2s ease;
}
.srg-bio-tab-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  display: block;
}
.srg-bio-tab-name {
  display: block;
  font-family: var(--wp--preset--font-family--playfair-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--wp--preset--color--inchiostro);
}
.srg-bio-tab-role {
  display: block;
  font-size: 11.5px;
  color: #8a7a6b;
}
.srg-bio-tab.is-active {
  background: var(--wp--preset--color--porpora);
}
.srg-bio-tab.is-active .srg-bio-tab-name {
  color: var(--wp--preset--color--avorio);
}
.srg-bio-tab.is-active .srg-bio-tab-role {
  color: #e9c9ce;
}
.srg-bio-panel {
  display: none;
}
.srg-bio-panel.is-active {
  display: block;
}

/* ritratto in testa a ogni scheda: foto intera (Papa compreso), non ritagliata */
.srg-bio-portrait {
  display: flex;
  gap: 26px;
  align-items: flex-end;
  margin-bottom: 26px;
}
.srg-bio-portrait-img {
  flex: none;
  margin: 0 !important;
}
.srg-bio-portrait-img img {
  width: 240px;
  height: auto;
  border-radius: 10px;
  object-fit: contain;
  border: 4px solid var(--wp--preset--color--avorio);
  box-shadow: 0 10px 24px -12px rgba(33, 26, 23, .45);
  display: block;
}
@media (max-width: 560px) {
  .srg-bio-portrait {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .srg-bio-portrait-img img {
    width: 180px;
  }
}
.srg-bio-name {
  margin: 0 0 2px !important;
  font-size: var(--wp--preset--font-size--sezione);
}
.srg-bio-role {
  margin: 0 0 10px !important;
  font-size: var(--wp--preset--font-size--lead);
  font-weight: 600;
  color: var(--wp--preset--color--porpora);
}
.srg-bio-meta {
  margin: 0 !important;
  color: var(--wp--preset--color--inchiostro);
  opacity: 0.65;
  font-size: var(--wp--preset--font-size--testo);
}
.srg-bio-list {
  margin: 0 0 18px !important;
  padding: 0 4px 0 28px;
  font-size: var(--wp--preset--font-size--testo);
  line-height: 1.6;
  list-style: none;
}
.srg-bio-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 6px;
  color: #463A33;
}
.srg-bio-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--oro);
}

/* Chi siamo — curriculum diviso per sezioni, ciascuna richiudibile */
.srg-bio-group {
  border-bottom: 1px solid rgba(33, 26, 23, .18);
}
.srg-bio-group:first-of-type {
  border-top: 1px solid rgba(33, 26, 23, .18);
}
.srg-bio-group summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 4px;
  font-family: var(--wp--preset--font-family--playfair-display);
  font-size: var(--wp--preset--font-size--sottotitolo);
  font-weight: 600;
  color: var(--wp--preset--color--inchiostro);
}
.srg-bio-group summary::-webkit-details-marker {
  display: none;
}
/* Icona +/- animata: due barrette che ruotano e sfumano, stessa
   tecnica del "+" nel menu hamburger mobile (non piu' un carattere
   "+"/"–" che si sostituisce di scatto). */
.srg-bio-group summary {
  position: relative;
  padding-right: 32px;
}
.srg-bio-group summary::before,
.srg-bio-group summary::after {
  content: "";
  position: absolute;
  top: 50%;
  background: var(--wp--preset--color--porpora);
  opacity: 1;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.srg-bio-group summary::before {
  right: 4px;
  width: 16px;
  height: 2px;
  margin-top: -1px;
}
.srg-bio-group summary::after {
  right: 11px;
  width: 2px;
  height: 16px;
  margin-top: -8px;
}
.srg-bio-group[open] summary::after {
  transform: rotate(90deg);
  opacity: 0;
}
.srg-bio-group-note {
  font-size: var(--wp--preset--font-size--testo);
  color: #8a7a6b;
  margin: 0 !important;
  padding: 0 4px 10px 28px;
}
@media (max-width: 560px) {
  .srg-bio-group summary {
    justify-content: flex-start;
    gap: 12px;
  }
}

/* Chi siamo — centra il contenuto della sezione bio (tabs + pannelli)
   Larghezza standard del sito: 960px (vedi contentSize in theme.json) */
.srg-bio-section > .srg-bio-tabs,
.srg-bio-section > .wp-block-group {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* Chi siamo, Lo studio, Home — fascia con le cifre dello studio */
.srg-bio-stats {
  display: flex;
  flex-wrap: wrap;
  padding: var(--wp--preset--spacing--m) 6vw !important;
}
.srg-bio-stat {
  flex: 1 1 240px;
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--m) !important;
  text-align: center;
  border-left: 1px solid rgba(247, 241, 230, .18);
}
.srg-bio-stat:first-child {
  border-left: none;
}
.srg-bio-stat-n {
  font-family: var(--wp--preset--font-family--playfair-display);
  font-size: var(--wp--preset--font-size--sezione);
  font-weight: 600;
  color: var(--wp--preset--color--avorio) !important;
  margin: 0 !important;
}
.srg-bio-stat-l {
  font-size: var(--wp--preset--font-size--etichetta);
  color: var(--wp--preset--color--avorio) !important;
  opacity: .85;
  margin: 4px 0 0 !important;
  max-width: 26ch;
  margin-inline: auto !important;
  line-height: 1.4;
}
@media (max-width: 700px) {
  .srg-bio-stat {
    border-left: none;
    border-top: 1px solid rgba(247, 241, 230, .18);
    flex-basis: 100%;
  }
  .srg-bio-stat:first-child {
    border-top: none;
  }
}

/* Variante a 4 voci (Lo studio): griglia fissa invece di righe che vanno a
   capo in modo imprevedibile e creano colonne di larghezza diversa. */
.srg-bio-stats--four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 700px) {
  .srg-bio-stats--four {
    grid-template-columns: repeat(2, 1fr);
  }
  .srg-bio-stats--four .srg-bio-stat {
    border-left: none;
    border-top: 1px solid rgba(247, 241, 230, .18);
  }
  .srg-bio-stats--four .srg-bio-stat:nth-child(even) {
    border-left: 1px solid rgba(247, 241, 230, .18);
  }
  .srg-bio-stats--four .srg-bio-stat:nth-child(-n+2) {
    border-top: none;
  }
}

/* Chi siamo — riga discorsiva introduttiva */
.srg-bio-lede {
  font-size: var(--wp--preset--font-size--testo);
  line-height: 1.65;
  color: #463A33;
  margin: 0 0 var(--wp--preset--spacing--m) !important;
}

/* Chi siamo — dorsale con le tappe principali della carriera */
.srg-bio-rail {
  position: relative;
  margin: 24px 0 var(--wp--preset--spacing--m);
  padding-left: 26px;
}
.srg-bio-rail::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1.5px;
  background: rgba(33, 26, 23, .18);
}
.srg-bio-rail-item {
  position: relative;
  padding-bottom: 20px;
}
.srg-bio-rail-item:last-child {
  padding-bottom: 0;
}
.srg-bio-rail-item::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--wp--preset--color--porpora);
  box-shadow: 0 0 0 3px var(--wp--preset--color--travertino);
}
.srg-bio-rail-yr {
  display: block;
  margin: 0 !important;
  line-height: 1;
  font-family: var(--wp--preset--font-family--playfair-display);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--lead);
  color: var(--wp--preset--color--porpora);
}
.srg-bio-rail-item p:not(.srg-bio-rail-yr) {
  margin: 2px 0 0;
  font-size: var(--wp--preset--font-size--testo);
  line-height: 1.5;
}

/* Pagina "Domande frequenti": elenco di <details> nativi (nessun JS) */
.srg-faq-filter-wrap {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.srg-faq-list {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.srg-faq-item {
  border-bottom: 1px solid var(--wp--preset--color--oro);
  padding: var(--wp--preset--spacing--s) 0;
}
/* La riga in alto sta sul contenitore, non sul "primo elemento": con un
   filtro attivo il primo elemento visibile non e' piu' il primo della
   lista (gli altri sono nascosti) e la riga spariva. */
.srg-faq-list::before {
  content: "";
  display: block;
  border-top: 1px solid var(--wp--preset--color--oro);
}
.srg-faq-item summary {
  cursor: pointer;
  list-style: none;
  /* Non piu' "display: flex": con un "+"/testo semplice andava bene,
     ma appena una domanda contiene un tag inline (es. <em>processus
     brevior</em>) il flex spezzava la frase in piu' "blocchi" separati
     da grandi spazi invece di scorrere come testo normale. */
  position: relative;
  padding: 10px 4px 10px 1.7em;
  font-family: var(--wp--preset--font-family--playfair-display);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--lead);
  color: var(--wp--preset--color--inchiostro);
}
.srg-faq-item summary::-webkit-details-marker {
  display: none;
}
.srg-faq-item summary::before {
  content: "+";
  position: absolute;
  left: 4px;
  top: 10px;
  color: var(--wp--preset--color--porpora);
  font-family: var(--wp--preset--font-family--work-sans);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1;
  width: 1em;
}
.srg-faq-item[open] summary::before {
  content: "–";
}
.srg-faq-item[open] summary {
  color: var(--wp--preset--color--porpora);
}
.srg-faq-placeholder {
  margin: 4px 4px 12px 2.2em !important;
  opacity: 0.6;
}
.srg-faq-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--wp--preset--spacing--l) !important;
}
.srg-faq-filter-btn {
  font-family: var(--wp--preset--font-family--work-sans);
  font-size: var(--wp--preset--font-size--etichetta);
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--wp--preset--color--porpora);
  background: transparent;
  color: var(--wp--preset--color--porpora);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.srg-faq-filter-btn:hover {
  background: var(--wp--preset--color--pannello);
}
.srg-faq-filter-btn.is-active {
  background: var(--wp--preset--color--porpora);
  color: var(--wp--preset--color--avorio);
}

/* Pagina "Contatti": scheda unica centrata con le informazioni, riga
   social in fondo alla scheda.
   Larghezza standard del sito: 960px (vedi contentSize in theme.json) */
.srg-contact-single {
  max-width: 960px;
  margin: 0 auto;
  background: var(--wp--preset--color--pannello);
  border: 1px solid rgba(33, 26, 23, .1);
  padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--xl) !important;
}
.srg-contact-single-eyebrow {
  margin: 0 0 8px !important;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--porpora);
}
.srg-contact-single-heading {
  margin: 0 0 var(--wp--preset--spacing--l) !important;
  text-align: center;
  font-size: 26px;
}
.srg-contact-single-rows {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--m);
}
.srg-contact-single-row {
  display: flex;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--s);
}
.srg-contact-single-row.is-highlight {
  background: var(--wp--preset--color--avorio);
  border: 1px solid var(--wp--preset--color--oro);
  padding: 16px 18px;
}
.srg-contact-single-badge {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--wp--preset--color--porpora);
}
.srg-contact-single-badge.is-outline {
  background: none;
  color: var(--wp--preset--color--oro);
}
.srg-contact-single-badge { transition: background-color .3s ease; }
.srg-contact-single-badge svg { transition: stroke .3s ease; }
.srg-contact-single-row:has(a:hover) .srg-contact-single-badge:not(.is-outline) {
  background: var(--wp--preset--color--oro);
}
.srg-contact-single-row:has(a:hover) .srg-contact-single-badge:not(.is-outline) svg {
  stroke: var(--wp--preset--color--inchiostro);
}
.srg-contactpage-label {
  margin: 0 0 2px !important;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--inchiostro);
  opacity: 0.6;
}
.srg-contactpage-value {
  margin: 0 !important;
  font-size: var(--wp--preset--font-size--testo);
  line-height: 1.5;
}
.srg-contact-single-divider {
  width: 100% !important;
  max-width: none;
  height: 1px;
  border: none;
  background: rgba(33, 26, 23, .12);
  margin: var(--wp--preset--spacing--l) 0 var(--wp--preset--spacing--m);
}
.srg-contact-single-social-label {
  margin: 0 0 var(--wp--preset--spacing--s) !important;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--inchiostro);
  opacity: 0.6;
}
.srg-contact-single-social-icons {
  display: flex;
  justify-content: center;
  gap: var(--wp--preset--spacing--s);
}
.srg-contact-single-social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--wp--preset--color--porpora);
  transition: background-color .3s ease;
}
.srg-contact-single-social-icons a svg { transition: stroke .3s ease; }
.srg-contact-single-social-icons a:hover,
.srg-contact-single-social-icons a:focus-visible {
  background: var(--wp--preset--color--oro);
}
.srg-contact-single-social-icons a:hover svg,
.srg-contact-single-social-icons a:focus-visible svg {
  stroke: var(--wp--preset--color--inchiostro);
}
@media (max-width: 760px) {
  .srg-contact-single {
    padding: var(--wp--preset--spacing--l) 6vw !important;
  }
}

/* Footer del sito: marchio+luogo, contatti, social — riga flessibile
   (i blocchi si dispongono in base al proprio contenuto, non stirati
   su colonne di larghezza fissa) + barra finale */
.srg-footer-top {
  align-items: flex-start;
}
.srg-footer-col {
  flex: none;
}
.srg-footer-logo {
  margin: 0;
}
.srg-footer-logo img {
  display: block;
  width: 148px;
  height: auto;
}
.srg-footer-map-link {
  margin: 0 !important;
  font-size: 14.5px;
  line-height: 1.6;
}
.srg-footer-map-link a {
  color: var(--wp--preset--color--inchiostro);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.srg-footer-map-link a:hover,
.srg-footer-map-link a:focus-visible {
  color: var(--wp--preset--color--porpora);
  border-bottom-color: var(--wp--preset--color--oro);
}
.srg-footer-eyebrow {
  margin: 0 0 var(--wp--preset--spacing--s) !important;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--porpora);
}
.srg-footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.srg-footer-links p {
  margin: 0;
}
.srg-footer-links a {
  width: fit-content;
  color: var(--wp--preset--color--inchiostro);
  font-size: 14.5px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.srg-footer-links a:hover,
.srg-footer-links a:focus-visible {
  color: var(--wp--preset--color--porpora);
  border-bottom-color: var(--wp--preset--color--oro);
}
.srg-footer-social {
  display: flex;
  gap: 10px;
}
.srg-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--wp--preset--color--porpora);
  transition: background-color 0.3s ease;
}
.srg-footer-social a svg { transition: stroke 0.3s ease; }
.srg-footer-social a:hover,
.srg-footer-social a:focus-visible {
  background: var(--wp--preset--color--oro);
}
.srg-footer-social a:hover svg,
.srg-footer-social a:focus-visible svg {
  stroke: var(--wp--preset--color--inchiostro);
}
.srg-footer-divider {
  width: 100% !important;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  opacity: 0.5;
}
.srg-footer-bottom p {
  margin: 0 !important;
  opacity: 0.7;
}
.srg-footer-bottom a {
  color: var(--wp--preset--color--inchiostro);
}
@media (max-width: 781px) {
  .srg-footer-logo {
    margin-bottom: var(--wp--preset--spacing--s);
  }
}

/* Pagine "aree di competenza" a percorso a tappe: centra il contenuto
   della sezione (rail + testo) nella fascia a piena larghezza
   Larghezza standard del sito: 960px (vedi contentSize in theme.json) */
.srg-path-section > .srg-path {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* Pagina "Diritto matrimoniale canonico": percorso a tappe con icona,
   riga rail (icona in un cerchio + linea) affiancata al testo di ogni
   tappa. Nessuna etichetta "Tappa X di N": l'icona basta a orientare. */
.srg-path {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 110px 28px;
}
.srg-path-rail {
  position: relative;
}
.srg-path-dot {
  width: 38px;
  height: 38px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--wp--preset--color--porpora);
  color: var(--wp--preset--color--avorio);
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 128px;
  z-index: 2;
}
.srg-path-dot svg {
  width: 19px;
  height: 19px;
}
.srg-path-line {
  position: absolute;
  z-index: 1;
  top: 38px;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--wp--preset--color--oro);
  transform: translateX(-50%);
}
.srg-path-step h2 {
  margin-bottom: var(--wp--preset--spacing--m);
}
.srg-path-step h3 {
  margin-top: var(--wp--preset--spacing--m);
  margin-bottom: var(--wp--preset--spacing--s);
}
.srg-path-step p {
  margin-bottom: var(--wp--preset--spacing--s);
}
.srg-path-step > p:last-child {
  margin-bottom: 0;
}
.srg-path-lead {
  font-size: var(--wp--preset--font-size--lead);
  font-weight: 600;
  background: var(--wp--preset--color--pannello);
  border: 1px solid var(--wp--preset--color--travertino);
  padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m) !important;
}
.srg-path-list {
  margin: 0 0 var(--wp--preset--spacing--s) !important;
  padding-left: 0 !important;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.srg-path-list li {
  background: var(--wp--preset--color--pannello);
  border-radius: 4px;
  padding: 10px 14px 10px 30px !important;
  position: relative;
}
.srg-path-list li::before {
  content: "✓";
  position: absolute;
  left: 10px;
  color: var(--wp--preset--color--porpora);
  font-weight: 700;
}
.srg-path-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--l) !important;
  gap: var(--wp--preset--spacing--m);
}
.srg-path-cta p {
  max-width: 30em;
  margin-bottom: 0;
}
@media (max-width: 700px) {
  .srg-path {
    grid-template-columns: 40px 1fr;
    gap: 70px 14px;
  }
  .srg-path-dot {
    width: 30px;
    height: 30px;
    top: 90px;
  }
  .srg-path-dot svg {
    width: 15px;
    height: 15px;
  }
  .srg-path-line {
    top: 30px;
  }
}

/* ===== Collaborazioni — elenco di studi e associazioni =====
   Tutto a blocchi nativi: ogni voce e' un gruppo (logo = blocco Immagine,
   nome = Titolo, descrizione = Paragrafo, link = Pulsante). Per aggiungerne
   una nuova basta inserire il pattern "Collaborazione — singola voce". */
.srg-collab-section {
  padding: var(--wp--preset--spacing--xl) 6vw;
}
.srg-collab-section > * {
  max-width: 960px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.srg-collab-intro {
  max-width: 62ch;
  margin-bottom: var(--wp--preset--spacing--l) !important;
  color: #463A33;
}
.srg-collab-list {
  border-top: 1px solid rgba(33, 26, 23, .18);
}
.srg-collab-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--m);
  padding: var(--wp--preset--spacing--l) 4px !important;
  border-bottom: 1px solid rgba(33, 26, 23, .18);
}
.srg-collab-logo {
  flex: none;
  width: 96px;
  height: 96px;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.srg-collab-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.srg-collab-text {
  flex: 1 1 auto;
  min-width: 0;
}
.srg-collab-text h3 { margin: 0 0 8px !important; }
.srg-collab-text p {
  margin: 0 !important;
  color: #463A33;
  max-width: 62ch;
}
.srg-collab-text .wp-block-buttons { margin-top: var(--wp--preset--spacing--s) !important; }
@media (max-width: 600px) {
  .srg-collab-row { flex-wrap: wrap; }
  .srg-collab-logo { width: 80px; height: 80px; }
}

/* Posizione del ritaglio di due foto di "Lo studio" (prima era un attributo sull'immagine,
   che l'editor non accetta: ora e' qui, riconosciuta dal nome del file) */
.srg-studio-panel-img img[src*="chi-siamo-alessia-gullo"] { object-position: 50% 20%; }
.srg-studio-panel-img img[src*="lo-studio-oggi"] { object-position: 50% 45%; }