/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/


/* ============================================================
   COMPONENTI CONDIVISI
   ============================================================ */

/* CTA nella hero della home ("Studi di registrazione sonora"):
   .slider-caption è un flex container in colonna senza
   align-items, quindi di default il tema stira il bottone
   (unico figlio) a piena larghezza del contenitore (800px).
   Lo allineiamo al centro cosi' il bottone resta largo quanto
   il suo testo. */
.slider-caption-center {
	align-items: center;
}

/* Bottone sticky WhatsApp (mobile, sincronizzato via js/sticky-cta.js) */
.mobile-sticky-cta { display: none; }
.mobile-sticky-cta.is-visible {
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	background: #25D366;
	text-align: center;
	padding: 12px 0;
	box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
}
.mobile-sticky-cta a {
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
}

/* Card bianca con bordo/ombra (servizi, configurazioni studio, ecc.) */
.ih-card {
	width: 100%;
	display: flex;
	flex-direction: column;
	text-align: left;
	border: 1px solid #e8e8e8;
	border-radius: 0.375rem;
	background: #fff;
	box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.06);
	padding: 1.5rem;
}
.ih-card .mt-auto { margin-top: auto; }

/* Box con bordo dorato in evidenza (colonne sonore, highlight, ecc.) */
.ih-highlight-box {
	background: linear-gradient(135deg, #f9f9f9 0%, #ffffff 100%);
	padding: 30px;
	border-radius: 10px;
	border: 2px solid #cda434;
	box-shadow: 0 4px 15px rgba(205,164,52,0.1);
}

/* Etichetta dorata piccola (Fonico Residente, Studio Manager, ecc.) */
.ih-eyebrow {
	color: #cda434 !important;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* Banner pieno oro (intestazioni di sezione in evidenza) */
.ih-banner-gold {
	background: linear-gradient(135deg, #cda434 0%, #b8922e 100%);
	padding: 30px;
	border-radius: 10px;
	color: white;
	text-align: center;
}


/* ============================================================
   ALLINEAMENTO TESTO E TITOLI — vale su desktop e mobile
   ============================================================ */

/* Rimuove il trattino/bordo decorativo sotto i titoli
   (title-bottom-border) e riduce il margine eccessivo che
   fancy-title aggiunge di default */
.fancy-title {
	margin-bottom: 0.75rem;
}
.title-bottom-border h1, .title-bottom-border .h1,
.title-bottom-border h2, .title-bottom-border .h2,
.title-bottom-border h3, .title-bottom-border .h3,
.title-bottom-border h4, .title-bottom-border .h4,
.title-bottom-border h5, .title-bottom-border .h5,
.title-bottom-border h6, .title-bottom-border .h6 {
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

/* Il tema aggiunge di default 50px di margine sotto ogni
   heading-block, più una barretta decorativa (::after) con
   altri 30px sopra di sé: è la causa principale degli spazi
   enormi sotto i titoli in tutto il sito */
.heading-block {
	margin-bottom: 1.25rem;
}
.heading-block::after {
	display: none;
}

/* Il sottotitolo (lo span subito sotto il titolo) veniva
   racchiuso in un blocco centrato a prescindere dal testo
   allineato a sinistra: lo rendiamo a piena larghezza */
.heading-block > span:not(.before-heading) {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: 0.35rem;
	display: block;
}

/* Testo sempre allineato a sinistra (titoli, paragrafi,
   sottotitoli), sia su desktop che su mobile */
h1, h2, h3, h4, h5, h6,
p, .lead,
.heading-block,
.heading-block > span,
.service-subtitle {
	text-align: left !important;
}

/* Eccezioni: qui il testo centrato resta voluto */
#slider, #slider *,
.parallax.dark, .parallax.dark *,
#footer, #footer *,
.ih-banner-gold, .ih-banner-gold *,
.ih-highlight-box, .ih-highlight-box * {
	text-align: center !important;
}


/* ============================================================
   HERO HOME — titolo "INDIEHUB STUDIO" e sottotitolo
   "AUDIO MONO, STEREO e DOLBY ATMOS": restano sempre su
   un'unica riga, con font-size che si adatta elasticamente
   alla larghezza dello schermo (clamp: minimo, ideale, massimo).
   Lo spazio disponibile e' quello della colonna col-lg-5, non
   l'intero schermo: su mobile le colonne si impilano e la
   colonna diventa full-width, quindi qui la larghezza di
   riferimento e' quella del viewport (vw).
   ============================================================ */
.ih-hero-title {
	white-space: nowrap !important;
	font-size: clamp(0.65rem, 3.6vw, 1.2rem) !important;
}
.ih-hero-heading-block {
	margin-bottom: 0.35rem !important;
}
.ih-hero-subtitle {
	white-space: nowrap !important;
	font-size: clamp(0.72rem, 3.5vw, 1.05rem) !important;
	color: #cda434 !important;
	margin-top: 0 !important;
	margin-bottom: 0.5rem !important;
}
.ih-hero-paragraph {
	font-size: clamp(0.85rem, 2.4vw, 0.95rem) !important;
}

/* ============================================================
   FOOTER — logo bianco al posto della scritta "Indiehub" +
   navigazione di recap a bottoni (Studios / Musica / Audiolibri
   / Prod. Audio)
   ============================================================ */
.ih-footer-logo {
	height: 115px;
	width: auto;
}
.ih-footer-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}
.ih-footer-nav .button {
	margin: 0;
}
.ih-footer-nav .button:hover {
	background-color: #fff !important;
	color: #000 !important;
}

/* Separatore fine tra la navigazione footer e la riga contatti */
.ih-footer-divider {
	height: 1px;
	width: 100%;
	margin: 2rem 0;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 100%);
}

/* Testo piccolo sotto le icone di contatto (whatsapp/email/mappa) */
.ih-footer-contact-sub {
	font-size: 0.75rem;
	line-height: 1.4;
	color: rgba(255,255,255,0.5);
	margin: 0.35rem auto 0;
	max-width: 180px;
}

/* Sotto i 576px i contatti footer passano da 3 affiancati a 1 per riga
   (vedi col-12 col-sm-4 in HTML): qui rimpiccioliamo le icone, che a
   piena dimensione (i-large) risultavano sproporzionate da impilate */
@media (max-width: 575px) {
	.footer-widgets-wrap .i-large.i-plain {
		--cnvs-i-fontsize: 1.9rem;
		--cnvs-i-size: 2.75rem;
	}
}

/* ============================================================
   OTTIMIZZAZIONE MOBILE — a partire da iPhone 12 mini (375px)
   ============================================================ */
@media (max-width: 767px) {

	/* --- Anti scroll orizzontale: evita che un singolo elemento
	   troppo largo (immagine, iframe) sposti tutta la pagina --- */
	html, body {
		overflow-x: hidden;
		max-width: 100%;
	}
	img, iframe, video, embed, object {
		max-width: 100%;
	}

	/* --- Tipografia più contenuta: il tema non riduce affatto
	   i titoli sotto i 768px, causando titoli enormi e a capo
	   in modo brutto sugli schermi piccoli --- */
	h1, .h1 { font-size: 1.65rem; }
	h2, .h2 { font-size: 1.4rem; }
	h3, .h3 { font-size: 1.15rem; }
	h4, .h4 { font-size: 1rem; }

	/* --- Le immagini, quando le colonne affiancate si impilano,
	   restano centrate invece di appiccicarsi a sinistra --- */
	.col-sm-4 > img, .col-sm-4 .img-container,
	.col-sm-5 > img, .col-sm-5 .img-container,
	.col-sm-6 > img, .col-sm-6 .img-container,
	.col-sm-7 > img, .col-sm-7 .img-container,
	.col-sm-8 > img, .col-sm-8 .img-container,
	.col-md-4 > img, .col-md-4 .img-container,
	.col-md-6 > img, .col-md-6 .img-container {
		margin-left: auto !important;
		margin-right: auto !important;
		display: block;
	}
	.img-container {
		text-align: center;
	}
}

/* Griglia statica loghi clienti (ex-carosello in homepage) */
.oc-item img {
	max-height: 45px;
	max-width: 100%;
	width: auto;
}
/* Il tema usa di default 4rem di margine + 4rem di padding per
   ogni .section (circa 128px totali tra una sezione e l'altra):
   troppo per molte delle nostre sezioni più compatte */
:root {
	--cnvs-section-margin: 2rem;
	--cnvs-content-padding: 2.5rem;
	/* Header/logo più grande: riusiamo il valore "lg" già previsto
	   dal tema (di base 100px) invece di inventare una misura
	   nuova. Ingrandisce sia il logo Indiehub che il Dolby Atmos,
	   che sono entrambi legati a questa variabile. */
	--cnvs-header-height: 120px;
	/* Il tema di default restringe l'header/logo a 60px allo
	   scroll (--cnvs-header-height-shrink), pensato per un header
	   di partenza da 100px. Ora che l'header di partenza e' 120px,
	   60px è una riduzione troppo drastica: lo alziamo a 85px cosi'
	   il logo Indiehub resta ben leggibile anche da scrollato.
	   Il logo Dolby Atmos non va toccato: si ridimensiona già in
	   automatico in proporzione (38%) tramite --cnvs-sticky-header-height,
	   quindi seguirà questo stesso valore senza bisogno di modifiche. */
	--cnvs-header-height-shrink: 85px;
}

/* Su mobile l'header restava fissato a 120px (valore pensato per
   desktop): il logo occupava quasi tutta la larghezza disponibile
   e mandava l'hamburger del menu a capo, allargando la banda
   bianca dell'header. Questo blocco deve stare DOPO il :root qui
   sopra: essendo entrambi selettori :root con la stessa
   specificità, vince quello che compare più avanti nel foglio di
   stile, quindi va tenuto in questa posizione perché resti
   effettivo sotto i 768px. */
@media (max-width: 767px) {
	:root {
		--cnvs-header-height: 62px;
		--cnvs-header-height-shrink: 52px;
	}
}

/* Logo Indiehub troppo piccolo su mobile: a differenza del logo Dolby
   (che ha una regola dedicata e scala correttamente in proporzione),
   il logo Indiehub occupa il 100% dell'altezza del contenitore MENO
   un padding fisso di 15px (impostato inline nell'HTML), che su un
   header desktop da 100-120px è proporzionato ma su un header mobile
   da 52-62px diventa una fetta di spazio sproporzionata. Qui lo
   ingrandiamo del 30% e riduciamo il padding solo su mobile.
   Il selettore .logo-default/.logo-dark colpisce solo le due img
   dirette del logo principale, non quelle dentro .dolby-mini (che
   non hanno queste classi), quindi Dolby resta invariato. */
@media (max-width: 767px) {
	#logo img.logo-default,
	#logo img.logo-dark {
		height: calc(var(--cnvs-sticky-header-height) * 1.3) !important;
		padding: 5px !important;
	}
}
/* La sezione "Narratori" (audio.html) aveva una classe propria
   con text-align:center che lasciava il sottotitolo centrato
   mentre il titolo (regola globale) andava a sinistra */
.narrators-heading,
.narrators-heading * {
	text-align: left !important;
}

/* Caroselli: le immagini restano sempre quadrate invece di
   stirarsi in rettangoli (owl-carousel/JS può impostare stili
   inline che sovrascrivono un CSS senza !important) */
/* Caroselli: il contenitore resta un quadrato uniforme (per
   l'allineamento visivo), ma la foto si vede SEMPRE per intero
   nella sua proporzione naturale, senza ritagli (object-fit:
   contain invece di cover) */
.owl-carousel .oc-item {
	position: relative !important;
	width: 100% !important;
	height: 0 !important;
	padding-bottom: 100% !important;
	overflow: hidden !important;
	background: #f5f5f5 !important;
}
.owl-carousel .oc-item a {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	display: block !important;
}
.owl-carousel .oc-item img {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}

/* Eccezione: il carosello loghi clienti resta nella sua
   proporzione naturale, non va squadrato/ritagliato */
#oc-clients.owl-carousel .oc-item {
	position: static !important;
	height: auto !important;
	padding-bottom: 0 !important;
	overflow: visible !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
#oc-clients .oc-item a {
	position: static !important;
	width: auto !important;
	height: auto !important;
	display: inline-block !important;
}
#oc-clients img {
	position: static !important;
	width: auto !important;
	height: auto !important;
	max-height: 50px !important;
	max-width: 100% !important;
	object-fit: contain !important;
}

