/*
Theme Name:   Waligoo theme
Theme URI:    https://waligoo.com/
Description:  Divi 5 Child Theme
Author:       Waligora David
Author URI:   https://waligoo.com/
Template:     Divi
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  divi-child
*/

/* =========================================
   LAYOUT — CONTAINER WIDTH
========================================= */
.container {
    width: 90% !important;
}
/* ===== END LAYOUT — CONTAINER WIDTH ===== */

/* =========================================
   CUSTOM CURSOR — DOT
========================================= */
.wg-cursor {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 10px;
	height: 10px;
	background: #003049;
	border-radius: 50%;
	pointer-events: none;
	z-index: 9999999;
	will-change: transform;
	display: none;
	transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
	            width 0.4s cubic-bezier(0.23, 1, 0.32, 1),
	            height 0.4s cubic-bezier(0.23, 1, 0.32, 1),
	            opacity 0.3s ease;
}
/* ===== END CUSTOM CURSOR — DOT ===== */


/* =========================================
   CUSTOM CURSOR — RIPPLE CIRCLE
========================================= */
.wg-ripple {
	position: fixed;
	width: 130px;
	height: 130px;
	background: rgba(0, 48, 73, 0.5);
	border-radius: 50%;
	display: none;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	pointer-events: none;
	transform: translate(-50%, -50%) scale(0);
	transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s ease;
	opacity: 0;
	z-index: 9999998;
	
	white-space: normal;
	text-align: center;         /* center the wrapped lines */
	padding: 0 18px;            /* keep text off the circle edge */
	box-sizing: border-box;     /* padding stays inside the 130px */
}

body.has-hover .wg-cursor { display: block; }
body.has-hover .wg-ripple { display: flex; }

.wg-ripple.active {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

.wg-cursor.hidden {
	width: 0px !important;
	height: 0px !important;
	opacity: 0 !important;
}
/* ===== END CUSTOM CURSOR — RIPPLE CIRCLE ===== */



/* =========================================
   BUTTONS — HOVER TRANSITIONS & ICONS
========================================= */
/* 1. Add permanent padding so text doesn't overlap the icon */
.et_pb_button {
    padding-right: 2.2em !important; 
}

/* 2. Force the icon to be visible on the right, and add smooth transition */
.et_pb_button:after {
    opacity: 1 !important;
    right: 0.5em !important; 
    margin-left: 0 !important;
    position: absolute !important;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* 3. Prevent text shift on hover, but keep the icon jump animation */
.et_pb_button:hover {
    padding-right: 2.2em !important;
}
.et_pb_button:hover:after {
    right: 0.5em !important;
    transform: translate(3px, -3px) !important;
}

/* 4. Icon wrap transitions */
.card-hover-transition .et_pb_icon_wrap {
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-hover-transition:hover .et_pb_icon_wrap {
    transform: translate(3px, 3px);
}

/* 5. Custom Button Menu */
.button-menu {
    border: 2px solid #003049 !important;
    padding: 0.4em 1em 0.5em 1em !important;
    color: #003049;
}
/* ===== END BUTTONS — HOVER TRANSITIONS & ICONS ===== */


/* =========================================
   HEADER — FIXED GLASS BAR
========================================= */
/*Header*/
#main-header,
#main-header.et-fixed-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: rgba(120, 120, 120, 0.60) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: none !important;
}
#page-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* ===== END HEADER — FIXED GLASS BAR ===== */

@media (max-width: 980px) {
    .et_pb_column_empty {
        display: none;
    }
    
    /* Keep video columns visible */
    .et_pb_column_empty.et-pb-has-background-video {
        display: block !important;
    }
}


/* =========================================
   VIEW TRANSITIONS (Divi optimized)
========================================= */

/* Enable navigation transitions */
@view-transition {
    navigation: auto;
}

/* Main content */
#et-main-area {
    view-transition-name: et-main-area;
}
/* Header/menu */
#main-header,
#top-header {
    view-transition-name: header;
}

/* Keep header static */
::view-transition-old(header),
::view-transition-new(header) {
    animation: none;
}

/* Transition timing (global) */
::view-transition-group(et-main-area) {
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    overflow: clip;
}

/* OUT */
::view-transition-old(et-main-area) {
    animation: et-fade-out 1s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* IN */
::view-transition-new(et-main-area) {
    animation: et-fade-in 1s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* Keyframes */
@keyframes et-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes et-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Mobile hardening (prevent flicker/jank) */
@media (max-width: 768px) {

    ::view-transition-group(et-main-area) {
        animation-duration: 1s;
    }

    #et-main-area {
        transform: translateZ(0);
        backface-visibility: hidden;
    }
}
/* ===== END VIEW TRANSITIONS (Divi optimized) ===== */


/* =========================================
   SUBMENU — APPEARANCE & LINKS (Standard Only)
========================================= */
.et-menu > li:not(.mega-menu) > .sub-menu {
  border-top: 3px solid #1c3a4a !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
  padding: 0 !important;
}

.et-menu > li:not(.mega-menu) > .sub-menu li a {
  color: #1c3a4a !important;
  font-family: inherit !important;   /* inherits the header's font */
  font-size: 16px !important;        /* match your header link size */
  font-weight: 600 !important;
  padding: 14px 22px !important;
  letter-spacing: normal !important;
}

.et-menu > li:not(.mega-menu) > .sub-menu li a:hover {
  background-color: #f4f6f8 !important;
  color: #1c3a4a !important;
}
/* ===== END SUBMENU — APPEARANCE & LINKS ===== */


/* =========================================
   DROPDOWN — POSITION, GLASS & HOVER BRIDGE (Standard Only)
========================================= */

/* 1. Apply glass effect to ALL standard dropdown levels */
#main-header .nav > li:not(.mega-menu) ul {
    background: rgba(120, 120, 120, 1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: none !important;
}

/* 2. FIRST-LEVEL DROPDOWN: Positioned directly below, normally aligned */
#main-header .nav > li:not(.mega-menu) > ul {
    top: 49px !important; /* Keeps it snug against your header */
    margin-top: 0 !important;
    width: 280px !important; /* Gives your text enough room to breathe */
}

