/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/

/* =========================================
   Header Menu Styling (Salient)
   LGU colors: #3B82F6, #06B6D4, #14B8A6
   ========================================= */

/* General link hover accent */
#header-outer nav > ul > li > a,
#header-outer nav ul li a{
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

#header-outer nav ul li a:hover,
#header-outer nav ul li a:focus{
  color: #06B6D4;
}

/* Active/current item */
#header-outer nav ul li.current-menu-item > a,
#header-outer nav ul li.current_page_item > a{
  color: #14B8A6;
}

/* Dropdown panel (background + subtle border) */
#header-outer nav ul li ul.sub-menu{
  border-radius: 14px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 18px 44px rgba(15,23,42,0.12);
}

/* Dropdown links */
#header-outer nav ul li ul.sub-menu li a{
  padding: 10px 14px;
}
#header-outer nav ul li ul.sub-menu li a:hover{
  background: rgba(6,182,212,0.10);
  color: #0f172a;
}

/* CTA menu item (assign a class to the menu item: menu-cta) */
#header-outer nav ul li.menu-cta > a{
  background: #14B8A6 !important;
  color: #fff !important;
  border-radius: 999px;
  padding: 10px 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  border: 1px solid rgba(255,255,255,0.0) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,0.12);
}

#header-outer nav ul li.menu-cta > a:hover,
#header-outer nav ul li.menu-cta > a:focus{
  background: #06B6D4 !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Make CTA look good on mobile menu too */
@media (max-width: 1000px){
  #header-outer nav ul li.menu-cta > a{
    border-radius: 14px;
    padding: 12px 14px !important;
    box-shadow: none;
  }
}

/* =========================================
   Transparent header over hero
   ========================================= */

/* Transparent state (homepage hero) */
body.home #header-outer{
  background: transparent !important;
  box-shadow: none !important;
  transition: background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}

/* Make menu links white over video */
body.home #header-outer nav > ul > li > a{
  color: rgba(255,255,255,0.92);
}
body.home #header-outer nav > ul > li > a:hover{
  color: #ffffff;
}

/* Optional: subtle text shadow for readability over video */
body.home #header-outer nav > ul > li > a,
body.home #header-outer .logo a{
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

/* =========================================
   Solid header after scroll
   Salient often adds these: .scrolled, .fixed, .detached, .shrink, etc.
   We target multiple common combinations.
   ========================================= */

body.home #header-outer.scrolled,
body.home #header-outer.fixed,
body.home #header-outer.detached,
body.home #header-outer.shrink,
body.home header#top.scrolled #header-outer,
body.home header#top.detached #header-outer{
  background: rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(15,23,42,0.12) !important;
}

/* Dark text after scroll */
body.home #header-outer.scrolled nav > ul > li > a,
body.home #header-outer.fixed nav > ul > li > a,
body.home #header-outer.detached nav > ul > li > a,
body.home #header-outer.shrink nav > ul > li > a{
  color: rgba(15,23,42,0.88);
  text-shadow: none;
}

/* Hover in solid state */
body.home #header-outer.scrolled nav > ul > li > a:hover,
body.home #header-outer.fixed nav > ul > li > a:hover,
body.home #header-outer.detached nav > ul > li > a:hover,
body.home #header-outer.shrink nav > ul > li > a:hover{
  color: #06B6D4;
}