/* TWAINO V8 — MEGA MENU (loaded site-wide) */

/* === COMPACT HEADER 64px === */
.inside-header {
    padding: 0 20px !important;
}
.site-header .header-image {
    width: 150px !important;
    height: auto !important;
    transition: width 0.3s ease;
}

/* === STICKY HEADER === */
.site-header {
    position: sticky;
    top: 0;
    z-index: 999;
    transition: all 0.3s ease;
}
/* WP Admin bar offset */
.admin-bar .site-header {
    top: 32px;
}
@media (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

/* === SHRINK ON SCROLL === */
.site-header.header-shrunk .header-image {
    width: 120px !important;
}
.site-header.header-shrunk .main-navigation .main-nav > ul > li > a {
    padding: 10px 11px !important;
    line-height: 32px !important;
    font-size: 12px !important;
}
.site-header.header-shrunk .main-navigation .main-nav > ul > li.menu-button > a,
.site-header.header-shrunk .main-navigation .main-nav > ul > li.nav-cta-btn > a {
    padding: 5px 14px !important;
    font-size: 11px !important;
}
/* Language switcher shrunk */
.site-header.header-shrunk .pll-parent-menu-item > a {
    padding: 10px 8px !important;
}

/* Nav bar */
.main-navigation .inside-navigation { position: relative; }
.main-navigation .main-nav > ul > li > a {
    font-weight: 500 !important; font-size: 13px !important;
    padding: 14px 15px !important; text-transform: uppercase !important; letter-spacing: 0.3px;
    line-height: 36px !important;
}
/* Uniform spacing: reduce extra padding from dropdown toggle */
.main-navigation .main-nav > ul > li > a > .dropdown-menu-toggle {
    padding-left: 2px !important;
    padding-right: 0 !important;
}

/* === CTA BUTTON — detached from edges with animation === */
.main-navigation .menu-button,
.main-navigation .nav-cta-btn { display: flex; align-items: center; }
.main-navigation .main-nav > ul > li.menu-button > a,
.main-navigation .main-nav > ul > li.nav-cta-btn > a {
    background: #010643 !important; color: #fff !important;
    border-radius: 16px !important; padding: 6px 18px !important;
    font-weight: 600 !important; font-size: 12px !important;
    line-height: 1.4 !important; margin: 8px 0 !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(1, 6, 67, 0.3);
    letter-spacing: 0.5px;
}
/* Hover: subtle lift + lighten effect */
.main-navigation .main-nav > ul > li.menu-button > a:hover,
.main-navigation .main-nav > ul > li.nav-cta-btn > a:hover {
    background: #fff !important; color: #010643 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(1, 6, 67, 0.4) !important;
}
/* Subtle pulse animation to draw attention */
@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(1, 6, 67, 0.3); }
    50% { box-shadow: 0 2px 12px rgba(1, 6, 67, 0.5), 0 0 0 4px rgba(1, 6, 67, 0.08); }
}
.main-navigation .main-nav > ul > li.menu-button > a,
.main-navigation .main-nav > ul > li.nav-cta-btn > a {
    animation: ctaPulse 3s ease-in-out infinite;
}
.main-navigation .main-nav > ul > li.menu-button > a:hover,
.main-navigation .main-nav > ul > li.nav-cta-btn > a:hover {
    animation: none !important;
}

/* --- Mega panel: relative so dropdown positions from the li, not full nav --- */
.main-navigation .main-nav > ul > li.mega-panel { position: relative !important; }

/* The mega sub-menu */
.main-navigation .main-nav > ul > li.mega-panel > ul.sub-menu {
    width: auto !important; max-width: none !important;
    left: 0 !important; right: auto !important;
    top: 100% !important;
    background: #fff !important; border: none !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12) !important;
    padding: 0 !important;
    animation: megaDrop 0.25s ease;
    z-index: 100;
    border-radius: 0 0 14px 14px !important;
}
/* Last mega items: open to the left */
.main-navigation .main-nav > ul > li.mega-panel:nth-last-child(n+1):nth-child(n+4) > ul.sub-menu {
    left: auto !important; right: 0 !important;
}
@keyframes megaDrop { from { opacity: 0; } to { opacity: 1; } }

/* .mega-inner */
.mega-inner {
    display: inline-flex; flex-direction: row; flex-wrap: nowrap;
    gap: 50px; align-items: flex-start;
    padding: 22px 32px;
    box-sizing: border-box;
}

