/*
Theme Name: Manipura
Theme URI: https://www.cucinamanipura.it
Description: Tema child di Hello Elementor per Cucina Manipura.
Author: Lab591
Template: hello-elementor
Version: 1.0.0
Requires PHP: 7.4
Text Domain: manipura
*/

/*
 * Lo stile globale (colori, tipografia, bottoni) vive nel Site Kit di Elementor.
 * Qui solo ciò che il Kit non sa esprimere.
 */

/* Margine laterale delle sezioni principali: vale finché la sezione non ha
   un padding proprio impostato in Elementor. */
:root {
	--mp-gutter: 32px;
}
/* Le composizioni che escono dal bordo (foto, scritte giganti) non devono creare scroll orizzontale. */
body {
	overflow-x: clip;
}
.e-con.e-parent {
	--padding-left: var(--mp-gutter);
	--padding-right: var(--mp-gutter);
}

/* Container con sfondo slideshow: l'overlay di Elementor finirebbe sotto le slide. */
.e-con:has(> .elementor-background-slideshow)::before {
	z-index: 1;
}
.e-con:has(> .elementor-background-slideshow) > :not(.elementor-background-slideshow) {
	position: relative;
	z-index: 2;
}

/* Link nei testi del footer: stesso colore del testo, oro all'hover. */
.elementor-location-footer .elementor-widget-text-editor a {
	color: inherit;
}
.elementor-location-footer .elementor-widget-text-editor a:hover {
	color: var(--e-global-color-primary);
}

/* Classe "mp-nowrap" (Avanzate > Classi CSS) su un Titolo: resta su una riga,
   utile per le scritte decorative giganti che escono dal bordo. */
.mp-nowrap .elementor-heading-title {
	white-space: nowrap;
}

/* Classe "mp-arrows-top" su un Carosello immagini: frecce in alto a destra. */
.mp-arrows-top .elementor-image-carousel-wrapper {
	position: static;
}
.mp-arrows-top {
	padding-top: 56px;
}
.mp-arrows-top .elementor-swiper-button {
	top: 0 !important;
	transform: none !important;
	font-size: 26px;
}
.mp-arrows-top .elementor-swiper-button-prev {
	left: auto !important;
	right: 52px !important;
}
.mp-arrows-top .elementor-swiper-button-next {
	right: 0 !important;
}
.mp-arrows-top .elementor-swiper-button:hover {
	opacity: .7;
}

/* Classe "mp-carousel-cover" su un Carosello immagini: tutte le foto alla stessa altezza. */
.mp-carousel-cover .swiper-slide-image {
	width: 100%;
	height: 340px;
	object-fit: cover;
}
@media (max-width: 767px) {
	.mp-carousel-cover .swiper-slide-image {
		height: 300px;
	}
}

/* Classe "mp-form" su un Modulo: campi sottolineati, area messaggio incorniciata. */
.mp-form .elementor-field-textual:focus {
	box-shadow: none;
	border-color: var(--e-global-color-primary);
}
.mp-form textarea.elementor-field-textual {
	border-width: 1px !important;
	margin-top: 26px;
	padding: 14px;
}
.mp-form .elementor-field-type-textarea > label {
	display: none;
}

/* Griglia portfolio: le copertine riempiono sempre la scheda. */
.e-loop-item .elementor-widget-theme-post-featured-image img {
	width: 100%;
}

/* Bottoni: transizione morbida e testo semibold all'hover, come da design. */
.elementor-button {
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.elementor-button:hover,
.elementor-button:focus-visible {
	font-weight: 600;
}