/* 3. SECOND-LEVEL DROPDOWN (Sub-sub-menus): Fly out nicely to the right */
#main-header .nav > li:not(.mega-menu) > ul > li > ul {
    top: 0 !important; /* Keeps the fly-out level with its parent */
    left: 100% !important; /* Pushes it to the right */
}

/* 4. Ensure parent item is positioned relatively for the bridge */
#main-header #top-menu > li.menu-item-has-children:not(.mega-menu) {
    position: relative !important;
    z-index: 100 !important;
}

/* 5. Bridge attached to the item, covering the gap so hover doesn't break */
#main-header #top-menu > li.menu-item-has-children:not(.mega-menu)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;          
    height: 15px;       
    background: transparent;
    pointer-events: auto;
    z-index: 101;
}
/* ===== END DROPDOWN — POSITION, GLASS & HOVER BRIDGE ===== */

/* =========================================
   MEGA MENU — COSMETIC GLASS EFFECT ONLY
========================================= */

/* 1. Main Mega Menu Container: Glass effect */
#main-header .nav li.mega-menu > ul {
    background: rgba(120, 120, 120, 1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: none !important;
    border-top: 3px solid #1c3a4a !important;
	    top: 82px !important; /* Keeps it snug against your header */
    /* We removed custom top/width here so Divi places it perfectly */
}

/* 2. Make inner columns transparent so the glass doesn't stack */
#main-header .nav li.mega-menu > ul > li,
#main-header .nav li.mega-menu > ul > li > ul {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important; /* Removes vertical divider lines */
    box-shadow: none !important;
}

/* 5. Invisible hover bridge so the menu doesn't disappear */
#main-header .nav li.mega-menu > ul::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -30px; /* Reaches up to cover the gap */         
    height: 30px;       
    background: transparent;
    pointer-events: auto;
}
/* ===== END MEGA MENU — COSMETIC GLASS EFFECT ONLY ===== */

.et_pb_column.et_pb_column_empty.keep-bg {
	display: block !important;
}

/* =========================================
   LANGUAGE SWITCHER — DESKTOP ONLY
========================================= */
@media (min-width: 981px) {
    /* 1. Override widths specifically for the language switcher */
    #main-header #top-menu li.pll-parent-menu-item > ul.sub-menu {
        width: 60px !important;
        min-width: 60px !important;
    }

    /* 2. Force zero side-padding to override text menu padding */
    #main-header #top-menu li.pll-parent-menu-item > ul.sub-menu > li > a {
        padding: 12px 0 !important;    
        text-align: center !important; 
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* =========================================
   MOBILE MENU — SCROLLING & FLAGS (980px and smaller)
========================================= */
@media (max-width: 980px) {
    
    /* --- 1. ENABLE SCROLLING --- */
    #main-header .mobile_nav .et_mobile_menu {
        max-height: 70vh !important; 
        overflow-y: auto !important; 
        -webkit-overflow-scrolling: touch !important; 
        overscroll-behavior: contain !important;
        pointer-events: auto !important; 
        /* Removed display:block!important so the menu can close again */
    }
    
    /* Make the mobile menu items a bit more compact */
    #main-header .et_mobile_menu li a {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid rgba(0,0,0,0.05) !important; 
    }

    /* --- 2. FIX FLAGS ON MOBILE --- */
    .et_mobile_menu li.pll-parent-menu-item a img {
        width: 16px !important;
        height: 11px !important;
        display: inline-block !important;
        margin-top: -2px !important; 
    }

    .et_mobile_menu li.pll-parent-menu-item > a,
    .et_mobile_menu li.pll-parent-menu-item > ul.sub-menu > li > a {
        display: flex !important;
        align-items: center !important;
        width: auto !important;
    }
    
    .et_mobile_menu li.pll-parent-menu-item > ul.sub-menu > li > a {
        padding-left: 10% !important; 
    }
}
/* =========================================
   LANGUAGE SWITCHER — CUSTOM DROPDOWN (Desktop nav, NL + EN)
========================================= */
#main-header #top-menu li.menu-item-663.pll-parent-menu-item > ul.sub-menu,
#main-header #top-menu li.menu-item-664.pll-parent-menu-item > ul.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: unset !important;
  min-width: 90px !important;
  flex-direction: column;
  background: #fff;
  padding: 4px 0;
  margin: 0;
  list-style: none;
  z-index: 100;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
#main-header #top-menu li.menu-item-663.pll-parent-menu-item > ul.sub-menu > li.lang-item,
#main-header #top-menu li.menu-item-664.pll-parent-menu-item > ul.sub-menu > li.lang-item {
  display: block !important;
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
}
#main-header #top-menu li.menu-item-663.pll-parent-menu-item > ul.sub-menu > li.lang-item > a,
#main-header #top-menu li.menu-item-664.pll-parent-menu-item > ul.sub-menu > li.lang-item > a {
  display: block !important;
  padding: 6px 16px !important;
  box-sizing: border-box !important;
}
#main-header #top-menu li.menu-item-663.pll-parent-menu-item:hover > ul.sub-menu,
#main-header #top-menu li.menu-item-664.pll-parent-menu-item:hover > ul.sub-menu {
  display: flex;
}
/* ===== END LANGUAGE SWITCHER — CUSTOM DROPDOWN ===== */