/*
Theme Name: Oshin Child
Description: Oshin Child Theme
Author: Brand Exponents
Template: oshin
Version: 1.2.0
*/

@import url("../oshin/style.css");


/* ==========================================================================
   Correzioni per il sito di Franca Rossi
   --------------------------------------------------------------------------
   Aggiunte dopo il passaggio da Oshin 3.1 a Oshine 7.3.2, per rimettere
   l'aspetto com'era in produzione. Stanno qui e non nel tema padre proprio
   perche' il tema padre verra' aggiornato ancora, e queste righe devono
   sopravvivere a quegli aggiornamenti.
   ========================================================================== */


/* La riga di separazione sotto l'intestazione
   --------------------------------------------------------------------------
   Il tema nuovo disegna la riga con uno span dedicato posizionato in fondo
   all'intestazione. Il menu a tendina si apre piu' in alto di quella quota,
   quindi la riga gli passa sopra e lo taglia: sul fondo bianco della pagina
   si nota appena, sul fondo nero della tendina diventa una riga chiara.
   Alzando la tendina sopra la riga il difetto sparisce, e il risultato e'
   quello del sito in produzione, dove la riga si interrompe dietro al menu.

   Le due righe portano !important perche' il foglio del tema figlio viene
   caricato prima di alcuni fogli del tema padre: a parita' di peso del
   selettore vincerebbe l'ultimo arrivato, cioe' il padre. */

#navigation .sub-menu,
#navigation .children,
#navigation-left-side .sub-menu,
#navigation-left-side .children,
#navigation-right-side .sub-menu,
#navigation-right-side .children {
	z-index: 20 !important;
}

.header-border {
	z-index: 1 !important;
}


/* Margini interni delle colonne con sfondo colorato
   --------------------------------------------------------------------------
   Non si corregge da qui, e non e' una dimenticanza.

   Nel riquadro grigio della home il testo toccava i bordi. Il difetto c'era
   gia' sul sito in produzione, quindi non l'ha introdotto la migrazione.

   Si sarebbe potuto rimediare con una riga di CSS, ma non esiste un selettore
   onesto: le colonne con lo sfondo non si distinguono dalle altre per una
   classe, e il colore viene applicato con un identificativo diverso per ogni
   colonna. Una regola scritta su quegli identificativi smetterebbe di valere
   al primo ritocco della pagina.

   Il margine e' stato impostato dove Tatsu se lo aspetta, cioe' sulla singola
   colonna, a 30px come le altre colonne dello stesso tipo gia' presenti nel
   sito. Resta modificabile dall'impaginatore come una normale proprieta'. */


/* Griglie che contengono una sola immagine
   --------------------------------------------------------------------------
   Il modulo griglia distanzia fra loro gli elementi che contiene: margini ai
   lati delle righe e cinquanta pixel sotto ogni cella, piu' lo stacco sotto
   il paragrafo dell'immagine. Con piu' immagini quello spazio serve, con una
   sola diventa un bordo storto: nella home la foto aveva quaranta pixel di
   grigio sopra e centodieci sotto.

   Qui si azzera la sola spaziatura verticale, e solo quando la cella e' unica.
   Lo spazio che resta sopra e sotto e' allora quello della colonna, uguale
   dalle due parti.

   I margini laterali della riga si lasciano stare apposta: sono loro a tenere
   l'immagine centrata nella colonna, e togliendoli scivola verso un lato. Ai
   fianchi restano quindi piu' pixel che sopra e sotto, il che su una foto
   verticale e' esattamente come deve essere: quello che conta e' che i due
   lati siano uguali fra loro, e lo sono. */

.grid-row > .grid-col:only-child {
	padding-top: 0;
	padding-bottom: 0;
}

.grid-row > .grid-col:only-child .grid-info p:last-child {
	margin-bottom: 0;
}


/* La firma in fondo al footer
   --------------------------------------------------------------------------
   Una riga sola: il diritto d'autore con il nome cliccabile. Sta su un <span>,
   reso blocco perche' occupi la sua riga anche se un domani gli si affiancasse
   dell'altro testo. Va bene cosi' a qualsiasi larghezza. */

.footer-content-inner-center .rf-copyright {
	display: block;
	line-height: 1.75;
}

/* Il nome porta un filo sotto invece della sottolineatura piena, che a questo
   corpo risulterebbe pesante. Al passaggio del mouse il filo sparisce. */
.footer-content-inner-center .rf-copyright a {
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}

