/**
* Theme Name: Yve Child
* Description: This is a child theme of Yve, generated by Merlin WP.
* Author: <a href="https://kllr-themes.design">rodbor</a>
* Template: yve
* Version: 3.0.29
*/

/* Home hero image carousel: full-bleed background carousel with centered overlay text.
   Images are managed through the normal WPBakery "Image Carousel" element (Images field),
   no custom admin UI needed. */
.home-hero-carousel {
	position: relative;
	/* z-index (with position) forces this element to establish its own
	   stacking context, so its ::after fade (below) is guaranteed to paint
	   above the carousel's internal slides - the slide/track machinery uses
	   transforms for sliding, which otherwise create their own stacking
	   contexts that can end up compositing above a plain z-index child. */
	z-index: 0;
	height: 70vh;
	min-height: 420px;
	overflow: hidden;
}
.home-hero-carousel .wpb_column,
.home-hero-carousel .vc_column-inner,
.home-hero-carousel .wpb_wrapper,
.home-hero-carousel .wpb_images_carousel,
.home-hero-carousel .vc_slide,
.home-hero-carousel .vc_carousel-inner,
.home-hero-carousel .vc_carousel-slideline,
.home-hero-carousel .vc_carousel-slideline-inner,
.home-hero-carousel .vc_item,
.home-hero-carousel .vc_inner {
	height: 100%;
}
/* WPBakery's carousel has an "autoHeight" mode that measures each slide's
   own natural (aspect-ratio) height in JS and locks it in as an inline
   style - on tall/narrow screens that natural height can be much shorter
   than the full-bleed hero we want, leaving blank space below the photo
   with the text overlay stranded in the middle of it. !important forces
   our full-height rule to win over that inline style regardless of what
   the carousel JS computes, and the image is pinned absolute so it always
   covers the resulting box exactly. */
.home-hero-carousel .vc_item {
	height: 100% !important;
}
.home-hero-carousel .vc_inner {
	height: 100% !important;
	position: relative;
}
.home-hero-carousel .vc_inner img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}
/* Fade the bottom of the carousel into the page's white background,
   instead of a hard cut to the content below. Sits above the slide images
   (see the z-index: 0 stacking-context note on .home-hero-carousel above)
   but below the text chips (z-index 50) and controls (z-index 60).
   Selector uses "body .home-hero-carousel::after" (not just the class) so
   it outranks WPBakery's own ".vc_row::after" Bootstrap-style clearfix rule
   (content: " "; display: table;), which this element also matches and
   which would otherwise fully replace our content/display. */
body .home-hero-carousel::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 140px;
	z-index: 40;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
	pointer-events: none;
}

/* Home intro splash (logo placeholder, fades into the carousel below it -
   see js/home-intro.js and yve_child_render_site_intro() in functions.php). */
