/*
Theme Name:  InMode Israel
Theme URI:   https://inmode.co.il
Description: Israel child theme for InMode. RTL / Hebrew layout based on client-theme parent.
Author:      InMode
Author URI:  https://inmode.com
Template:    client-theme
Version:     1.0.4
Text Domain: inmode
Tags:        rtl-language-support
*/

/*
 * All styles are inherited from the parent theme (client-theme/style.css).
 * Israel-specific overrides live in rtl.css (auto-loaded by WordPress when is_rtl() is true).
 * Additional layout tweaks can be added below this comment.
 */

/* ============================================================
   TOP-LEVEL NAV LINK FIX
   Ensure plain (non-dropdown) nav links sit above other
   elements so they remain clickable at all times.
   ============================================================ */
ul#primary-menu > li > a,
ul#provider-menu > li > a {
    position: relative !important;
    z-index: 1000 !important;
}

/* ============================================================
   DROPDOWN STRUCTURE — Option 3 RTL Corporate Teal
   Panel: dark bg, teal top border, smooth opacity/visibility.
   Right-anchored (RTL): box opens under the right edge.
   ============================================================ */
ul#primary-menu > li,
ul#provider-menu > li {
    position: relative;
}

ul.sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Panel — initially hidden via opacity/visibility for smooth transitions */
ul#primary-menu .sub-menu,
ul#provider-menu .sub-menu {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;  /* RTL: anchor to right edge */
    left: auto !important;
    background-color: #1a1a1a !important;
    min-width: 0 !important;
    width: max-content !important;
    max-width: 360px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-top: 3px solid #319d90 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(12px) !important;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease !important;
    pointer-events: none !important;
    z-index: 9999 !important;
}

/* Reveal on hover */
ul#primary-menu > li:hover > .sub-menu,
ul#provider-menu > li:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* .overlay-menu — REMOVED: the JS overlay backdrop div is removed from the DOM
   by our fixNavOverlay() in functions.php. No CSS rules needed. */

/* ============================================================
   DESKTOP DROPDOWN LINK STYLES
   24px / weight 300 — matches Germany design (inmodemd.de)
   ============================================================ */
@media (min-width: 1025px) {
    ul#primary-menu .menu-item-has-children > .sub-menu > li > a,
    ul#provider-menu .menu-item-has-children > .sub-menu > li > a,
    ul#patients-menu .menu-item-has-children > .sub-menu > li > a,
    .nav_provider .menu-item-has-children > .sub-menu > li > a,
    .nav_patient  .menu-item-has-children > .sub-menu > li > a {
        font-size: 24px !important;
        font-weight: 300 !important;
        line-height: 36px !important;
        color: #ffffff !important;
        padding: 10px 15px !important;
        display: block;
        transition: background-color 0.15s ease !important;
    }

    /* Hover: teal background, no text indent */
    ul#primary-menu .sub-menu > li > a:hover,
    ul#provider-menu .sub-menu > li > a:hover {
        background-color: #319d90 !important;
        color: #ffffff !important;
    }
}

/* nav_provider needs HIGHER z-index so its dropdown renders above nav_patient */
.nav_provider {
    position: relative;
    z-index: 200;
}

.nav_patient {
    position: relative;
    z-index: 100;
}

/* ============================================
   TABLET & MOBILE MENU (<=1024px)
   Reset the CSS :hover dropdown for touch devices.
   ============================================ */
@media (max-width: 1024px) {
    ul#primary-menu .sub-menu,
    ul#provider-menu .sub-menu {
        display: none !important;
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        box-shadow: none !important;
        border-top: none !important;
        width: 100% !important;
        max-width: none !important;
    }

    /* Re-enable JS toggle on mobile */
    ul#primary-menu > li.active > .sub-menu,
    ul#provider-menu > li.active > .sub-menu {
        display: block !important;
    }
}