/*=================================
   Header Menu
   Rodriguez Luxury Cars - current-page state and mobile menu extras
==================================*/

/*------------------- Current page -------------------*/
/* The filled-block active state that used to live here has moved to
   brand.css, which owns the dark-header treatment. It painted a peach
   gradient (rgba(238,172,135,.27)) left over from the light template
   plus a 3px top border, which rendered as a hard gold slab beside the
   logo, and forced the label to near-black on a black bar. */

/* Current item inside a dropdown */
.main-menu ul.sub-menu li.active > a {
  color: var(--theme-color);
}

.main-menu ul.sub-menu li.active > a:before {
  width: 10px;
}

/*------------------- Header top -------------------*/
.header-links ul li a:hover {
  color: var(--theme-color);
}

/* Three items now live here, so let them breathe rather than collide */
@media (min-width: 992px) and (max-width: 1399px) {
  .header-links ul li {
    margin-right: 18px;
  }
}

/*------------------- Fitting the row on a laptop -------------------*/
/* "Fleet & Rates" and "Reserve Now" are wider than the labels this
   template shipped with, which pushed the button onto a second line
   between 1200 and 1400. Tightening the menu keeps it on one row. */
@media (min-width: 1200px) and (max-width: 1399px) {
  .main-menu > ul > li > a {
    padding-left: 13px;
    padding-right: 23px;
    font-size: 15px;
  }
}

/*------------------- Mobile menu -------------------*/
/* The mobile panel is white, so these follow the dark-on-light scheme */
.mobile-menu-cta {
  margin: 28px 20px 10px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

.mobile-menu-cta .vs-btn {
  display: flex;
  width: 100%;
  justify-content: center;
}

.mobile-menu-phone {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 16px;
  padding: 4px 0;
  font-family: var(--title-font);
  font-size: 16px;
  font-weight: 700;
  color: var(--title-color);
}

/* The theme prepends a chevron to every link in this menu; the phone
   number is a button, not a nav item, so it does not get one. */
.mobile-menu-phone:before {
  content: none !important;
}

.mobile-menu-phone i {
  font-size: 13px;
  color: var(--theme-color);
}

.mobile-menu-phone:hover {
  color: var(--theme-color);
}

/* The active page should read the same way on a phone */
.vs-mobile-menu ul li.active > a {
  color: var(--theme-color);
}

/*------------------- Focus visibility -------------------*/
/* Keyboard users need to see where they are in the menu */
.main-menu a:focus-visible,
.vs-mobile-menu a:focus-visible,
.header-links a:focus-visible,
.header-buttons a:focus-visible {
  outline: 2px solid var(--theme-color);
  outline-offset: 3px;
  border-radius: 3px;
}