.footer-content-inner-center .rf-copyright a:hover,
.footer-content-inner-center .rf-copyright a:focus-visible {
	border-bottom-color: transparent;
}


/* Il footer sul telefono
   --------------------------------------------------------------------------
   Due cose da sistemare sotto i 768 pixel.

   La prima: le tre fasce della firma restano affiancate a qualsiasi larghezza,
   anche quando due sono vuote come qui, e la firma finiva schiacciata in un
   terzo di schermo, con 240 pixel utili su 375. Ognuna prende tutta la riga.

   La seconda: gli spazi verticali. Il tema mette 70 pixel sopra e sotto la
   fascia dei widget e altri 60 sotto ognuno dei tre blocchi. Sul monitor
   grande i blocchi stanno affiancati e quei 60 pixel si vedono una volta
   sola; sul telefono si incolonnano e si sommano, e il footer diventa una
   distesa di bianco. Qui si dimezzano, e sotto l'ultimo blocco si tolgono
   del tutto perche' li' subentra gia' lo stacco della fascia. */

@media only screen and (max-width: 767px) {

	.footer-left-area,
	.footer-center-area,
	.footer-right-area {
		width: 100%;
		float: none;
		padding-left: 0;
		padding-right: 0;
	}

	/* Il padding di questa fascia il tema lo scrive dentro la pagina, quindi
	   arriva dopo il foglio del figlio e vincerebbe lui: serve !important. */
	#footer-wrap {
		flex-wrap: wrap;
		padding-top: 18px !important;
		padding-bottom: 18px !important;
	}

	#bottom-widgets {
		padding-top: 35px;
		padding-bottom: 30px;
	}

	#bottom-widgets-wrap > .column-block {
		margin-bottom: 30px;
	}

	#bottom-widgets-wrap > .column-block:last-child {
		margin-bottom: 0;
	}
}


/* ==========================================================================
   Pagine di solo testo: le informative privacy e cookie
   Sono le uniche pagine senza il costruttore. Il tema le mette in una
   colonna da 940 px, che a 14 px fa righe da 130 caratteri: troppo lunghe
   per un testo che va letto per intero. Si stringe la colonna e si mettono
   a sinistra le intestazioni della tabella, che il tema centra.
   ========================================================================== */

body.page-template-default #content-wrap.no-page-builder #page-content {
	max-width: 760px !important;
	margin-left: auto;
	margin-right: auto;
}

body.page-template-default .no-page-builder h2 {
	margin-top: 44px;
}

body.page-template-default .no-page-builder h3 {
	margin-top: 28px;
}

/* La tabella dei cookie: tre colonne, di cui due sono un nome e una durata.
   Il tema dà a ogni colonna una quota fissa della larghezza, e così i nomi
   andavano a capo a metà parola e «Durata» si spezzava in due. Qui la prima
   e l'ultima colonna si stringono su quello che contengono, senza a capo,
   e tutto il resto va alla descrizione, che è l'unica che può andare a capo. */
body.page-template-default .no-page-builder table {
	width: 100%;
	margin: 18px 0 26px;
	font-size: 13.5px;
	border-collapse: collapse;
	border-color: #e6e6e3;
}

body.page-template-default .no-page-builder th {
	text-align: left !important;
	width: auto !important;
	font-weight: 700;
	white-space: nowrap;
	padding: 9px 18px 9px 12px;
	border-color: #e6e6e3;
}

body.page-template-default .no-page-builder td {
	padding: 10px 18px 10px 12px;
	vertical-align: top;
	line-height: 1.55;
	border-color: #e6e6e3;
}

body.page-template-default .no-page-builder th:first-child,
body.page-template-default .no-page-builder td:first-child,
body.page-template-default .no-page-builder th:last-child,
body.page-template-default .no-page-builder td:last-child {
	width: 1% !important;
	white-space: nowrap;
}

body.page-template-default .no-page-builder code {
	font-family: Consolas, "Courier New", monospace;
	font-size: 13px;
	background: #f2f2f0;
	padding: 1px 5px;
	border-radius: 2px;
	white-space: nowrap;
}

/* Sul telefono la tabella scorre di lato invece di schiacciarsi. */
@media (max-width: 600px) {
	body.page-template-default .no-page-builder table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* Piede: i collegamenti legali hanno una riga loro, sopra la firma.
   Sulla stessa riga della firma facevano confusione: la firma è di chi ha
   fatto il sito, i collegamenti riguardano chi lo visita. Sono due cose
   diverse e stanno su due righe. La firma resta ultima, dove sta una firma. */
.footer-content-inner-center .rf-legale {
	display: block;
	margin-bottom: 7px;
	line-height: 1.75;
}

.footer-content-inner-center .rf-legale a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}

