/*
 Theme Name:   psicologo-clinico.org
 Description:  Tema personalizzato del sito psicologo-clinico.org
 Author:       Emanuele Ghielmetti
 Author URI:   https://www.psicologo-clinico.org
 Template:     generatepress
 Version:      1.6
*/

/* ! Reset */

body, html {
  font-size: 18px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

*, *:before, *:after {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p, ol, ul, a {
  margin: 0;
  padding: 0;
  line-height: 1.4;
  margin-bottom: 1rem;
}


/* ! Title System */
/* --------------------------------------------------------- */

/* ! Title System */
/* --------------------------------------------------------- */

/* Dimensioni di base: desktop e tablet */

h1, .text-1 {
  font-size: clamp(1.75rem, 1.456rem + 1.304vw, 2.5rem);
}

h2, .text-2 {
  font-size: clamp(1.65rem, 1.13rem + 1.087vw, 2rem);
}

h3, .text-3 {
  font-size: clamp(1.375rem, 1.016rem + 0.761vw, 1.625rem);
}

h4, .text-4 {
  font-size: clamp(1.1875rem, 0.965rem + 0.435vw, 1.3125rem);
}

p, ol, ul {
  font-size: clamp(0.98rem, 0.9674rem + 0.163vw, 1.083333rem);
  line-height: 1.6;
}


/* Interlinea dei testi su desktop */

@media (min-width: 1024px) {
  p, ol, ul {
    line-height: 1.7;
  }
}ma

p a,
ol a,
ul a {
  line-height: inherit;
}

.title-small {
  font-size: 1em;
  text-transform: uppercase;
}


/* ! Helpers */
/*----------------------------------------------------------------------------------- */

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mt-4 { margin-top: 4rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.mb-4 { margin-bottom: 4rem; }


.alignwide {
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 1250px !important;
}

/* ! Bullet points  */

.bp {
  position: relative;
  padding-left: 20px; /* Distanza tra il punto e il testo */
}

.bp:before {
  content: "•";
  position: absolute;
  left: 0; /* Posizione del bullet */
  top: -1px; /* Allineamento verticale del bullet */
  font-size: 1.2em;
  margin-top: 0; /* posizione verticale del punto */
  color: #5C5F60;
}

/* ! Bullet points di default per le liste Gutenberg */

ul.wp-block-list {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

ul.wp-block-list > li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 0.8rem;
}

ul.wp-block-list > li:before {
  content: "•";
  position: absolute;
  left: 0;
  top: -1px;
  font-size: 1em;
  color: #5C5F60;
}


/* ============================================
   Cornice pagina
   Si attiva con la classe .ha-cornice sul body
   Sugli articoli viene disattivata solo su mobile
   ============================================ */

:root {
	--cornice-spessore: 1px;
	--cornice-colore: #111;
	--cornice-gap: 1.4rem;
	--cornice-padding: 1.4rem;
	--cornice-sfondo-esterno: #fff;
	--cornice-sfondo-interno: #fff;
}

html {
	background-color: var(--cornice-sfondo-esterno);
}

/* La cornice sta sul body, non su #page:
   in GeneratePress header e footer sono fratelli di #page */
body.ha-cornice {
	margin: var(--cornice-gap);
	border: var(--cornice-spessore) solid var(--cornice-colore);
	background-color: var(--cornice-sfondo-interno);
	min-height: calc(100dvh - (var(--cornice-gap) * 2));
}

/* Aria interna sui blocchi di primo livello, non sul body:
   così le sezioni con sfondo pieno possono arrivare a filo */
body.ha-cornice > .site-header,
body.ha-cornice > #page,
body.ha-cornice > .site-footer {
	padding-inline: var(--cornice-padding);
}

body.ha-cornice > .main-navigation .inside-navigation {
	margin-top: 1.25em;
}

/* --- Navigazione sticky ---
   Blocco lasciato disattivato come nel codice originale.
   Gli elementi fixed si posizionano sul viewport e ignorano
   il margine del body: vanno rientrati a mano.
   GeneratePress applica width e left inline via JS,
   quindi serve !important per avere la precedenza.

body.ha-cornice .main-navigation.navigation-stick,
body.ha-cornice .main-navigation.is_stuck,
body.ha-cornice .site-header.navigation-stick,
body.ha-cornice .sticky-enabled .main-navigation.is_stuck {
	left: var(--cornice-gap) !important;
	right: var(--cornice-gap) !important;
	width: auto !important;
	max-width: none !important;
	box-sizing: border-box;
	border-inline: var(--cornice-spessore) solid var(--cornice-colore);
	border-block-end: var(--cornice-spessore) solid var(--cornice-colore);
}
*/

/* --- Torna su --- */
body.ha-cornice .generate-back-to-top {
	right: calc(var(--cornice-gap) + 20px);
	bottom: calc(var(--cornice-gap) + 20px);
}

/* --- Mobile --- */
@media (max-width: 768px) {
	:root {
		--cornice-gap: .75rem;
		--cornice-padding: 1rem;
	}

	/* Rimuove cornice e margine solo dai singoli articoli */
	body.ha-cornice.single-post {
		margin: 0;
		border: 0;
		min-height: 100dvh;
	}

	/* Rimuove il padding aggiunto dalla cornice */
	body.ha-cornice.single-post > .site-header,
	body.ha-cornice.single-post > #page,
	body.ha-cornice.single-post > .site-footer {
		padding-inline: 0;
	}

	/* Rimuove lo spazio aggiunto sopra la navigazione */
	body.ha-cornice.single-post > .main-navigation .inside-navigation {
		margin-top: 0;
	}

	/* Riposiziona il pulsante torna su senza il gap della cornice */
	body.ha-cornice.single-post .generate-back-to-top {
		right: 20px;
		bottom: 20px;
	}
}

/* --- Stampa --- */
@media print {
	body.ha-cornice {
		margin: 0;
		border: 0;
	}
}


/* ! Button system */
/* --------------------------------------------------------- */

.btn,
.btn-w {
  --btn-colore: #333;
  --btn-chiaro: #fff;

  display: inline-block;
  padding: 0.6em 2.5em !important;
  border: 1px solid #000 !important;
  color: #000 !important;
  border-radius: 999px;
  font-size: 1em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

/* --- Outline: sfondo bianco, all'hover si riempie --- */
.btn-w {
  background-color: var(--btn-chiaro) !important;
  color: var(--btn-colore) !important;
}

.btn-w:hover,
.btn-w:focus-visible {
  background-color: var(--btn-colore) !important;
  color: var(--btn-chiaro) !important;
}

/* --- Pieno: principio contrario, all'hover si svuota --- */
.btn {
  background-color: var(--btn-colore) !important;
  color: var(--btn-chiaro) !important;
}

.btn:hover,
.btn:focus-visible {
  background-color: var(--btn-chiaro) !important;
  color: var(--btn-colore) !important;
}

.btn:focus-visible,
.btn-w:focus-visible {
  outline: 2px solid var(--btn-colore);
  outline-offset: 2px;
}

/* --- Pin: label maps --- */
.pin {
  display: inline-block;
  padding: 0.6em 1em !important;
  border: 1px solid #000 !important;
  border-radius: 0;
  background-color: transparent !important;
  color: #000 !important;
  font-size: 1em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.pin:hover,
.pin:focus-visible {
  background-color: #333 !important;
  border-color: #333 !important;
  color: #fff !important;
}

.pin:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}


/* ! Accordion */
/* --------------------------------------------------------- */

.gb-accordion__toggle,
.gb-accordion__toggle:hover,
.gb-accordion__toggle:focus {
  background-color: transparent;
  color: inherit;
}

/* GB Pro chiude i pannelli con max-height:0, che azzera l'altezza del
   contenuto ma NON il padding: ogni pannello chiuso lasciava comunque
   35px + 25px di vuoto fra un toggle e il successivo. */
.gb-accordion__item:not(.gb-accordion__item-open) > .gb-accordion__content {
  padding-top: 0;
  padding-bottom: 0;
}

/* Il padding entra nella transizione, altrimenti in apertura scatta.
   Specificità doppia perché accordion-style.css del plugin
   viene caricato dopo questo foglio. */
.gb-accordion .gb-accordion__content {
  transition: max-height 0.25s ease, padding 0.25s ease;
}

/* Etichetta nera al passaggio del mouse.
   Il colore va messo sullo <span>, non sul <button>: lo span ha un colore
   proprio e vince comunque sull'ereditarietà. Il trigger però resta il
   toggle, così l'effetto parte da tutta la riga e non solo dalle lettere. */
.gb-accordion__toggle .gb-text {
  transition: color 0.25s ease;
}

.gb-accordion__toggle:hover .gb-text,
.gb-accordion__toggle:focus .gb-text {
  color: var(--contrast);
}




/* ! Navigazione */
/* --------------------------------------------------------- */

/* Sottolineatura all'hover. Uso text-decoration e non un border-bottom
   per due motivi: segue esattamente la larghezza del testo (il border
   coprirebbe anche i 25px di padding laterale che mette GeneratePress)
   e non occupa spazio, quindi le voci non si spostano di un pixel.
   Il colore parte trasparente così la comparsa si può animare.
   Solo le voci di primo livello, escluso il menu off-canvas mobile. */
.main-navigation:not(.slideout-navigation) .main-nav > ul > li > a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
  transition: text-decoration-color 0.25s ease;
}

.main-navigation:not(.slideout-navigation) .main-nav > ul > li > a:hover,
.main-navigation:not(.slideout-navigation) .main-nav > ul > li:focus-within > a {
  text-decoration-color: currentColor;
}


/* ! ABBELLIMENTI */
/* --------------------------------------------------------- */

::selection {
  background: #5a5a5a;
  color: #fff;
}

/* ! Custom ADDINGS  */
/*----------------------------------------------------------------------------------- */

/* ! Stile x hover su svg generateblocks con link  */

.gb-shape {
  display: inline-block;
  transition: transform 0.3s ease-in-out;
  transform-origin: center;
  line-height: 0;
  vertical-align: middle;
}

a:hover .gb-shape {
  transform: scale(1.1);
}

a:hover .gb-shape svg {
  filter: brightness(1.1);
}


/* ! Animation */
/* --------------------------------------------------------- */

.scroll-to-id {
  scroll-margin-top: 120px;
}

.fade-in {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 1.5s ease, transform 1.5s ease;
}



/* ! Accessibilità */
/* --------------------------------------------------------- */


:focus-visible {
  outline: 3px solid #5a5a5a;
  outline-offset: 3px;
}


/* end file */