/*
 * JusticeXpress Florida — Top Navigation CSS
 * Isolated from: https://justicexpressflorida.com/
 * Covers: header wrapper, logo, nav menu, dropdown, orange CTA button
 * Source: Elementor Pro nav-menu widget (elementor-nav-menu)
 *
 * HOW TO USE
 * ----------
 * 1. Include this file (or paste into your stylesheet) AFTER Elementor's
 *    own frontend.css so these rules take precedence where needed.
 * 2. Do NOT change any class or id names — they match the live site exactly.
 * 3. Breakpoints mirror the site's Elementor "additional_custom_breakpoints"
 *    setting. The hamburger menu kicks in at ≤ 1024 px (tablet breakpoint).
 */


/* ============================================================
   1. OUTER HEADER / SECTION WRAPPER
   ============================================================ */

/* Elementor header template section — sticky bar */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Inner container — constrains max width and centers content */
.elementor-location-header .elementor-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  min-height: 70px;
}


/* ============================================================
   2. SITE LOGO / BRANDING
   ============================================================ */

/* Elementor site-logo widget wrapper */
.elementor-widget-theme-site-logo .elementor-widget-container,
.elementor-widget-site-logo  .elementor-widget-container {
  display: flex;
  align-items: center;
}

/* Logo image */
.elementor-widget-theme-site-logo img,
.elementor-widget-site-logo img {
  max-height: 50px;
  width: auto;
  display: block;
}


/* ============================================================
   3. NAV MENU WIDGET WRAPPER
   ============================================================ */

/* Top-level Elementor widget wrapper for the nav-menu */
.elementor-widget-nav-menu {
  display: flex;
  align-items: center;
}

/* The <nav> element Elementor renders */
.elementor-nav-menu--main {
  display: flex;
  align-items: center;
}

/* Horizontal menu container */
.elementor-nav-menu--main .elementor-nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}


/* ============================================================
   4. TOP-LEVEL MENU ITEMS
   ============================================================ */

.elementor-nav-menu--main .elementor-nav-menu > li {
  position: relative;
  margin: 0;
  padding: 0;
}

/* All top-level links */
.elementor-nav-menu--main .elementor-nav-menu > li > a {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a2e;         /* dark navy — matches site */
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
  letter-spacing: 0.02em;
}

/* Hover / focus state */
.elementor-nav-menu--main .elementor-nav-menu > li > a:hover,
.elementor-nav-menu--main .elementor-nav-menu > li > a:focus,
.elementor-nav-menu--main .elementor-nav-menu > li.current-menu-item > a,
.elementor-nav-menu--main .elementor-nav-menu > li.current-menu-ancestor > a {
  color: #c0392b;          /* Elementor accent / site red */
}

/* Dropdown indicator arrow added via Elementor pointer setting */
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  margin-left: 5px;
  border: 4px solid transparent;
  border-top-color: currentColor;
  vertical-align: middle;
  position: relative;
  top: 2px;
  transition: transform 0.2s ease;
}

.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:hover > a::after {
  transform: rotate(180deg);
}


/* ============================================================
   5. ORANGE "GET STARTED →" CTA BUTTON
   ============================================================ */

/*
 * Elementor lets you mark a single menu item as a "highlighted" button
 * via the Nav Menu widget's "Pointer" + per-item "Custom Attributes".
 * The class applied is typically .elementor-item-anchor or a custom
 * class set in WP Appearance > Menus (CSS Classes field).
 *
 * On this site the last item ("Get Started →") has the class:
 *   .menu-item-has-button  OR  a custom highlight via Elementor's
 *   "Button" pointer style which wraps the <a> in a styled box.
 *
 * The selector below targets the last <li> in the main nav as a
 * safe fallback AND the explicit Elementor highlight class.
 */

/* Elementor "highlighted" nav item class */
.elementor-nav-menu--main .elementor-nav-menu > li.elementor-item-anchor > a,
.elementor-nav-menu--main .elementor-nav-menu > li:last-child > a,
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-button > a {
  background-color: #e67e22;    /* orange — matches the live button */
  color: #ffffff !important;
  border-radius: 4px;
  padding: 8px 18px;
  font-weight: 700;
  transition: background-color 0.2s ease, transform 0.15s ease;
  margin-left: 8px;
}