.site-intro {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
	opacity: 1;
	transition: opacity 0.6s ease;
}
.site-intro.is-hidden {
	opacity: 0;
	pointer-events: none;
}
.site-intro-logo {
	color: #0d0e15;
	font-size: clamp(28px, 6vw, 56px);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: center;
	padding: 0 24px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.site-intro.is-visible .site-intro-logo {
	opacity: 1;
	transform: translateY(0);
}
html.has-site-intro-active {
	overflow: hidden;
}

/* On Home only: the carousel fills the viewport right below the header, so
   the reveal reads as "logo -> carousel" filling the screen. Header height
   is measured into --site-header-height by home-intro.js (resize-aware); the
   160px fallback covers the no-JS case. */
body.has-site-intro .home-hero-carousel {
	height: calc(100vh - var(--site-header-height, 160px));
}

/* Optional "before/after" comparison block on project pages (see
   yve_child_render_project_before_after() in functions.php). Two variants:
   plain side-by-side figures, or an overlaid draggable-divider slider
   (js/before-after-slider.js). */
.studio-before-after {
	margin: 40px 0;
}
.studio-before-after-side-by-side {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.studio-before-after-side-by-side figure {
	margin: 0;
}
.studio-before-after-side-by-side img {
	width: 100%;
	height: 340px;
	object-fit: cover;
	display: block;
	border-radius: 4px;
}
.studio-before-after-side-by-side figcaption {
	margin-top: 10px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #666666;
}
@media (max-width: 600px) {
	.studio-before-after-side-by-side {
		grid-template-columns: 1fr;
	}
}

.studio-before-after-slider-inner {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	height: 480px;
	user-select: none;
	cursor: ew-resize;
}
.studio-before-after-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.studio-before-after-img-after {
	clip-path: inset(0 50% 0 0);
}
.studio-before-after-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	background-color: #ffffff;
	transform: translateX(-50%);
	pointer-events: none;
}
.studio-before-after-handle span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	transform: translate(-50%, -50%);
	background-color: #ffffff;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
@media (max-width: 600px) {
	.studio-before-after-slider-inner {
		height: 320px;
	}
}

/* Project page title: the theme's default h1 has a fixed 60px font-size
   with no wrap safety, which overflows the viewport on mobile for longer
   project names (single-portfolio.php uses a bare <h1>, unlike the other
   pages which set their own font_container size via WPBakery). Sized down
   further (was clamp(28px, 7vw, 60px)) so longer project names tend to fit
   on a single line instead of just fitting the screen edge-to-edge. */
.single-portfolio h1 {
	font-size: clamp(22px, 3.2vw, 38px);
	overflow-wrap: break-word;
	word-break: break-word;
	margin-bottom: 30px;
}

/* Optional project "main image", shown before the body text (see
   yve_child_render_project_hero_image() in functions.php). */
.studio-project-hero-image {
	margin: 0 0 30px;
}
.studio-project-hero-image img {
	width: 100%;
	max-height: 520px;
	object-fit: cover;
	display: block;
	border-radius: 4px;
}

/* Optional "project drawings" (tavole) gallery, separate from the regular
   photo gallery - reuses .studio-gallery for grid/lightbox styling, with a
   modifier class + heading of its own (yve_child_render_project_tavole()). */
.studio-gallery-tavole-heading {
	margin-top: 50px;
	margin-bottom: 10px;
}
.studio-gallery-tavole {
	margin-top: 0;
}

/* Carousel dots and arrows: WPBakery's defaults are low-contrast grey/black
   and the "active" dot is transparent, so they disappear over photos. */
.home-hero-carousel .vc_carousel-indicators {
	z-index: 60;
	bottom: 22px;
}
.home-hero-carousel .vc_carousel-indicators li {
	width: 11px;
	height: 11px;
	margin: 0 5px;
	background-color: rgba(255, 255, 255, 0.5);
	border: 1px solid #ffffff;
}
.home-hero-carousel .vc_carousel-indicators li.vc_active {
	background-color: #ffffff;
	border: 1px solid #ffffff;
}
.home-hero-carousel .vc_carousel-control {
	z-index: 60;
	top: 50%;
	bottom: auto;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.3);
	opacity: 1;
}
.home-hero-carousel .vc_carousel-control:hover,
.home-hero-carousel .vc_carousel-control:focus {
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 1;
}
.home-hero-carousel .vc_carousel-control.vc_left {
	left: 20px;
}
.home-hero-carousel .vc_carousel-control.vc_right {
	right: 20px;
}
.home-hero-carousel .vc_carousel-control .icon-prev,
.home-hero-carousel .vc_carousel-control .icon-next {
	color: #ffffff;
	font-size: 22px;
}
/* Title and subtitle each sit on their own dark band sized to the text,
   instead of darkening the whole photo, so the carousel image stays
   visible while the white text keeps good contrast. */