/* .mega-columns */
.mega-columns {
    display: flex; flex-direction: column; flex-wrap: nowrap;
    gap: 0; align-items: flex-start;
    flex: 0 1 auto; min-width: 0;
}

.mega-columns > li {
    list-style: none !important; padding-bottom: 0; min-width: 0;
    flex: 0 0 auto; width: auto !important; float: none !important;
}

.mega-columns > li > a {
    font-size: 14px !important; font-weight: 600 !important; color: #010643 !important;
    padding: 7px 0 !important; text-transform: uppercase !important; letter-spacing: 0.3px;
    border-bottom: 2px solid #56aea4; margin-bottom: 0;
    display: inline-block !important; width: auto !important;
    background: transparent !important; text-decoration: none;
    transition: color 0.2s !important;
    white-space: nowrap !important;
}
.mega-columns > li > a:hover { color: #56aea4 !important; }

.mega-columns > li.menu-item-has-children > a::after {
    content: '' ; display: inline-block; width: 0; height: 0; margin-left: 6px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid #56aea4; vertical-align: middle;
}

.mega-columns .dropdown-menu-toggle { display: none !important; }

.mega-columns > li > ul.sub-menu,
.mega-columns > li.sfHover > ul.sub-menu {
    position: static !important; display: block !important; visibility: visible !important;
    opacity: 1 !important; box-shadow: none !important; left: auto !important;
    padding: 2px 0 4px 14px !important; background: transparent !important; border: none !important;
    width: auto !important; min-width: 0 !important;
    transform: none !important; float: none !important;
    margin-bottom: 2px;
}
.mega-columns > li > ul.sub-menu > li { width: auto !important; float: none !important; list-style: none !important; }
.mega-columns > li > ul.sub-menu > li > a {
    font-size: 12.5px !important; font-weight: 400 !important; color: #777 !important;
    padding: 3px 0 !important; text-transform: none !important;
    transition: color 0.2s, padding-left 0.2s !important; display: block !important;
    background: transparent !important; text-decoration: none; width: auto !important;
    border-bottom: none !important; white-space: nowrap !important;
}
.mega-columns > li > ul.sub-menu > li > a:hover {
    color: #56aea4 !important; padding-left: 4px !important; background: transparent !important;
}

/* 3rd-level */
.mega-columns ul.sub-menu ul.sub-menu,
.mega-columns li.sfHover > ul.sub-menu {
    position: static !important; display: block !important; visibility: visible !important;
    opacity: 1 !important; box-shadow: none !important; left: auto !important;
    padding: 0 0 0 12px !important; background: transparent !important; border: none !important;
    width: auto !important; transform: none !important; float: none !important;
}
.mega-columns ul.sub-menu ul.sub-menu li a {
    font-size: 12px !important; color: #999 !important; padding: 2px 0 !important;
    background: transparent !important; border-bottom: none !important;
}
.mega-columns ul.sub-menu ul.sub-menu li a:hover { color: #56aea4 !important; }

/* --- Mega promo card --- */
.mega-promo-card {
    flex: 0 0 220px; margin-left: 0;
    background: linear-gradient(135deg, #f0faf9, #e8f5f3); border-radius: 14px;
    padding: 18px; display: flex; flex-direction: column;
    border: 1px solid #d4ece8; transition: all 0.3s;
    align-self: flex-start;
}
.mega-promo-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(86,174,164,0.15); }
.mega-promo-card img { width: 100%; height: 120px; object-fit: cover; border-radius: 10px; margin-bottom: 10px; }
.mega-promo-card .mega-promo-title { font-size: 13px; font-weight: 700; color: #010643; margin: 0 0 5px; display: block; }
.mega-promo-card p { font-size: 11px; color: #575760; line-height: 1.5; margin: 0 0 10px; }
.mega-promo-card > a {
    display: inline-block; background: #56aea4; color: #fff !important; padding: 8px 16px;
    border-radius: 18px; font-size: 12px; font-weight: 600; text-decoration: none;
    transition: background 0.3s; text-align: center; margin-top: auto;
}
.mega-promo-card > a:hover { background: #0099bc; }

/* --- Regular (non-mega) dropdowns --- */
.main-navigation .main-nav > ul > li:not(.mega-panel) ul.sub-menu {
    border-radius: 0 0 10px 10px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    border: none !important; padding: 10px !important;
    top: 100% !important;
}
.main-navigation .main-nav > ul > li:not(.mega-panel) ul.sub-menu li a {
    color: #333 !important; font-size: 13px !important; padding: 6px 12px !important;
    border-radius: 4px; text-transform: none !important; font-weight: 400 !important;
}
.main-navigation .main-nav > ul > li:not(.mega-panel) ul.sub-menu li a:hover { background: #f0faf9 !important; color: #56aea4 !important; }

/* === LANGUAGE SWITCHER: flags ONLY, hide ALL text === */
/* Parent link: hide text, show only flag */
#menu-item-36027 > a,
#menu-item-36032 > a,
li.pll-parent-menu-item > a {
    font-size: 0 !important;
    padding: 14px 10px !important;
    display: flex !important;
    align-items: center !important;
    line-height: 36px !important;
}
/* Hide language name span in parent */
#menu-item-36027 > a > span,
#menu-item-36032 > a > span,
li.pll-parent-menu-item > a > span {
    display: none !important;
}
/* Keep parent flag visible */
#menu-item-36027 > a > img,
#menu-item-36032 > a > img,
li.pll-parent-menu-item > a > img {
    display: inline-block !important;
    vertical-align: middle !important;
}
/* Dropdown container */
#menu-item-36027 > ul.sub-menu,
#menu-item-36032 > ul.sub-menu,
li.pll-parent-menu-item > ul.sub-menu {
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    width: auto !important;
    min-width: 44px !important;
    max-width: none !important;
    padding: 6px !important;
    background: #fff !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    border-radius: 0 0 10px 10px !important;
    overflow: visible !important;
    height: auto !important;
    top: 100% !important;
}
/* Dropdown links */
#menu-item-36027 > ul.sub-menu > li > a,
#menu-item-36032 > ul.sub-menu > li > a,
li.pll-parent-menu-item > ul.sub-menu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 10px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    border-bottom: none !important;
    text-transform: none !important;
}
#menu-item-36027 > ul.sub-menu > li > a:hover,
#menu-item-36032 > ul.sub-menu > li > a:hover,
li.pll-parent-menu-item > ul.sub-menu > li > a:hover {
    background: #f0faf9 !important;
}
/* Hide text spans in dropdown */
#menu-item-36027 > ul.sub-menu > li > a > span,
#menu-item-36032 > ul.sub-menu > li > a > span,
li.pll-parent-menu-item > ul.sub-menu > li > a > span {
    display: none !important;
}
/* Show flag images in dropdown */
#menu-item-36027 > ul.sub-menu > li > a > img,
#menu-item-36032 > ul.sub-menu > li > a > img,
li.pll-parent-menu-item > ul.sub-menu > li > a > img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 12px !important;
    min-width: 12px !important;
    height: 8px !important;
    min-height: 8px !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
}

/* === NAV ITEMS: subtle hover underline effect === */
.main-navigation .main-nav > ul > li:not(.menu-button):not(.nav-cta-btn):not(.pll-parent-menu-item) > a {
    position: relative !important;
}
.main-navigation .main-nav > ul > li:not(.menu-button):not(.nav-cta-btn):not(.pll-parent-menu-item) > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 10px !important;
    left: 13px !important;
    right: 13px !important;
    height: 2px !important;
    background: #fff !important;
    transform: scaleX(0) !important;
    transition: transform 0.3s ease !important;
    transform-origin: center !important;
}
.main-navigation .main-nav > ul > li:not(.menu-button):not(.nav-cta-btn):not(.pll-parent-menu-item) > a:hover::after,
.main-navigation .main-nav > ul > li:not(.menu-button):not(.nav-cta-btn):not(.pll-parent-menu-item).sfHover > a::after {
    transform: scaleX(1) !important;
}

/* === MOBILE RESPONSIVE === */
@media (max-width: 768px) {
    .inside-header {
        padding: 5px 15px !important;
    }
    .site-header.header-shrunk .main-navigation .main-nav ul li a {
        line-height: 60px !important;
        font-size: inherit !important;
        padding: initial !important;
    }
    .site-header.header-shrunk .header-image {
        width: 130px !important;
    }
    .mega-promo-card { display: none; }
    /* Reset nav hover underlines on mobile */
    .main-navigation .main-nav > ul > li > a::after {
        display: none !important;
    }
    /* CTA no pulse on mobile */
    .main-navigation .menu-button > a,
    .main-navigation .nav-cta-btn > a {
        animation: none !important;
    }
}