/* ================================================================
   VAL VERDE REGIONAL MEDICAL CENTER
   Max Mega Menu — Complete CSS Override
   ================================================================
   
   PURPOSE:
   This single stylesheet controls ALL visual styling for the 
   Max Mega Menu navigation. You do NOT need to configure colors, 
   fonts, or spacing in the Mega Menu → Menu Themes editor.
   
   WHERE TO PASTE:
   Appearance → Customize → Additional CSS
   — OR —
   Your child theme's style.css
   
   DO NOT paste this in the Max Mega Menu "Custom Styling" tab. 
   That tab's CSS loads alongside the plugin's generated theme CSS, 
   which can create ordering conflicts. Putting it in the theme's 
   Additional CSS ensures it loads AFTER the plugin CSS and wins 
   the specificity battle.
   
   WHAT TO DO IN MAX MEGA MENU THEME EDITOR:
   Leave everything at defaults. This CSS overrides it all.
   The only settings you still configure in the plugin UI are 
   STRUCTURAL (not visual):
     - Enable mega menu on each top-level item
     - Set column count and drag items into columns
     - Add Custom HTML widgets for the intro panels
     - Set Panel Width to "Full Width" under Mega Panels
   
   COLOR TOKENS — update these to match the actual brand guide:
   --navy:        #003057   (utility bar bg, headings, Contact btn text)
   --blue:        #0072B8   (nav bar bg, column headers, CTAs, link hover)
   --blue-dark:   #005A94   (CTA hover, nav item active)
   --white:       #FFFFFF
   --gray-light:  #F5F7FA   (intro panel bg)
   --gray-text:   #333333   (sub-menu link text)
   --gray-muted:  #555555   (intro panel body text)
   --gray-border: #E8E8E8   (column dividers, header underlines)
   ================================================================ */


/* ============================================
   1. MENU BAR (the blue horizontal bar)
   ============================================ */

/* Bar background and layout */
#mega-menu-wrap-primary {
  background-color: #0072B8 !important;
  clear: both;
}

#mega-menu-wrap-primary #mega-menu-primary {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  background-color: #0072B8 !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Top-level menu items */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  color: #FFFFFF !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 50px !important;
  height: 50px !important;
  padding: 0 18px !important;
  text-decoration: none !important;
  text-transform: none !important;
  background-color: transparent !important;
  border: none !important;
  transition: background-color 0.2s ease;
}

/* Top-level hover */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus {
  background-color: rgba(0, 0, 0, 0.15) !important;
  color: #FFFFFF !important;
}

/* Top-level active / current page */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link {
  background-color: rgba(0, 0, 0, 0.2) !important;
  color: #FFFFFF !important;
}

/* Dropdown indicator arrows — make them white */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:after {
  border-top-color: #FFFFFF !important;
  margin-left: 6px;
}


/* ============================================
   2. CONTACT US BUTTON (in the nav bar)
   ============================================ */

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-contact-btn {
  margin-left: auto !important; /* pushes it to the far right */
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-contact-btn > a.mega-menu-link {
  background-color: #FFFFFF !important;
  color: #003057 !important;
  border-radius: 4px !important;
  padding: 0 24px !important;
  line-height: 36px !important;
  height: 36px !important;
  margin: 7px 0 7px 10px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.3px;
  border: 2px solid #FFFFFF !important;
  transition: all 0.2s ease !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-contact-btn > a.mega-menu-link:hover {
  background-color: transparent !important;
  color: #FFFFFF !important;
}

/* Remove dropdown arrow on Contact Us */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-contact-btn > a.mega-menu-link:after {
  display: none !important;
}


/* ============================================
   3. MEGA MENU PANELS (the dropdown containers)
   ============================================ */

/* Panel container — full viewport width */
#mega-menu-wrap-primary li.mega-menu-megamenu > ul.mega-sub-menu {
  background-color: #FFFFFF !important;
  border: none !important;
  border-top: 3px solid #0072B8 !important;
  border-radius: 0 0 4px 4px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  padding: 30px 40px !important;
  max-width: 100vw !important;
  width: 100% !important;
}

/* Row container inside panels */
#mega-menu-wrap-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row {
  margin: 0 !important;
  padding: 0 !important;
}

/* Column containers */
#mega-menu-wrap-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li {
  padding: 0 20px !important;
}


/* ============================================
   4. MEGA MENU INTRO PANEL (left column widget)
   ============================================ */

.mega-menu-intro-panel {
  background-color: #F5F7FA;
  padding: 30px 25px;
  border-radius: 4px;
  height: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.mega-menu-intro-panel h3 {
  color: #003057;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.mega-menu-intro-panel p {
  color: #555555;
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 20px 0;
}

.mega-menu-cta {
  display: inline-block;
  background-color: #0072B8;
  color: #FFFFFF !important;
  padding: 10px 22px;
  border-radius: 4px;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: background-color 0.2s ease;
  align-self: flex-start;
}

.mega-menu-cta:hover {
  background-color: #005A94;
  color: #FFFFFF !important;
}


/* ============================================
   5. COLUMN HEADERS (second-level items)
   ============================================ 
   These are the "Who We Are", "Patients", 
   "Visitors", etc. headings above each link group. */

#mega-menu-wrap-primary .mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
  color: #0072B8 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  padding: 0 0 8px 0 !important;
  margin-bottom: 8px !important;
  border-bottom: 2px solid #E8E8E8 !important;
  background: transparent !important;
  line-height: 1.4 !important;
  height: auto !important;
}