.home-hero-overlay-text,
.home-hero-overlay-sub {
	position: absolute;
	left: 50%;
	display: inline-block;
	width: max-content;
	max-width: 90%;
	box-sizing: border-box;
	transform: translateX(-50%);
	z-index: 50;
	text-align: center;
	background-color: rgba(13, 14, 21, 0.6);
	overflow-wrap: break-word;
	word-break: break-word;
}
.home-hero-overlay-text {
	top: 40%;
	transform: translate(-50%, -50%);
	padding: 12px 32px;
	margin: 0;
	/* WPBakery renders this heading with a fixed inline font-size (90px),
	   which overflows the viewport on narrow screens since "Crispidieci" is
	   a single unbroken word that won't wrap. Force a fluid size instead;
	   width: max-content + box-sizing: border-box above (shared with the
	   subtitle) keeps the box's own padding inside the 90% max-width cap,
	   so the dark band never runs past the screen edge either. */
	font-size: clamp(28px, 8vw, 90px) !important;
}
.home-hero-overlay-sub {
	top: 62%;
	transform: translate(-50%, -50%);
	padding: 10px 22px;
}
/* On narrow screens the prev/next arrows (vertically centered) collide with
   the title/subtitle text bands. The dots below still let visitors jump
   between slides, and it auto-plays, so drop the arrows instead of
   cramming everything into a taller carousel. */
@media (max-width: 600px) {
	.home-hero-carousel .vc_carousel-control {
		display: none;
	}
}
/* No client logo yet: hide the parent theme's footer logo placeholder
   (it would otherwise show the Yve demo logo, or a broken image icon). */
.site-footer .logo-footer {
	display: none;
}

.home-hero-overlay-sub p {
	color: #ffffff;
	margin: 0;
}

/* Main office block at the top of the Contact page: address + opening
   hours, set apart from the per-person contact columns below it. */
.studio-main-office {
	background-color: #f5f5f3;
	border-left: 3px solid #0d0e15;
	padding: 18px 24px;
	line-height: 1.7;
}

/* "Open directions" link under the Contact page map: styled like the
   theme's buttons, no API key involved (plain Google Maps URL). */
.studio-map-link {
	display: inline-block;
	background-color: #0d0e15;
	color: #ffffff !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	padding: 14px 26px;
	transition: opacity ease-in-out 300ms;
}
.studio-map-link:hover,
.studio-map-link:focus {
	opacity: 0.7;
}


.site-header {
	margin-top: 32px!important;
	margin-bottom: 32px!important;
}

/* Optional page header banner (Studio, Servizi, ...): a background image
   behind the title with a dark overlay so a white title stays readable.
   Only rendered when a header image is set for the page; otherwise the
   page keeps its plain title as before. */
.page-header-banner {
	position: relative;
	background-size: cover;
	background-position: center;
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 20px;
}
.page-header-banner-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}
.page-header-banner-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 40px 20px;
}
.page-header-banner-inner h1 {
	color: #ffffff !important;
	margin: 0;
}

/* Project photo galleries (single portfolio pages): a responsive card grid
   with real spacing, replacing the edge-to-edge WPBakery "image grid" which
   had no usable gutter. Plain HTML/CSS, no extra JS library. */
.studio-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.studio-gallery a {
	display: block;
	overflow: hidden;
	border-radius: 4px;
}
.studio-gallery img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	display: block;
	margin: 0;
	transition: transform 0.35s ease;
}
.studio-gallery a:hover img {
	transform: scale(1.05);
}

/* Portfolio grid (Home + Portfolio page): the title overlay that appears on
   hover used a light, semi-transparent background with dark text, which is
   hard to read on top of a photo. Switch to a dark, blurred backdrop with
   white text for real contrast. */
