/*---------------------------------------------------------------------------------
 Theme Name:   IMELCO Budapest 2026
 Theme URI:    https://imelco.com
 Description:  Custom theme for the Budapest2026 website for IMELCO (2025)
 Author:       Jérôme VADON
 Author URI:   https://jerome.vadon.fr
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
------------------------------ ADDITIONAL CSS HERE ------------------------------*/

/* Define custom CSS variables */
:root {
	--TopLeft: 14em;
    --TopSlant: 5deg;
    --BottomSlant: 2.5deg;
}

/* Header & Navigation */
.et_pb_menu_0_tb_header.et_pb_menu { transition: margin-bottom 150ms ease; }

/* Prevent menu items from wrapping */
#page-container header .et_pb_menu .et_pb_menu__menu>nav>ul {
    flex-wrap: nowrap;
    text-wrap-mode: nowrap;
}

/* Logo transition */
#convention-logo img { transition: height 150ms ease, opacity 150ms ease; }

/* Divi sticky nav performance fix */
#main-nav { will-change: transform; transform: translateZ(0); }


/* ========================================================================== */
/* HOME PAGE SPECIFIC STYLES (page-id-34)                                     */
/* ========================================================================== */

/* Main nav position/style on home page */
body.page-id-34:not(.header-is-sticky) #main-nav {
    z-index: 10010;
    position: fixed !important;
    left: 0; top: 0; width: 100% !important;
    padding: 14px 0 !important; margin-top: 0;
    box-shadow: none;
    transition: all 150ms ease;
}

/* Change background color when header becomes sticky on home page */
/* HOME - sticky : forcer le recalcul de hauteur */
body.page-id-34.header-is-sticky #main-nav {
    background-color: #ffffff !important;
}

/* Hide logo initially on home page */
body.page-id-34 #convention-logo img { height: 58px !important; opacity: 0 !important; }

/* Show logo when header becomes sticky on home page */
body.page-id-34.header-is-sticky #convention-logo img { opacity: 1 !important; }


/* ========================================================================== */
/* GENERAL STYLES & COMPONENTS                                                */
/* ========================================================================== */

/* Hide slider thumbs */
#intro-slider .swiper.swiper-thumbs, #mini-slider .swiper.swiper-thumbs { display: none !important }

/* Aspect ratio for image carousel slides */
#intro-slider .dsm_image_carousel_slideshow .dsm_image_carousel_item .dsm_image_carousel_slideshow_bg {
    aspect-ratio: 3 / 1;
    width: 100%;
    background-position: center bottom;
}

/* Partners section spacing fix */
.partners-logo .swiper-container { margin-bottom: 0 !important; }


/* ========================================================================== */
/* OTHER PAGES (NOT HOME)                                                     */
/* ========================================================================== */

/* Default logo size on other pages */
body:not(.page-id-34) #convention-logo,
body:not(.page-id-34) #convention-logo img { height: 90px !important; }

/* Logo size when sticky on other pages */
body:not(.page-id-34) #main-nav.et_pb_sticky #convention-logo,
body:not(.page-id-34) #main-nav.et_pb_sticky #convention-logo img { height: 58px !important; }

.program-card {
	min-height:fit-content;
}
	
/* ========================================================================== */
/* Hero section styles                                                        */
/* ========================================================================== */

#desktop_hero-section { position: relative; aspect-ratio: 21 / 9; }

/* Background image with animating clip-path */
#desktop_hero-section::before {
    content: '';
    position: absolute; top: 0; left: 0; height: 100%; width: 50vw;
    background-image: url('/wp-content/uploads/2025/11/hero_bg-2.webp');
    background-size: cover; background-position: center; z-index: 0;
    animation: morph-top-left 60s ease-in-out infinite;
}