/* Non-clickable headers (href="#") — disable pointer */
#mega-menu-wrap-primary .mega-sub-menu > li.mega-menu-item > a.mega-menu-link[href="#"] {
  cursor: default !important;
  pointer-events: none;
}

#mega-menu-wrap-primary .mega-sub-menu > li.mega-menu-item > a.mega-menu-link[href="#"]:hover {
  background: transparent !important;
  color: #0072B8 !important;
}


/* ============================================
   6. SUB-ITEMS (third-level links)
   ============================================ 
   The actual clickable links like "Mission & Vision",
   "Find a Doctor", etc. */

#mega-menu-wrap-primary .mega-sub-menu li.mega-menu-item li.mega-menu-item > a.mega-menu-link {
  color: #333333 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 6px 0 !important;
  line-height: 1.5 !important;
  height: auto !important;
  background: transparent !important;
  text-decoration: none !important;
  border: none !important;
  transition: color 0.15s ease;
  display: block !important;
}

#mega-menu-wrap-primary .mega-sub-menu li.mega-menu-item li.mega-menu-item > a.mega-menu-link:hover {
  color: #0072B8 !important;
  background: transparent !important;
}


/* ============================================
   7. COLUMN DIVIDERS
   ============================================ */

/* Vertical line between columns */
#mega-menu-wrap-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li {
  border-right: 1px solid #E8E8E8;
}

/* Remove border from last column */
#mega-menu-wrap-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li:last-child {
  border-right: none !important;
}

/* Remove border from widget columns (intro panels) — 
   the panel's own background handles the visual separation */
#mega-menu-wrap-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-item-type-widget {
  border-right: 1px solid #E8E8E8;
  padding-right: 0 !important;
}


/* ============================================
   8. UTILITY BAR
   ============================================
   Only needed if NOT using Elementor for the 
   utility bar. If you built it with Elementor's 
   Nav Menu widget, style it there instead. */

.utility-login-btn > a {
  border: 1px solid #FFFFFF !important;
  border-radius: 3px !important;
  padding: 5px 16px !important;
  transition: background-color 0.2s ease;
}

.utility-login-btn > a:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
}


/* ============================================
   9. WIDGET RESET
   ============================================
   Max Mega Menu sometimes applies default widget 
   styles that interfere. This neutralizes them. */

#mega-menu-wrap-primary .widget {
  margin: 0 !important;
  padding: 0 !important;
}

#mega-menu-wrap-primary .widget:before,
#mega-menu-wrap-primary .widget:after {
  display: none !important;
}


/* ============================================
   10. FOCUS STATES (accessibility)
   ============================================ */

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus-visible {
  outline: 2px solid #FFFFFF !important;
  outline-offset: -2px;
}

#mega-menu-wrap-primary .mega-sub-menu a.mega-menu-link:focus-visible {
  outline: 2px solid #0072B8 !important;
  outline-offset: 2px;
  border-radius: 2px;
}


/* ============================================
   11. RESPONSIVE / MOBILE
   ============================================ */

@media (max-width: 768px) {

  /* Hide intro panels on mobile — too much vertical space */
  .mega-menu-intro-panel {
    display: none !important;
  }

  /* Reset the menu bar for mobile */
  #mega-menu-wrap-primary #mega-menu-primary {
    flex-direction: column !important;
  }

  /* Full-width mobile items */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    line-height: 44px !important;
    height: 44px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  /* Contact Us button — full width on mobile */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-contact-btn {
    margin-left: 0 !important;
    padding: 10px 16px !important;
  }

  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-contact-btn > a.mega-menu-link {
    display: block !important;
    text-align: center !important;
    margin: 0 !important;
    line-height: 44px !important;
    height: 44px !important;
  }

  /* Stack mega panel columns vertically */
  #mega-menu-wrap-primary li.mega-menu-megamenu > ul.mega-sub-menu {
    padding: 15px !important;
    box-shadow: none !important;
    border-top: none !important;
  }

  /* Remove column dividers on mobile */
  #mega-menu-wrap-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li {
    border-right: none !important;
    padding: 10px 0 !important;
  }

  /* Column headers get more top space on mobile for separation */
  #mega-menu-wrap-primary .mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    margin-top: 10px !important;
  }
}

/* Tablet — utility bar may need adjustment */
@media (max-width: 1024px) and (min-width: 769px) {

  /* Tighten menu item padding on tablets */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    padding: 0 12px !important;
    font-size: 14px !important;
  }

  /* Reduce mega panel padding */
  #mega-menu-wrap-primary li.mega-menu-megamenu > ul.mega-sub-menu {
    padding: 20px 25px !important;
  }
}