/* 
 Theme Name: Hello Elementor Child
 Theme URI: https://searchmyride.co.za/
 Description: Child theme for Hello Elementor with professional orange button menu and Font Awesome icons
 Author: AIMS-DIGITAL
 Author URI: https://searchmyride.co.za/
 Template: hello-elementor
 Version: 1.0.16
*/

/* ==========================
   MENU CONTAINER (Desktop)
   ========================== */
.elementor-nav-menu.elementor-nav-menu--main {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
}

/* ==========================
   MENU ITEMS (Desktop & Mobile)
   ========================== */
.elementor-nav-menu .elementor-item > a,
.elementor-nav-menu .elementor-item > a span,
.elementor-nav-menu--dropdown .elementor-item > a,
.elementor-nav-menu--dropdown .elementor-item > a span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 22px !important;
    background-color: orange !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15) !important;
    transition: all 0.25s ease-in-out !important;
}

/* ==========================
   HOVER EFFECT
   ========================== */
.elementor-nav-menu .elementor-item > a:hover,
.elementor-nav-menu .elementor-item > a:hover span,
.elementor-nav-menu--dropdown .elementor-item > a:hover,
.elementor-nav-menu--dropdown .elementor-item > a:hover span {
    background-color: #ff9800 !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.25) !important;
}

/* ==========================
   ACTIVE / CURRENT PAGE
   ========================== */
.elementor-nav-menu .elementor-item.elementor-item-active > a,
.elementor-nav-menu .elementor-item.elementor-item-active > a span,
.elementor-nav-menu--dropdown .elementor-item.elementor-item-active > a,
.elementor-nav-menu--dropdown .elementor-item.elementor-item-active > a span,
.elementor-nav-menu .elementor-item.current-menu-item > a,
.elementor-nav-menu .elementor-item.current-menu-item > a span {
    background-color: #ffcc66 !important;
    color: #000 !important;
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.3) !important;
}

/* ==========================
   ICONS INLINE WITH TEXT
   ========================== */
.elementor-nav-menu a i,
.elementor-nav-menu--dropdown a i {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    color: inherit !important; /* matches text color */
    margin-right: 8px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

/* Hover icon effect */
.elementor-nav-menu a:hover i,
.elementor-nav-menu--dropdown a:hover i {
    transform: scale(1.2) rotate(-5deg) !important;
    color: #ffd366 !important;
}

/* ==========================
   MOBILE / HAMBURGER MENU
   ========================== */
.elementor-nav-menu--dropdown,
.elementor-nav-menu--dropdown li {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-left: 0 !important;
}

.elementor-nav-menu--dropdown .elementor-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 16px !important;
    font-size: 16px !important;
}

/* ==========================
   RESPONSIVE ADJUSTMENTS (Small Phones)
   ========================== */