.footer-content-inner-center .rf-legale a:hover,
.footer-content-inner-center .rf-legale a:focus-visible {
	border-bottom-color: transparent;
}


/* ==========================================================================
   Fascia del titolo delle pagine di solo testo
   Compare solo sulle pagine senza impaginatore: le due informative, e le
   eventuali pagine di testo future. Il tema mette il titolo a sinistra e le
   briciole a destra, su tutta la larghezza, mentre il testo sotto sta in una
   colonna centrata: le due cose non si parlano. Il titolo va al centro, come
   il logo e il menu sopra di lui. Le briciole spariscono: sotto un titolo
   centrato direbbero «Home / Informativa sulla privacy», cioè lo stesso
   testo un'altra volta, e su un sito a due livelli non servono a orientarsi.
   ========================================================================== */

.title-module-wrap .be-wrap {
	text-align: center;
}

.title-module-wrap .page-title-custom {
	float: none !important;
	width: 100% !important;
	text-align: center;
}

.title-module-wrap .page-title-custom h1,
.title-module-wrap .page-title-custom h2,
.title-module-wrap .page-title-custom h3 {
	text-align: center;
}

.title-module-wrap .header-breadcrumb {
	display: none;
}

/* ----------------------------------------------------------------------
   Immagini delle gallerie
   ----------------------------------------------------------------------
   Il tema tiene trasparenti le immagini delle gallerie finché il suo
   JavaScript non le scopre una a una. Noi il rinvio lo facciamo fare al
   browser (vedi inc/immagini.php), quindi quel JavaScript non passa e le
   immagini resterebbero invisibili. Qui si annulla la sua regola.
   -------------------------------------------------------------------- */

body:not(.tatsu-frame) .portfolio-lazy-load .thumb-wrap img {
	opacity: 1;
}

/* ----------------------------------------------------------------------
   Il tema tiene la galleria «nascosta» finché non ha incastrato le celle.
   Nascosta però vuol dire, per il browser, che non c'è: e quello che non
   c'è non si può rinviare, così le immagini partirebbero tutte subito.
   Qui la galleria resta visibile ma trasparente: l'effetto per chi guarda
   è identico, il rinvio invece funziona. Senza JavaScript resta opaca,
   perché la classe qui sotto la mette lo script.
   -------------------------------------------------------------------- */

html.rf-js body:not(.tatsu-frame) .portfolio-lazy-load .portfolio-container {
	visibility: visible;
	opacity: 0;
	transition: opacity 0.35s ease;
}

html.rf-js body:not(.tatsu-frame) .portfolio-lazy-load .portfolio-container.rf-pronta {
	opacity: 1;
}

/* ----------------------------------------------------------------------
   Modulo dei contatti
   ----------------------------------------------------------------------
   Il campo trappola: una persona non lo vede e non ci arriva col
   tabulatore, i programmi automatici lo compilano. Si porta fuori dallo
   schermo invece di nasconderlo, perché un campo con display:none i
   programmi fatti meglio imparano a saltarlo.
   -------------------------------------------------------------------- */

.rf-trappola {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Il consenso: casella e frase sulla stessa riga, con la frase più piccola
   del testo dei campi, che è il posto giusto per una nota di servizio. */

.contact_form .field_consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 6px 0 18px;
}

.contact_form .field_consent .consent-checkbox {
	flex: 0 0 auto;
	margin-top: 3px;
	width: 16px;
	height: 16px;
}

.contact_form .field_consent .consent-message {
	font-size: 13px;
	line-height: 1.5;
	opacity: 0.85;
}

/* ----------------------------------------------------------------------
   Le voci del menù in testata
   ----------------------------------------------------------------------
   Questa testata mette il nome al centro e divide le voci in due gruppi,
   uno per lato. Ogni gruppo ha una larghezza fissa, e con l'aggiunta di
   «Contatti» quello di destra non ci stava più: l'ultima voce finiva su una
   seconda riga. Si stringe di cinque pixel per lato lo spazio attorno a
   ogni voce, che a occhio non si vede e recupera quaranta pixel, quanto
   basta con un margine.
   -------------------------------------------------------------------- */