.vc_grid-item .vc_gitem-zone.vc_gitem-zone-b {
	background-color: rgba(0, 0, 0, 0.55) !important;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.vc_grid-item .vc_gitem-zone.vc_gitem-zone-b,
.vc_grid-item .vc_gitem-zone.vc_gitem-zone-b .vc_gitem-post-data,
.vc_grid-item .vc_gitem-zone.vc_gitem-zone-b a,
.vc_grid-item .vc_gitem-zone.vc_gitem-zone-b h1,
.vc_grid-item .vc_gitem-zone.vc_gitem-zone-b h2,
.vc_grid-item .vc_gitem-zone.vc_gitem-zone-b h3,
.vc_grid-item .vc_gitem-zone.vc_gitem-zone-b h4,
.vc_grid-item .vc_gitem-zone.vc_gitem-zone-b h5 {
	color: #ffffff !important;
}

/* Project title in the grid overlay, bold as requested. Moved to the "top"
   row of the grid item template (post 32) instead of "middle": WPBakery
   positions top/middle/bottom rows absolutely and independently (middle is
   always vertically centered regardless of content height), so on short
   items the centered title used to collide with the bottom-pinned
   categories row. Top+bottom anchoring keeps them apart at any height. */
.vc_gitem-zone-b .vc_gitem-post-data-source-post_title {
	font-weight: 700;
}
.vc_gitem-zone-b .vc_gitem-row-position-top {
	padding: 12px 14px 0;
}
.vc_gitem-zone-b .vc_gitem-row-position-bottom {
	padding: 0 14px 10px;
}

/* Category badges in the grid overlay (added via vc_gitem_post_categories in
   the shared grid item template, functions.php/vc_grid_item post 32): only
   shown while the "All" filter is active - see js/portfolio-grid-categories.js. */
.vc_gitem-post-data-source-post_categories {
	display: none;
}
.vc_grid-showing-categories .vc_gitem-post-data-source-post_categories {
	display: block;
}
.vc_gitem-post-data-source-post_categories .vc_gitem-post-category-name {
	display: inline-block;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.vc_gitem-post-data-source-post_categories .vc_grid-filter-item:not(:last-child) .vc_gitem-post-category-name::after {
	content: ',\00a0';
}

/* Lightbox for project photo galleries (see js/studio-gallery-lightbox.js):
   clicking a gallery photo opens it in an overlay instead of leaving the
   page, with prev/next controls and a close button. */
.studio-lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
}
.studio-lightbox-overlay.is-open {
	opacity: 1;
	visibility: visible;
}
.studio-lightbox-overlay img {
	max-width: 90vw;
	max-height: 85vh;
	display: block;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.studio-lightbox-close,
.studio-lightbox-prev,
.studio-lightbox-next {
	position: absolute;
	background: rgba(255, 255, 255, 0.1);
	border: none;
	color: #ffffff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	padding: 12px 16px;
	border-radius: 4px;
	transition: background 0.2s ease;
}
.studio-lightbox-close:hover,
.studio-lightbox-prev:hover,
.studio-lightbox-next:hover {
	background: rgba(255, 255, 255, 0.25);
}
.studio-lightbox-close {
	top: 20px;
	right: 20px;
}
.studio-lightbox-prev {
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
}
.studio-lightbox-next {
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
}
@media (max-width: 600px) {
	.studio-lightbox-prev,
	.studio-lightbox-next {
		padding: 8px 12px;
		font-size: 20px;
	}
}

/* Language switcher (flag dropdown), appended as the last item of the main
   navigation menu — see yve_child_add_language_switcher_to_menu() in
   functions.php. Built on <details>/<summary> so it opens/closes without
   any custom JS. */
.lang-switcher-item {
	position: relative;
	list-style: none;
}
.lang-switcher {
	position: relative;
}
.lang-switcher-current {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	padding: 15px 10px;
	list-style: none;
	user-select: none;
}
.lang-switcher-current::-webkit-details-marker {
	display: none;
}
.lang-switcher-current::after {
	content: "";
	width: 0;
	height: 0;
	margin-left: 2px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.6;
}
.lang-switcher[open] .lang-switcher-current::after {
	transform: rotate(180deg);
}
.lang-switcher-current img,
.lang-switcher-menu img {
	width: 18px;
	height: auto;
	vertical-align: middle;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}
.lang-switcher-code {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
}
.lang-switcher-menu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 1000;
	min-width: 140px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: #ffffff;
	border-radius: 4px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.lang-switcher-menu li {
	list-style: none;
}
.lang-switcher-menu a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	white-space: nowrap;
	color: inherit;
	text-decoration: none;
}
.lang-switcher-menu a:hover,
.lang-switcher-menu a:focus {
	background: rgba(0, 0, 0, 0.05);
}
@media (max-width: 767px) {
	.lang-switcher-current {
		padding: 12px 15px;
	}
	.lang-switcher-menu {
		right: auto;
		left: 0;
	}
}