/* ==========================================================================
   First Call Auto Care - grouped Vehicles dropdown

   The Vehicles menu listed every make in one alphabetical run (a 4-up CSS
   column flow), so Acura sat next to Audi sat next to BMW with no signal
   about what kind of roster it was. Grouping it Domestic / Asian / European
   lets somebody find their own car by category instead of scanning 38 names.

   Two menus exist in the markup. `.fch-*` is the custom header that actually
   renders. The Duda `unifiednav` is inert, hidden markup left over from the
   export, but it is still crawlable, so the builder keeps it in sync and the
   second block here styles it in case it is ever shown again.

   Both blocks inherit the existing dropdown chrome from site-header.css
   (panel, shadow, link padding, hover colour). Only the grouping is new.
   ========================================================================== */

/* ---- the live header ---------------------------------------------------- */

.fch-drop--wide .fch-makes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 16px;
}

.fch-makes .fch-mgroup { min-width: 0; }

.fch-makes .fch-mhead {
  margin: 4px 0 6px;
  padding: 0 12px 7px;
  border-bottom: 1px solid var(--line);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #9aa0a6;
}

.fch-makes .fch-mgroup ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Tighter than the generic .fch-drop a, because three columns of twelve is a
   tall panel and 9px rows push the bottom of it past the fold. */
.fch-drop--wide .fch-makes a {
  padding-top: 6px;
  padding-bottom: 6px;
}

.fch-drop--wide .fch-mall {
  display: block;
  margin-top: 8px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  font-weight: 700;
  color: var(--ink);
}

.fch-drop--wide .fch-mall::after {
  content: " \203A";
  font-weight: 400;
}

/* The drawer on small screens stacks the panel, where three columns would be
   unreadable. Keep the group labels: on a phone they are most of the value. */
@media (max-width: 900px) {
  .fch-drop--wide .fch-makes { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fch-makes .fch-mgroup { margin-bottom: 10px; }
}

/* ---- the inert Duda menu, kept consistent ------------------------------- */
/* Duda's own nav rules are scoped like `.dmRoot:not(...) #dm .main-navigation
   ...`, which carries an ID. A bare class selector loses to that however many
   classes it stacks, so these are prefixed with #dm to sit in the same league.
   Same specificity trap that put a black line through the service pages. */

#dm .fcnav-makes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 30px;
  padding: 20px 24px 16px;
}

#dm .fcnav-makes > .fcnav-col { flex: 1 1 150px; min-width: 0; }

#dm .fcnav-makes .fcnav-head {
  display: block;
  margin: 0 0 7px;
  padding: 0 0 6px;
  border-bottom: 1px solid rgba(128, 132, 138, 0.28);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #9aa0a6;
  white-space: nowrap;
}

#dm .fcnav-makes .fcnav-list { margin: 0; padding: 0; list-style: none; }
#dm .fcnav-makes .fcnav-list > li { margin: 0; padding: 0; list-style: none; }
#dm .fcnav-makes .fcnav-list .unifiednav__item { padding-top: 4px; padding-bottom: 4px; }
#dm .fcnav-makes .fcnav-list .icon-angle-right { display: none; }

#dm .fcnav-makes > .fcnav-all {
  flex: 1 1 100%;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(128, 132, 138, 0.28);
  list-style: none;
}