.elementor-nav-menu--main .elementor-nav-menu > li.elementor-item-anchor > a:hover,
.elementor-nav-menu--main .elementor-nav-menu > li:last-child > a:hover,
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-button > a:hover {
  background-color: #d35400;    /* darker orange on hover */
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Remove the dropdown arrow from the CTA button */
.elementor-nav-menu--main .elementor-nav-menu > li:last-child > a::after {
  display: none;
}


/* ============================================================
   6. DROPDOWN / SUBMENU
   ============================================================ */

/* Elementor renders submenus as .elementor-nav-menu--dropdown */
.elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu,
.elementor-nav-menu--dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  border-top: 3px solid #e67e22;   /* orange top accent */
  border-radius: 0 0 4px 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  list-style: none;
  margin: 0;
  padding: 6px 0;
  z-index: 10000;
  animation: jxf-dropdown-in 0.15s ease;
}

@keyframes jxf-dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reveal on hover */
.elementor-nav-menu--main .elementor-nav-menu > li:hover > .sub-menu,
.elementor-nav-menu--main .elementor-nav-menu > li:focus-within > .sub-menu,
.elementor-nav-menu--main .elementor-nav-menu > li.elementor-item--active > .sub-menu {
  display: block;
}

/* Dropdown items */
.elementor-nav-menu--main .sub-menu li {
  margin: 0;
  padding: 0;
}

.elementor-nav-menu--main .sub-menu li a {
  display: block;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a2e;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.elementor-nav-menu--main .sub-menu li a:hover,
.elementor-nav-menu--main .sub-menu li a:focus {
  background-color: #fff5ee;
  color: #e67e22;
}


/* ============================================================
   7. HAMBURGER / TOGGLE (MOBILE)
   Elementor renders a <div class="elementor-menu-toggle"> button
   ============================================================ */

.elementor-menu-toggle {
  display: none;              /* hidden on desktop */
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
  color: #1a1a2e;
}

.elementor-menu-toggle i,
.elementor-menu-toggle svg {
  font-size: 22px;
  width: 22px;
  height: 22px;
}


/* ============================================================
   8. RESPONSIVE — TABLET / MOBILE  (≤ 1024 px)
   ============================================================ */

@media (max-width: 1024px) {

  /* Show hamburger, hide horizontal menu */
  .elementor-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Collapse the nav; Elementor toggles .elementor-menu-toggle--open */
  .elementor-nav-menu--main .elementor-nav-menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 70px;        /* matches header height */
    left: 0;
    right: 0;
    background-color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    padding: 10px 0 16px;
    z-index: 9998;
  }

  /* Elementor adds this class to the nav when the toggle is open */
  .elementor-nav-menu--main.elementor-nav-menu__container--open .elementor-nav-menu,
  .elementor-nav-menu--main .elementor-nav-menu.elementor-nav-menu--open {
    display: flex;
  }

  /* Mobile top-level links */
  .elementor-nav-menu--main .elementor-nav-menu > li > a {
    padding: 12px 20px;
    font-size: 15px;
    border-bottom: 1px solid #f0f0f0;
  }

  /* Mobile submenu — shown inline when parent is toggled */
  .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu {
    display: none;
    position: static;
    border: none;
    border-top: none;
    box-shadow: none;
    border-radius: 0;
    background-color: #fafafa;
    padding: 0;
    animation: none;
  }

  .elementor-nav-menu--main .elementor-nav-menu > li.elementor-item--active > .sub-menu {
    display: block;
  }

  .elementor-nav-menu--main .sub-menu li a {
    padding: 10px 32px;
  }

  /* Mobile CTA button — full-width treatment */
  .elementor-nav-menu--main .elementor-nav-menu > li:last-child > a,
  .elementor-nav-menu--main .elementor-nav-menu > li.elementor-item-anchor > a,
  .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-button > a {
    margin: 12px 16px 4px;
    border-radius: 4px;
    text-align: center;
    justify-content: center;
  }

}

@media (max-width: 767px) {

  .elementor-nav-menu--main .elementor-nav-menu > li > a {
    font-size: 14px;
  }

}