/* Dimensione massima uniforme per i titoli principali di sezione
   e i paragrafi introduttivi: il riferimento è l'inizio di
   studios.html, la misura di partenza per tutte le pagine */
.heading-block > h1, .heading-block > .h1,
.heading-block > h2, .heading-block > .h2 {
	font-size: 2.125rem !important;
}
p.lead, .heading-block + p {
	font-size: 1.1rem;
}

/* ============================================================
   GALLERIE FOTOGRAFICHE STATICHE (copertine, foto studio, loghi)
   ============================================================ */
#oc-dischi > div, #oc-podcast-selezione > div,
#oc-clients > div,
.row.g-3.justify-content-center > div {
	position: relative;
}
#oc-dischi a, #oc-podcast-selezione a,
.row.g-3.justify-content-center a {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: #f5f5f5;
}
#oc-dischi img, #oc-podcast-selezione img,
.row.g-3.justify-content-center img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Loghi clienti: proporzione naturale, non quadrata
   (reset esplicito delle proprietà della regola generica sopra) */
#oc-clients a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: 60px;
	aspect-ratio: auto !important;
	border-radius: 0 !important;
	overflow: visible !important;
	background: none !important;
}
#oc-clients img {
	max-height: 45px;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ============================================================
   SERVICE CARD (box orizzontale foto+testo: Fonico Residente,
   Studio Manager, servizi musica) — usato su più pagine
   ============================================================ */
