/*
Theme Name: Twenty Nineteen Child
Template: twentynineteen
Description: My custom child theme for portfolio
Author: Stefano Crose
Version: 1.0.0
*/

/* You can add custom CSS here or import parent styles below */

/* Ensure custom elements can escape header containment */
body .elementor img,
body .elementor iFrame,
.elementor-portfolio-item {
  border-radius: 0.5em;
}
a, a:hover, a:focus, a:active {
    text-decoration: none;
} 
iframe {
  background-color: transparent !important;
}
	h1:not(.site-title):before, 
	h2:before {
		display: none;
	}
	.headerWork h2 {
    white-space: nowrap;
}
	body	p {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}
	a,
	a:focus,
	a:active,
	button:focus {
    outline: none;
}

/* Button animation when reaching footer anchor */
.projectHomeButt {
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(0);
    opacity: 1;
}

/* Hide button when footer anchor is in view */
.projectHomeButt.hide-button {
    transform: translateY(-50px);
    opacity: 0;
    pointer-events: none;
}
#projectContainer .projectComponents > div {
    margin-bottom: 10%;
}
.maxHeightVertical iframe,
.maxHeightVertical img {
    max-height: 90vh;
}
.verticalCorrection img {
    max-height: 90vh;
	width: auto !important;
} 
.verticalCorrection iframe {
    max-height: 90vh;
}
.squaredCorrection img,
.squaredCorrection iframe {
    max-width: 700px !important;
    max-width: 700px !important;
}

.pointerNone {
	pointer-events: none;
}
.correction9-16 .elementor-element.elementor-element-307253a.e-con-full.e-flex.e-con.e-child {
    margin-top: -70px;
}
.elementor-widget-video .elementor-wrapper iframe, .elementor-widget-video .elementor-wrapper video {
    background-color: transparent;
}

/* Hide .projectHomeButt when #footerAnchor is in view (using :has, modern browsers only) */
#footerAnchor:target ~ .projectHomeButt,
#footerAnchor:has(~ .projectHomeButt) .projectHomeButt {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

/* Fallback: .hide-project-home-butt class for JS-based solution */
.hide-project-home-butt {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-100px) !important;
    transition: opacity 0.3s ease-out, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
html, body, canvas, a, button, input, textarea, select, option, label, legend, fieldset, h1, h2, h3, h4, h5, h6, div {
    cursor: default !important;
}
#mobileMenu, #postsNav {
  position: fixed !important;
  z-index: 1000 !important;
}

/* Allow fixed positioning for custom elements */
#mobileMenu .mobile-menu,
#postsNav .custom-post-navigation {
  position: fixed !important;
  z-index: 1001 !important;
}
.footerBtnContainer {
    max-height: 30px;
}

#wallBtn {
    bottom: calc(50vh + 70px) !important;
    width: 225px !important;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
}

#wallBtn h2 {
    position: absolute;
    top: 15px;
}
#homeBtn {
    text-align: right;
    padding: 0;
    width: 105px;
}

/* ========================================
   RESPONSIVE DESIGN - ALL MEDIA QUERIES CONSOLIDATED
   ======================================== */

/* --- MOBILE (480px and below) --- */
@media screen and (max-width: 480px) {
	.headerWork h2 {
		white-space: normal;
	}
	#homeBtn {
		text-align: left;
		padding: 0;
		width: auto;
	}
}
/* --- TABLET (767px and below) --- */
@media screen and (max-width: 767px) {
	.headerWork h2 {
		white-space: wrap;
	}
	#wallBtn{
		display: none;
	}
	
}
/* --- DESKTOP FEATURES DISABLED (1024px and below) --- */
@media screen and (max-width: 1024px) {
	/* Background and color effects */
	body.dark-mode {
		background-color: initial !important;
		color: initial !important;
	}
	
	/* Elements with transform reset */
	.zoom-reveal-container,
	.scroll-reveal-image {
		transform: none !important;
		border-radius: initial !important;
	}
	
	/* Cursor and trail effects */
	.trail-image {
		display: none !important;
	}
	
	/* Cursor dot and rotating text effects */
	.custom-cursor {
		display: none !important;
	}
	
	/* Liquid distortion effects - show original image */
	.portfolio-image img {
		visibility: visible !important;
	}
	.portfolio-image canvas {
		display: none !important;
	}
	
	/* Scroll reveal effects */
	.scroll-reveal-image {
		opacity: 1 !important;
		width: 100%;
		/*display: none !important;*/
	}
	.scroll-reveal-image img {
		opacity: 1 !important;
		visibility: visible;
	}
	/* Elements with display: none */
	.scroll-reveal-image canvas,
	.scroll-reveal-image::before {
		display: none;
	}
	
	/* Video animation */
	.videoAnimation {
		border: none;
	}
	
	/* Hover effects on touch devices */
	*:hover {
		transform: none !important;
		filter: none !important;
	}
	
	/* Smooth scrolling disabled for performance */
	html {
		scroll-behavior: auto !important;
	}
	/* contact bar animation*/
	.footerBtnContainer {
		max-height: none;
	}
	
	/* All elements to hide on mobile/tablet */
	.button-hover-effect,
	[class*="hover-effect"],
	[class*="button-hover"],
	.cursor-dot,
	[class*="cursor-dot"],
	[class*="custom-cursor"],
	.preloader,
	[class*="preloader"],
	[class*="loading-screen"],
	.container-scroll-zoom,
	[class*="scroll-zoom"],
	[class*="zoom-effect"],
	.video-widget-animation,
	[class*="video-animation"],
	[class*="widget-animation"],
	.background-hover,
	[class*="background-hover"],
	[class*="bg-hover"],
	.cursor-images-trail,
	[class*="cursor-trail"],
	[class*="images-trail"],
	.liquid-distortion-images,
	[class*="liquid-distortion"],
	[class*="distortion-effect"],
	.rotating-text,
	[class*="rotating-text"],
	[class*="text-rotation"],
	.custom-post-navigation,
	[class*="post-navigation"],
	[class*="nav-posts"] {
		display: none !important;
	}
}

/* --- TABLET SPECIFIC (768px to 1024px) --- */
@media (min-width: 768px) and (max-width: 1024px) {
	/* Disable complex animations and transitions on tablets */
	[class*="animation"],
	[class*="transition"],
	[class*="transform"],
	[class*="hover"]:hover {
		transition: none !important;
		animation: none !important;
		transform: none !important;
	}
}