/* Keyframe animation for the shape morphing effect */
@keyframes morph-top-left {
  0% { clip-path: polygon(0% 0%, 82% 0%, 38% 90%, 0% 75%);}
  18% { clip-path: polygon(0% 0%, 92% 0%, 58% 70%, 0% 45%); }
  36% { clip-path: polygon(0% 0%, 92% 0%, 43% 100%, 0% 100%); }
  54% { clip-path: polygon(0% 0%, 62% 0%, 13% 100%, 0% 100%); }
  70% { clip-path: polygon(0% 0%, 62% 40%, 13% 100%, 0% 100%); }
  88% { clip-path: polygon(0% 20%, 72% 0%, 24% 95%, 0% 85%); }
  100% { clip-path: polygon(0% 20%, 72% 0%, 24% 95%, 0% 85%); }
}

/* Utility Class: Force line break on desktop screens only */
@media screen and (min-width: 1024px) {
  .nice-wrap {
    display: block;
	  white-space: nowrap;
    /* margin-top: 1em; */
  }
}

/* Custom header complex background and shape */
#custom-header::after {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    
    /* Stacked backgrounds (SVGs + linear gradient) */
	background-image: url(/wp-content/uploads/2025/12/green.svg), url(/wp-content/uploads/2025/12/orange.svg), url(/wp-content/uploads/2025/12/pink.svg), url(/wp-content/uploads/2025/12/black.svg), linear-gradient(370deg, var(--gcid-primary-color), var(--gcid-heading-color));
  
    background-position:
		clamp(-4em, calc(-2em - (100vw - var(--content-max-width)) / 3), -2em) clamp(80%, calc(80% + (100vw - var(--content-max-width)) / 3), 70%),
		calc(100% + clamp(3em, calc(3em + (100vw - var(--content-max-width)) / 3), 6em)) 50%,
		50% calc(100% + clamp(2em, calc(2em + (100vw - var(--content-max-width)) / 6), 4em)),
		calc(100vw - (100vw - var(--content-max-width)) / 2 - var(--content-max-width) / 3) 50%,
		center;
	
    background-size: 
		auto clamp(16.5%, calc(16.5% + (100vw - var(--content-max-width)) / 3), 33%),
		auto clamp(16.5%, calc(16.5% + (100vw - var(--content-max-width)) / 3), 33%),
		auto clamp(16.5%, calc(16.5% + (100vw - var(--content-max-width)) / 3), 33%),
		auto calc(25vw + 25vh + (var(--content-max-width) / 3)),
		cover
		;
    background-repeat: no-repeat;
  
    /* Trapezoidal mask using CSS variables */
    clip-path: polygon(
        /* A */ 0 var(--TopLeft),
        /* B */ 100% calc(var(--TopLeft) - 100vw * tan(var(--TopSlant))),
        /* C */ 100% 100%,
        /* D */ 0 calc((100% - 100vw * tan(var(--BottomSlant))) - 0em)
    );
}

.mfp-content .mfp-bottom-bar .mfp-title .dsm-image-caption {
display:none;
}

#ask-us form input {
  padding: 1.25em 0.5em !important;
  }

#ask-us form select {
  height: calc(0.15ch + 2.5em) !important;
  width: calc(100% + 0.5em) !important;
  line-height: 2.5em !important;
  }

#ask-us form input,
#ask-us form select,
#ask-us form textarea {
  border:1px solid rgba(3,29,51,0.1);
  background-color: rgb(255 255 255 / 30%);
  transition: all 150ms ease-out;
  box-shadow: 0 1px 1px rgba(3,29,51,0.1), 0 1px 1px rgba(3,29,51,0.1), 0 4px 4px rgba(3,29,51,0.1);
color: rgba(3,29,51,0.5);
}

#ask-us form input:hover,
#ask-us form input:active,
#ask-us form input:focus,
#ask-us form select:hover,
#ask-us form select:active,
#ask-us form select:focus,
#ask-us form textarea:hover,
#ask-us form textarea:active,
#ask-us form textarea:focus {
  border:1px solid rgba(3,29,51,0.25);
 background-color: rgb(255 255 255 / 100%);
 box-shadow: 0 1px 1px rgba(3,29,51,0.25), 0 2px 2px rgba(3,29,51,0.25), 0 4px 4px rgba(3,29,51,0.25);
 color: rgba(3,29,51,1);
   }

#ask-us input[type="submit"] {
padding: 1em 5em !important;
	}





body #main-nav {
	border:0px solid red;
}