.service-card {
	background: white;
	padding: 25px 22px;
	border-radius: 10px;
	margin-bottom: 20px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.08);
	transition: all 0.3s;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 220px;
}
.service-card:hover {
	box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.service-card h3 {
	min-height: auto;
	font-size: 18px;
	margin-bottom: 10px;
}
.service-card p {
	font-size: 14px;
	line-height: 1.6;
	flex-grow: 1;
}

/* Variante semi-trasparente per i box sopra a un video di sfondo */
.service-card-video {
	background: rgba(255,255,255,0.82) !important;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.service-card-video:hover {
	background: rgba(255,255,255,0.94) !important;
}

/* ============================================================
   LOGO DOLBY ATMOS "CERTIFIED" — a fianco del logo Indiehub
   Riusa lo stesso meccanismo del tema (.logo-default/.logo-dark
   dentro #logo) cosi' cambia colore e si ridimensiona in sync
   col logo principale, senza toccare il JS esistente.

   NB1: la visibilita' (nero vs bianco) e' gia' gestita dal tema
   stesso tramite:
     #logo a [class^=logo-] { display:none; }
     #logo a .logo-default  { display:flex; }
   Qui sotto NON tocchiamo mai la proprieta' "display" (niente
   !important su .dolby-mini): aggiungiamo solo le proprieta' di
   layout/dimensione. Farlo altrimenti forza sempre visibili
   entrambe le varianti (bug della doppia icona nero+bianco).

   NB2: il logo principale si rimpicciolisce allo scroll perche'
   il tema aggiorna --cnvs-sticky-header-height (non
   --cnvs-header-height, che resta fisso). Per restare sincronizzati
   in ogni momento leghiamo l'icona Dolby alla STESSA variabile
   dinamica, non a quella statica.

   NB3: la percentuale (38%) e' volutamente piu' bassa che in
   passato: il logo Dolby e' una certificazione, deve leggersi
   come elemento secondario rispetto al logo Indiehub, mai piu'
   grande o dello stesso peso visivo.
   ============================================================ */
.dolby-mini {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: var(--cnvs-sticky-header-height);
	transition: height 0.4s ease;
}
#logo .dolby-mini img {
	height: 40% !important;
	width: auto;
	max-width: none;
	margin: 0 auto;
}
/* Da scrollato (header rimpicciolito) il logo Dolby scende ancora
   un po' in proporzione, per restare ben in secondo piano */
#header.sticky-header-shrink #logo .dolby-mini img {
	height: 30% !important;
}
.dolby-mini-label {
	display: block;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	line-height: 1.35;
	margin-top: 4px;
	white-space: nowrap;
}