@media (max-width: 768px) {
    .elementor-nav-menu.elementor-nav-menu--main {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .elementor-nav-menu.elementor-nav-menu--main .elementor-item > a,
    .elementor-nav-menu.elementor-nav-menu--main .elementor-item > a span {
        padding: 8px 14px !important;
        font-size: 14px !important;
    }

    .elementor-nav-menu.elementor-nav-menu--main a i {
        font-size: 14px !important;
    }
}

/* ==========================
   HELLO THEME MOBILE MENU - FULL FIXED VERSION
   ========================== */
@media (max-width:1024px){

  /* Full-screen dropdown */
  .site-navigation-dropdown{
    position:fixed!important;
    top:0!important;left:0!important;right:0!important;bottom:0!important;
    z-index:9999999!important;
    background:#fff!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    padding:70px 20px 30px 20px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    max-height:100vh!important;
    -webkit-overflow-scrolling:touch!important;
    transform:translateY(-100%);
    opacity:0;
    transition:all .35s ease-in-out!important;
  }

  /* When open */
  .site-navigation-dropdown[aria-hidden="false"]{
    transform:translateY(0);
    opacity:1;
  }

  /* Close (X) button styling */
  .close-menu-btn{
    position:absolute!important;
    top:20px;right:25px;
    font-size:28px;
    font-weight:700;
    background:none;
    border:none;
    color:#333;
    cursor:pointer;
    z-index:99999999;
    transition:transform .2s ease,color .2s ease;
  }
  .close-menu-btn:hover{transform:scale(1.2);color:orange;}

  /* Menu links */
  .site-navigation-dropdown .menu-item>a{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    background:orange!important;
    color:#fff!important;
    font-weight:600!important;
    padding:8px 14px!important;
    font-size:15px!important;
    border-radius:6px!important;
    margin-bottom:8px!important;
    text-decoration:none!important;
    line-height:1.3!important;
    width:90%!important;
    max-width:360px!important;
    text-align:left!important;
    transition:background .25s ease!important;
  }
  .site-navigation-dropdown .menu-item>a:hover{background:#ff9800!important;}

  /* Submenu arrow indicator */
  .site-navigation-dropdown .menu-item-has-children > a::after {
    content: "\203A"; 
    font-size: 18px;
    font-weight: bold;
    margin-left: auto;
    transition: transform 0.3s ease;
}

  /* Rotate arrow when submenu open */
  .site-navigation-dropdown .menu-item-has-children.focus>a::after,
  .site-navigation-dropdown .menu-item-has-children:hover>a::after{
    transform:rotate(90deg);
  }

  /* Submenu list styling */
  .site-navigation-dropdown .sub-menu{
    display:none;
    flex-direction:column;
    width:90%;
    margin-left:15px;
    margin-top:6px;
  }

  /* Indent & show when parent focused/hovered */
  .site-navigation-dropdown .menu-item-has-children.focus>.sub-menu,
  .site-navigation-dropdown .menu-item-has-children:hover>.sub-menu{
    display:flex;
  }

  .site-navigation-dropdown .sub-menu a{
    background:#f5f5f5!important;
    color:#333!important;
    font-weight:500!important;
    font-size:14px!important;
    border-radius:4px!important;
    margin-bottom:6px!important;
    padding:7px 14px!important;
  }

  /* Scrollbar */
  .site-navigation-dropdown::-webkit-scrollbar{width:6px;}
  .site-navigation-dropdown::-webkit-scrollbar-thumb{
    background-color:rgba(0,0,0,.3);
    border-radius:4px;
  }

  /* Prevent background scroll when open */
  html.elementor-html body{overflow:hidden!important;}
}

/* ==========================
   MENU ICON SPACING FIX
   ========================== */

/* Add consistent gap between icons and text */
.site-navigation-dropdown .menu-item > a i {
    margin-right: 8px !important;   /* space between icon and text */
    font-size: 16px !important;
    vertical-align: middle !important;
}

/* Optional: slightly smaller icons for submenu items */
.site-navigation-dropdown .sub-menu a i {
    margin-right: 6px !important;
    font-size: 14px !important;
}


/* ==========================
   ACTIVE / CURRENT PAGE MENU ITEM HIGHLIGHT
   ========================== */

/* Highlight the active/current page in the mobile dropdown */
.site-navigation-dropdown .menu-item.current-menu-item > a,
.site-navigation-dropdown .menu-item.current-menu-parent > a,
.site-navigation-dropdown .menu-item.current-menu-ancestor > a {
    background-color: #e67300 !important;  /* darker orange shade */
    color: #fff !important;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.3) !important;
    font-weight: 700 !important;
}

/* Optional: slightly highlight the arrow too */
.site-navigation-dropdown .menu-item.current-menu-item > a::after,
.site-navigation-dropdown .menu-item.current-menu-parent > a::after {
    color: #fff !important;
}

/* ==========================
   FORCE MENU ICONS TO #ff8200
   ========================== */

/* Desktop + Elementor Nav Menu icons */
.elementor-nav-menu a i,
.elementor-nav-menu--dropdown a i {
    color: #ff8200 !important;                 /* force icon color */
    text-shadow: 0 0 2px rgba(255,255,255,.7), /* helps on orange buttons */
                 0 1px 2px rgba(0,0,0,.25) !important;
}

/* Keep icons #ff8200 on hover too (only animate) */
.elementor-nav-menu a:hover i,
.elementor-nav-menu--dropdown a:hover i {
    color: #ff8200 !important;
}

/* Hello theme mobile dropdown icons */
.site-navigation-dropdown .menu-item > a i,
.site-navigation-dropdown .sub-menu a i {
    color: #ff8200 !important;
    text-shadow: 0 0 2px rgba(255,255,255,.7),
                 0 1px 2px rgba(0,0,0,.25) !important;
}

/* Keep icons #ff8200 on active/current items too */
.site-navigation-dropdown .menu-item.current-menu-item > a i,
.site-navigation-dropdown .menu-item.current-menu-parent > a i,
.site-navigation-dropdown .menu-item.current-menu-ancestor > a i {
    color: #ff8200 !important;
}