#navigation-left-side .menu > ul > li > a,
#navigation-right-side .menu > ul > li > a,
#left-menu > li > a,
#right-menu > li > a {
	padding-left: 15px;
	padding-right: 15px;
}

/* Fra i 961 e i 1279 pixel i due gruppi di voci si stringono ancora, perché
   la testata li fa rimpicciolire insieme alla finestra. Lì si recupera anche
   lo spazio vuoto attorno al nome, che è di quasi ottanta pixel per lato:
   ne bastano venti perché il nome resti staccato. Sotto i 960 comanda il
   menù a scomparsa e non serve più niente. */

@media only screen and (min-width: 961px) and (max-width: 1279px) {

	#header-inner-wrap #navigation-right-side {
		padding-left: 110px;
	}

	#header-inner-wrap #navigation-left-side {
		padding-right: 110px;
	}

	#navigation-left-side .menu > ul > li > a,
	#navigation-right-side .menu > ul > li > a,
	#navigation-left-side #left-menu > li > a,
	#navigation-right-side #right-menu > li > a {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* ----------------------------------------------------------------------
   Il riquadro che segue il tasto Tab
   ----------------------------------------------------------------------
   Chi non puo' usare il mouse si sposta nella pagina col tasto Tab, e il
   browser disegna un riquadro intorno alla voce su cui si trova. Il tema lo
   toglie in una quarantina di punti, in quattro dei quali anche con
   «!important»: il risultato e' che si naviga alla cieca, senza sapere se il
   prossimo invio aprira' «Collezioni» oppure «Contatti».

   Qui si rimette, ma solo con «:focus-visible», che il browser accende
   quando il fuoco arriva da tastiera e non da un click: per chi usa il mouse
   non cambia niente, nessun alone intorno ai pulsanti appena premuti.

   Il colore e' «currentColor», cioe' quello del testo dell'elemento stesso,
   cosi' il riquadro resta leggibile sia sulle parti chiare sia su quelle
   scure senza elencare i casi uno per uno.

   Il banner dei cookie ha gia' i suoi riquadri e se li tiene: le sue regole
   sono piu' specifiche di queste e vincono da sole.
   -------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 2px !important;
}

/* I pulsanti sono il caso che «currentColor» da solo non copre: hanno un fondo
   loro, spesso colorato o scuro, e il testo sopra e' chiaro. L'anello prendeva
   quindi il bianco del testo e veniva disegnato appena fuori dal pulsante,
   cioe' sulla pagina chiara: bianco su bianco, invisibile. Il pulsante «Invia»
   del modulo contatti, che e' blu con la scritta bianca, faceva esattamente
   questo.

   Per i pulsanti si usa allora lo stesso accorgimento del banner dei cookie:
   anello scuro staccato di due pixel, e quei due pixel riempiti di bianco.
   Cosi' il contorno resta visibile sia quando cade sul chiaro sia quando cade
   sullo scuro, senza dipendere dal colore del testo. */

button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible {
	outline: 2px solid #111111 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #ffffff !important;
}

/* ----------------------------------------------------------------------
   La descrizione dell'opera, sulla miniatura
   ----------------------------------------------------------------------
   Ogni foto della galleria ha una descrizione scritta a mano, ma vive
   nell'attributo «alt», che non si vede: serve ai motori di ricerca e a chi
   usa un lettore di schermo. Qui la si mostra anche a chi guarda, come una
   striscia in fondo alla foto che compare passandoci sopra.

   La striscia ha un fondo scuro sfumato proprio, e non si appoggia alla
   velatura del tema, che è quasi trasparente: su una foto chiara il testo
   bianco non si leggerebbe.

   Non compare da sola sui dispositivi a tocco, dove non esiste il passaggio
   del mouse: lì la descrizione si legge aprendo la foto, dove ora l'ingranditore
   la mostra. -------------------------------------------------------------- */

.portfolio-container .flip-img-wrap {
	position: relative;
}

.portfolio-container .rf-didascalia {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	box-sizing: border-box;
	padding: 34px 14px 12px;
	background: linear-gradient( to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0) 100% );
	color: #fff;
	font-size: 13px;
	line-height: 1.35;
	text-align: left;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.28s ease, transform 0.28s ease;
	pointer-events: none;
}

.portfolio-container .element:hover .rf-didascalia,
.portfolio-container .element:focus-within .rf-didascalia {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.portfolio-container .rf-didascalia {
		transition: none;
		transform: none;
	}
}