/* ============================================================
   BOTTONI "SCOPRI TUTTI I SERVIZI" (Musica / Audiolibri / Prod.
   Audio) — stessa impostazione del bottone "Scrivici su WhatsApp"
   della hero (button-border button-dark button-rounded
   button-large), allineati a sinistra tramite .text-start sul
   contenitore invece di .text-center.

   Il tema imposta .button con white-space:nowrap e padding fisso
   in rem: su schermi stretti (a partire da iPhone 12 mini, 375px)
   il testo più lungo ("Scopri tutti i servizi Prod. Audio") non
   può andare a capo e sfora il container. Sotto i 768px
   permettiamo il wrap su più righe, così il bottone resta sempre
   contenuto nella larghezza disponibile. */
@media (max-width: 767px) {
	.ih-services-cta {
		white-space: normal;
		max-width: 100%;
	}
}

/* ============================================================
   TITOLI GALLERIE DISCHI / PODCAST — il div che compare sopra la
   foto quando ci si passa sopra (desktop) o si tocca (mobile) usa
   una variabile CSS del tema (--cnvs-portfolio-desc-title-size)
   sia per il titolo (h3) sia per il sottotitolo (span, calcolato
   in proporzione al titolo): agendo su questa unica variabile la
   riduzione resta sempre proporzionale tra titolo e sottotitolo,
   su qualunque dimensione di schermo. Valore ridotto del 30%
   rispetto all'originale (1.25rem * 0.7 = 0.875rem). */
#portfolio {
	--cnvs-portfolio-desc-title-size: 0.875rem;
}

/* ============================================================
   FOTO AUDIOLIBRI / PODCAST — zoom sulla foto al posto del
   sollevamento (translateY) usato per le copertine dei Dischi.
   Il tema sposta la foto verso l'alto al passaggio del mouse o al
   tocco; qui la sostituiamo con uno zoom, solo sui grid con
   classe .portfolio-zoom (Audiolibri e Podcast — i Dischi restano
   con l'animazione originale). L'!important serve a vincere la
   regola del tema che imposta translateY(-15%) da desktop in su. */
.portfolio-zoom .portfolio-image img {
	transition: transform 0.3s ease-in-out;
}
.portfolio-zoom .portfolio-item:hover .portfolio-image img {
	transform: scale(1.08) !important;
}