/* ================================================================
   Aeromarine Category Manager — Frontend Dropdown Menu
   Designed to work with any WooCommerce theme
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');

.acm-nav {
  --acm-navy:   #0A2540;
  --acm-ocean:  #00B4D8;
  --acm-teal:   #0096B7;
  --acm-foam:   #E8F8FC;
  --acm-bg:     #FFFFFF;
  --acm-text:   #1A2E44;
  --acm-sub-bg: #FFFFFF;
  --acm-grey:   #8899AA;
  --acm-border: rgba(10,37,64,.08);
  --acm-shadow: 0 8px 32px rgba(10,37,64,.14);
  --acm-radius: 10px;
  --acm-font:   'DM Sans', sans-serif;
  font-family: var(--acm-font);
}

/* ── Root list ───────────────────────────────────────── */
.acm-nav__list {
  list-style: none;
  margin: 0; padding: 0;
}

.acm-nav__list--root {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* ── Every item ──────────────────────────────────────── */
.acm-nav__item {
  position: relative;
}

/* ── Link row ────────────────────────────────────────── */
.acm-nav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 8px;
  text-decoration: none !important;
  color: var(--acm-text) !important;
  font-size: 14px;
  font-weight: 500;
  transition: background .15s, color .15s;
  position: relative;
}

.acm-nav__link:hover {
  background: var(--acm-foam);
  color: var(--acm-navy) !important;
}

/* active / current page */
.acm-nav__item.is-active > .acm-nav__link {
  background: var(--acm-foam);
  color: var(--acm-ocean) !important;
  font-weight: 600;
}
.acm-nav__item.is-active > .acm-nav__link::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--acm-ocean);
  border-radius: 0 3px 3px 0;
}

/* depth 0 */
.acm-nav__item[data-depth="0"] > .acm-nav__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--acm-navy) !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--acm-border);
  border-radius: 0;
  margin-bottom: 2px;
}
.acm-nav__item[data-depth="0"] > .acm-nav__link:hover {
  background: var(--acm-foam);
  border-radius: 8px;
  border-bottom-color: transparent;
}

/* ── Count badge ─────────────────────────────────────── */
.acm-nav__count {
  font-size: 11px;
  background: var(--acm-foam);
  color: var(--acm-grey);
  border-radius: 20px;
  padding: 1px 7px;
  margin-left: auto;
  flex-shrink: 0;
  font-weight: 400;
  transition: background .15s;
}
.acm-nav__link:hover .acm-nav__count {
  background: rgba(0,180,216,.15);
  color: var(--acm-teal);
}

/* ── Toggle button (wraps the arrow, separado del link) ── */
.acm-nav__toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  padding: 0;
  color: var(--acm-grey);
  transition: background .15s, color .15s;
  /* Evitar que el área del botón "tire" del link */
  position: relative;
  z-index: 1;
}
.acm-nav__toggle-btn:hover {
  background: rgba(0,180,216,.12);
  color: var(--acm-ocean);
}
.acm-nav__item.is-open > .acm-nav__link .acm-nav__toggle-btn {
  color: var(--acm-ocean);
}

/* ── Arrow (ahora vive dentro del toggle-btn) ─────────── */
.acm-nav__arrow {
  display: block;
  flex-shrink: 0;
  pointer-events: none;
  transition: transform .22s ease;
}
.acm-nav__item.is-open > .acm-nav__link .acm-nav__arrow {
  transform: rotate(180deg);
}

/* ── Submenu ─────────────────────────────────────────── */
.acm-nav__list--sub {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .28s ease, opacity .22s ease;
  padding-left: 12px;
  border-left: 2px solid var(--acm-foam);
  margin-left: 14px;
  margin-bottom: 4px;
}

/* Open state — toggled by JS */
.acm-nav__item.is-open > .acm-nav__list--sub {
  max-height: 1200px;
  opacity: 1;
}

.acm-nav__item.is-open > .acm-nav__link .acm-nav__arrow {
  transform: rotate(180deg);
  color: var(--acm-ocean);
}

/* ── Nested depth styles ─────────────────────────────── */
.acm-nav__item[data-depth="1"] > .acm-nav__link {
  font-size: 13.5px;
  padding: 8px 12px;
}
.acm-nav__item[data-depth="2"] > .acm-nav__link {
  font-size: 13px;
  padding: 7px 10px;
  color: var(--acm-grey) !important;
}
.acm-nav__item[data-depth="2"] > .acm-nav__link:hover {
  color: var(--acm-navy) !important;
}

/* ── Widget title override ───────────────────────────── */
.widget .acm-nav__list--root {
  margin-top: -6px;
}

/* ── Responsive: horizontal on header/navbar ─────────── */
.acm-nav.acm-nav--horizontal .acm-nav__list--root {
  flex-direction: row;
  gap: 2px;
}

.acm-nav.acm-nav--horizontal .acm-nav__item[data-depth="0"] > .acm-nav__link {
  border-bottom: none;
  border-radius: 8px;
  text-transform: none;
  font-size: 14px;
  letter-spacing: 0;
}

.acm-nav.acm-nav--horizontal .acm-nav__list--sub {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  background: var(--acm-bg);
  border-radius: var(--acm-radius);
  box-shadow: var(--acm-shadow);
  border: 1px solid var(--acm-border);
  padding: 8px;
  min-width: 200px;
  max-height: 0;
  border-left: none;
  margin: 4px 0 0;
  padding-left: 8px;
}

.acm-nav.acm-nav--horizontal .acm-nav__item.is-open > .acm-nav__list--sub {
  max-height: 600px;
}

/* Deeper dropdowns offset to the right */
.acm-nav.acm-nav--horizontal .acm-nav__list--sub .acm-nav__list--sub {
  left: 100%;
  top: 0;
  margin: 0 0 0 4px;
}

/* ── Dark theme support ──────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .acm-nav {
    --acm-bg:    #0A2540;
    --acm-text:  #E8F0F8;
    --acm-navy:  #E8F0F8;
    --acm-foam:  rgba(0,180,216,.1);
    --acm-border: rgba(255,255,255,.08);
    --acm-grey:  #5A7A9A;
  }
}