/*
Theme Name:  Rouben Child
Theme URI:   http://mysite.com/theme
Description: Rouben Child Theme
Author:      My Name
Author URI:  http://mysite.com/author
Template:    rouben
Version:     1.0.0
License:     General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: rouben-child
*/


/*
Add your custom styles below
*/

.pth-site-logo {
	width: 100px !important;
}

.pth-site-logo img {
	max-width: 100% !important;
	width: 100% !important;
	height: auto !important;
}

/* Move logo higher within header + disable hover fade */
.pth-site-logo {
	position: relative !important;
	top: -50px !important;
}

/* On mobile, logo doesn't need as much offset */
@media only screen and (max-width: 782px) {
	.pth-site-logo {
		top: -20px !important;
	}
}

.pth-site-logo a,
.pth-site-logo a:hover {
	opacity: 1 !important;
	transition: none !important;
}

/* Text overlay - centered over the fullscreen portfolio slider */
.pth-entry__content {
	position: relative !important;
}

.pth-projects--fullscreen {
	position: relative !important;
	z-index: 1 !important;
}

.elementor-61 {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 10 !important;
	pointer-events: none !important;
}

#text-overlay {
	position: absolute !important;
	top: 30% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 100% !important;
	min-height: auto !important;
	height: auto !important;
	pointer-events: none !important;
}

/* Prevent ken burns / scaling from cropping the text */
#text-overlay,
#text-overlay .elementor-slides,
#text-overlay .elementor-slides-wrapper,
#text-overlay .elementor-widget-wrap,
#text-overlay .elementor-widget-container,
#text-overlay .swiper,
#text-overlay .swiper-wrapper,
#text-overlay .swiper-slide,
#text-overlay .swiper-slide-inner,
#text-overlay .swiper-slide-contents {
	overflow: visible !important;
}

#text-overlay * {
	pointer-events: auto;
}

/* Portfolio slider dots & info positioning (moved from Customizer Additional CSS) */
.pth-projects--slideshow .slick-dots li,
.pth-projects--fullscreen .slick-dots li {
	font-size: 18px;
}

.pth-projects--slideshow .slick-dots,
.pth-projects--fullscreen .slick-dots {
	font-size: 18px;
}

.pth-projects--fullscreen .pth-projects__item-info-wrap,
.pth-projects--fullscreen .slick-arrow,
.pth-projects--fullscreen .slick-dots {
	margin-bottom: 20px;
}

/* Mobile: scale text overlay to fit viewport width */
@media only screen and (max-width: 782px) {
	#text-overlay {
		top: 35% !important;
		width: 100vw !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
	}

	#text-overlay .swiper-slide-bg {
		background-size: contain !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
	}

	#text-overlay .swiper-slide {
		height: 200px !important;
	}

	#text-overlay .elementor-widget-container,
	#text-overlay .swiper {
		height: 200px !important;
	}
}

/*
 * Arrow vertical position is set dynamically by JS (bejo_align_arrows)
 * to always match the current slide's .pth-projects__item-title.
 * We just need to ensure the transition is smooth.
 */
.pth-projects--fullscreen .slick-arrow {
	transition: none !important;
}

/* Meta tags layout */
.pth-projects--fullscreen .pth-projects__item-meta span {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
}

.pth-projects--fullscreen .pth-projects__item-meta span > i.pth-sep {
	margin: 0 6px;
}