/* ===========================================================================
   Eirene · Efectos de cabecera: menú, submenús y botón CTA (tema Blocksy)
   Selectores verificados en el DOM real (Fase 2.6):
     header .ct-header · menú desktop #menu-principal · enlaces .ct-menu-link
     padre con hijos .menu-item-has-children / .ct-sub-menu-parent
     desplegable .sub-menu · botón .ct-header-cta · móvil .mobile-menu
   =========================================================================== */

/* NOTA: el "sin mayúsculas" del menú NO se fuerza aquí; se controla desde la
   opción nativa del tema (Cabecera → Menú 1 → Font → Text Transform = None),
   para que el tamaño, peso y transformación sigan siendo editables por el cliente. */

/* --- Ítem activo / página actual (cualquier nivel) → salvia oscuro --- */
.ct-header .menu-item.current-menu-item > .ct-menu-link,
.ct-header .menu-item.current-menu-ancestor > .ct-menu-link,
.ct-header .menu-item.current_page_item > .ct-menu-link,
.ct-header .menu-item.current_page_ancestor > .ct-menu-link,
.ct-header .menu-item.current-menu-item > .ct-sub-menu-parent > .ct-menu-link,
.ct-header .menu-item.current-menu-ancestor > .ct-sub-menu-parent > .ct-menu-link {
  color: var(--sage-dk);
}

/* --- Marcador 2px bajo el ítem activo de nivel superior (desktop) --- */
#menu-principal > .menu-item > .ct-menu-link,
#menu-principal > .menu-item > .ct-sub-menu-parent > .ct-menu-link { position: relative; }
#menu-principal > .menu-item.current-menu-item > .ct-menu-link::after,
#menu-principal > .menu-item.current-menu-ancestor > .ct-menu-link::after,
#menu-principal > .menu-item.current-menu-item > .ct-sub-menu-parent > .ct-menu-link::after,
#menu-principal > .menu-item.current-menu-ancestor > .ct-sub-menu-parent > .ct-menu-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--sage);
  border-radius: 2px;
}

/* --- Desplegable (submenú) desktop --- */
#menu-principal .sub-menu {
  background: var(--cream2);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(58, 53, 48, .10);
  border-radius: 8px;
  overflow: hidden;
  padding: 6px;
}

/* --- Ítems de submenú: estado base, hover y activo --- */
#menu-principal .sub-menu .menu-item > .ct-menu-link,
#menu-principal .sub-menu .menu-item > .ct-sub-menu-parent > .ct-menu-link {
  color: var(--text);
  border-radius: 6px;
  border-right: 3px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#menu-principal .sub-menu .menu-item > .ct-menu-link:hover,
#menu-principal .sub-menu .menu-item.current-menu-item > .ct-menu-link,
#menu-principal .sub-menu .menu-item.current-menu-ancestor > .ct-menu-link {
  background: var(--sage-lt);
  border-right: 3px solid var(--sage);
  color: var(--sage-dk);
}

/* --- Botón CTA "Pedir cita" --- */
.ct-header a.ct-header-cta {
  background-color: var(--sage);
  color: var(--white);
  border-radius: 40px;
}
.ct-header a.ct-header-cta:hover,
.ct-header a.ct-header-cta:focus {
  background-color: var(--sage-dk);
  color: var(--white);
}

/* --- Coherencia en el menú offcanvas móvil (acordeón) --- */
.mobile-menu .sub-menu .menu-item > .ct-menu-link:hover,
.mobile-menu .sub-menu .menu-item.current-menu-item > .ct-menu-link {
  background: var(--sage-lt);
  color: var(--sage-dk);
}